:root {
--ground: #08060A;
--ink: #F2E8DF;
--muted: #8E7F76;
--faint: #3E2F28;
--line: rgba(255, 138, 61, 0.18);
--tint: #FF8A3D;
--tint-soft: rgba(255, 138, 61, 0.10);
--mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
color-scheme: dark;
}
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
margin: 0;
background: var(--ground);
color: var(--ink);
font-family: var(--sans);
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
canvas.layer { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#glow { filter: blur(11px) saturate(1.3); opacity: 0.85; mix-blend-mode: screen; transform: scale(1.01); }
#glow-wide { filter: blur(34px) saturate(1.45); opacity: 0.55; mix-blend-mode: screen; transform: scale(1.03); }
#field { opacity: 0.92; }
.veil {
position: fixed; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 38% 34% at 50% 50%, rgba(8, 6, 10, 0.74), rgba(8, 6, 10, 0) 100%),
radial-gradient(ellipse 120% 90% at 50% 50%, rgba(8, 6, 10, 0) 52%, rgba(8, 6, 10, 0.78) 100%),
linear-gradient(to top, rgba(255, 110, 30, 0.10), rgba(8, 6, 10, 0) 45%);
}
.app {
position: relative; z-index: 1;
height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
padding-inline: clamp(16px, 4vw, 40px);
padding-block: clamp(16px, 3vh, 28px);
box-sizing: border-box;
}
.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mark { font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; color: var(--ink); }
.mark span { color: var(--muted); }
.meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip {
font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
color: var(--muted); padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
background: rgba(8, 6, 10, 0.5);
}
.chip.mode { color: var(--tint); border-color: color-mix(in srgb, var(--tint) 35%, transparent); }
.stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3.5vh, 30px); text-align: center; }
.status {
font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--muted); margin: 0; display: flex; align-items: center; gap: 10px;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); transition: background .4s, box-shadow .4s; }
[data-state="playing"] .dot { background: var(--tint); box-shadow: 0 0 12px var(--tint); animation: breathe 3.75s ease-in-out infinite; }
[data-state="paused"] .dot { background: var(--muted); }
@keyframes breathe { 50% { opacity: .35; } }
.timer {
font-family: var(--mono); font-weight: 300;
font-size: clamp(64px, 15vw, 168px); line-height: 1;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
margin: 0;
color: var(--ink);
text-shadow: 0 0 36px color-mix(in srgb, var(--tint) 30%, transparent);
transition: opacity .5s, color .5s;
}
.timer .hh { color: var(--muted); }
[data-state="paused"] .timer { opacity: .55; }
[data-state="idle"] .timer { color: color-mix(in srgb, var(--ink) 70%, var(--ground)); }
.controls { display: flex; align-items: center; gap: 14px; }
button {
font: inherit; color: inherit; cursor: pointer; border: 0; background: none;
-webkit-tap-highlight-color: transparent;
}
button:focus-visible, input:focus-visible { outline: 1px solid var(--tint); outline-offset: 4px; }
.primary {
display: inline-flex; align-items: center; gap: 12px;
height: 52px; padding: 0 26px 0 20px; border-radius: 999px;
font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ground);
background: var(--tint);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint) 60%, white), 0 0 40px -6px color-mix(in srgb, var(--tint) 70%, transparent);
transition: transform .2s ease, box-shadow .3s ease, background .3s;
}
.primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--tint), 0 0 56px -4px color-mix(in srgb, var(--tint) 85%, transparent); }
.primary:active { transform: translateY(0) scale(.98); }
[data-state="playing"] .primary {
color: var(--ink); background: rgba(8, 6, 10, 0.55);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint) 45%, transparent), 0 0 32px -10px color-mix(in srgb, var(--tint) 60%, transparent);
}
.primary svg { width: 14px; height: 14px; fill: currentColor; }
.ghost {
height: 52px; padding: 0 18px; border-radius: 999px;
font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--muted); border: 1px solid var(--line); background: rgba(8, 6, 10, 0.45);
transition: color .2s, border-color .2s;
}
.ghost:hover { color: var(--ink); border-color: color-mix(in srgb, var(--tint) 40%, transparent); }
.volume { display: flex; align-items: center; gap: 12px; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.volume output { width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
input[type="range"] {
-webkit-appearance: none; appearance: none; width: min(200px, 44vw); height: 18px; background: transparent; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--tint) var(--fill, 70%), var(--faint) var(--fill, 70%)); border-radius: 2px; }
input[type="range"]::-moz-range-track { height: 2px; background: var(--faint); border-radius: 2px; }
input[type="range"]::-moz-range-progress { height: 2px; background: var(--tint); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 10px var(--tint); }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 0 10px var(--tint); }
.summary { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .04em; min-height: 1.2em; margin: 0; }
.summary b { color: var(--ink); font-weight: 400; }
.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .06em; }
kbd { font-family: var(--mono); font-size: 10px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); }
@media (max-width: 480px) {
.controls { flex-direction: column; gap: 10px; }
.foot .hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
[data-state="playing"] .dot { animation: none; }
.primary, .timer { transition: none; }
}
/* ---- v2: tools, panels, goals, modals, zen ---- */
.tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tool {
display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px;
border-radius: 999px; border: 1px solid var(--line); background: rgba(8, 6, 10, 0.5);
font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
transition: color .2s, border-color .2s, background .2s;
}
.tool:hover, .tool[aria-expanded="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--tint) 45%, transparent); }
.tool[aria-expanded="true"] { background: var(--tint-soft); }
.tool.icon { width: 30px; padding: 0; justify-content: center; }
.tool svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.tool .q { font-size: 14px; line-height: 1; }
.panel {
position: fixed; z-index: 5;
top: calc(env(safe-area-inset-top, 0px) + 64px);
right: clamp(16px, 4vw, 40px);
width: min(340px, calc(100vw - 32px)); box-sizing: border-box;
max-height: calc(100vh - 120px); overflow: auto;
padding: 18px; border-radius: 14px;
background: rgba(14, 10, 12, 0.88);
border: 1px solid var(--line);
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.panel-title { margin: 0 0 14px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.panel-note { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.mix { display: grid; gap: 12px; }
.mix-row { display: grid; grid-template-columns: 1fr auto 3ch; align-items: center; gap: 12px; font-size: 13px; color: var(--ink); }
.mix-row input[type="range"] { width: 150px; }
.mix-row output { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.mix-row.first { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.preset {
display: grid; gap: 6px; text-align: left; padding: 8px; border-radius: 10px;
border: 1px solid var(--line); background: rgba(8, 6, 10, 0.6);
transition: border-color .2s, background .2s;
}
.preset:hover { border-color: color-mix(in srgb, var(--tint) 35%, transparent); }
.preset[aria-checked="true"] { border-color: var(--tint); background: var(--tint-soft); }
.preset pre {
margin: 0; font-family: var(--mono); font-size: 7px; line-height: 8px; color: var(--tint);
overflow: hidden; height: 40px; opacity: .85; text-shadow: 0 0 6px color-mix(in srgb, var(--tint) 60%, transparent);
}
.preset b { font-weight: 500; font-size: 13px; color: var(--ink); }
.preset small { font-size: 11px; color: var(--muted); }
.keys { margin: 0; display: grid; gap: 10px; }
.keys div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: baseline; }
.keys dt { margin: 0; }
.keys dd { margin: 0; font-size: 13px; color: var(--ink); line-height: 1.4; }
.goal-progress { display: flex; align-items: center; gap: 12px; margin-top: -8px; font-family: var(--mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.goal-progress .track { width: min(220px, 40vw); height: 2px; background: var(--faint); border-radius: 2px; overflow: hidden; }
.goal-progress i { display: block; height: 100%; width: 0; background: var(--tint); box-shadow: 0 0 8px var(--tint); transition: width 1s linear; }
.goals { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(8, 6, 10, 0.5); }
.goals-label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 0 8px 0 10px; }
.goals button {
height: 26px; min-width: 44px; padding: 0 10px; border-radius: 999px;
font-family: var(--mono); font-size: 12px; color: var(--muted); transition: color .2s, background .2s;
}
.goals button:hover { color: var(--ink); }
.goals button[aria-checked="true"] { color: var(--ground); background: var(--tint); }
.link { font-family: var(--mono); font-size: inherit; color: var(--tint); padding: 0; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--tint) 40%, transparent); text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--tint); }
.summary { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.toast {
position: fixed; z-index: 8; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); transform: translateX(-50%);
max-width: calc(100vw - 32px); box-sizing: border-box;
padding: 10px 16px; border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--ink); text-align: center;
background: rgba(14, 10, 12, 0.92); border: 1px solid color-mix(in srgb, var(--tint) 35%, transparent);
box-shadow: 0 0 40px -12px color-mix(in srgb, var(--tint) 50%, transparent);
animation: rise .35s ease both;
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }
.modal {
position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px;
background: rgba(4, 5, 7, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.card {
width: min(420px, 100%); box-sizing: border-box; padding: 24px; border-radius: 16px;
background: rgba(14, 10, 12, 0.94); border: 1px solid var(--line);
box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 1), 0 0 60px -30px color-mix(in srgb, var(--tint) 60%, transparent);
animation: rise-card .35s ease both;
}
.card.wide { width: min(760px, 100%); }
@keyframes rise-card { from { opacity: 0; transform: translateY(8px); } }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.card-head .eyebrow { margin: 0; }
.card-head-end { display: flex; align-items: center; gap: 14px; }
.card-head-end .link.lang { font-size: 13px; }
.eyebrow { margin: 0 0 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tint); }
.card h2 { margin: 0 0 8px; font-family: var(--mono); font-weight: 300; font-size: 28px; letter-spacing: -0.02em; text-wrap: balance; }
.card-copy { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.card-copy.tiny { font-size: 11px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.card img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.primary.small { height: 42px; padding: 0 18px; font-size: 12px; }
.card .ghost { height: 42px; }
/* Zen: only timer + status + background remain while focusing */
.chrome { transition: opacity .8s ease; }
.app.zen .chrome, .app.zen .controls, .app.zen .goal-progress { opacity: 0; pointer-events: none; }
.app.zen { cursor: none; }
.controls { transition: opacity .8s ease; }
[data-state="break"] .timer { color: var(--tint); opacity: .85; }
.break-paused .timer { opacity: .45; }
[data-state="break"] .dot { background: var(--tint); }
@media (max-width: 720px) {
.tool:not(.icon) span { display: none; }
.tool:not(.icon) { width: 30px; padding: 0; justify-content: center; }
.chip .chip-k { display: none; }
.presets { grid-template-columns: 1fr; }
}
.app .card .primary { color: var(--ground); background: var(--tint); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint) 60%, white), 0 0 40px -6px color-mix(in srgb, var(--tint) 70%, transparent); }
button.chip.mode { cursor: pointer; }
button.chip.mode:hover, button.chip.mode[aria-expanded="true"] { color: var(--ink); border-color: var(--tint); }
.modes { display: grid; gap: 8px; }
.mode-opt {
display: grid; gap: 3px; text-align: left; padding: 10px 12px; border-radius: 10px;
border: 1px solid var(--line); background: rgba(8, 6, 10, 0.6);
transition: border-color .2s, background .2s;
}
.mode-opt:hover { border-color: color-mix(in srgb, var(--tint) 35%, transparent); }
.mode-opt[aria-checked="true"] { border-color: var(--tint); background: var(--tint-soft); }
.mode-opt b { font-weight: 500; font-size: 14px; color: var(--ink); }
.mode-opt small { font-size: 11px; line-height: 1.4; color: var(--muted); }
.why { margin-top: 14px; display: grid; gap: 8px; }
.why p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink); }
.why ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.why li { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .02em; padding-left: 14px; position: relative; }
.why li::before { content: "·"; position: absolute; left: 4px; color: var(--tint); }
.mix-row .src {
font-family: var(--mono); font-size: 9px; font-style: normal; letter-spacing: .1em; text-transform: uppercase;
margin-left: 8px; padding: 2px 5px; border-radius: 4px; color: var(--muted); border: 1px solid var(--line);
}
.mix-row .src:empty { display: none; }
.mix-row .src[data-state="file"] { color: var(--tint); border-color: color-mix(in srgb, var(--tint) 45%, transparent); }
.seg { display: flex; gap: 4px; padding: 4px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(8, 6, 10, 0.5); }
.seg button {
flex: 1; height: 28px; border-radius: 999px; font-family: var(--mono); font-size: 11px;
letter-spacing: .06em; color: var(--muted); transition: color .2s, background .2s;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-checked="true"] { color: var(--ground); background: var(--tint); }
.periods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 12px; }
.periods button {
display: grid; gap: 2px; padding: 7px 4px; border-radius: 8px; border: 1px solid var(--line);
background: rgba(8, 6, 10, 0.5); font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
color: var(--muted); text-transform: uppercase; transition: border-color .2s, color .2s, background .2s;
}
.periods button:hover { color: var(--ink); }
.periods button[aria-checked="true"] { color: var(--ink); border-color: var(--tint); background: var(--tint-soft); }
.periods button em { font-style: normal; font-size: 8px; letter-spacing: .1em; color: var(--tint); min-height: 9px; }
.periods button b { font-weight: 400; font-size: 9px; color: var(--muted); letter-spacing: .02em; text-transform: none; }
button.chip.period { cursor: pointer; }
button.chip.period:hover, button.chip.period[aria-expanded="true"] { color: var(--ink); border-color: var(--tint); }
button.chip.pack { cursor: pointer; }
button.chip.pack:hover, button.chip.pack[aria-expanded="true"] { color: var(--ink); border-color: var(--tint); }
/* An ember arrow instead of the system one: the same pointer everyone knows,
in the colours of the page. Drawn as an SVG so it stays crisp on any screen. */
:root {
--arrow: url('data:image/svg+xml;utf8,') 3 2, auto;
--arrow-hot: url('data:image/svg+xml;utf8,') 3 2, pointer;
}
@media (hover: hover) and (pointer: fine) {
body { cursor: var(--arrow); }
button, label, a, input[type="range"], .preset, .mode-opt { cursor: var(--arrow-hot); }
}
/* ── what Pro adds ─────────────────────────────────────────────────────
A locked option stays visible and clickable: you can see what you are
not getting, and one click explains it. Hiding them would be tidier and
would sell nothing. */
.pro {
font-family: var(--mono); font-style: normal; font-size: 9px; letter-spacing: .14em;
text-transform: uppercase; color: var(--tint);
border: 1px solid color-mix(in srgb, var(--tint) 45%, transparent);
border-radius: 4px; padding: 1px 4px; margin-left: 6px; vertical-align: 1px;
}
.mode-opt.locked b, .mix-row.locked > span { color: var(--muted); }
.mode-opt.locked { opacity: .78; }
.mode-opt.locked:hover { opacity: 1; }
.mix-row.locked input[type="range"] { opacity: .45; }
.foot-right { display: flex; align-items: center; gap: 14px; }
.plan {
font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
color: var(--tint); background: var(--tint-soft);
border: 1px solid color-mix(in srgb, var(--tint) 35%, transparent);
border-radius: 999px; padding: 3px 9px; transition: background .2s, border-color .2s;
}
.plan:hover { background: color-mix(in srgb, var(--tint) 22%, transparent); border-color: var(--tint); }
.plan[data-plan="pro"] { color: var(--ink); }
.lang { letter-spacing: .06em; }
/* ── your focus ───────────────────────────────────────────────────────── */
.panel.wide { width: min(420px, calc(100vw - 32px)); }
.stat-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin-bottom: 14px; }
.tile {
padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
background: rgba(8, 6, 10, .6); display: grid; gap: 2px;
}
.tile b { font-family: var(--mono); font-weight: 300; font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stat-week { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; height: 74px; align-items: end; margin-bottom: 16px; }
.stat-week .bar { display: grid; grid-template-rows: 1fr auto; gap: 5px; height: 100%; align-items: end; }
.stat-week .bar i {
display: block; width: 100%; border-radius: 3px 3px 1px 1px; min-height: 3px;
background: rgba(255, 255, 255, .05);
border-top: 1px solid rgba(255, 255, 255, .10);
}
.stat-week .bar.on i { background: color-mix(in srgb, var(--tint) 55%, transparent); border-top-color: var(--tint); }
.stat-week .bar span { font-family: var(--mono); font-size: 9px; color: var(--muted); text-align: center; text-transform: uppercase; }
.stat-h { margin: 16px 0 8px; font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stat-rows { display: grid; gap: 6px; }
.stat-row { display: grid; grid-template-columns: 8.5ch 1fr 6ch; align-items: center; gap: 8px; font-size: 12px; }
.stat-row span { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-row i { display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--tint) 45%, transparent); min-width: 2px; }
.stat-row b { font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.stat-locked { margin-top: 12px; display: grid; gap: 12px; justify-items: start; }
.panel-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ghost.tiny { height: 30px; padding: 0 12px; font-size: 11px; }
/* ── what is playing ──────────────────────────────────────────────────── */
.ins-row { display: grid; grid-template-columns: 9ch 1fr auto; align-items: center; gap: 10px; font-size: 12px; padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.ins-row:last-child { border-bottom: 0; }
.ins-row.flat { grid-template-columns: 9ch 1fr; }
.ins-row > span { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ins-row em { font-family: var(--mono); font-style: normal; font-size: 12px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.ins-row.flat em { text-align: left; }
.ins-bar { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.ins-bar b { display: block; height: 100%; background: var(--tint); transition: width .12s linear; }
/* ── upgrade card ─────────────────────────────────────────────────────── */
.card.up { width: min(560px, 100%); }
.up-list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.up-list li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.up-list li::before { content: "+"; position: absolute; left: 4px; color: var(--tint); font-family: var(--mono); }
.up-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.price {
display: grid; gap: 2px; justify-items: center; padding: 12px 8px; border-radius: 10px;
border: 1px solid var(--line); background: rgba(8, 6, 10, .6); position: relative;
transition: border-color .2s, background .2s;
}
.price:hover { border-color: var(--tint); background: var(--tint-soft); }
.price b { font-family: var(--mono); font-weight: 400; font-size: 18px; color: var(--ink); }
.price small { font-size: 10px; color: var(--muted); text-align: center; }
.price.best { border-color: color-mix(in srgb, var(--tint) 55%, transparent); }
.price i {
position: absolute; top: -8px; font-style: normal; font-family: var(--mono); font-size: 9px;
letter-spacing: .1em; text-transform: uppercase; color: var(--ground);
background: var(--tint); border-radius: 3px; padding: 1px 5px;
}
.up-actions { margin-top: 16px; }
.up-key { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.up-key-row { display: flex; gap: 8px; }
.up-key input {
flex: 1; height: 38px; padding: 0 12px; border-radius: 8px; box-sizing: border-box;
background: rgba(8, 6, 10, .7); border: 1px solid var(--line); color: var(--ink);
font-family: var(--mono); font-size: 12px;
}
.up-key input:focus { outline: none; border-color: var(--tint); }
.up-foot { margin-top: 16px; }
#up-msg:empty { display: none; }
@media (max-width: 560px) {
.up-prices { grid-template-columns: 1fr; }
.stat-tiles { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr 1fr; }
.foot-right { gap: 10px; }
}
/* ── account ──────────────────────────────────────────────────────────
Signing in is optional, so it lives in the footer next to the plan
badge rather than anywhere that interrupts a session. */
.acc { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-row {
display: grid; grid-template-columns: 13ch 1fr; gap: 12px; align-items: baseline;
padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
font-size: 13px;
}
.acc-row:last-of-type { border-bottom: 0; }
.acc-label { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.acc-row b { font-weight: 500; color: var(--ink); word-break: break-all; }
.acc-row span:not(.acc-label) { color: var(--muted); }
#acc-in .card-actions { margin-top: 18px; }
#acc-devices { margin-top: 12px; }
.up-key-row input[type="email"] {
flex: 1; height: 38px; padding: 0 12px; border-radius: 8px; box-sizing: border-box;
background: rgba(8, 6, 10, .7); border: 1px solid var(--line); color: var(--ink);
font-family: var(--mono); font-size: 12px;
}
.up-key-row input[type="email"]:focus { outline: none; border-color: var(--tint); }
.up-foot { display: flex; gap: 16px; flex-wrap: wrap; }
#acc-msg:empty { display: none; }
#acc-msg { margin-top: 10px; }
#acc-in .card-copy.tiny:last-child { margin-top: 14px; }
/* ── account: sign in, restore, delete ─────────────────────────────────── */
.tabs { display: flex; gap: 4px; margin: 16px 0 12px; border-bottom: 1px solid var(--line); }
.tab {
font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
color: var(--muted); padding: 8px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
transition: color .2s, border-color .2s;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--tint); border-bottom-color: var(--tint); }
.acc-form { display: grid; gap: 8px; margin-top: 12px; }
@media (min-width: 520px) { .acc-form { grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; } }
.acc-form input {
height: 38px; padding: 0 12px; border-radius: 8px; box-sizing: border-box; min-width: 0;
background: rgba(8, 6, 10, .7); border: 1px solid var(--line); color: var(--ink);
font-family: var(--mono); font-size: 12px;
}
.acc-form input:focus { outline: none; border-color: var(--tint); }
.acc-form input[hidden] { display: none !important; }
.acc-form .primary.small, .acc-form .ghost.tiny { white-space: nowrap; }
.acc-links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.acc-more { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.acc-more summary {
cursor: pointer; list-style: none; font-family: var(--mono); font-size: 11px;
letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.acc-more summary::-webkit-details-marker { display: none; }
.acc-more summary::before { content: "+"; color: var(--tint); margin-right: 8px; }
.acc-more[open] summary::before { content: "–"; }
.acc-more summary:hover { color: var(--ink); }
.acc-more > p, .acc-more > div { margin-top: 10px; }
.acc-more.danger summary::before { color: #E0603A; }
.acc-more.danger summary:hover { color: #E0603A; }
.ghost.danger { color: #E0603A; border-color: rgba(224, 96, 58, .35); }
.ghost.danger:hover { color: #FF7A52; border-color: #E0603A; }
#acc-delete-keys { color: var(--tint); word-break: break-all; }
.ver-row {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
font-size: 12px; color: var(--ink);
}
.ver-row:last-child { border-bottom: 0; }
#acc-pw-msg:empty, #acc-restore-msg:empty, #acc-delete-msg:empty, #acc-reset-msg:empty { display: none; }
/* Task and Atmosphere: the two choices that matter, labelled so a first
visitor knows what each chip is without opening it. */
.chip { display: inline-flex; align-items: baseline; gap: 8px; }
.chip .chip-k { font-size: 9px; letter-spacing: .14em; color: var(--muted); opacity: .75; }
.panel-sub { margin: 18px 0 10px; font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.panel-title + .panel-sub { margin-top: 0; }
.modes.row { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.modes.row .mode-opt { padding: 8px 6px; text-align: center; }
.modes.row .mode-opt b { font-size: 12px; }
.modes.row .mode-opt small { font-size: 9px; }
.mode-opt .atmo-art { margin: 4px 0 0; font-family: var(--mono); font-size: 7px; line-height: 1.05; color: var(--tint); opacity: .8; overflow: hidden; white-space: pre; }
@media (max-width: 720px) { .modes.row { grid-template-columns: 1fr 1fr; } }
/* ════════════════════════════════════════════════════════════════════════
v3 · 2026 — calm, glass, one dock
The page is the background; everything else is a thin layer over it.
- one control island at the bottom (task, atmosphere, goal, start,
volume, customize) instead of seven chips in the header;
- glass instead of borders: the ASCII field shows through, blurred, and
a hairline highlight gives each surface its edge;
- sentence case in a proportional face; the monospace is kept for
numbers only, where it earns its keep;
- motion that explains: sheets grow out of the control that opened
them, and starting a session lets the interface sink away.
════════════════════════════════════════════════════════════════════════ */
:root {
--ground: #0A0708;
--ink: #F4EBE3;
--muted: #A89A90;
--faint: rgba(255, 240, 228, 0.10);
--line: rgba(255, 236, 220, 0.09);
--glass: rgba(24, 16, 15, 0.46);
--glass-strong: rgba(20, 13, 13, 0.74);
--glass-hi: inset 0 1px 0 rgba(255, 244, 236, 0.07), inset 0 0 0 1px rgba(255, 236, 220, 0.07);
--lift: 0 24px 70px -24px rgba(0, 0, 0, 0.85);
--hover: rgba(255, 240, 228, 0.06);
--press: rgba(255, 240, 228, 0.10);
--ease: cubic-bezier(.2, .8, .2, 1);
--r-l: 22px; --r-m: 14px; --r-s: 10px;
--dock-h: 60px;
--dock-bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
/* Onest was drawn for Cyrillic first, which the Russian interface needs;
the stack after it are the best system faces on each platform */
--sans: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
}
/* type: proportional everywhere, mono only for figures */
.status, .tool, .chip, .primary, .ghost, .volume, .summary, .foot, .panel-title, .panel-sub,
.goals-label, .eyebrow, .card h2, .tab, .acc-label, .acc-more summary, .stat-h, .tile small,
.ins-row > span, .stat-week .bar span, .plan, .pro, .price i, .mix-row .src, .link, .mark {
font-family: var(--sans); text-transform: none; letter-spacing: 0;
}
/* header */
.bar { align-items: center; }
.mark { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.mark-flame {
width: 9px; height: 9px; border-radius: 50%;
background: radial-gradient(circle at 50% 62%, #FFE2BC 0 22%, var(--tint) 55%, rgba(255, 138, 61, 0) 72%);
box-shadow: 0 0 12px 1px color-mix(in srgb, var(--tint) 70%, transparent);
}
[data-state="playing"] .mark-flame { animation: flicker 3.75s ease-in-out infinite; }
@keyframes flicker { 50% { opacity: .55; transform: scale(.86); } }
.tools { gap: 4px; }
.tool, .tool.icon {
width: 36px; height: 36px; padding: 0; justify-content: center; border: 0; border-radius: 50%;
background: transparent; color: var(--muted); transition: color .2s, background .2s;
}
.tool:hover { color: var(--ink); background: var(--hover); border: 0; }
.tool[aria-expanded="true"] { color: var(--ink); background: var(--press); }
.tool.on { color: var(--ink); } /* the account sign, once signed in */
.tool svg { width: 17px; height: 17px; stroke-width: 1.35; }
.tool .q { font-size: 18px; }
/* stage */
.app { grid-template-rows: auto 1fr auto; }
.stage { gap: clamp(14px, 2.6vh, 24px); padding-bottom: calc(var(--dock-h) + 40px); }
.status { font-size: 13px; color: var(--muted); letter-spacing: .01em; gap: 9px; }
.timer {
font-family: var(--sans); font-weight: 200; white-space: nowrap;
font-size: clamp(84px, 17vw, 208px); letter-spacing: -0.055em; line-height: .95;
font-feature-settings: "tnum" 1, "ss01" 1;
text-shadow: 0 0 44px color-mix(in srgb, var(--tint) 26%, transparent), 0 2px 30px rgba(0, 0, 0, .5);
transition: opacity .6s var(--ease), color .6s var(--ease), transform 1.2s var(--ease);
transform-origin: 50% 60%;
}
[data-state="idle"] .timer { color: color-mix(in srgb, var(--ink) 62%, var(--ground)); }
/* every digit in its own fixed box: the numbers tick without the line
shifting, whatever the font's own figure widths are */
.timer .d { display: inline-block; width: .6em; text-align: center; font-style: normal; }
.timer .c { display: inline-block; width: .3em; font-style: normal; position: relative; -webkit-text-fill-color: transparent; opacity: .72; }
/* the colon is drawn, not typed: two round points at the figures' mid-height,
the same in every font and at every weight */
.timer .c::before {
content: ""; position: absolute; left: 50%; top: 34%; width: .07em; height: .07em; margin-left: -.035em;
border-radius: 50%; background: currentColor; box-shadow: 0 .27em 0 currentColor;
}
.goal-progress { margin-top: -2px; gap: 14px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.goal-progress .track { width: min(300px, 52vw); height: 2px; background: var(--faint); }
.goal-progress i { border-radius: 2px; box-shadow: 0 0 10px var(--tint); }
.summary { font-size: 13px; color: var(--muted); }
.summary b { font-weight: 500; }
/* the dock */
.dock {
position: fixed; z-index: 4; left: 50%; bottom: var(--dock-bottom);
display: flex; align-items: center; gap: 4px; padding: 6px;
border-radius: 999px; background: var(--glass);
backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5);
box-shadow: var(--glass-hi), var(--lift);
transform: translateX(-50%);
transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.dock-picks, .dock-main, .dock-end { display: flex; align-items: center; gap: 2px; }
.dock-main { gap: 6px; padding: 0 4px; }
.pick {
display: grid; gap: 1px; text-align: left; min-width: 0;
padding: 7px 16px 8px; border-radius: 999px;
transition: background .2s var(--ease);
}
.pick small { font-size: 11px; line-height: 1.2; color: var(--muted); }
.pick span { font-size: 14px; line-height: 1.25; font-weight: 500; color: var(--ink); white-space: nowrap; }
.pick:hover { background: var(--hover); }
.pick[aria-expanded="true"] { background: var(--press); }
.primary {
height: 48px; padding: 0 22px 0 18px; gap: 10px;
font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; text-transform: none;
color: #1A0D06; background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 88%, white), var(--tint));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 28px -8px color-mix(in srgb, var(--tint) 80%, transparent);
transition: transform .25s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s;
}
.primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 12px 36px -8px color-mix(in srgb, var(--tint) 90%, transparent); }
.primary:active { transform: scale(.97); }
.primary svg { width: 13px; height: 13px; }
[data-state="playing"] .primary, [data-state="break"] .primary {
color: var(--ink); background: var(--press);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.ghost {
height: 48px; padding: 0 16px; border: 0; border-radius: 999px;
font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none;
color: var(--muted); background: transparent;
}
.ghost:hover { color: var(--ink); background: var(--hover); border: 0; }
.dock .ghost { height: 48px; }
.volume { gap: 8px; padding: 0 6px 0 10px; color: var(--muted); font-size: 12px; }
.volume svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.volume input[type="range"] { width: 88px; }
.volume output { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--ink) var(--fill, 70%), var(--faint) var(--fill, 70%)); }
input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: var(--faint); }
input[type="range"]::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5.5px; background: var(--ink); box-shadow: 0 1px 6px rgba(0, 0, 0, .5); transition: transform .15s; }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: var(--ink); box-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
/* sheets and panels: glass, grown from where they were opened */
.panel {
top: calc(env(safe-area-inset-top, 0px) + 68px);
padding: 20px; border: 0; border-radius: var(--r-l);
background: var(--glass-strong);
backdrop-filter: blur(32px) saturate(1.4); -webkit-backdrop-filter: blur(32px) saturate(1.4);
box-shadow: var(--glass-hi), var(--lift);
transform-origin: 100% 0;
animation: sheet-top .32s var(--ease) both;
}
.panel.dockpanel {
top: auto; right: auto; left: 50%;
bottom: calc(var(--dock-bottom) + var(--dock-h) + 14px);
width: min(400px, calc(100vw - 24px));
max-height: calc(100vh - var(--dock-h) - 120px);
transform: translateX(-50%); transform-origin: 50% 100%;
animation: sheet-up .34s var(--ease) both;
}
.panel.dockpanel.wide { width: min(460px, calc(100vw - 24px)); }
@keyframes sheet-top { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes sheet-up { from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.97); } }
.panel-title { margin: 0 0 14px; font-size: 16px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.panel-sub { margin: 20px 0 10px; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: .01em; }
.panel-note { font-size: 12.5px; line-height: 1.55; }
.mode-opt, .preset, .tile, .price {
border: 0; border-radius: var(--r-m); background: rgba(255, 240, 228, 0.045);
box-shadow: inset 0 0 0 1px rgba(255, 236, 220, 0.05);
transition: background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.mode-opt { padding: 12px 14px; gap: 4px; }
.mode-opt:hover, .preset:hover, .price:hover { background: rgba(255, 240, 228, 0.075); border: 0; }
.mode-opt:active, .preset:active { transform: scale(.985); }
.mode-opt[aria-checked="true"], .preset[aria-checked="true"] {
background: color-mix(in srgb, var(--tint) 13%, transparent);
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tint) 75%, transparent);
}
.mode-opt b { font-size: 15px; font-weight: 500; }
.mode-opt small { font-size: 12px; line-height: 1.45; }
.mode-opt .atmo-art { font-size: 8px; line-height: 1.05; margin-top: 8px; opacity: .9; text-shadow: 0 0 8px color-mix(in srgb, var(--tint) 55%, transparent); }
.modes.row .mode-opt { padding: 10px 6px; }
.modes.row .mode-opt b { font-size: 13px; }
.preset { padding: 10px; }
.preset b { font-size: 14px; }
.preset small { font-size: 11.5px; }
.goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0; border: 0; background: none; }
.goals button {
height: 46px; border-radius: var(--r-m); font-family: var(--sans); font-size: 15px; font-weight: 500;
color: var(--ink); background: rgba(255, 240, 228, 0.045); box-shadow: inset 0 0 0 1px rgba(255, 236, 220, 0.05);
}
.goals button:hover { background: rgba(255, 240, 228, 0.075); }
.goals button[aria-checked="true"] { color: #1A0D06; background: var(--tint); box-shadow: none; }
.mix-row { font-size: 14px; }
.mix-row output { font-size: 12px; }
.mix-row.first { border-bottom-color: var(--line); }
/* footer */
.foot { font-size: 12px; color: var(--muted); align-items: center; letter-spacing: 0; }
.foot-left { display: flex; gap: 16px; align-items: center; }
.link.quiet { color: var(--muted); text-decoration: none; font-size: inherit; }
.link.quiet:hover { color: var(--ink); }
.plan { font-size: 11px; font-weight: 500; padding: 4px 10px; border: 0; background: color-mix(in srgb, var(--tint) 16%, transparent); }
kbd { font-family: var(--mono); font-size: 11px; padding: 2px 7px; border: 0; border-radius: 6px; background: rgba(255, 240, 228, 0.08); color: var(--ink); }
/* toasts, modals */
.toast {
bottom: calc(var(--dock-bottom) + var(--dock-h) + 18px);
border: 0; border-radius: var(--r-m); background: var(--glass-strong);
backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
box-shadow: var(--glass-hi), var(--lift);
}
.modal { background: rgba(6, 4, 5, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.card {
border: 0; border-radius: 26px; padding: 26px;
background: var(--glass-strong);
backdrop-filter: blur(36px) saturate(1.4); -webkit-backdrop-filter: blur(36px) saturate(1.4);
box-shadow: var(--glass-hi), 0 40px 120px -40px rgba(0, 0, 0, 1);
}
.eyebrow { font-size: 13px; font-weight: 500; color: var(--tint); }
.card h2 { font-weight: 500; font-size: 26px; letter-spacing: -0.02em; }
.card .ghost { height: 42px; box-shadow: inset 0 0 0 1px var(--line); }
.app .card .primary { color: #1A0D06; }
.tab { font-size: 13px; }
.acc-label, .stat-h, .tile small, .ins-row > span { font-size: 11.5px; letter-spacing: .01em; }
.acc-more summary { font-size: 13px; }
.stat-week .bar span { font-size: 10px; }
.pro { font-size: 10px; font-weight: 500; border: 0; background: color-mix(in srgb, var(--tint) 18%, transparent); padding: 1px 6px; border-radius: 6px; }
.tile b, .price b { font-family: var(--sans); font-weight: 300; letter-spacing: -0.02em; }
/* focus: visible, round, in the page's colour */
button:focus-visible, input:focus-visible, .pick:focus-visible {
outline: 2px solid color-mix(in srgb, var(--tint) 85%, white); outline-offset: 2px; border-radius: 999px;
}
.mode-opt:focus-visible, .preset:focus-visible, .goals button:focus-visible { border-radius: var(--r-m); }
/* zen: the interface sinks away and the timer settles */
.chrome { transition: opacity .9s var(--ease), transform .9s var(--ease); }
.app.zen .chrome { opacity: 0; pointer-events: none; }
.app.zen .bar { transform: translateY(-8px); }
.app.zen .foot { transform: translateY(8px); }
.app.zen .dock { opacity: 0; pointer-events: none; transform: translate(-50%, 16px); }
.app.zen .timer { transform: scale(.94); }
/* narrower screens: the footer gets its own line under the dock */
@media (max-width: 1180px) {
:root { --dock-bottom: calc(env(safe-area-inset-bottom, 0px) + 56px); }
}
@media (max-width: 720px) {
:root { --dock-bottom: calc(env(safe-area-inset-bottom, 0px) + 46px); --dock-h: 116px; }
.dock {
left: 10px; right: 10px; transform: none; border-radius: 26px;
flex-wrap: wrap; justify-content: space-between; padding: 6px;
}
.app.zen .dock { transform: translateY(16px); }
.dock-picks { width: 100%; justify-content: space-between; }
.pick { flex: 1; padding: 7px 10px 8px; }
.pick span { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.dock-main { flex: 1; padding: 0; }
.dock-main .primary { flex: 1; justify-content: center; }
.volume { display: none; }
.panel.dockpanel { bottom: calc(var(--dock-bottom) + var(--dock-h) + 10px); max-height: calc(100vh - var(--dock-h) - 110px); }
.stage { padding-bottom: calc(var(--dock-h) + 30px); }
.foot { justify-content: center; }
.foot-left #keys-link { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.panel, .panel.dockpanel, .toast, .card { animation: none; }
.timer, .chrome, .dock, .primary, .mode-opt, .preset { transition: opacity .3s linear; }
.app.zen .timer, .app.zen .bar, .app.zen .foot { transform: none; }
.app.zen .dock { transform: translateX(-50%); }
[data-state="playing"] .mark-flame, [data-state="playing"] .timer .c { animation: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 720px) {
.app.zen .dock { transform: none; }
}
.panel .ghost, .panel .ghost.tiny { height: 32px; padding: 0 12px; font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--line); }
.panel .ghost:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 45%, transparent); }
/* ════════════════════════════════════════════════════════════════════════
v5 · quiet
The sound and the picture behind are the product; the interface is a
thin, tidy layer that stays out of their way.
- one typeface (Onest), one accent, flat surfaces, one hover shape;
- icons instead of previews: a line sign per scene, like Endel's modes;
- motion only where it explains something: the page assembles, digits
roll, the dock's light follows the pointer, sheets arrive on a spring,
starting lights the room once. Off under prefers-reduced-motion.
════════════════════════════════════════════════════════════════════════ */
:root {
--ground: #050304;
--spring: cubic-bezier(.34, 1.4, .5, 1);
--spring-soft: cubic-bezier(.2, .9, .25, 1.02);
--ctl: 48px; /* every control in the dock is this tall */
/* a plain arrow for a dark page: dark body, light hairline, no tail */
--arrow: url('data:image/svg+xml;utf8,') 4 3, auto;
--arrow-hot: url('data:image/svg+xml;utf8,') 4 3, pointer;
}
@supports (transition-timing-function: linear(0, 1)) {
:root {
--spring: linear(0, 0.034, 0.119, 0.236, 0.368, 0.502, 0.629, 0.743, 0.84, 0.919, 0.981, 1.026, 1.056, 1.074, 1.082, 1.083, 1.078, 1.07, 1.059, 1.048, 1.037, 1.027, 1.018, 1.01, 1.004, 1, 0.997, 0.995, 0.993, 0.993, 0.993, 0.994, 0.995, 0.995, 0.996, 0.997, 1);
--spring-soft: linear(0, 0.044, 0.149, 0.28, 0.417, 0.546, 0.66, 0.755, 0.832, 0.891, 0.935, 0.967, 0.988, 1.002, 1.01, 1.014, 1.015, 1.015, 1.013, 1.011, 1.009, 1.007, 1.005, 1.004, 1.003, 1.002, 1.001, 1.001, 1);
}
}
@media (hover: hover) and (pointer: fine) {
body { cursor: var(--arrow); }
button, label, a, input[type="range"], .preset, .mode-opt { cursor: var(--arrow-hot); }
}
/* a darker room: the glow comes from the scene, not from the page */
.veil {
background:
radial-gradient(ellipse 36% 32% at 50% 50%, rgba(5, 3, 4, 0.7), rgba(5, 3, 4, 0) 100%),
radial-gradient(ellipse 115% 85% at 50% 50%, rgba(5, 3, 4, 0) 45%, rgba(5, 3, 4, 0.88) 100%),
linear-gradient(to top, rgba(255, 110, 30, 0.035), rgba(5, 3, 4, 0) 40%);
}
#glow-wide { opacity: .42; }
.grain {
position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .05;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
}
.kindle {
position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
background: radial-gradient(circle at var(--kx, 50%) var(--ky, 90%),
color-mix(in srgb, var(--tint) 22%, transparent), color-mix(in srgb, var(--tint) 6%, transparent) 30%, transparent 60%);
mix-blend-mode: screen;
}
.kindle.go { animation: kindle 2.4s var(--ease) both; }
@keyframes kindle {
0% { opacity: 0; clip-path: circle(0 at var(--kx) var(--ky)); }
18% { opacity: 1; }
100% { opacity: 0; clip-path: circle(150vmax at var(--kx) var(--ky)); }
}
/* the page assembles itself */
@keyframes enter { from { opacity: 0; translate: 0 14px; filter: blur(8px); } }
@keyframes enter-dock { from { opacity: 0; translate: 0 28px; scale: .96; } }
.bar { animation: enter 1s var(--ease) .1s backwards; }
.stage { animation: enter 1.2s var(--ease) .2s backwards; }
.dock { animation: enter-dock 1.1s var(--spring-soft) .55s backwards; }
.foot { animation: enter 1s var(--ease) .8s backwards; }
/* stage */
.face { display: grid; place-items: center; }
.face > * { grid-area: 1 / 1; }
.timer {
transition: opacity .5s var(--ease), color .6s var(--ease), transform 1.2s var(--ease);
}
.timer.hrs { font-size: clamp(64px, 13vw, 160px); }
[data-state="idle"] .timer { opacity: 0; color: var(--ink); pointer-events: none; }
.timer .d, .timer .c {
position: relative;
transition: opacity .7s var(--ease) calc(var(--k, 0) * 55ms + 120ms),
translate 1s var(--spring-soft) calc(var(--k, 0) * 55ms + 120ms),
filter .7s var(--ease) calc(var(--k, 0) * 55ms + 120ms);
}
[data-state="idle"] .timer .d, [data-state="idle"] .timer .c { opacity: 0; translate: 0 .2em; filter: blur(10px); transition-delay: 0s; }
/* An odometer: each figure sits in its own window. The old one travels up
and out, the new one comes up from below, both at full strength — the
window's edge hides them, not a fade, so nothing ever sits half-drawn on
top of anything else. */
/* Figures change the way numbers change in iOS: the old one lifts a little
and dissolves into a blur, the new one rises into focus from just below.
The two only overlap while both are soft, so there is never a sharp
ghost of one digit over another, and both stay the same colour.
No glow on the figures: the page reads cleaner without one. */
.timer { text-shadow: none; }
.timer .d b { display: inline-block; font-weight: inherit; }
.timer .d.roll b { animation: num-in .5s cubic-bezier(.2, .8, .2, 1) .07s both; }
.timer .d.roll::after {
content: attr(data-o); position: absolute; inset: 0; text-align: center; color: inherit;
animation: num-out .38s cubic-bezier(.4, 0, .6, 1) both;
}
@keyframes num-in { from { transform: translateY(.3em); opacity: 0; filter: blur(8px); } }
@keyframes num-out { to { transform: translateY(-.3em); opacity: 0; filter: blur(8px); } }
/* the colon holds still, in one colour */
.timer .c { opacity: .6; animation: none; }
.hero { display: grid; justify-items: center; gap: 12px; transition: opacity .6s var(--ease), filter .7s var(--ease), translate .9s var(--ease); }
.app:not([data-state="idle"]) .hero { opacity: 0; filter: blur(14px); translate: 0 -.4em; pointer-events: none; }
.hero-name {
margin: 0; font-weight: 300; font-size: clamp(44px, 6vw, 76px); line-height: 1; letter-spacing: -0.035em; color: var(--ink);
text-shadow: 0 2px 30px rgba(0, 0, 0, .5);
}
.hero-name.swap { animation: hero-swap 1s var(--ease); }
@keyframes hero-swap { from { opacity: 0; filter: blur(12px); translate: 0 .12em; } }
.hero-hint { margin: 0; max-width: 34ch; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: balance; }
/* the dock: one height, one hover shape for every control */
.dock { padding: 6px; gap: 4px; }
.dock-picks { position: relative; }
.pick-ico { display: none; }
.pick { position: relative; z-index: 1; height: var(--ctl); box-sizing: border-box; align-content: center; padding: 0 16px; }
.pick:hover, .pick[aria-expanded="true"] { background: transparent; }
.dock-hl {
position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; pointer-events: none;
background: var(--hover); opacity: 0;
transition: transform .55s var(--spring), width .55s var(--spring), opacity .25s var(--ease), background .25s;
}
.dock-hl.on { opacity: 1; }
.dock-hl.press { background: var(--press); }
.dock .tool.icon, .dock .ghost {
height: var(--ctl); border-radius: 999px; white-space: nowrap; transition: background .25s var(--ease), color .25s var(--ease);
}
.dock .tool.icon { width: var(--ctl); }
.dock .tool.icon:hover, .dock .ghost:hover { background: var(--hover); }
.dock .tool.icon[aria-expanded="true"] { background: var(--press); }
/* start: one flat colour, no glow */
.primary {
height: var(--ctl); color: #1A0D06; background: var(--tint); box-shadow: none;
transition: transform .45s var(--spring), background .3s var(--ease), color .3s var(--ease);
}
.primary:hover { transform: none; background: color-mix(in srgb, var(--tint) 88%, white); box-shadow: none; }
.primary:active { transform: scale(.96); transition-duration: .12s; }
[data-state="playing"] .primary, [data-state="break"] .primary { color: var(--ink); background: var(--press); box-shadow: none; }
[data-state="playing"] .primary:hover, [data-state="break"] .primary:hover { background: rgba(255, 240, 228, .14); }
.app .card .primary { box-shadow: none; }
/* light under the pointer */
:where(.spot) { position: relative; }
.spot::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
background: radial-gradient(200px circle at var(--mx, -300px) var(--my, -300px), rgba(255, 236, 220, .07), transparent 65%);
opacity: 0; transition: opacity .35s var(--ease);
}
.spot:hover::before { opacity: 1; }
:where(.spot) > * { position: relative; z-index: 1; }
/* sheets arrive on a spring; their items follow one by one */
.panel { animation: sheet-top .5s var(--spring-soft) both; }
.panel.dockpanel { animation: sheet-up .55s var(--spring-soft) both; }
@keyframes sheet-up { from { opacity: 0; transform: translateX(-50%) translateY(18px) scale(.96); } }
@keyframes item-in { from { opacity: 0; translate: 0 10px; } }
.panel:not([hidden]) .mode-opt, .panel:not([hidden]) .goals button, .panel:not([hidden]) .preset {
animation: item-in .6s var(--spring-soft) backwards;
animation-delay: calc(var(--i, 0) * 50ms + 80ms);
}
.mode-opt, .preset { transition: background .25s var(--ease), box-shadow .25s var(--ease), transform .45s var(--spring); }
.mode-opt:active, .preset:active { transform: scale(.98); transition-duration: .12s; }
/* line icons */
.ico {
width: 40px; height: 40px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3;
stroke-linecap: round; stroke-linejoin: round; color: var(--muted);
transition: color .3s var(--ease);
}
.ico .ring { stroke-opacity: .22; }
.ico .soft { stroke-opacity: .6; }
.ico .faint { stroke-opacity: .35; }
.ico .f { fill: currentColor; stroke: none; }
.mode-opt:hover .ico, .preset:hover .ico { color: var(--ink); }
.mode-opt[aria-checked="true"] .ico, .preset[aria-checked="true"] .ico { color: var(--tint); }
.mode-opt[aria-checked="true"] .ico .ring, .preset[aria-checked="true"] .ico .ring { stroke-opacity: .45; }
/* atmospheres: icon + name + one line */
.mode-opt.atmo { grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 2px; align-items: center; padding: 12px 14px; }
.mode-opt.atmo .ico { grid-row: 1 / span 2; }
.mode-opt.atmo b { align-self: end; }
.mode-opt.atmo small { align-self: start; }
/* backgrounds in Customize: the same idea, smaller */
.presets { gap: 8px; }
.preset { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; }
.preset .ico { width: 34px; height: 34px; }
.preset-txt { display: grid; gap: 2px; min-width: 0; }
.preset b { font-size: 13.5px; font-weight: 500; }
.preset small { font-size: 11.5px; line-height: 1.35; }
/* time of day: four equal, centred tiles */
.modes.row .mode-opt {
height: 52px; padding: 0 6px; box-sizing: border-box;
display: grid; place-items: center; align-content: center; gap: 1px; text-align: center;
}
.modes.row .mode-opt b { font-size: 13px; }
.modes.row .mode-opt small { font-size: 10px; line-height: 1; color: var(--tint); }
.modes.row .mode-opt small:empty { display: none; }
/* goals: the number and its unit, ∞ on its own */
.goals { align-items: stretch; }
.goals button {
height: 64px; padding: 0 4px; display: grid; align-content: center; justify-items: center; gap: 2px;
transition: background .25s var(--ease), transform .45s var(--spring);
}
.goals button:active { transform: scale(.96); transition-duration: .12s; }
.goals button b { font-size: 21px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.goals button b.inf { font-size: 24px; font-weight: 400; }
.goals button small { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.goals button[aria-checked="true"] small { color: rgba(26, 13, 6, .7); }
/* your focus: one tidy footer instead of a row of buttons */
.stats-foot {
display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.stats-foot .panel-note { margin: 0; }
#stats-clear { font-size: 12.5px; white-space: nowrap; }
#stats-clear:hover { color: #E0603A; }
@media (max-width: 720px) {
.dock .tool.icon { width: 44px; height: 44px; }
.hero-hint { font-size: 13px; max-width: 26ch; }
}
@media (prefers-reduced-motion: reduce) {
.bar, .stage, .dock, .foot, .kindle.go, .hero-name.swap, .timer .d.roll b, .timer .d.roll::after,
.panel:not([hidden]) .mode-opt, .panel:not([hidden]) .goals button, .panel:not([hidden]) .preset { animation: none; }
.timer .d, .timer .c, .hero { transition: opacity .3s linear; }
.dock-hl { transition: opacity .2s linear; }
}
/* ════════════════════════════════════════════════════════════════════════
v6 · phone
On a phone Lanthen is held in one hand and mostly glanced at. Borrowed
from how Endel lays out its player, in Lanthen's own materials:
- the atmosphere is the headline, top-left, with the state under it
like a caption, and the time below that — read top to bottom;
- the controls live at the bottom where the thumb is: two list rows
(atmosphere, task) between hairlines, then pause · goal · settings,
then one wide button; no floating card, just a scrim over the scene;
- sheets rise from the bottom edge, solid, with a grab handle;
- everything clears the notch and the home indicator.
Only layout and dress change here; every control does what it did.
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
:root { --m-pad: 24px; --hair: rgba(255, 240, 228, .13); }
.app {
grid-template-rows: auto auto 1fr;
padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--m-pad) 0;
}
.bar { min-height: 44px; }
.mark { font-size: 16px; }
#btn-full, #btn-keys { display: none; }
.tools { gap: 0; margin-right: -8px; }
.tools .tool { width: 40px; height: 40px; }
/* today · account · language: a quiet caption under the header */
.foot {
grid-row: 2; justify-content: space-between; padding: 2px 0 0; font-size: 12.5px;
transition: opacity .5s var(--ease);
}
.foot-left #keys-link { display: none; }
/* the account lives in the header here, as a sign, not as a grey address */
.foot-right #btn-account { display: none; }
/* the title block: centred, between the header and the controls */
.stage {
grid-row: 3; align-items: center; justify-content: center; text-align: center;
gap: 0; padding: 0 0 calc(var(--m-dock) + 28px);
}
.face { display: contents; }
.hero { order: 1; justify-items: center; gap: 10px; }
.app:not([data-state="idle"]) .hero { opacity: 1; filter: none; translate: none; pointer-events: auto; }
.hero-name { font-size: 46px; font-weight: 400; letter-spacing: -0.035em; line-height: 1.02; text-align: center; padding: 0; }
.hero-hint { text-align: center; max-width: 28ch; font-size: 15px; line-height: 1.45; }
.status { order: 2; margin-top: 10px; font-size: 14px; justify-content: center; }
.timer {
order: 3; margin-top: 26px; text-align: center; white-space: nowrap;
font-size: 76px; font-weight: 200; letter-spacing: -0.04em; line-height: 1;
}
.timer.hrs { font-size: 58px; }
[data-state="idle"] .timer { display: none; }
@starting-style { .timer .d, .timer .c { opacity: 0; translate: 0 .2em; filter: blur(10px); } }
.app.zen .timer { transform: none; }
.goal-progress { order: 4; width: min(240px, 64%); margin-top: 18px; justify-content: center; }
.goal-progress .track { display: block; width: 100%; height: 2px; }
#goal-text { display: none; }
.summary { order: 5; margin-top: 14px; justify-content: center; text-align: center; }
/* the controls, at the thumb: a glass card with the two choices that
shape the sound (each with its sign), then pause · goal · settings,
then one wide button; a scrim keeps the scene from fighting the text */
:root { --m-dock: 300px; }
.app[data-state="break"] { --m-dock: 366px; } /* one more row: skip the break */
.dock, .app.zen .dock {
left: 0; right: 0; bottom: 0; transform: none; border-radius: 0;
padding: 56px var(--m-pad) calc(env(safe-area-inset-bottom, 0px) + 14px);
background: linear-gradient(to top, rgba(5, 3, 4, .96) 0, rgba(5, 3, 4, .9) 62%, rgba(5, 3, 4, 0) 100%);
-webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 0;
grid-template-areas: "pack pack pack" "mode mode mode" "tgl goal tune" "end end end";
}
.app.zen .dock { transform: translateY(16px); }
.app[data-state="idle"] .dock { grid-template-areas: "pack pack pack" "mode mode mode" ". goal tune" "tgl tgl tgl"; }
.app[data-state="break"] .dock { grid-template-areas: "pack pack pack" "mode mode mode" "tgl goal tune" "skip skip skip" "end end end"; }
.dock-picks, .dock-main, .dock-end { display: contents; }
.dock-hl, .dock .volume { display: none; }
.dock.spot::before, .mode-opt.spot::before, .preset.spot::before, .goals .spot::before { display: none; }
/* the card behind the two rows (a grid item of its own) */
.dock::after {
content: ""; grid-area: 1 / 1 / 3 / 4; align-self: stretch; z-index: 0; border-radius: 24px;
background: var(--glass);
-webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
box-shadow: var(--glass-hi);
}
#btn-pack { grid-area: pack; }
#btn-mode { grid-area: mode; }
#btn-pack, #btn-mode {
position: relative; z-index: 1;
display: grid; grid-template-columns: 40px 1fr auto; column-gap: 14px; row-gap: 1px; align-items: center;
height: auto; padding: 12px 18px 12px 14px; border-radius: 0; text-align: left; transition: background .2s;
}
#btn-pack { border-radius: 24px 24px 0 0; }
#btn-mode { border-radius: 0 0 24px 24px; }
#btn-mode::before {
content: ""; position: absolute; left: 68px; right: 18px; top: 0; height: 1px; background: var(--hair);
}
.pick-ico { grid-column: 1; grid-row: 1 / span 2; display: grid; }
.pick-ico .ico { width: 40px; height: 40px; color: var(--ink); }
.pick-ico .ico .ring { stroke-opacity: .28; }
#btn-pack small, #btn-mode small { grid-column: 2; font-size: 12.5px; color: var(--muted); }
#btn-pack span:not(.pick-ico), #btn-mode span:not(.pick-ico) { grid-column: 2; font-size: 17px; font-weight: 500; }
#btn-pack::after, #btn-mode::after {
content: ""; grid-column: 3; grid-row: 1 / span 2; width: 18px; height: 18px; background: var(--muted);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
#btn-pack:active, #btn-mode:active, #btn-pack[aria-expanded="true"], #btn-mode[aria-expanded="true"] { background: var(--hover); }
/* pause · goal · settings */
#toggle, #btn-goal, #btn-tune { margin-top: 18px; }
#btn-goal {
grid-area: goal; justify-self: center;
display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 22px 0 18px;
border-radius: 999px; background: rgba(255, 240, 228, .09); transition: background .2s;
}
#btn-goal small { display: none; }
#btn-goal span { font-size: 15.5px; font-weight: 500; }
#btn-goal::before {
content: ""; width: 20px; height: 20px; background: var(--ink);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
#btn-goal:active, #btn-goal[aria-expanded="true"] { background: rgba(255, 240, 228, .15); }
.dock #btn-tune { grid-area: tune; justify-self: end; width: 48px; height: 48px; }
.dock #btn-tune svg { width: 22px; height: 22px; }
/* the play control: a wide button to start, an icon once running */
.dock #toggle { grid-area: tgl; }
.app:not([data-state="idle"]) .dock #toggle {
justify-self: start; width: 48px; height: 48px; padding: 0; justify-content: center;
background: transparent; color: var(--ink); border-radius: 999px;
}
.app:not([data-state="idle"]) .dock #toggle:active { background: var(--hover); }
.app:not([data-state="idle"]) .dock #toggle svg { width: 18px; height: 18px; }
.app:not([data-state="idle"]) #toggle-label {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.app[data-state="idle"] .dock #toggle {
width: 100%; height: 56px; margin-top: 16px; justify-content: center; font-size: 16px;
}
.dock #end {
grid-area: end; width: 100%; height: 56px; margin-top: 16px; border-radius: 999px;
font-size: 16px; font-weight: 500; color: var(--ink); background: rgba(255, 240, 228, .09); box-shadow: none;
}
.dock #end:active { background: rgba(255, 240, 228, .15); }
.dock #skip-break {
grid-area: skip; width: 100%; height: 56px; margin-top: 16px; border-radius: 999px;
font-size: 16px; font-weight: 500; color: var(--ink); background: rgba(255, 240, 228, .09); box-shadow: none;
}
.app[data-state="break"] .dock #end { margin-top: 10px; }
.dock #skip-break:active { background: rgba(255, 240, 228, .15); }
/* sheets rise from the bottom edge */
.panel, .panel.wide, .panel.dockpanel, .panel.dockpanel.wide {
top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; box-sizing: border-box;
max-height: 84vh; transform: none; transform-origin: 50% 100%;
border-radius: 26px 26px 0 0; z-index: 12;
padding: 10px var(--m-pad) calc(env(safe-area-inset-bottom, 0px) + 22px);
background: #120c0b; -webkit-backdrop-filter: none; backdrop-filter: none;
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 240, 228, .07);
animation: sheet-rise .5s var(--spring-soft) both;
}
.panel::before {
content: ""; display: block; width: 38px; height: 4px; margin: 0 auto 18px;
border-radius: 2px; background: rgba(255, 240, 228, .22);
}
@keyframes sheet-rise { from { transform: translateY(100%); } }
.panel-title { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 16px; }
.mode-opt { padding: 14px 16px; }
.mode-opt b { font-size: 16px; }
.mode-opt small { font-size: 13px; }
.goals button { height: 68px; }
.toast {
top: calc(env(safe-area-inset-top, 0px) + 54px); bottom: auto; left: var(--m-pad); right: var(--m-pad);
max-width: none; transform: none; text-align: left; padding: 14px 16px; font-size: 14px;
background: #1a1110; -webkit-backdrop-filter: none; backdrop-filter: none;
animation: toast-drop .45s var(--spring-soft) both;
}
@keyframes toast-drop { from { opacity: 0; transform: translateY(-10px); } }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
.panel, .panel.dockpanel { animation: none; }
}
/* ASCII icons: each glyph placed on its own cell; density sets strength */
.ico.ascii text {
font-family: var(--mono); font-size: 6.6px; font-weight: 600;
text-anchor: middle; dominant-baseline: central;
fill: currentColor; stroke: none;
}
.ico.ascii .g1 { fill-opacity: .6; }
.ico.ascii .g2 { fill-opacity: .85; }
.ico.ascii .ring { stroke-opacity: .16; }
.ico.ascii .g3 { fill-opacity: 1; }
/* the background tiles are wide enough for a one-line description */
@media (min-width: 721px) { .panel.dockpanel.wide { width: min(540px, calc(100vw - 24px)); } }
.preset small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── your focus: one question per block, largest first ─────────────────── */
.st-empty { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.st-hero {
display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.st-today small { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--muted); }
.st-today b { display: block; font-size: 38px; font-weight: 300; line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.st-side { display: flex; gap: 20px; text-align: right; }
.st-num b { display: block; font-size: 15.5px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-num small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.st-week {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end;
height: 128px; margin: 34px 0 4px;
}
.st-col { position: relative; display: grid; grid-template-rows: 1fr auto; gap: 8px; height: 100%; outline: none; }
.st-bar { display: flex; align-items: flex-end; height: 100%; border-radius: 6px; background: rgba(255, 240, 228, .035); }
.st-bar i {
display: block; width: 100%; border-radius: 6px 6px 3px 3px; background: rgba(255, 240, 228, .24);
transition: height .7s var(--spring-soft), background .2s;
}
.st-col.today .st-bar i { background: var(--tint); }
.st-col:hover .st-bar i, .st-col:focus-visible .st-bar i { background: rgba(255, 240, 228, .4); }
.st-col.today:hover .st-bar i, .st-col.today:focus-visible .st-bar i { background: color-mix(in srgb, var(--tint) 85%, white); }
.st-col span { font-size: 11.5px; text-align: center; color: var(--muted); }
.st-col.today span { color: var(--ink); font-weight: 500; }
.st-col::after {
content: attr(data-v); position: absolute; left: 50%; bottom: 100%; translate: -50% -6px;
padding: 3px 8px; border-radius: 8px; white-space: nowrap; pointer-events: none;
font-size: 12px; color: var(--ink); background: #241816; box-shadow: inset 0 0 0 1px var(--line);
opacity: 0; transition: opacity .15s;
}
.st-col:hover::after, .st-col:focus-visible::after { opacity: 1; }
.st-trio { display: grid; grid-template-columns: repeat(3, 1fr); }
.st-trio .st-num { padding: 0 12px; border-left: 1px solid var(--line); }
.st-trio .st-num:first-child { padding-left: 0; border-left: 0; }
.st-list { display: grid; gap: 12px; }
.st-item { display: grid; grid-template-columns: 1fr auto; row-gap: 6px; font-size: 13.5px; }
.st-item span { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-item b { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.st-item i { grid-column: 1 / -1; display: block; height: 4px; border-radius: 2px; background: rgba(255, 240, 228, .06); overflow: hidden; }
.st-item em { display: block; height: 100%; border-radius: 2px; background: rgba(255, 240, 228, .38); }
#panel-stats .stat-h { margin: 24px 0 12px; }
#panel-stats > .panel-note { margin-top: 20px; }
/* clearing history: a real button at the very end, and a question before it acts */
.stats-danger { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.danger-btn {
width: 100%; height: 44px; border-radius: 999px; font-size: 14px; font-weight: 500;
color: #EC7A5E; background: transparent; box-shadow: inset 0 0 0 1px rgba(224, 96, 58, .42);
transition: background .2s, box-shadow .2s;
}
.danger-btn:hover { background: rgba(224, 96, 58, .1); }
.danger-btn.solid { color: #fff; background: #C4452A; box-shadow: none; }
.danger-btn.solid:hover { background: #D6553A; }
.stats-confirm p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.stats-confirm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats-confirm-row .ghost {
width: 100%; height: 44px; border-radius: 999px; font-size: 14px; font-weight: 500;
color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
}
.stats-confirm:not([hidden]) { animation: item-in .45s var(--spring-soft) both; }
@media (max-width: 720px) {
.danger-btn, .stats-confirm-row .ghost { height: 50px; font-size: 15px; }
.st-today b { font-size: 36px; }
.st-side { gap: 16px; }
}
/* ════════════════════════════════════════════════════════════════════════
v7 · true black
The page is black, not a warm near-black: the glyphs are the only warm
thing on screen, so they read sharper and the interface looks cleaner.
- ground #000; the vignette and the calm zone behind the timer fade to
black instead of to brown;
- the wide glow (a heavily blurred copy of the scene) was spreading an
orange haze over the whole page — it is kept only faintly; the tight
glow that gives each glyph its bloom stays;
- glass and sheets lose their brown cast and become neutral smoke.
════════════════════════════════════════════════════════════════════════ */
:root {
--ground: #000;
--glass: rgba(18, 17, 17, 0.55);
--glass-strong: rgba(14, 13, 13, 0.8);
}
html, body { background: #000; }
.veil {
background:
radial-gradient(ellipse 36% 32% at 50% 50%, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0) 100%),
radial-gradient(ellipse 115% 85% at 50% 50%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.9) 100%);
}
#glow-wide { opacity: .16; }
#glow { opacity: .75; }
.card { background: rgba(14, 13, 13, 0.92); }
@media (max-width: 720px) {
.panel, .panel.wide, .panel.dockpanel, .panel.dockpanel.wide { background: #0e0d0d; }
.dock, .app.zen .dock {
background: linear-gradient(to top, rgba(0, 0, 0, .96) 0, rgba(0, 0, 0, .9) 62%, rgba(0, 0, 0, 0) 100%);
}
.toast { background: #161414; }
}
/* "Working" says nothing the running timer does not: while a session runs
the status line steps aside (it still speaks for pause and break) */
[data-state="playing"] .status { visibility: hidden; }
@media (max-width: 720px) { [data-state="playing"] .status { display: none; } }
/* stats: the top row is three equal numbers, set like the all-time row */
.st-top { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.st-top .st-num b { font-size: 20px; font-weight: 400; letter-spacing: -0.01em; }
.st-trio .st-num b { white-space: nowrap; }
/* ── the first screen: pick an atmosphere, one tap starts it ─────────────── */
.start-pick { display: grid; justify-items: center; gap: 18px; }
.app:not([data-state="idle"]) .start-pick { display: none; }
[data-state="idle"] .hero-name, [data-state="idle"] .hero-hint { display: none; }
.start-title { margin: 0; font-size: 15px; color: var(--muted); }
.start-note { margin: 0; font-size: 13px; color: var(--muted); opacity: .8; }
.start-cards { display: grid; grid-template-columns: repeat(3, 210px); gap: 12px; }
.start-card {
display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center;
padding: 22px 16px 20px; border-radius: 22px; min-height: 176px; box-sizing: border-box;
background: var(--glass);
-webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
box-shadow: var(--glass-hi);
transition: transform .45s var(--spring), background .25s var(--ease), box-shadow .25s var(--ease);
animation: item-in .7s var(--spring-soft) backwards; animation-delay: calc(var(--i, 0) * 70ms + 250ms);
}
.start-card .ico { width: 64px; height: 64px; color: var(--ink); transition: color .3s var(--ease); }
.start-card b { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.start-card small { font-size: 13px; line-height: 1.4; color: var(--muted); text-wrap: balance; }
.start-card:hover { transform: translateY(-3px); background: rgba(24, 22, 22, .7); }
.start-card:hover .ico { color: var(--tint); }
.start-card:active { transform: scale(.97); transition-duration: .12s; }
.start-card.current { box-shadow: var(--glass-hi), inset 0 0 0 1px color-mix(in srgb, var(--tint) 45%, transparent); }
.start-card:focus-visible { border-radius: 22px; }
@media (max-width: 720px) {
.start-pick { gap: 14px; }
.start-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.start-card { min-height: 0; padding: 16px 6px 14px; border-radius: 18px; gap: 6px; }
.start-card .ico { width: 52px; height: 52px; }
.start-card b { font-size: 15.5px; }
.start-card small { display: none; }
.hero { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .start-card { animation: none; } }
/* the idle line "Focus · ready" repeated the dock; the cards speak instead */
[data-state="idle"] .status { display: none; }
@media (max-width: 720px) {
.hero { width: 100%; justify-self: stretch; align-self: stretch; }
.start-pick { width: 100%; justify-self: stretch; justify-items: stretch; text-align: center; }
.start-cards { width: 100%; }
}
/* icons v2: a finer grid of smaller glyphs */
.ico.ascii text { font-size: 3.5px; font-weight: 700; }
.ico.ascii .g1 { fill-opacity: .55; }
.ico.ascii .g2 { fill-opacity: .82; }
/* start cards v2: no preselection, calmer, the line always two lines */
.start-cards { grid-template-columns: repeat(3, 200px); gap: 10px; }
.start-card {
min-height: 0; padding: 20px 18px 18px; gap: 6px; border-radius: 20px;
background: rgba(14, 13, 13, .5); box-shadow: inset 0 0 0 1px rgba(255, 240, 228, .07);
}
.start-card .ico { width: 56px; height: 56px; margin-bottom: 6px; }
.start-card .ico .ring { stroke-opacity: .14; }
.start-card b { font-size: 17px; }
.start-card small { font-size: 13px; line-height: 1.4; min-height: 2.8em; max-width: 15em; }
.start-card:hover { background: rgba(22, 20, 20, .7); box-shadow: inset 0 0 0 1px rgba(255, 240, 228, .16); }
.start-card.current { box-shadow: inset 0 0 0 1px rgba(255, 240, 228, .07); }
.start-note { font-size: 13px; opacity: .75; }
@media (max-width: 720px) {
.start-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.start-card small { display: none; }
.start-card { padding: 16px 6px 14px; }
.start-card .ico { width: 48px; height: 48px; margin-bottom: 2px; }
.start-card b { font-size: 15px; }
}
/* ── icons: Solar ─────────────────────────────────────────────────────────
Paths carry their own stroke and fill, so nothing is inherited from the
old line-icon rules. */
:root {
--i-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9 5L15 12L9 19'/%3E%3C/svg%3E");
--i-goal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath d='M21 13C21 17.9706 16.9706 22 12 22C7.02944 22 3 17.9706 3 13C3 8.02944 7.02944 4 12 4C16.9706 4 21 8.02944 21 13Z'/%3E%3Cpath stroke-linejoin='round' d='M12 13V9'/%3E%3Cpath d='M10 2H14'/%3E%3C/g%3E%3C/svg%3E");
}
svg.solar { fill: none; stroke: none; }
.ui-i { display: inline-flex; line-height: 0; }
.ui-svg { width: 20px; height: 20px; }
.tool .ui-svg { width: 20px; height: 20px; }
.volume .ui-svg { width: 19px; height: 19px; flex: none; }
.card-head .tool .ui-svg { width: 18px; height: 18px; }
.primary #toggle-icon { width: 17px; height: 17px; }
.ico.solar { fill: none; stroke: none; }
.ico.solar .ring { fill: none; stroke: currentColor; stroke-width: 1; stroke-opacity: .16; }
.ico.solar .b { display: none; }
[aria-checked="true"] > .ico.solar .l { display: none; }
[aria-checked="true"] > .ico.solar .b { display: inline; }
.start-card .ico.solar .ring { stroke-opacity: .12; }
@media (max-width: 720px) {
#btn-pack::after, #btn-mode::after { -webkit-mask: var(--i-next) center / contain no-repeat; mask: var(--i-next) center / contain no-repeat; width: 20px; height: 20px; }
#btn-goal::before { -webkit-mask: var(--i-goal) center / contain no-repeat; mask: var(--i-goal) center / contain no-repeat; }
.app:not([data-state="idle"]) .dock #toggle svg { width: 22px; height: 22px; }
}
/* switching scenes: out to black and back in */
canvas.layer { transition: opacity .6s var(--ease); }
body.scene-out canvas.layer { opacity: 0 !important; transition-duration: .5s; }
/* four atmospheres on the first screen */
.start-cards { grid-template-columns: repeat(4, 184px); }
@media (max-width: 720px) {
.start-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.start-card { padding: 14px 4px 12px; border-radius: 16px; }
.start-card .ico { width: 42px; height: 42px; }
.start-card b { font-size: 13.5px; }
}
/* ---------- the door: signing in before anything plays ---------- */
.acc-form.stack { grid-auto-flow: row; grid-auto-columns: auto; }
.acc-form.stack input { height: 44px; font-family: var(--sans); font-size: 15px; padding: 0 14px; border-radius: 12px; }
.acc-form.stack .primary.small { height: 44px; margin-top: 4px; justify-content: center; font-size: 15px; font-weight: 500; }
.modal.gate .acc-links .link { font-size: 13px; color: var(--muted); }
.modal.gate .acc-links .link:hover { color: var(--ink); }
.acc-msg:empty { display: none; }
.acc-msg { margin-top: 10px; color: var(--ink); }
.acc-msg a { word-break: break-all; }
.modal.gate { background: rgba(4, 3, 4, 0.62); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); z-index: 40; }
.modal.gate .card.up { width: min(400px, 100%); padding: 28px 28px 24px; }
.modal.gate .card-head { display: none; }
.gate-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.gate-head[hidden] { display: none; }
.gate-head .mark-flame { animation: flicker 3.75s ease-in-out infinite; }
.card h2.gate-title { margin: 0 0 8px; font-size: 26px; line-height: 1.15; }
.gate-title[hidden] { display: none; }
.modal.gate .tabs { margin-top: 20px; }
.modal.gate #acc-note { margin-top: 14px; }
@media (max-width: 480px) {
.modal.gate { align-items: end; padding: 0; }
.modal.gate .card.up { width: 100%; border-radius: 26px 26px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .gate-head .mark-flame { animation: none; } }