:root {
  --ground: #08060A;
  --ink: #FEF6E4;
  --muted: #8E7F76;
  --faint: #3E2F28;
  --line: rgba(247, 113, 50, 0.18);
  --tint: #F77132;
  --tint-soft: rgba(247, 113, 50, 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; }
/* the landing's first screen: the scene of the atmosphere that is picked fills
   the screen. It is at full strength in the lower part and fades upwards, so
   the headline always sits on dark and the picture has no hard edge however
   the sound pushes it; the sides fade out too. */
body[data-page="landing"] canvas.layer {
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 24%, rgba(0, 0, 0, 0.34) 52%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0, #000 24%, rgba(0, 0, 0, 0.34) 52%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* ...and burns brighter there than in the app: a wider, warmer glow around it */
body[data-page="landing"] #glow { opacity: 1; filter: blur(12px) saturate(1.45); }
body[data-page="landing"] #glow-wide { opacity: 0.9; filter: blur(44px) saturate(1.6); }
.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;
  user-select: none; -webkit-user-select: none;
}
.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; }


.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); }
.link:disabled, .link:disabled:hover { opacity: .55; cursor: default; text-decoration: none; color: var(--muted); }
.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: start center; padding: 16px;
  background: rgba(4, 5, 7, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  /* a window taller than the screen scrolls (the account window on a phone
     was cut off below Sync, out of reach); one that fits sits in the middle,
     by its auto margins, which give way to nothing once it no longer fits */
  overflow-y: auto; overscroll-behavior: contain;
}
.modal > .card { margin-block: auto; }
.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; }
.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,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="30" viewBox="0 0 26 30"><path d="M3 2.2 L3 23.4 L8.6 18.2 L12.2 26.4 L16.2 24.6 L12.6 16.6 L20.2 16.2 Z" fill="%23F77132" stroke="%23140A06" stroke-width="1.6" stroke-linejoin="round"/></svg>') 3 2, auto;
  --arrow-hot: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="30" viewBox="0 0 26 30"><path d="M3 2.2 L3 23.4 L8.6 18.2 L12.2 26.4 L16.2 24.6 L12.6 16.6 L20.2 16.2 Z" fill="%23FFE7C2" stroke="%23140A06" stroke-width="1.6" stroke-linejoin="round"/></svg>') 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; }

/* ── 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(2, 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: -9px; font-style: normal; font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; 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; }
}

/* ── account ────────────────────────────────────────────────────────── */
.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; }
.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, delete ──────────────────────────────────────────── */
.acc-form { display: grid; gap: 8px; margin-top: 12px; }
/* a password field with its eye on the right */
.pw-wrap { position: relative; display: block; min-width: 0; }
.pw-wrap[hidden], .pw-wrap:has(> input[hidden]) { display: none; }
.pw-wrap > input { width: 100%; box-sizing: border-box; padding-right: 46px !important; }
.pw-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; color: rgba(254, 246, 228, 0.78); background: transparent; transition: color .2s, background .2s;
}
@media (hover: hover) { .pw-eye:hover { color: var(--ink); background: rgba(255, 240, 228, 0.06); } }
.pw-eye:focus-visible { outline: 1px solid var(--tint); outline-offset: 1px; }
.pw-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pw-eye .slash { display: none; }
/* shown: the eye takes the accent, so the state reads at a glance */
.pw-eye[aria-pressed="true"] { color: var(--tint); }
.pw-eye[aria-pressed="true"] .slash { display: inline; }
/* a finger, not a pointer: a bigger eye and a bigger place to tap; it was
   a dim 18 px mark next to bright dots, easy to miss on a phone */
@media (pointer: coarse), (max-width: 720px) {
  .pw-wrap > input { padding-right: 56px !important; }
  .pw-eye { right: 2px; width: 48px; height: 48px; color: var(--ink); }
  .pw-eye svg { width: 24px; height: 24px; stroke-width: 2; }
}
.up a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 520px) { .acc-form { grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; } }
.acc-form input:not([type="checkbox"]) {
  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; }

#acc-pw-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: #FEF6E4;
  --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,
.eyebrow, .card h2, .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; }
.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: 13px; 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));
  /* the room above the dock, minus the same 14px of air kept below the panel */
  max-height: calc(100vh - var(--dock-bottom) - var(--dock-h) - 28px);
  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; }


.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; }
.link.quiet { color: var(--muted); text-decoration: none; font-size: inherit; }
.link.quiet:hover { color: var(--ink); }
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; }
.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 { 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-bottom) - var(--dock-h) - 20px); }
  .stage { padding-bottom: calc(var(--dock-h) + 30px); }
  .foot { justify-content: center; }
}
@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"] .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,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="24" viewBox="0 0 22 24"><path d="M4 3 L4 20 L8.6 15.8 L16.4 15.4 Z" fill="%23120C0B" stroke="%23FEF6E4" stroke-width="1.3" stroke-linejoin="round"/></svg>') 4 3, auto;
  --arrow-hot: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="24" viewBox="0 0 22 24"><path d="M4 3 L4 20 L8.6 15.8 L16.4 15.4 Z" fill="%23120C0B" stroke="%23FFFFFF" stroke-width="1.5" stroke-linejoin="round"/></svg>') 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,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .9  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  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-hl.snap { transition: opacity .25s var(--ease), background .25s; }
.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]) .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; }


/* 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]) .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; }

  /* the plan and About: a quiet line under the header */
  .foot {
    grid-row: 2; justify-content: space-between; padding: 2px 0 0; font-size: 12.5px;
    transition: opacity .5s var(--ease);
  }

  /* 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 { 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: 13px; 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'><circle cx='12' cy='13.5' r='7.5'/><path d='M12 13.5V9.8M9.8 3.5h4.4M18.2 7.3l1.3-1.3'/></g></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'><circle cx='12' cy='13.5' r='7.5'/><path d='M12 13.5V9.8M9.8 3.5h4.4M18.2 7.3l1.3-1.3'/></g></svg>") 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; }

  .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-wd { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.st-wd-label { display: block; margin-bottom: 10px; font-size: 12.5px; color: var(--muted); }
.st-wd-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.st-wd-btn {
  position: relative;
  height: 34px; border-radius: 10px; font-size: 12px; font-weight: 500; color: var(--muted);
  background: rgba(255, 240, 228, .035); box-shadow: inset 0 0 0 1px transparent;
  transition: background .2s, color .2s, box-shadow .2s;
}
.st-wd-btn:hover { color: var(--ink); background: rgba(255, 240, 228, .075); }
.st-wd-btn[aria-pressed="true"] { color: var(--ink); background: var(--tint-soft); box-shadow: inset 0 0 0 1px var(--tint); }
.st-wd-btn[aria-pressed="true"]::after {
  content: '★'; position: absolute; top: -5px; right: -3px; font-size: 9px; line-height: 1; color: var(--tint);
}
.st-wd-hint { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
/* the week's bars: a star by the label marks a day that counts toward the streak */
.st-col.work span::after { content: '★'; margin-left: 3px; font-size: 8px; color: var(--tint); vertical-align: 2px; }
.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: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) { .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; }
}

/* 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: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; }

/* ── 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; }
}

/* the session controls. Paused, Resume is the one light thing in the dock;
   playing, Pause steps back into it. End session always wears the accent:
   its own colour on a wash of it, and a square, the sign for stop. */
.app[data-state="paused"] .dock .primary { color: #160C06; background: var(--ink); }
.app[data-state="paused"] .dock .primary:hover { background: color-mix(in srgb, var(--ink) 88%, var(--tint)); }
.dock #end {
  display: inline-flex; align-items: center; gap: 10px; padding: 0 20px;
  color: var(--tint); background: color-mix(in srgb, var(--tint) 16%, transparent);
}
.dock #end::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 3px; background: currentColor; }
.dock #end:hover { color: var(--tint); background: color-mix(in srgb, var(--tint) 24%, transparent); }
@media (max-width: 720px) {
  .dock #end { justify-content: center; color: var(--tint); background: color-mix(in srgb, var(--tint) 16%, transparent); }
  .dock #end:active { background: color-mix(in srgb, var(--tint) 24%, transparent); }
}

/* atmospheres on a desktop: two columns, each line on one line — the
   panel is as wide as the longest of them, and the note under the list
   takes whatever width that is rather than setting it */
@media (min-width: 721px) {
  #panel-pack { width: max-content; max-width: calc(100vw - 24px); }
  #packs { grid-template-columns: repeat(2, 1fr); }
  #packs .mode-opt.atmo small { white-space: nowrap; }
  #panel-pack .panel-note { width: 0; min-width: 100%; }
}

/* ── the panels, after the Figma layout (2026-10) ──────────────────────────
   Every sheet off the dock and Customize: dark glass with a hairline and
   24 px corners, a 16 px title, notes in 11 px. A choice is a row on a
   faint fill with its sign in a 36 px circle; the chosen one is told only
   by its circle, which takes the accent. All of it inside the app: the
   landing draws its own. */
/* the glass itself: a warm smoke rather than black, so the scene shows
   through as colour and not as a dark hole; a hairline with a lit top
   edge, and a soft shadow instead of a black halo */
.app {
  --glass-bg: rgba(40, 33, 31, .46);
  --glass-blur: blur(28px) saturate(1.6);
  --glass-edge: inset 0 0 0 1px rgba(254, 246, 228, .08), inset 0 1px 0 rgba(254, 246, 228, .07);
  --glass-drop: 0 18px 50px -24px rgba(0, 0, 0, .55);
}
@media (min-width: 721px) {
  .app .panel {
    padding: 16px; border-radius: 24px; background: var(--glass-bg);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-edge), var(--glass-drop);
  }
}
.app .panel-title { margin: 0 0 16px; font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--ink); }
.app .panel-note { margin: 16px 0 0; font-size: 11px; line-height: 1.45; color: rgba(254, 246, 228, .7); }
#panel-mode .panel-note { color: rgba(254, 246, 228, .5); }
.app .panel-sub { margin: 0 0 12px; font-size: 11px; font-weight: 400; color: rgba(254, 246, 228, .7); }
.link.inline { display: inline; height: auto; padding: 0; font: inherit; color: var(--tint); text-decoration: none; }
.link.inline:hover { text-decoration: underline; }
.app .modes { gap: 6px; }
.app .panel .mode-opt.atmo, .app .panel .preset {
  grid-template-columns: 36px 1fr; column-gap: 10px; row-gap: 2px; align-items: center;
  padding: 12px 14px; border-radius: 20px; background: rgba(254, 246, 228, .05); box-shadow: none;
}
.app .panel .preset { display: grid; }
.app .panel .preset .preset-txt { gap: 2px; }
.app .panel .mode-opt.atmo:hover, .app .panel .preset:hover { background: rgba(254, 246, 228, .08); }
.app .panel .mode-opt.atmo[aria-checked="true"], .app .panel .preset[aria-checked="true"] { background: rgba(254, 246, 228, .05); box-shadow: none; }
.app .panel .mode-opt.atmo b, .app .panel .preset b { font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.app .panel .mode-opt.atmo small, .app .panel .preset small { font-size: 11px; line-height: 1.3; color: rgba(254, 246, 228, .5); }
/* the sign in its circle: the circle is the svg's own background, the
   ring the icon set draws is not used, and the glyph is drawn at about
   24 px so it fills the circle without touching it */
.app .panel .ico.solar { width: 36px; height: 36px; border-radius: 50%; background: rgba(254, 246, 228, .06); color: rgba(254, 246, 228, .5); transition: background .25s var(--ease), color .25s var(--ease); }
.app .panel .ico.solar .ring { display: none; }
.app .panel .ico.solar g { transform: scale(1.02); transform-origin: 12px 12px; }
/* hover only where there is a pointer: a tap leaves :hover stuck on a
   phone, and the chosen sign stayed light until the panel was reopened */
@media (hover: hover) {
  .app .panel .mode-opt:hover .ico.solar, .app .panel .preset:hover .ico.solar { color: rgba(254, 246, 228, .8); }
}
.app .panel [aria-checked="true"] > .ico.solar, .app .panel [aria-checked="true"]:hover > .ico.solar { background: color-mix(in srgb, var(--tint) 10%, transparent); color: var(--tint); }
.app .panel .mode-opt.locked .ico.solar { opacity: .6; }

/* Customize: the mixer as thin light sliders with their figure beside,
   the sections parted by a hairline, the time of day as four tiles */
#panel-tune .mix { gap: 10px; }
#panel-tune .mix-row { grid-template-columns: 1fr 150px 24px; gap: 10px; font-size: 14px; font-weight: 500; }
#panel-tune .mix-row output { font-family: var(--sans); font-size: 14px; font-weight: 500; color: rgba(254, 246, 228, .7); }
#panel-tune .mix-row.first { padding-bottom: 0; border-bottom: 0; }
#panel-tune .panel-sub:not(:first-of-type) { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(254, 246, 228, .1); }
#panel-tune .presets { gap: 6px; }
#panel-tune .modes.row { gap: 8px; }
#panel-tune .modes.row .mode-opt { height: auto; min-height: 52px; padding: 12px 14px; border-radius: 20px; background: rgba(254, 246, 228, .05); box-shadow: none; }
#panel-tune .modes.row .mode-opt b { font-size: 14px; font-weight: 500; color: var(--ink); }
#panel-tune .modes.row .mode-opt[aria-checked="true"] { background: color-mix(in srgb, var(--tint) 10%, transparent); box-shadow: none; }
#panel-tune .modes.row .mode-opt[aria-checked="true"] b { color: var(--tint); }
#panel-tune .modes.row .mode-opt small { font-size: 10px; color: rgba(254, 246, 228, .5); }
.app input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--ink) var(--fill, 70%), rgba(254, 246, 228, .1) var(--fill, 70%)); }
.app input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(254, 246, 228, .1); }
.app input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ink); }
.app input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; background: var(--ink); box-shadow: 0 0 6.5px rgba(0, 0, 0, .25); }
.app input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: var(--ink); box-shadow: 0 0 6.5px rgba(0, 0, 0, .25); }
/* in the dock: a little thinner and smaller */
.app .volume input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 1.5px; }
.app .volume input[type="range"]::-moz-range-track, .app .volume input[type="range"]::-moz-range-progress { height: 3px; }
.app .volume input[type="range"]::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5.5px; box-shadow: -2px 0 4px rgba(0, 0, 0, .25); }
.app .volume input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; box-shadow: -2px 0 4px rgba(0, 0, 0, .25); }

/* the dock: the same glass, a hairline, its labels at half strength */
@media (min-width: 721px) {
  .app .dock {
    padding: 6px; gap: 8px; background: var(--glass-bg);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-edge), var(--glass-drop);
  }
  .app .dock .pick { padding: 0 20px; }
  .app .dock .pick small { font-size: 13px; color: rgba(254, 246, 228, .5); }
  .app .dock .pick span { font-size: 14px; font-weight: 500; }
  /* while the dock changes width it glides there (see smoothDock) */
  .app .dock.sizing { overflow: hidden; transition: width .5s cubic-bezier(.22, 1, .36, 1), opacity .8s var(--ease), transform .8s var(--ease); }
  .app .dock .primary, .app .dock #end { padding: 0 20px; }
  /* nothing in the dock gives up its width: while the dock glides to a new
     size it clips at its edge rather than letting controls overlap */
  .app .dock .pick, .app .dock .primary, .app .dock #end, .app .dock #skip-break, .app .dock .volume, .app .dock .tool.icon { flex-shrink: 0; }
}
.app[data-state="paused"] .dock .primary { color: #2B1709; }
.app[data-state="playing"] .dock .primary, .app[data-state="break"] .dock .primary { background: rgba(254, 246, 228, .1); }

/* the goal: "55 min" over a wide pill. The fill is the accent; six dots
   sit evenly along it, dark on the fill and faint off it; the thumb is a
   light disc with a soft shadow. --p (0–1) carries the
   position, registered so it glides; the number rolls in from the side it
   moves to, and opening the panel sweeps the fill up to where it stands. */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
#panel-goal { width: min(390px, calc(100vw - 24px)); }
@media (max-width: 720px) { #panel-goal { width: 100%; } }   /* a sheet across the phone, like the others */
.goal-dial { --p: 0; --th: 36px; display: grid; gap: 16px; transition: --p .45s var(--spring-soft); }
.goal-dial.drag { transition-duration: .12s; transition-timing-function: var(--ease); }
.goal-dial.sweep { animation: goal-sweep .8s var(--spring-soft); }
@keyframes goal-sweep { from { --p: 0; } }
.goal-read { display: flex; align-items: baseline; gap: 5px; height: 21px; overflow: hidden; }
.goal-read b { display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--ink); font-variant-numeric: tabular-nums; }
.goal-read small { font-size: 16px; font-weight: 500; color: rgba(254, 246, 228, .7); }
.goal-read b.roll[data-dir="up"] { animation: goal-up .32s var(--spring-soft); }
.goal-read b.roll[data-dir="down"] { animation: goal-down .32s var(--spring-soft); }
@keyframes goal-up { from { transform: translateY(10px); opacity: 0; } }
@keyframes goal-down { from { transform: translateY(-10px); opacity: 0; } }
.goal-track { position: relative; height: 36px; }
.goal-rail, .goal-fill { position: absolute; left: 0; right: 0; top: 6px; height: 24px; border-radius: 100px; }
.goal-rail { background: rgba(254, 246, 228, .05); }
.goal-fill { background: var(--tint); clip-path: inset(0 calc(100% - var(--th) / 2 - var(--p) * (100% - var(--th))) 0 0 round 100px); }
.goal-dots { position: absolute; inset: 0 calc(var(--th) / 2); pointer-events: none; }
.goal-dots i { position: absolute; top: 50%; left: calc(var(--at) * 100%); width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(0, 0, 0, .2); }
.goal-thumb {
  position: absolute; top: 0; left: calc(var(--p) * (100% - var(--th))); width: var(--th); height: var(--th);
  border-radius: 50%; background: var(--ink); pointer-events: none; box-shadow: 0 0 9.3px rgba(0, 0, 0, .25);
  transition: transform .4s var(--spring);
}
.goal-dial.drag .goal-thumb { transform: scale(1.08); }
.goal-track:has(#goal-range:focus-visible) .goal-thumb { outline: 2px solid var(--tint); outline-offset: 3px; }
#goal-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: none; touch-action: none;
}
#goal-range::-webkit-slider-runnable-track { height: 36px; background: none; }
#goal-range::-webkit-slider-thumb { -webkit-appearance: none; width: 36px; height: 36px; margin-top: 0; }
#goal-range::-moz-range-thumb { width: 36px; height: 36px; border: 0; }
#panel-goal .panel-note { margin: 16px 0 0; text-align: left; }
@media (prefers-reduced-motion: reduce) {
  .goal-dial, .goal-thumb { transition: none; }
  .goal-dial.sweep, .goal-read b.roll { animation: none; }
}

/* ── your focus, after the Figma layout (2026-10) ──────────────────────────
   Three tiles on top (today, the streak, the week), the week as seven
   rounded columns — light, today's in the accent — then all time as three
   more tiles, and the time by mode and by atmosphere as thin accent bars.
   Sections are parted by a hairline; headings are 11 px. */
@media (min-width: 721px) { #panel-stats { width: min(440px, calc(100vw - 32px)); } }
@media (max-width: 720px) { #panel-stats .st-trio .st-num, #panel-stats .st-trio .st-num:first-child { padding: 12px 6px; } }
#panel-stats .st-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#panel-stats .st-trio .st-num, #panel-stats .st-trio .st-num:first-child {
  padding: 12px 14px; border: 0; border-radius: 20px; background: rgba(254, 246, 228, .05); text-align: center;
}
#panel-stats .st-num b { font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.25; }
#panel-stats .st-num small { margin-top: 2px; font-size: 11px; line-height: 1.3; color: rgba(254, 246, 228, .5); }
#panel-stats .st-top { padding-bottom: 0; border-bottom: 0; }
#panel-stats .st-top .st-num b { font-size: 14px; font-weight: 500; letter-spacing: 0; }
#panel-stats .st-week, #panel-stats .st-sec { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid rgba(254, 246, 228, .1); }
#panel-stats .st-week { height: auto; align-items: stretch; }
#panel-stats .st-col { height: 154px; gap: 6px; }
#panel-stats .st-bar { border-radius: 16px; background: rgba(254, 246, 228, .05); overflow: hidden; }
#panel-stats .st-bar i { border-radius: 16px; background: var(--ink); }
#panel-stats .st-col:hover .st-bar i, #panel-stats .st-col:focus-visible .st-bar i { background: color-mix(in srgb, var(--ink) 85%, var(--tint)); }
#panel-stats .st-col.today .st-bar { background: color-mix(in srgb, var(--tint) 10%, transparent); }
#panel-stats .st-col.today .st-bar i { background: var(--tint); }
#panel-stats .st-col.today:hover .st-bar i, #panel-stats .st-col.today:focus-visible .st-bar i { background: color-mix(in srgb, var(--tint) 85%, white); }
#panel-stats .st-col span { font-size: 11px; font-weight: 400; color: rgba(254, 246, 228, .5); }
#panel-stats .st-col.today span { color: var(--tint); }
#panel-stats .stat-h { margin: 0 0 12px; font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(254, 246, 228, .7); }
#panel-stats .st-list { gap: 12px; }
#panel-stats .st-item { row-gap: 8px; font-size: 14px; font-weight: 500; }
#panel-stats .st-item b { font-weight: 500; color: rgba(254, 246, 228, .7); }
#panel-stats .st-item i { height: 4px; border-radius: 100px; background: color-mix(in srgb, var(--tint) 15%, transparent); }
#panel-stats .st-item em { border-radius: 100px; background: var(--tint); }
#panel-stats > .panel-note { margin-top: 16px; }

/* the session timer in the logo's face: Sentient (Lanthen Serif), regular.
   The digits keep their fixed boxes (.timer .d), so the line never shifts.
   The stack is written out: --serif is the landing's variable. */
.timer { font-family: "Lanthen Serif", "Iowan Old Style", Georgia, serif; font-weight: 400; letter-spacing: 0; font-feature-settings: "tnum" 1, "lnum" 1; }

/* the goal's label in the dock glides to its new width (setGoalLabel) */
.app .dock #goal-label { display: inline-block; white-space: nowrap; }
.app .dock #goal-label.gliding { overflow: hidden; transition: width .4s cubic-bezier(.22, 1, .36, 1); }

/* the language: two letters in the header, the one in use lit */
#btn-lang { display: inline-flex; align-items: center; gap: 3px; width: auto; padding: 0 10px; font-size: 13px; font-weight: 500; letter-spacing: .02em; }
#btn-lang b { font-weight: 500; color: rgba(254, 246, 228, .4); transition: color .2s var(--ease); }
#btn-lang b.on { color: var(--ink); }
#btn-lang i { font-style: normal; color: rgba(254, 246, 228, .25); }
#btn-lang:hover b:not(.on) { color: rgba(254, 246, 228, .75); }

/* Lanthen Plus: "Lanthen" in the light, "Plus" in the accent */
.plus-logo { display: block; flex: none; height: 14px; width: auto; aspect-ratio: 1387 / 170; overflow: visible; fill: var(--ink); color: var(--tint); }

/* the plan button, bottom left: on the dock's glass */
#plan-badge {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 100px;
  font-size: 13px; font-weight: 500; color: rgba(254, 246, 228, .7); background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge); transform: none;
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
#plan-badge:hover { background: rgba(52, 44, 41, .55); box-shadow: inset 0 0 0 1px rgba(254, 246, 228, .12), inset 0 1px 0 rgba(254, 246, 228, .09); transform: none; }
#plan-badge:active { transform: scale(.97); }
#plan-badge #plan-text:empty { display: none; }
#plan-badge[data-plan="free"] #plan-text { color: var(--tint); }
#plan-badge .plus-only { display: none; height: 14px; width: auto; aspect-ratio: 441 / 170; color: var(--tint); }
@media (max-width: 720px) {
  #plan-badge .plus-logo, #plan-badge #plan-text { display: none; }
  #plan-badge .plus-only { display: block; }
}

/* every window in the app: the panels' glass, a 16 px title */
.app .modal .card {
  border: 0; border-radius: 24px; padding: 20px; background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), 0 30px 80px -30px rgba(0, 0, 0, .6);
}
.app .modal .card-head { margin-bottom: 16px; }
.app .modal .card-head .eyebrow { font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); }
.app .modal .card-head .plus-logo { height: 18px; }
.app #acc-modal .acc-form input:not([type="checkbox"]), .app #up-modal input {
  border: 0; border-radius: 14px; background: rgba(254, 246, 228, .05); box-shadow: inset 0 0 0 1px rgba(254, 246, 228, .06);
}

/* the account: each fact a tile — what it is small above, the fact below;
   the actions as quiet pills; the rarer things behind a hairline */
#acc-in .acc-rows { display: grid; gap: 6px; }
#acc-in .acc-row { grid-template-columns: 1fr; gap: 2px; align-items: start; padding: 12px 14px; border: 0; border-radius: 20px; background: rgba(254, 246, 228, .05); }
#acc-in .acc-label { font-family: var(--sans); font-size: 11px; letter-spacing: 0; text-transform: none; color: rgba(254, 246, 228, .5); }
#acc-in .acc-val, #acc-in .acc-val b, #acc-in .acc-row .acc-val span { font-size: 14px; font-weight: 500; color: var(--ink); }
#acc-in .acc-val small { font-size: 11px; color: rgba(254, 246, 228, .5); }
#acc-in .acc-pro-go {
  align-self: flex-start; margin-top: 8px; height: 32px; padding: 0 14px; border-radius: 100px;
  font-size: 13px; font-weight: 500; color: var(--tint); background: color-mix(in srgb, var(--tint) 10%, transparent);
}
#acc-in .acc-pro-go:hover { transform: none; background: color-mix(in srgb, var(--tint) 18%, transparent); }
#acc-in .acc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
#acc-in .acc-btn { height: 40px; padding: 0 16px; border-radius: 100px; font-size: 14px; font-weight: 500; background: rgba(254, 246, 228, .08); box-shadow: none; }
#acc-in .acc-btn:hover { background: rgba(254, 246, 228, .12); }
#acc-in .acc-more { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(254, 246, 228, .1); }
#acc-in .acc-more summary { font-size: 14px; font-weight: 500; color: var(--ink); }
#acc-in .acc-more summary::before { color: rgba(254, 246, 228, .5); }
#acc-in > .card-copy.tiny { margin-top: 16px; font-size: 11px; line-height: 1.45; color: rgba(254, 246, 228, .7); }

/* the offer: prices as tiles */
#up-modal .price { border: 0; border-radius: 20px; background: rgba(254, 246, 228, .05); box-shadow: none; }
#up-modal .price:hover { background: rgba(254, 246, 228, .08); }

/* Plus: the window should feel like what it is. A curtain of light in
   glyphs (plusSky in main.js) bleeds to the window's top edge and fades into the
   glass; over it the logo, the date set large in Lanthen Serif, the days
   left in an accent pill. A thin ring of light runs round the window.
   What Plus opens comes as tiles that rise one after another, the
   atmospheres across the top with their five signs. One bright button. */
@property --plus-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#plus-modal .plus-card {
  position: relative; width: min(440px, 100%); overflow: hidden; isolation: isolate;
  box-shadow: var(--glass-edge), 0 30px 80px -30px rgba(0, 0, 0, .6), 0 0 90px -30px color-mix(in srgb, var(--tint) 45%, transparent);
}
#plus-modal .plus-card::before {
  content: ""; position: absolute; inset: 0; z-index: 3; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--plus-a), transparent 0 62%, color-mix(in srgb, var(--tint) 70%, transparent) 76%, #FFE2BC 82%, color-mix(in srgb, var(--tint) 70%, transparent) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: plus-ring 7s linear infinite;
}
@keyframes plus-ring { to { --plus-a: 360deg; } }
.plus-hero { position: relative; margin: -20px -20px 0; padding: 20px 20px 26px; }
.plus-field {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 92%); mask-image: linear-gradient(to bottom, #000 45%, transparent 92%);
  background: radial-gradient(ellipse 80% 90% at 70% 0%, color-mix(in srgb, var(--tint) 22%, transparent), transparent 70%);
}
.plus-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plus-field[hidden] { display: none; }
.plus-field canvas:nth-child(1) { z-index: 1; opacity: .8; }
.plus-field canvas:nth-child(2) { filter: blur(9px) saturate(1.4); opacity: .9; mix-blend-mode: screen; }
.plus-field::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(14, 11, 10, .7), rgba(14, 11, 10, 0) 45%); }
.app #plus-modal .card-head { margin-bottom: 64px; }
.app #plus-modal .card-head .plus-logo { height: 24px; }
/* the date, then under it the days left as a soft tag (a lit dot and the
   words, no outline), then in a trial the meter, each with room around it */
.plus-until { display: grid; justify-items: start; }
.plus-until small { margin-bottom: 6px; font-size: 12px; color: rgba(254, 246, 228, .7); }
.plus-until b {
  font-family: "Lanthen Serif", "Iowan Old Style", Georgia, serif; font-size: 34px; font-weight: 400; line-height: 1.05;
  letter-spacing: -0.01em; white-space: nowrap; color: var(--ink); text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}
.plus-left {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; margin-top: 16px; padding: 0 14px 0 12px; border-radius: 100px;
  font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; color: color-mix(in srgb, var(--tint) 70%, #FFE2BC);
  background: color-mix(in srgb, var(--tint) 13%, transparent);
}
.plus-left::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--tint); box-shadow: 0 0 8px var(--tint);
}
.plus-until span:empty, .plus-until b:empty { display: none; }
.plus-meter { justify-self: stretch; height: 4px; margin-top: 18px; border-radius: 4px; background: rgba(254, 246, 228, .1); overflow: hidden; }
.plus-meter[hidden] { display: none; }
.plus-meter i { display: block; height: 100%; width: calc(var(--left, 1) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--tint), #FFE2BC); }
#plus-modal .panel-sub { margin: 10px 0 12px; font-size: 11px; font-weight: 400; color: rgba(254, 246, 228, .7); }
.plus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plus-grid li {
  display: grid; align-content: start; gap: 2px; padding: 14px; border-radius: 20px;
  background: rgba(254, 246, 228, .05); box-shadow: inset 0 0 0 1px rgba(254, 246, 228, .05);
  animation: item-in .6s var(--spring-soft) backwards; animation-delay: calc(var(--i, 0) * 60ms + 120ms);
  transition: background .25s var(--ease), transform .45s var(--spring);
}
.plus-grid li.wide {
  grid-column: 1 / -1;
  background: linear-gradient(120deg, color-mix(in srgb, var(--tint) 14%, transparent), rgba(254, 246, 228, .04) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 18%, transparent);
}
/* after the wide one, an odd last tile takes the whole row */
.plus-grid li:last-child:nth-child(even) { grid-column: 1 / -1; }
@media (hover: hover) { .plus-grid li:hover { background-color: rgba(254, 246, 228, .08); transform: translateY(-2px); } }
.plus-grid b { margin-top: 10px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.plus-grid small { font-size: 12px; line-height: 1.4; color: rgba(254, 246, 228, .55); }
.plus-grid .ico.solar { width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--tint) 12%, transparent); color: var(--tint); }
.plus-grid .ico.solar .ring { display: none; }
.plus-grid .ico.solar g { transform: scale(1.02); transform-origin: 12px 12px; }
.plus-packs { display: flex; }
.plus-packs .ico.solar { margin-right: -6px; background: #2a1d17; box-shadow: 0 0 0 2px rgba(30, 24, 22, .9); }
.plus-actions { margin-top: 16px; }
#plus-modal .plus-go {
  position: relative; overflow: hidden; width: 100%; height: 48px; justify-content: center; border: 0; border-radius: 100px;
  font-size: 15px; font-weight: 600; color: #1A0D06;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 75%, #FFE2BC), var(--tint));
  box-shadow: 0 12px 36px -14px color-mix(in srgb, var(--tint) 90%, transparent);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}
#plus-modal .plus-go::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
}
@media (hover: hover) {
  #plus-modal .plus-go:hover { transform: translateY(-1px); box-shadow: 0 16px 44px -12px color-mix(in srgb, var(--tint) 100%, transparent); }
  #plus-modal .plus-go:hover::after { transform: translateX(120%); transition: transform .8s var(--ease); }
}
#plus-modal .plus-go:active { transform: scale(.98); }
@media (max-width: 380px) { .plus-until b { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) {
  #plus-modal .plus-card::before { animation: none; }
  .plus-grid li { animation: none; }
}

/* the share card's window: a switch between the two shapes (each with a
   small frame of its own proportions), the card on a stage of a fixed
   height, so the window does not jump as the shape changes, and the
   actions under it */
.share-card { width: min(820px, 100%); }
.share-formats { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 16px; border-radius: 999px; background: rgba(255, 240, 228, .06); }
.share-formats button {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--muted); transition: background .25s var(--ease), color .25s var(--ease);
}
.share-formats button:hover { color: var(--ink); }
.share-formats button[aria-checked="true"] { color: #160C06; background: var(--ink); }
.share-ratio { display: inline-block; width: 16px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px currentColor; }
[data-fmt="story"] > .share-ratio { width: 10px; height: 16px; }
.share-stage {
  display: flex; align-items: center; justify-content: center; height: min(56vh, 432px); padding: 0; border-radius: 18px;
  background: rgba(0, 0, 0, .35); overflow: hidden;
}
.card .share-stage img {
  width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; border: 0; border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(254, 246, 228, .08), 0 24px 60px -24px rgba(0, 0, 0, .9);
  transition: opacity .25s var(--ease);
}
.share-stage.busy img { opacity: .3; }
.share-actions { margin-top: 18px; }
@media (max-width: 720px) {
  .share-stage { height: min(52vh, 440px); }
  .share-actions > button { flex: 1 1 auto; justify-content: center; }
}

/* no background (Customize, for slower devices): nothing is drawn */
body.no-bg canvas.layer { display: none; }

/* 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; }

/* six atmospheres on the first screen, in one row. Their lines are
   written to about the same length (26–31 characters), so every card
   reads as two even lines; narrower than a row allows, three over three */
.start-cards { grid-template-columns: repeat(6, minmax(0, 176px)); gap: 12px; width: min(100%, 1136px); }
.start-card { padding: 24px 14px 20px; gap: 8px; border-radius: 22px; }
.start-card .ico { width: 60px; height: 60px; margin-bottom: 8px; }
.start-card b { font-size: 18px; }
/* the kind of music on its own line under the name: a card is too narrow for both on one */
.start-card .genre { display: block; margin-top: 2px; font-size: 15px; font-weight: 400; }
.start-card .genre-dot { display: none; }
@media (max-width: 1160px) and (min-width: 721px) {
  .start-cards { grid-template-columns: repeat(3, minmax(0, 220px)); width: auto; }
}
/* on a phone the dock already picks the atmosphere: no cards, only the scene */
@media (max-width: 720px) { .start-pick { display: none; } }

/* ---------- 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 { position: relative; width: min(420px, 100%); padding: 40px 36px 32px; }
.modal.gate .card-head { display: none; }
/* the door's head: the logo alone in the middle; the cross belongs to the
   window's corner, the same 14 px from the top and the right edge, not to
   the logo's line (it sat off the padding and moved with the logo) */
.gate-head { display: flex; justify-content: center; align-items: center; margin-bottom: 28px; }
.gate-head[hidden] { display: none; }
.gate-head .gate-close { position: absolute; top: 14px; right: 14px; }
.gate-mark { line-height: 0; }
.card h2.gate-title { margin: 0 0 10px; font-size: 22px; font-weight: 500; line-height: 1.2; text-wrap: balance; }
.modal.gate #acc-why { font-size: 14px; line-height: 1.5; text-wrap: balance; }
/* everything on the door stands on the middle line; what you type and the
   names over the fields still read from the left */
.modal.gate #acc-out { text-align: center; }
.modal.gate #acc-out input, .modal.gate #acc-out .acc-field { text-align: left; }
/* air between the groups: head, the quick way, the fields, the way out */
.modal.gate .acc-quick { margin-top: 28px; }
.modal.gate .acc-or { margin: 22px 0 !important; }
.modal.gate .acc-form.stack { gap: 10px; }
.modal.gate .acc-form.stack .primary.small { margin-top: 6px; }
.modal.gate #acc-out .acc-links { margin-top: 18px; }
.modal.gate #acc-out .acc-links .link { text-decoration: none; }
.modal.gate .acc-switch { margin-top: 28px; }
.gate-title[hidden] { display: none; }
@media (max-width: 480px) {
  .modal.gate { padding: 0; }
  /* a sheet from the bottom: its top margin takes the free space */
  .modal.gate .card.up { width: 100%; margin-block: auto 0; border-radius: 26px 26px 0 0; padding: 36px 24px calc(28px + env(safe-area-inset-bottom)); }
  .gate-head .gate-close { top: 12px; right: 12px; }
}

/* ---------- the plan, bottom left: the offer on the free plan, a mark with Pro ---------- */
.foot-left { display: flex; align-items: center; gap: 16px; }
.plan {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px 0 13px; border: 0; border-radius: 999px;
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap;
  color: #1A0D06; background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 80%, #FFE2BC), var(--tint));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint) 55%, white), 0 10px 30px -12px color-mix(in srgb, var(--tint) 90%, transparent);
  transition: transform .2s var(--ease), box-shadow .25s, background .25s;
}
.plan:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 80%, #FFE2BC), var(--tint)); border: 0; transform: translateY(-1px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint) 55%, white), 0 14px 40px -10px color-mix(in srgb, var(--tint) 100%, transparent); }
.plan:active { transform: scale(.97); }
.plan[data-plan="trial"], .plan[data-plan="pro"] {
  color: var(--ink); background: rgba(255, 240, 228, 0.06); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 40%, transparent);
}
.plan[data-plan="trial"]:hover, .plan[data-plan="pro"]:hover { background: rgba(255, 240, 228, 0.1); box-shadow: inset 0 0 0 1px var(--tint); }
.plan[data-plan="pro"] { height: 30px; padding: 0 13px 0 11px; font-size: 12.5px; font-weight: 500; }
/* the cookie question sits in the same corner until it is answered */
body.cookie-on .foot-left { opacity: 0; pointer-events: none; }

/* ---------- the profile: rows with air, one line of equal buttons ---------- */
#acc-modal:not(.gate) .card.up { width: min(540px, 100%); padding: 26px 30px 28px; }
#acc-modal:not(.gate) .card-head { margin-bottom: 6px; }
.acc-row { grid-template-columns: 136px minmax(0, 1fr); gap: 20px; align-items: center; padding: 15px 0; font-size: 14px;
  border-bottom: 1px solid rgba(255, 240, 228, 0.07); }
.acc-row:last-of-type { border-bottom: 0; }
.acc-label { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.acc-val { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--ink); }
.acc-row .acc-val span { color: var(--ink); }
.acc-val b { font-weight: 500; word-break: break-all; }
.acc-val small { font-size: 12.5px; color: var(--muted); word-break: break-all; }
.acc-val small:empty { display: none; }
.acc-pro-val { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.acc-pro-go { height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #1A0D06; background: var(--tint); transition: transform .2s var(--ease), opacity .2s; }
.acc-pro-go:hover { transform: translateY(-1px); }
.acc-pro-go:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.acc-pro-go:disabled:hover { transform: none; }
.acc-actions { display: grid; grid-template-columns: auto auto auto; gap: 10px; margin: 20px 0 6px; }
.acc-btn { height: 42px; padding: 0 16px; white-space: nowrap; border-radius: 12px; font-size: 13.5px; font-weight: 500; color: var(--ink);
  background: rgba(255, 240, 228, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 240, 228, 0.08); transition: background .2s, color .2s; }
.acc-btn:hover { background: rgba(255, 240, 228, 0.11); }
.acc-btn.quiet { color: var(--muted); }
.acc-btn.quiet:hover { color: var(--ink); }
.acc-btn:disabled { opacity: .5; }
#acc-in .acc-more { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 240, 228, 0.07); }
#acc-in .acc-more summary { font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; }
#acc-in .acc-more .acc-form { margin-top: 14px; }
/* changing the password: one field per row at full width, each with its
   name above it (a long password stays readable), the rule under the new
   one, then the button and the way out for a forgotten current one */
.acc-pw-form { gap: 14px; }
.acc-field { display: grid; gap: 6px; min-width: 0; }
.acc-field > label { font-size: 13px; line-height: 1.3; color: rgba(254, 246, 228, .72); }
.acc-field > small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.acc-pw-form .acc-pw-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 2px; }
.acc-pw-form .acc-pw-foot .primary.small { margin-top: 0; padding: 0 20px; }
.acc-pw-form .acc-pw-foot .link { font-family: var(--sans); font-size: 13px; }
@media (hover: hover) { .acc-pw-form .acc-pw-foot .link:hover { color: var(--ink); } }
@media (max-width: 520px) { .acc-pw-form .acc-pw-foot .primary.small { flex: 1 1 100%; } }
#acc-in > .card-copy.tiny:last-child { margin-top: 20px; font-size: 12px; line-height: 1.55; }
@media (max-width: 520px) {
  #acc-modal:not(.gate) .card.up { padding: 22px 20px 24px; }
  .acc-row { grid-template-columns: 1fr; gap: 6px; padding: 13px 0; }
  .acc-actions { grid-template-columns: 1fr; }
}

/* the cookie question: a small note, bottom left, until answered (src/analytics.js) */
.cookie-bar { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 200; width: min(340px, calc(100vw - 32px)); box-sizing: border-box;
  display: grid; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(18,13,12,.94); color: var(--ink, #FEF6E4);
  box-shadow: inset 0 0 0 1px rgba(255,236,220,.1), 0 16px 44px -12px rgba(0,0,0,.8); font-size: 12.5px; line-height: 1.5;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: cookie-in .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(10px); } }
.cookie-bar p { margin: 0; color: rgba(244,235,227,.78); }
.cookie-bar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cookie-bar .ghost, .cookie-bar .primary { height: 34px; padding: 0 14px; font-size: 12.5px; border-radius: 9px; }
.cookie-bar .ghost { color: var(--ink, #FEF6E4); background: rgba(255,240,228,.07); }
.cookie-bar .primary { color: #160C06; background: var(--ink, #FEF6E4); box-shadow: none; }
.cookie-actions { display: flex; gap: 8px; justify-content: flex-start; flex-wrap: wrap; }
/* on the landing the bottom middle is the player's: where the two would meet, the note sits above it */
@media (max-width: 1180px) { body[data-page="landing"] .cookie-bar { bottom: calc(88px + env(safe-area-inset-bottom)); } }
/* on a phone: the whole width, small type, the two buttons side by side */
@media (max-width: 560px) {
  .cookie-bar { left: 12px; right: 12px; width: auto; gap: 10px; padding: 11px 13px 12px; border-radius: 14px; font-size: 12px; line-height: 1.42; }
  .cookie-actions { flex-wrap: nowrap; }
  .cookie-bar .ghost, .cookie-bar .primary { flex: 1; height: 34px; justify-content: center; }
}
/* a form under the question lifts above it: its buttons are never hidden */
body.cookie-on .modal { padding-bottom: calc(var(--cookie-h, 0px) + 16px); overflow-y: auto; }
@media (max-width: 480px) {
  body.cookie-on .modal.gate { padding-bottom: 0; }
  body.cookie-on .modal.gate .card.up { padding-bottom: calc(var(--cookie-h, 0px) + 20px); }
}
/* the demo's own note waits above the cookie question */
body.cookie-on .ln-note { bottom: calc(150px + env(safe-area-inset-bottom)); }

/* ---------- the landing, at / (src/landing.html, src/landing.js) ----------
   The first screen is the app's own live field; below it the page goes dark
   and each section brings its own glyphs. Serif headings in one colour;
   glass for anything that is a piece of the product; mono only where it is
   a figure or a glyph. The page scrolls inside .landing. */
.landing:focus { outline: none; }
.landing {
  --serif: "Lanthen Serif", "Iowan Old Style", Georgia, serif;
  --panel: #100C0B;
  --panel-2: #161110;
  --hair: rgba(255, 236, 220, 0.08);
  --ink-2: color-mix(in srgb, var(--ink) 76%, transparent);
  --wrap: 1200px;
  --pad: clamp(16px, 3vw, 40px);
  position: fixed; inset: 0; z-index: 2; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased;
  /* local: the dark scrolls with the page, so only the first screen shows the field */
  background: linear-gradient(to bottom, rgba(8, 6, 10, 0) 0, rgba(8, 6, 10, 0) 72vh, rgba(8, 6, 10, 0.8) 105vh, var(--ground) 125vh) local;
  padding: 0 var(--pad);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { .landing { scroll-behavior: auto; } }
.landing .logo { display: block; height: 1em; width: auto; fill: currentColor; }

/* type: every heading one face, one colour */
.ln-h1, .ln-h2, .ln-stage-name, .ln-plan-price b, .ln-steps b, .ln-micro b, .ln-slogan, .ln-person-txt b {
  font-family: var(--serif); font-weight: 400; font-optical-sizing: auto; font-variant-numeric: lining-nums;
}
.ln-h1 {
  margin: 0; font-size: clamp(38px, 6vw, 92px); line-height: 1.02; letter-spacing: -0.028em; text-wrap: balance;
  text-shadow: 0 2px 48px rgba(8, 6, 10, 0.85);
}
.ln-h2 > span, .ln-h2 > em { display: block; }
.ln-h2 em { font-style: normal; color: inherit; }
/* a section inside a section: the same face, a step down */
.ln-h2.ln-h3 { font-size: clamp(28px, 3.6vw, 48px); }
/* free or Plus, wherever a thing can be picked: a mode, an atmosphere, a background sound.
   Both the same small quiet mark, a hairline on a faint ground; Plus only in a warmer word */
.ln-tag {
  flex: none; display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 5px; box-sizing: border-box;
  font-style: normal; font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; text-transform: none;
  color: color-mix(in srgb, var(--ink) 62%, transparent); background: rgba(255, 240, 228, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 240, 228, 0.1);
}
.ln-tag.pro { color: color-mix(in srgb, var(--tint) 78%, var(--ink)); }
/* an atmosphere's kind of music, after its name: the same line, a little paler */
.genre { font-weight: inherit; opacity: .6; }
.ln-h2 { margin: 0; font-size: clamp(34px, 5vw, 68px); line-height: 1.04; letter-spacing: -0.022em; text-align: center; text-wrap: balance; }
.ln-h2.left { text-align: left; }
.ln-lead { margin: 0; max-width: 40rem; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--ink-2); text-align: center; }
.ln-hint { margin: 22px auto 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ln-src { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }

/* the little flame over a heading: five glyphs wide, three high */
.ln-head { display: grid; justify-items: center; gap: 22px; margin: 0 auto clamp(48px, 6vw, 88px); }
.ln-glyph {
  margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.02; letter-spacing: 0.08em; color: var(--tint);
  text-shadow: 0 0 10px color-mix(in srgb, var(--tint) 75%, transparent), 0 0 24px color-mix(in srgb, var(--tint) 35%, transparent);
  white-space: pre; user-select: none;
}

/* ---- blocks that switch on as they come into view (src/landing.js, reveal):
   .rv on the block while it plays, .ri on each part, .go once a part is in
   view, --k its turn among the parts that arrived together ---- */
.rv .ln-head > .ln-glyph, .rv .ln-head > .ln-h2 > *, .rv .ln-head > .ln-lead, .rv .ln-head > .ln-src { opacity: 0; translate: 0 26px; filter: blur(12px); }
.rv .ln-head > .ln-h2:not(:has(> *)) { opacity: 0; translate: 0 26px; filter: blur(12px); }
.rv .ln-head.go > .ln-glyph, .rv .ln-head.go > .ln-h2 > *, .rv .ln-head.go > .ln-lead, .rv .ln-head.go > .ln-src {
  opacity: 1; translate: 0 0; filter: blur(0);
  transition: opacity 1s var(--ease), translate 1.1s var(--ease), filter 1s var(--ease);
}
.rv .ln-head.go > .ln-h2:not(:has(> *)) {
  opacity: 1; translate: 0 0; filter: blur(0);
  transition: opacity 1s var(--ease) .1s, translate 1.1s var(--ease) .1s, filter 1s var(--ease) .1s;
}
.rv .ln-head.go > .ln-h2 > span { transition-delay: .1s; }
.rv .ln-head.go > .ln-h2 > em { transition-delay: .24s; }
.rv .ln-head.go > .ln-lead { transition-delay: .34s; }
.rv .ln-head.go > .ln-src { transition-delay: .44s; }
.rv .ri { --d: calc(.15s + var(--k, 0) * .16s); }
/* a part's title waits for its letters (see decode), its text comes out of a blur */
.rv .ri > b:not(.dc), .rv .ri > li > b:not(.dc) { opacity: 0; }
.rv .ri > span:not(.ln-snd-foot) { opacity: 0; translate: 0 10px; filter: blur(6px); }
.rv .ri.go > span:not(.ln-snd-foot) {
  opacity: 1; translate: 0 0; filter: blur(0);
  transition: opacity .9s var(--ease) calc(var(--d) + .45s), translate 1s var(--ease) calc(var(--d) + .45s), filter .9s var(--ease) calc(var(--d) + .45s);
}
/* the line a picture switches on from */
@keyframes who-line {
  0% { opacity: 1; transform: scaleX(0); }
  38% { opacity: 1; transform: scaleX(1); }
  62%, 100% { opacity: 0; transform: scaleX(1); }
}
/* a title's letters while they assemble: each a glyph of noise over its own hidden letter */
.dc > i { position: relative; font-style: normal; }
.dc > i.z, .dc > i.q { color: transparent; }
.dc > i.q::after {
  content: attr(data-g); position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  font-family: var(--mono); font-size: .7em; font-weight: 400; line-height: 1; color: var(--tint);
  text-shadow: 0 0 10px color-mix(in srgb, var(--tint) 70%, transparent);
}

/* ---- navigation: across the whole width; the name left, the way in right ---- */
.ln-nav {
  position: fixed; z-index: 8; left: 0; right: 0; top: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(14px + env(safe-area-inset-top)) var(--pad) 0;
}
.ln-nav > * { pointer-events: auto; }
/* once the page moves, the top of the screen darkens: a shade with no edge,
   deepest behind the header and gone well below it, and a soft blur that
   fades out the same way (::after), so text passing under is quiet, not cut */
.ln-nav::before, .ln-nav::after {
  content: ""; position: absolute; inset: 0 0 -64px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
}
.ln-nav::before {
  background: linear-gradient(to bottom, rgba(8, 6, 10, 0.92) 0%, rgba(8, 6, 10, 0.84) 24%, rgba(8, 6, 10, 0.64) 46%,
    rgba(8, 6, 10, 0.38) 66%, rgba(8, 6, 10, 0.15) 84%, rgba(8, 6, 10, 0) 100%);
}
.ln-nav::after {
  z-index: -2; bottom: -24px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent); mask-image: linear-gradient(to bottom, #000 45%, transparent);
}
body.ln-scrolled .ln-nav::before, body.ln-scrolled .ln-nav::after, .landing.menu-open .ln-nav::before, .landing.menu-open .ln-nav::after { opacity: 1; }
.ln-brandmark { position: relative; display: flex; align-items: center; height: 44px; color: var(--ink); font-size: 21px; text-decoration: none; }
.ln-brandmark .logo { filter: drop-shadow(0 2px 14px rgba(8, 6, 10, 0.8)); }
.ln-pill {
  display: flex; align-items: center; gap: 2px; padding: 4px; height: 44px; box-sizing: border-box;
  border-radius: 14px; background: rgba(22, 15, 14, 0.62); box-shadow: inset 0 0 0 1px var(--hair), 0 10px 30px -12px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
}
.ln-pill-mid { position: absolute; left: 50%; top: calc(14px + env(safe-area-inset-top)); transform: translateX(-50%); }
.ln-link {
  display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap;
  transition: background .2s, color .2s;
}
.ln-link:hover { color: var(--ink); background: var(--hover); }
.ln-link.on { color: var(--ink); background: var(--press); }
.ln-solid, .ln-solid:hover { color: #160C06; background: var(--ink); }
.ln-solid:hover { background: #fff; }
.ln-menu-btn { display: none; }
.ln-burger { display: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ln-lang-short { display: none; font-size: 13px; letter-spacing: 0.02em; color: var(--muted); }
.ln-lang-short b { font-weight: 500; }
.ln-lang-short b.on { color: var(--ink); }
/* a phone: a burger for the menu, and the language is a switch, RU/ENG */
@media (max-width: 760px) {
  .ln-menu-btn { width: 40px; padding: 0; justify-content: center; }
  .ln-menu-btn span { display: none; }
  .ln-burger { display: block; }
  .ln-lang-long, #land-lang .ln-caret { display: none; }
  .ln-lang-short { display: inline; }
  #land-lang { padding: 0 8px; }
}
.ln-langbox { position: relative; }
#land-lang { gap: 4px; padding-right: 8px; }
.ln-caret { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .25s var(--ease); }
#land-lang[aria-expanded="true"] .ln-caret { transform: rotate(180deg); }
.ln-langs {
  position: absolute; right: -4px; top: calc(100% + 10px); display: grid; gap: 2px; min-width: 150px; padding: 6px; border-radius: 12px;
  background: rgba(22, 15, 14, 0.92); box-shadow: inset 0 0 0 1px var(--hair), 0 18px 40px -12px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); animation: note-in .25s var(--ease) both;
}
.ln-langs[hidden] { display: none; }
.ln-langs button { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 12px; border-radius: 8px; font-size: 14px; color: var(--ink-2); text-align: left; }
.ln-langs button:hover { color: var(--ink); background: var(--hover); }
.ln-langs button[aria-checked="true"] { color: var(--ink); }
.ln-langs button[aria-checked="true"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 8px var(--tint); }
@media (max-width: 1180px) {
  .ln-menu-btn { display: inline-flex; }
  .ln-pill-mid { display: none; }
  .landing.menu-open .ln-pill-mid {
    display: grid; justify-items: stretch; left: auto; right: var(--pad); top: calc(66px + env(safe-area-inset-top)); transform: none;
    height: auto; width: 230px; padding: 6px; gap: 2px;
  }
  .landing.menu-open .ln-pill-mid .ln-link { height: 40px; }
}

/* the narrowest phones: the three in the header still fit side by side, whatever the language */
@media (max-width: 400px) {
  .ln-nav { gap: 10px; }
  .ln-pill-end .ln-link { padding: 0 9px; }
}

/* ---- the dock at the bottom: the sound, and the way in beside it. It steps
   aside over anything it would cover: see onScroll in src/landing.js ---- */
.ln-dock {
  position: fixed; z-index: 8; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), padding .5s var(--ease);
}
/* a shade across the foot of the screen: the page fades out under the dock instead
   of showing through around it. Not on the first screen: the scene lives there. */
.ln-dock::before {
  opacity: 0; transition: opacity .4s var(--ease);
  content: ""; position: fixed; z-index: -1; left: 50%; bottom: calc(-18px - env(safe-area-inset-bottom)); width: 100vw; height: 150px; transform: translateX(-50%);
  background: linear-gradient(to top, rgba(8, 6, 10, 0.96) 30%, rgba(8, 6, 10, 0)); pointer-events: none;
}
body.ln-scrolled .ln-dock::before { opacity: 1; }
/* on the first screen, signed out: what is free, in one small line under the
   buttons. The dock rises to make room for it and settles once the page scrolls. */
.ln-dock-note {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; font-size: 12px; line-height: 16px; text-align: center;
  color: color-mix(in srgb, var(--ink) 72%, transparent); text-shadow: 0 1px 10px rgba(8, 6, 10, 0.9); text-wrap: balance;
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
}
body.ln-freeline:not(.ln-scrolled) .ln-dock { padding-bottom: 26px; }
body.ln-freeline:not(.ln-scrolled) .ln-dock-note { opacity: 1; visibility: visible; }
@media (max-width: 440px) {
  body.ln-freeline:not(.ln-scrolled) .ln-dock { padding-bottom: 42px; }
  .ln-dock-note { padding: 0 8px; }
}
/* while the cookie question is open it has that place: the line waits */
body.ln-freeline:not(.ln-scrolled):has(.cookie-bar) .ln-dock { padding-bottom: 0; }
body.ln-freeline:not(.ln-scrolled):has(.cookie-bar) .ln-dock-note { opacity: 0; visibility: hidden; }
.ln-player, .ln-cta {
  border-radius: 14px; box-sizing: border-box; height: 58px;
  box-shadow: inset 0 0 0 1px var(--hair), 0 18px 50px -14px rgba(0, 0, 0, 0.9);
}
.ln-player {
  display: flex; align-items: center; gap: 4px; padding: 6px; min-width: 0;
  background: rgba(22, 15, 14, 0.74); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
}
/* what plays: a mode and an atmosphere, each a small label over its value, as in the app's dock */
.ln-pick { display: grid; align-content: center; gap: 1px; height: 46px; padding: 0 14px; border-radius: 10px; text-align: left; transition: background .2s; }
.ln-pick:hover, .ln-pick[aria-expanded="true"], button.ln-player-txt:hover, button.ln-player-txt[aria-expanded="true"] { background: var(--hover); }
.ln-pick small { font-size: 11px; color: var(--muted); }
.ln-pick b { font-size: 14px; font-weight: 500; white-space: nowrap; }
.ln-pick:focus-visible, button.ln-player-txt:focus-visible, .ln-play:focus-visible { outline: 1px solid var(--tint); outline-offset: 2px; }
.ln-play {
  flex: none; min-width: 46px; height: 46px; margin-left: 6px; padding: 0 18px 0 12px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 500; white-space: nowrap;
  color: #160C06; background: var(--tint); transition: background .25s, transform .2s var(--ease), box-shadow .25s;
}
.ln-play:hover { background: color-mix(in srgb, var(--tint) 84%, #fff); }
.ln-play:active { transform: scale(.94); }
.ln-play svg, .ln-stage-play svg { width: 18px; height: 18px; fill: currentColor; }
.p-pause { display: none; }
.on .p-play { display: none; }
.on .p-pause { display: inline; }
.ln-player.on .ln-play { box-shadow: 0 0 22px -4px var(--tint); }
.ln-player-txt { display: none; gap: 1px; width: 200px; min-width: 0; height: 46px; align-content: center; padding: 0 10px; border-radius: 10px; text-align: left; }
.ln-player-txt b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-player-txt small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-eq { width: 34px; height: 22px; flex: none; margin: 0 10px 0 12px; }
/* the lists: over the dock, on its left or over the button that opened them */
.ln-menu {
  position: absolute; left: 0; bottom: calc(100% + 10px); width: 320px; max-width: calc(100vw - 24px); box-sizing: border-box;
  display: grid; gap: 8px; padding: 8px; border-radius: 16px; text-align: left;
  background: rgba(22, 15, 14, 0.95); box-shadow: inset 0 0 0 1px var(--hair), 0 24px 60px -16px rgba(0, 0, 0, 1);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); animation: note-in .25s var(--ease) both;
}
.ln-menu[hidden] { display: none; }
.ln-menu[data-show="mode"] [data-g="pack"], .ln-menu[data-show="pack"] [data-g="mode"] { display: none; }
.ln-menu-g > p { margin: 6px 10px 6px; font-size: 12px; color: var(--muted); }
.ln-menu-g > div { display: grid; gap: 2px; }
.ln-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 10px; text-align: left; color: var(--ink-2); transition: background .2s, color .2s; }
.ln-menu button:hover { color: var(--ink); background: var(--hover); }
.ln-menu button[aria-checked="true"] { color: var(--ink); background: var(--press); }
.ln-menu svg { flex: none; width: 24px; height: 24px; color: var(--muted); }
.ln-menu .ico .ring { display: none; }
.ln-menu button[aria-checked="true"] svg { color: var(--tint); }
.ln-menu button > span { display: grid; gap: 2px; min-width: 0; }
.ln-menu b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.ln-menu small { font-size: 12px; line-height: 1.3; color: var(--muted); }
.ln-cta {
  flex: none; display: inline-flex; align-items: center; padding: 0 24px; font-size: 15px; font-weight: 500; text-decoration: none;
  color: #160C06; background: var(--ink); transition: background .2s, transform .2s var(--ease);
}
.ln-cta:hover { background: #fff; }
.ln-cta:active { transform: scale(.97); }
body.ln-end .ln-dock, body.ln-dock-under .ln-dock { opacity: 0; transform: translateX(-50%) translateY(24px); pointer-events: none; }
/* a phone steps it aside over the same blocks as a desktop (the plans, the
   last call, the footer: each has its own way in); signed in, the header
   drops its "Open the app", which the dock already says */
@media (max-width: 760px) {
  .landing.inside #land-signin { display: none; }
  /* no room for the two labelled buttons: the button first, then the name, which opens both lists */
  .ln-pick, #ln-play-txt { display: none; }
  .ln-play { order: -1; width: 46px; margin: 0; padding: 0; }
  .ln-player-txt { display: grid; }
  .ln-eq { margin: 0 8px 0 4px; }
  .ln-menu { right: 0; width: auto; max-height: 68svh; overflow-y: auto; }
}
@media (max-width: 560px) {
  .ln-dock { width: calc(100vw - 24px); }
  .ln-player { flex: 1; }
  .ln-player-txt { flex: 1; width: auto; padding: 0 8px; }
  /* the words under the name may take a second line rather than be cut */
  .ln-player-txt small { white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .ln-eq { display: none; }
  .ln-cta { padding: 0 16px; font-size: 14px; }
}

/* ---- 1. hero: what it is, in a few lines, over the scene; the dock below picks and plays ---- */
.ln-hero {
  position: relative; min-height: 100svh; max-width: var(--wrap); margin: 0 auto;
  display: grid; place-items: center; text-align: center; padding: calc(96px + env(safe-area-inset-top)) 0 250px; box-sizing: border-box;
}
.ln-hero::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(1240px, 100%); height: 70%; transform: translate(-50%, -62%);
  background: radial-gradient(closest-side, rgba(8, 6, 10, 0.78), rgba(8, 6, 10, 0.5) 55%, rgba(8, 6, 10, 0)); pointer-events: none;
}
.ln-hero-in { position: relative; display: grid; justify-items: center; width: 100%; }
.ln-eyebrow { margin: 0 0 20px; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; color: var(--tint); text-wrap: balance; }
.ln-sub { margin: 26px 0 0; max-width: 35rem; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5; color: color-mix(in srgb, var(--ink) 86%, transparent); font-weight: 500; text-wrap: pretty; }
@media (max-width: 560px) {
  .ln-hero { padding-top: calc(76px + env(safe-area-inset-top)); padding-bottom: 210px; }
  .ln-eyebrow { margin-bottom: 14px; font-size: 13px; }
  .ln-sub { margin-top: 14px; }
}
/* a line decoding out of glyphs */
.ln-plan-price b .g { font-family: var(--mono); font-style: normal; font-size: 0.62em; color: var(--tint); opacity: .85; }

/* ---- sections ---- */
.ln-sec { max-width: var(--wrap); margin: 0 auto; padding-top: clamp(110px, 14vw, 180px); }
.ln-sec.narrow { max-width: 760px; }

/* ---- who it is for: the noise on the left, the attention on the right, you
   in the middle: one tall scene in glyphs. On a phone, one over the other. ---- */
.ln-who {
  margin: 0 auto; max-width: 1140px; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 23vw, 300px) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px);
}
.ln-who-pt { display: grid; justify-items: center; gap: 12px; text-align: center; transition: opacity .35s var(--ease); }
.ln-who-pt b { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.ln-who-pt span { max-width: 28ch; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
/* pointing at one point plays it up in the scene; the other steps back */
@media (hover: hover) { .ln-who:has(.ln-who-pt:hover) .ln-who-pt:not(:hover) { opacity: .45; } }
.ln-who-art { position: relative; aspect-ratio: 7 / 9; }
/* the tile: plain dark, a hairline edge */
.ln-who-art .ln-mini {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; box-sizing: border-box; border-radius: 24px;
  background: #0A0708; box-shadow: inset 0 0 0 1px var(--hair);
}
/* the line it switches on from */
.ln-who-art::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--tint) 18%, #FFE2BC 50%, var(--tint) 82%, transparent);
  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--tint) 55%, transparent);
}
@media (max-width: 760px) {
  .ln-who { grid-template-columns: minmax(0, 1fr); gap: 32px; justify-items: center; }
  .ln-who-art { width: min(320px, 100%); aspect-ratio: 1 / 1; }
}

/* the tile switches on like an old screen: a line, then the height */
#ln-who.rv .ln-who-art .ln-mini { clip-path: inset(50% 0 50% 0 round 2px); }
#ln-who.rv .ln-who.go .ln-who-art::after { animation: who-line 1.2s cubic-bezier(.7, 0, .2, 1) .1s both; }
#ln-who.rv .ln-who.go .ln-who-art .ln-mini { animation: who-open 1.2s cubic-bezier(.7, 0, .2, 1) .1s both; }
@keyframes who-open {
  0%, 36% { clip-path: inset(50% 0 50% 0 round 2px); filter: brightness(2.2); }
  100% { clip-path: inset(0 0 0 0 round 24px); filter: brightness(1); }
}
/* the two points come in from the tile: the noise first, the attention after it */
.ln-who-pt:first-child { --from: 48px; --d: .7s; }
.ln-who-pt:last-child { --from: -48px; --d: .92s; }
@media (max-width: 760px) { .ln-who-pt:first-child, .ln-who-pt:last-child { --from: 0px; } }
#ln-who.rv .ln-who-pt { opacity: 0; translate: var(--from) 14px; filter: blur(8px); }
#ln-who.rv .ln-who-pt b:not(.dc), #ln-who.rv .ln-who-pt span { opacity: 0; }
#ln-who.rv .ln-who.go .ln-who-pt {
  opacity: 1; translate: 0 0; filter: blur(0);
  transition: opacity .9s var(--ease) var(--d), translate 1.2s var(--ease) var(--d), filter .9s var(--ease) var(--d);
}
#ln-who.rv .ln-who.go .ln-who-pt span { opacity: 1; transition: opacity 1s var(--ease) calc(var(--d) + .45s); }

/* ---- what the sound does: three texts, each under a small moving line ---- */
.ln-mini { display: block; width: 100%; max-width: 260px; height: 64px; margin: 0 auto 4px; }

/* ---- why it works: the five figures, all in view at once: three, then two ---- */
.ln-facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.ln-fact {
  grid-column: span 2; display: flex; flex-direction: column; margin: 0; padding: clamp(22px, 2.4vw, 32px); border-radius: 24px;
  background: radial-gradient(90% 80% at 18% 110%, rgba(255, 118, 40, 0.1), rgba(255, 118, 40, 0) 65%), var(--panel);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.ln-fact:nth-child(n+4) { grid-column: span 3; }
.ln-fact > p { margin: 0; }
.ln-fact-n {
  font-family: var(--serif); font-weight: 400; font-variant-numeric: lining-nums;
  font-size: clamp(46px, 5.2vw, 76px); line-height: 0.95; letter-spacing: -0.035em; white-space: nowrap;
  text-shadow: 0 0 60px color-mix(in srgb, var(--tint) 25%, transparent);
}
.ln-fact-p { flex: 1; padding: 16px 0 20px; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.ln-fact-src {
  padding-top: 14px; border-top: 1px solid var(--hair);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.ln-fact-src::before { content: "↳ "; color: var(--tint); }
@media (max-width: 900px) {
  .ln-fact, .ln-fact:nth-child(n+4) { grid-column: span 3; }
  .ln-fact:last-child { grid-column: span 6; }
}
@media (max-width: 560px) {
  .ln-facts { gap: 10px; }
  .ln-fact, .ln-fact:nth-child(n+4) { grid-column: span 6; border-radius: 20px; }
  .ln-fact-p { padding-bottom: 16px; }
}

/* ---- ...then the ADHD part: the pulse across the whole width, and three texts under three small moving lines ---- */
.ln-subhead { margin-top: clamp(88px, 11vw, 140px); margin-bottom: clamp(40px, 5vw, 64px); }
.ln-subhead .ln-lead { max-width: 44rem; }
.ln-head .ln-src { margin: -8px 0 0; }
.ln-rhythm {
  display: grid; gap: 14px; padding: 26px clamp(20px, 3vw, 36px) 28px; margin-bottom: clamp(88px, 11vw, 140px);
  border-radius: 28px; background: radial-gradient(80% 90% at 50% 120%, rgba(255, 118, 40, 0.08), rgba(255, 118, 40, 0) 70%), var(--panel);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.ln-rhythm-head { margin: 0; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; }
.ln-rhythm-head > span { display: inline-flex; align-items: center; gap: 8px; }
.ln-rhythm-head svg { width: 16px; height: 16px; color: var(--muted); }
.ln-rhythm-head small { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--muted); }
.ln-scope { display: block; width: 100%; height: 190px; }
.ln-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 240, 228, 0.05); justify-self: center; width: min(460px, 100%); box-sizing: border-box; }
.ln-seg button { flex: 1; height: 36px; border-radius: 9px; font-size: 13px; color: var(--muted); transition: background .2s, color .2s; }
.ln-seg button b { font-family: var(--mono); font-weight: 400; }
.ln-seg button[aria-checked="true"] { color: var(--ink); background: rgba(255, 240, 228, 0.1); }
.ln-seg button[aria-checked="true"] b { color: var(--tint); }
.ln-foot-note { margin: 56px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
@media (max-width: 560px) { .ln-seg-mode { display: none; } }

/* ---- the three-column texts (sound, ADHD, how it works): each under a small moving line ---- */
.ln-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; text-align: center; }
.ln-steps li { display: grid; justify-items: center; align-content: start; gap: 12px; }
.ln-steps b { font-size: 24px; letter-spacing: -0.01em; }
.ln-steps span { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 32ch; text-wrap: balance; }
.rv .ln-steps > li { position: relative; }
.rv .ln-steps > li .ln-mini { clip-path: inset(50% 0 50% 0); }
.rv .ln-steps > li.go .ln-mini { animation: mini-open 1s cubic-bezier(.7, 0, .2, 1) var(--d) both; }
.rv .ln-steps > li::before {
  content: ""; position: absolute; top: 31px; left: 50%; width: min(260px, 100%); height: 2px; margin-left: max(-130px, -50%);
  border-radius: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--tint) 18%, #FFE2BC 50%, var(--tint) 82%, transparent);
  box-shadow: 0 0 14px 1px color-mix(in srgb, var(--tint) 50%, transparent);
}
.rv .ln-steps > li.go::before { animation: who-line 1s cubic-bezier(.7, 0, .2, 1) var(--d) both; }
@keyframes mini-open {
  0%, 36% { clip-path: inset(50% 0 50% 0); filter: brightness(2.4); }
  100% { clip-path: inset(0 0 0 0); filter: brightness(1); }
}
@media (max-width: 760px) { .ln-steps { grid-template-columns: 1fr; gap: 40px; } }
.ln-np-grid { gap: 36px 32px; }

/* the atmospheres in a browser window: it tilts up into place as the page
   reaches it, and scrolls past it like any other block */
.ln-show { position: relative; margin-top: clamp(110px, 14vw, 180px); }
.ln-anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; }
.ln-show-in { display: grid; justify-items: center; perspective: 1800px; }
.ln-browser {
  --r: 0;
  width: min(1520px, calc(100vw - 32px), calc((100svh - 150px) * 1.66)); aspect-ratio: 16 / 9.6; box-sizing: border-box;
  display: grid; grid-template-rows: 44px 1fr; border-radius: 14px; overflow: hidden; background: #1A1413;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 220, 0.1), 0 40px 100px -40px rgba(0, 0, 0, 0.9);
  transform-origin: 50% 0;
  transform: translateY(calc((1 - var(--r)) * 140px)) rotateX(calc((1 - var(--r)) * 28deg)) scale(calc(0.8 + var(--r) * 0.2));
  opacity: calc(0.25 + var(--r) * 0.75);
  will-change: transform;
}
.ln-bar { position: relative; display: flex; align-items: center; gap: 22px; padding: 0 16px; background: linear-gradient(#221B1A, #1A1413); border-bottom: 1px solid rgba(0, 0, 0, 0.5); }
.ln-bar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ln-lights { display: flex; gap: 8px; align-items: center; }
.ln-lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.ln-lights i:nth-child(2) { background: #FEBC2E; } .ln-lights i:nth-child(3) { background: #28C840; }
.ln-bar-nav { display: flex; gap: 12px; color: var(--muted); }
.ln-url {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: min(420px, 40%); height: 28px; border-radius: 8px; background: rgba(255, 240, 228, 0.07); font-size: 12.5px; color: var(--ink-2);
}
.ln-url svg { width: 12px; height: 12px; color: var(--muted); }
.ln-bar-end { margin-left: auto; display: flex; gap: 16px; color: var(--muted); }
.ln-viewport { position: relative; overflow: hidden; background: #08060A; }
.ln-page { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #08060A; isolation: isolate; border: 0; display: block; }
@media (max-width: 760px) {
  /* a phone: a tall window, the tabs scroll sideways at its top */
  .ln-browser { width: min(calc(100vw - 24px), 460px); aspect-ratio: auto; grid-template-rows: 44px auto; border-radius: 16px; }
  .ln-viewport { aspect-ratio: 3 / 4; }
  .ln-bar-nav, .ln-bar-end { display: none; }
  .ln-url { width: 60%; }
}

/* the fields in windows */
.ln-field { position: absolute; inset: 0; }
.ln-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ln-field canvas:nth-child(2) { filter: blur(11px) saturate(1.3); opacity: 0.85; mix-blend-mode: screen; }
.ln-field canvas:nth-child(3) { filter: blur(30px) saturate(1.45); opacity: 0.55; mix-blend-mode: screen; }
.ln-field canvas:nth-child(1) { z-index: 1; opacity: .92; }
.ln-field::after { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse 55% 45% at 50% 46%, rgba(8, 6, 10, 0.6), rgba(8, 6, 10, 0) 100%); }

/* ---- the atmospheres ---- */
.ln-page.ln-stage .ln-field::after { background: linear-gradient(to top, rgba(8, 6, 10, 0.88), rgba(8, 6, 10, 0) 55%), radial-gradient(ellipse 70% 60% at 50% 50%, rgba(8, 6, 10, 0.2), rgba(8, 6, 10, 0) 100%); }
.ln-page.ln-stage > :not(.ln-field) { position: absolute; z-index: 3; }
.ln-tabs {
  top: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; border-radius: 14px;
  background: rgba(20, 13, 13, 0.6); box-shadow: inset 0 0 0 1px var(--hair); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  max-width: calc(100% - 24px); box-sizing: border-box;
}
.ln-tabs .land-card {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px; position: relative; overflow: hidden;
  font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: background .2s, color .2s;
}
.ln-tabs .land-card:hover { color: var(--ink); background: var(--hover); }
.ln-tabs .land-card[aria-selected="true"] { color: #160C06; background: var(--ink); }
.ln-tabs .land-card[aria-selected="true"] .ln-tag { color: rgba(22, 12, 6, 0.6); background: rgba(22, 12, 6, 0.05); box-shadow: inset 0 0 0 1px rgba(22, 12, 6, 0.14); }
.ln-tabs .land-card[aria-selected="true"] .ln-tag.pro { color: #B4501F; }
.ln-tabs .ico { width: 20px; height: 20px; }
.ln-tabs .ico .ring, .ln-tabs .ico .b { display: none; }
.ln-tabs .tab-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ln-tabs .tab-prog { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; transform-origin: left; transform: scaleX(var(--t, 0)); background: var(--tint); opacity: .8; }
/* the name, its words and the button share the bottom of the window: side by
   side while there is room, the button under the words when there is not.
   Sizes follow the window, not the screen (cqw where it is understood). */
.ln-page.ln-stage { container-type: inline-size; }
.ln-stage-foot {
  left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px 32px; padding: 0 clamp(22px, 4vw, 56px) clamp(26px, 5vh, 56px);
}
.ln-stage-txt { flex: 1 1 340px; min-width: 0; }
.ln-stage-tag { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.ln-stage-name { margin: 0; font-size: clamp(48px, 7vw, 120px); font-size: clamp(44px, 8.8cqw, 120px); line-height: 0.92; letter-spacing: -0.035em; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.7); }
.ln-stage-p { margin: 16px 0 0; font-size: clamp(14px, 1.4vw, 18px); font-size: clamp(14px, 1.9cqw, 18px); line-height: 1.5; color: var(--ink-2); max-width: 30rem; text-wrap: pretty; }
.ln-stage-play {
  flex: none; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  height: 52px; padding: 0 22px 0 18px; border-radius: 14px; font-size: 15px; font-weight: 500; color: #160C06; background: var(--ink);
  transition: background .2s, transform .2s var(--ease);
}
.ln-stage-play:hover { background: #fff; }
.ln-stage-play.on { color: var(--ink); background: rgba(255, 240, 228, 0.12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* five names with their marks do not always fit the window: then the row scrolls sideways */
.ln-tabs { overflow-x: auto; scrollbar-width: none; }
.ln-tabs::-webkit-scrollbar { display: none; }
.ln-tabs.scrolls { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.ln-tabs .land-card { flex: none; }
@media (max-width: 1100px) { .ln-tabs .ico { display: none; } }
/* in a desktop window a name stays on one line, however many words it has */
@media (min-width: 761px) { .ln-stage-name { white-space: nowrap; } }
@media (max-width: 760px) {
  .ln-stage-name { font-size: clamp(44px, 11.5cqw, 132px); }
  .ln-tabs .land-card { padding: 0 10px; gap: 6px; font-size: 13px; }
  .ln-stage-foot { padding: 0 22px 22px; }
  .ln-stage-play { height: 48px; }
}

/* ---- layers: six tiles, three by two (two by three on a phone), each a
   sound's own scene over its name; a tile is the switch. The app has the sliders. ---- */
.ln-snds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 1080px; margin: 0 auto; }
.ln-snd {
  position: relative; display: grid; padding: 0; border-radius: 22px; overflow: hidden; text-align: left; color: var(--ink-2);
  background: #0A0708; box-shadow: inset 0 0 0 1px var(--hair);
  transition: background .3s, box-shadow .3s, color .3s, transform .2s var(--ease);
}
.ln-snd-art { display: block; width: 100%; height: 132px; }
.ln-snd-foot { display: flex; align-items: center; gap: 10px; padding: 2px 18px 18px; }
.ln-snd-name { font-size: 16px; font-weight: 500; color: inherit; }
.ln-snd-tag { position: absolute; top: 14px; right: 14px; display: flex; }
.ln-snd-ico { display: grid; place-items: center; width: 20px; height: 20px; }
.ln-snd-ico > * { grid-area: 1 / 1; transition: opacity .25s, transform .3s var(--ease); }
.ln-snd svg { width: 20px; height: 20px; color: var(--muted); transition: color .25s; }
.ln-snd:hover { color: var(--ink); background: #0E0A0A; box-shadow: inset 0 0 0 1px rgba(255, 236, 220, 0.14); }
.ln-snd:active { transform: scale(.98); }
.ln-snd:focus-visible { outline: 1px solid var(--tint); outline-offset: 2px; }
.ln-snd.hint:not([aria-pressed="true"]) { color: var(--ink); }
.ln-snd.hint:not([aria-pressed="true"]) svg { color: color-mix(in srgb, var(--tint) 70%, var(--muted)); }
.ln-snd[aria-pressed="true"] { color: var(--ink); background: #110C0B; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 45%, transparent); }
.ln-snd[aria-pressed="true"] .ln-snd-ico svg { opacity: 0; transform: scale(.6); }
.ln-snd[aria-pressed="true"] .ln-chip-eq { opacity: 1; transform: none; }
.ln-chip-eq { display: inline-flex; align-items: flex-end; justify-content: center; gap: 2px; width: 20px; height: 14px; opacity: 0; transform: scale(.6); }
.ln-chip-eq b { width: 3px; border-radius: 2px; background: var(--tint); animation: chip-eq 1s ease-in-out infinite alternate; }
.ln-chip-eq b:nth-child(2) { animation-delay: -.4s; } .ln-chip-eq b:nth-child(3) { animation-delay: -.7s; }
@keyframes chip-eq { from { height: 3px; } to { height: 14px; } }
@media (prefers-reduced-motion: reduce) { .ln-chip-eq b { animation: none; height: 10px; } }
@media (max-width: 760px) {
  .ln-snds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ln-snd { border-radius: 18px; }
  .ln-snd-art { height: 104px; }
  .ln-snd-foot { gap: 8px; padding: 0 14px 14px; }
  .ln-snd-name { font-size: 15px; }
  .ln-snd-tag { top: 10px; right: 10px; }
}
/* switching on: each tile's scene from a line, the tiles in turn */
.rv .ln-snd.ri { opacity: 0; translate: 0 20px; filter: blur(6px); }
.rv .ln-snd.ri.go { opacity: 1; translate: 0 0; filter: blur(0); transition: opacity .8s var(--ease) var(--d), translate 1s var(--ease) var(--d), filter .8s var(--ease) var(--d); }
.rv .ln-snd .ln-snd-art { clip-path: inset(50% 0 50% 0); }
.rv .ln-snd.go .ln-snd-art { animation: mini-open 1s cubic-bezier(.7, 0, .2, 1) calc(var(--d) + .15s) both; }
.rv .ln-snd::before {
  content: ""; position: absolute; z-index: 1; top: 65px; left: 8%; right: 8%; height: 2px; border-radius: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--tint) 18%, #FFE2BC 50%, var(--tint) 82%, transparent);
  box-shadow: 0 0 14px 1px color-mix(in srgb, var(--tint) 50%, transparent);
}
.rv .ln-snd.go::before { animation: who-line 1s cubic-bezier(.7, 0, .2, 1) calc(var(--d) + .15s) both; }
@media (max-width: 760px) { .rv .ln-snd::before { top: 51px; } }
.rv .ln-snd .ln-snd-name:not(.dc) { opacity: 0; }

/* what else is good about it: five small columns, three then two, like the other blocks' */
.ln-micro {
  list-style: none; margin: clamp(80px, 10vw, 128px) auto 0; padding: 0; max-width: 1080px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 48px; text-align: center;
}
.ln-micro li { flex: 0 1 300px; display: grid; justify-items: center; align-content: start; gap: 10px; }
.ln-micro-ico {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%;
  background: rgba(255, 240, 228, 0.03); box-shadow: inset 0 0 0 1px var(--hair);
}
.ln-micro svg { display: block; width: 20px; height: 20px; color: var(--tint); }
.ln-micro b { font-size: 22px; letter-spacing: -0.01em; line-height: 1.15; }
.ln-micro span { max-width: 34ch; font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: balance; }
@media (max-width: 760px) { .ln-micro { gap: 34px; } }
/* switching on: the columns one after another */
.ln-micro > li:nth-child(2) { --j: 1; } .ln-micro > li:nth-child(3) { --j: 2; } .ln-micro > li:nth-child(4) { --j: 3; } .ln-micro > li:nth-child(5) { --j: 4; }
.rv .ln-micro > li { opacity: 0; translate: 0 18px; filter: blur(8px); }
.rv .ln-micro.go > li {
  opacity: 1; translate: 0 0; filter: blur(0);
  transition: opacity .9s var(--ease) calc(var(--d) + var(--j, 0) * .12s), translate 1.1s var(--ease) calc(var(--d) + var(--j, 0) * .12s), filter .9s var(--ease) calc(var(--d) + var(--j, 0) * .12s);
}

/* ---- switching on, for the blocks further down: the research cards, the
   pulse, a note, the plans, the questions, the two of us ---- */
.rv :is(.ln-fact, .ln-rhythm, .ln-plan, .ln-person, .ln-foot-note, .ln-hint).ri { opacity: 0; translate: 0 24px; filter: blur(8px); }
.rv :is(.ln-fact, .ln-rhythm, .ln-plan, .ln-person, .ln-foot-note, .ln-hint).ri.go {
  opacity: 1; translate: 0 0; filter: blur(0);
  transition: opacity .9s var(--ease) var(--d), translate 1.1s var(--ease) var(--d), filter .9s var(--ease) var(--d);
}
/* a research card: its figure assembles out of glyphs, its words follow */
.rv .ln-fact .ln-fact-n:not(.dc) { opacity: 0; }
.rv .ln-fact :is(.ln-fact-p, .ln-fact-src) { opacity: 0; }
.rv .ln-fact.go :is(.ln-fact-p, .ln-fact-src) { opacity: 1; transition: opacity 1s var(--ease) calc(var(--d) + .55s); }
.rv .ln-fact.go .ln-fact-src { transition-delay: calc(var(--d) + .75s); }
/* the pulse switches on from its middle line */
.rv .ln-rhythm .ln-scope { clip-path: inset(50% 0 50% 0); }
.rv .ln-rhythm.go .ln-scope { animation: mini-open 1.1s cubic-bezier(.7, 0, .2, 1) calc(var(--d) + .3s) both; }
/* a plan: its name assembles, its fire comes up */
.rv .ln-plan > h3:not(.dc) { opacity: 0; }
.rv .ln-plan .ln-plan-fire { opacity: 0; }
.rv .ln-plan.go .ln-plan-fire { opacity: 1; transition: opacity 1.6s var(--ease) calc(var(--d) + .2s); }
/* the questions, one after another */
.ln-faq > :nth-child(2) { --j: 1; } .ln-faq > :nth-child(3) { --j: 2; } .ln-faq > :nth-child(4) { --j: 3; } .ln-faq > :nth-child(5) { --j: 4; }
.ln-faq > :nth-child(6) { --j: 5; } .ln-faq > :nth-child(7) { --j: 6; } .ln-faq > :nth-child(8) { --j: 7; } .ln-faq > :nth-child(9) { --j: 8; }
.rv .ln-faq > * { opacity: 0; translate: 0 16px; filter: blur(6px); }
.rv .ln-faq.go > * {
  opacity: 1; translate: 0 0; filter: blur(0);
  transition: opacity .8s var(--ease) calc(var(--d) + var(--j, 0) * .07s), translate 1s var(--ease) calc(var(--d) + var(--j, 0) * .07s), filter .8s var(--ease) calc(var(--d) + var(--j, 0) * .07s);
}
/* one of us: the face switches on from a line, the name assembles */
.rv .ln-person .ln-face { clip-path: inset(50% 0 50% 0 round 2px); }
.rv .ln-person.go .ln-face { animation: face-open 1.2s cubic-bezier(.7, 0, .2, 1) calc(var(--d) + .2s) both; }
@keyframes face-open {
  0%, 36% { clip-path: inset(50% 0 50% 0 round 2px); filter: brightness(2.2); }
  100% { clip-path: inset(0 0 0 0 round 22px); filter: brightness(1); }
}
.rv .ln-person-name > b:not(.dc) { opacity: 0; }

/* ---- 7. pricing: embers over Free, a live fire over Pro ---- */
.ln-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 980px; margin: 0 auto; }
.ln-plan { position: relative; display: flex; flex-direction: column; padding: 0 30px 30px; border-radius: 28px; background: #070505; box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; isolation: isolate; }
.ln-plan-pro { background: #080505; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 32%, transparent), 0 40px 100px -50px color-mix(in srgb, var(--tint) 55%, transparent); }
.ln-plan-fire { position: relative; margin: 0 -30px 10px; height: 200px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.ln-plan-fire canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ln-plan-fire canvas.glow { filter: blur(10px) saturate(1.4); opacity: .9; mix-blend-mode: screen; }
.ln-plan h3 { margin: 0; font-size: 20px; font-weight: 500; }
.ln-plan-sub { margin: 6px 0 0; font-size: 15px; color: var(--muted); }
.ln-plan-price { margin: 22px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-height: 64px; }
.ln-plan-price b { font-size: clamp(46px, 5vw, 60px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; }
.ln-plan-price small { font-size: 14px; color: var(--muted); }
.ln-plan ul { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 11px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.ln-plan li { position: relative; padding-left: 24px; }
.ln-plan li::before { content: "✦"; position: absolute; left: 0; top: 0; font-size: 12px; line-height: 1.8; color: var(--tint); }
.ln-plan .ln-btn { margin-top: auto; }
.ln-plan-small { margin: 12px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
/* with Plus already: until when, over the way into the app */
.ln-plan-have { margin: auto 0 14px; font-size: 15px; font-weight: 500; color: var(--ink); text-align: center; }
.ln-plan-have:not([hidden]) + .ln-btn { margin-top: 0; }
.ln-per { display: flex; gap: 4px; margin-top: 18px; padding: 4px; border-radius: 12px; background: rgba(255, 240, 228, 0.05); }
.ln-per .land-price { flex: 1; height: 36px; border-radius: 9px; font-size: 13px; color: var(--muted); transition: background .2s, color .2s; }
.ln-per .land-price[aria-checked="true"] { color: var(--ink); background: rgba(255, 240, 228, 0.1); }
.ln-per .land-price i { font-style: normal; color: var(--tint); }
.ln-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 24px; border-radius: 14px; box-sizing: border-box;
  font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; background: rgba(255, 240, 228, 0.08); transition: background .2s, transform .2s var(--ease);
}
.ln-btn:hover { background: rgba(255, 240, 228, 0.14); }
.ln-btn:active { transform: scale(.98); }
.ln-btn.solid { color: #160C06; background: var(--ink); }
.ln-btn.solid:hover { background: #fff; }
.ln-btn.glass { background: rgba(20, 13, 13, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 236, 220, 0.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (max-width: 760px) { .ln-plans { grid-template-columns: 1fr; } }

/* ---- 8. questions ---- */
.ln-faq { display: grid; gap: 8px; }
.ln-qa { border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair); transition: background .25s; }
.ln-qa.open { background: var(--panel-2); }
.ln-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; text-align: left; font-size: 16px; font-weight: 500; }
.ln-q svg { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform .35s var(--ease); }
.ln-qa.open .ln-q svg { transform: rotate(180deg); color: var(--tint); }
.ln-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.ln-qa.open .ln-a { grid-template-rows: 1fr; }
.ln-a > div { overflow: hidden; }
.ln-a p { margin: 0; padding: 0 20px 20px; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 44rem; }

/* ---- 9. one more way in, over a whole world ---- */
.ln-rise {
  --r: 0;
  position: relative; margin: clamp(40px, 5vw, 64px) calc(16px - var(--pad)) 0;
  height: min(84svh, 880px); min-height: 520px;
  transform-origin: 50% 100%;
  transform: translateY(calc((1 - var(--r)) * 90px)) scale(calc(0.9 + var(--r) * 0.1));
  opacity: calc(0.35 + var(--r) * 0.65);
  will-change: transform;
}
.ln-rise > * { position: absolute; inset: 0; border-radius: 32px; overflow: hidden; background: #08060A; box-shadow: inset 0 0 0 1px var(--hair), 0 60px 140px -60px rgba(0, 0, 0, 1); isolation: isolate; }
.ln-final-wrap { margin-top: clamp(110px, 14vw, 180px); height: min(84svh, 820px); }
.ln-final .ln-field::after { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(8, 6, 10, 0.68), rgba(8, 6, 10, 0.1) 100%); }
.ln-final-in { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 40px; padding: 24px; text-align: center; }
.ln-final-in .ln-h2 { font-size: clamp(30px, 4.4vw, 64px); max-width: min(1100px, 100%); text-shadow: 0 2px 40px rgba(8, 6, 10, 0.8); }
@media (max-width: 560px) { .ln-final-in { gap: 30px; } .ln-final-in .ln-h2 { font-size: 28px; } }

/* ---- the two of us: two cards, a portrait in glyphs on each ---- */
.ln-team { margin: clamp(110px, 14vw, 180px) auto 0; }
.ln-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); max-width: 1180px; margin: 0 auto; }
.ln-person {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 30px;
  text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 240, 228, 0.045), rgba(255, 240, 228, 0.015));
  box-shadow: inset 0 0 0 1px var(--hair), 0 30px 80px -50px rgba(0, 0, 0, 0.9);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .5s;
}
.ln-person:hover, .ln-person:focus-visible {
  transform: translateY(-4px);
  background: linear-gradient(180deg, rgba(255, 240, 228, 0.06), rgba(255, 240, 228, 0.02));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 38%, transparent), 0 40px 90px -46px color-mix(in srgb, var(--tint) 55%, transparent);
}
.ln-person:focus-visible { outline: none; }
/* the portrait's tile: dark, a warm light from below, the glow over it */
.ln-face {
  position: relative; display: block; aspect-ratio: 6 / 5; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 60% at 50% 62%, rgba(255, 118, 40, 0.07), rgba(255, 118, 40, 0) 70%), #0A0707;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 220, 0.05);
}
.ln-face canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ln-face .avatar-glow { filter: blur(10px) saturate(1.3); opacity: .55; mix-blend-mode: screen; pointer-events: none; }
/* the edges fade into the tile */
.ln-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 95% at 50% 45%, rgba(10, 7, 7, 0) 60%, rgba(10, 7, 7, 0.75) 100%); }
.ln-person-txt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 10px 16px; }
.ln-person-name { display: grid; gap: 4px; min-width: 0; }
.ln-person-name b { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 400; }
.ln-person-name small { font-size: 13px; color: var(--muted); transition: color .3s; }
.ln-person:hover .ln-person-name small { color: var(--ink-2); }
.ln-person-go {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  color: var(--ink); background: rgba(255, 240, 228, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 240, 228, 0.08);
  transition: background .35s, color .35s, transform .5s var(--ease);
}
.ln-person-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ln-person:hover .ln-person-go { color: #1A0D06; background: var(--tint); transform: rotate(45deg); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .ln-people { grid-template-columns: 1fr; }
  .ln-face { aspect-ratio: 1 / 1; }
}
@media (prefers-reduced-motion: reduce) { .ln-person, .ln-person-go { transition: none; } .ln-person:hover { transform: none; } }

/* ---- the footer: across the width; the page lifts off the name in glyphs ---- */
.ln-foot { position: relative; margin: clamp(110px, 14vw, 180px) calc(-1 * var(--pad)) 0; }
.ln-foot-card {
  position: relative; z-index: 2; background: var(--ground); border-radius: 0 0 40px 40px;
  padding: 24px var(--pad) clamp(64px, 8vw, 110px); box-shadow: 0 40px 60px -30px rgba(0, 0, 0, 0.9), inset 0 -1px 0 var(--hair);
}
.ln-foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px 64px; align-items: start; }
.ln-slogan { margin: 0; font-size: clamp(34px, 4vw, 60px); line-height: 1.04; letter-spacing: -0.025em; }
.ln-slogan span { display: block; }
.ln-foot-brand .ln-btn { margin-top: 32px; }
.ln-foot-side { display: grid; gap: 64px; }
.ln-cols { display: grid; grid-template-columns: repeat(3, 180px); gap: 32px; font-size: 14px; }
.ln-cols h4 { margin: 0 0 16px; font-size: 13px; font-weight: 400; color: var(--muted); }
.ln-cols > div { display: grid; align-content: start; justify-items: start; gap: 12px; }
.ln-cols a, .ln-cols button { padding: 0; text-align: left; font-size: 14px; color: var(--ink-2); text-decoration: none; transition: color .2s; }
.ln-cols a:hover, .ln-cols button:hover { color: var(--ink); }
.ln-copies { display: grid; gap: 4px; }
.ln-copy { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--muted); max-width: 600px; }
/* stuck to the bottom of the screen under the page: the footer lifts off it */
.ln-under {
  position: sticky; bottom: 0; z-index: 1; display: flex; align-items: flex-end; min-height: 42vh; padding-top: 48px; box-sizing: border-box;
  background: radial-gradient(90% 80% at 50% 120%, rgba(255, 110, 30, 0.22), rgba(255, 110, 30, 0) 70%), #060405;
}
.ln-word { display: block; width: 100%; aspect-ratio: 867 / 176; }
@media (max-width: 1000px) {
  .ln-foot-in { grid-template-columns: 1fr; }
  .ln-under { min-height: 0; }
}
@media (max-width: 620px) { .ln-cols { grid-template-columns: 1fr 1fr; } }

/* the logo, wherever it stands */
.logo { display: block; height: 1em; width: auto; fill: currentColor; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mark .logo { font-size: 16px; }
.gate-mark .logo { font-size: 22px; color: var(--ink); }
/* the logo's hover (src/logo.js): a band of glyphs runs through the letters,
   and the drawn letters give way under it */
.logo-link { position: relative; }
.logo-glyphs { position: absolute; pointer-events: none; }
.logo-link.fx svg.logo {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p, 0) * 100% - 22%), transparent calc(var(--p, 0) * 100% - 10%), transparent calc(var(--p, 0) * 100% + 10%), #000 calc(var(--p, 0) * 100% + 22%));
  mask-image: linear-gradient(90deg, #000 calc(var(--p, 0) * 100% - 22%), transparent calc(var(--p, 0) * 100% - 10%), transparent calc(var(--p, 0) * 100% + 10%), #000 calc(var(--p, 0) * 100% + 22%));
}
.mark.logo-link { text-decoration: none; color: var(--ink); }

/* the end of the demo: a small note, bottom left (src/landing.js) */
.ln-note {
  position: fixed; z-index: 9; left: var(--pad, 24px); bottom: calc(18px + env(safe-area-inset-bottom)); width: min(340px, calc(100vw - 24px));
  box-sizing: border-box; padding: 18px 18px 18px 20px; border-radius: 16px; color: var(--ink);
  background: rgba(22, 15, 14, 0.9); box-shadow: inset 0 0 0 1px rgba(255, 236, 220, 0.1), 0 24px 60px -20px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  animation: note-in .5s var(--ease) both;
}
.ln-note[hidden] { display: none; }
@keyframes note-in { from { opacity: 0; transform: translateY(12px); } }
.ln-note-t { margin: 0 28px 6px 0; font-size: 15px; font-weight: 500; }
.ln-note-p { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.ln-note .ln-btn { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.ln-note-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); }
.ln-note-x:hover { color: var(--ink); background: var(--hover); }
.ln-note-x svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .ln-note { left: 12px; bottom: calc(88px + env(safe-area-inset-bottom)); } }

/* the login hint is long: on a narrow phone its type steps down so it is read whole */
@media (max-width: 420px) { #acc-login::placeholder { font-size: 13px; } }

/* ---------- the app's small print: nothing that explains is under 13 px ----------
   The notes under the panels, the labels and hints in Customize and the
   stats, the Plus and account windows. Marks (Plus, best value), keys and
   the dock's labels stay small: they are tags, not text to read. */
.app .panel-note, .app .panel-sub, #plus-modal .panel-sub { font-size: 13px; }
.app .panel .mode-opt.atmo small, .app .panel .preset small, #panel-tune .modes.row .mode-opt small { font-size: 13px; }
#panel-stats .stat-h, #panel-stats .st-num small, #panel-stats .st-col span { font-size: 13px; }
.app .modal .card-copy.tiny, #acc-in > .card-copy.tiny, .acc-field > small,
#acc-in .acc-label, #acc-in .acc-val small, .app .modal .ghost.tiny { font-size: 13px; }
#up-modal .price small, .plus-until small, .plus-grid small { font-size: 13px; }
.app .modal .primary.small { font-size: 14px; }

/* until checkout is connected the prices are text to read, not tiles to press */
#up-modal .price.still, #up-modal .price.still:hover { background: none; cursor: default; padding-left: 0; padding-right: 0; }
.up-soon { margin-top: 12px; }

/* a panel that scrolls says so: a thin bar, and its edge fades where there is more */
.app .panel { scrollbar-width: thin; scrollbar-color: rgba(254, 246, 228, .28) transparent; }
.app .panel.more-below { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), rgba(0, 0, 0, .15)); mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), rgba(0, 0, 0, .15)); }
.app .panel.more-above { -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 48px), rgba(0, 0, 0, .15)); mask-image: linear-gradient(to top, #000 calc(100% - 48px), rgba(0, 0, 0, .15)); }
.app .panel.more-below.more-above { -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .15), #000 48px, #000 calc(100% - 64px), rgba(0, 0, 0, .15)); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .15), #000 48px, #000 calc(100% - 64px), rgba(0, 0, 0, .15)); }

/* ==================================================== wave-1 query pages
   (build.py, tools/pages_wave1.py): a lean page of their own, not the
   whole landing - src/preview.js is the only script. Reuses the landing's
   type, colour and footer classes so it reads as the same site. */
/* this page's own header has no sections for the middle nav to point to */
.wv-page .ln-pill-mid { display: none; }
.wv-hero { max-width: 760px; margin: 0 auto; padding: 64px 0 24px; text-align: center; }
.wv-hero .ln-eyebrow { margin-bottom: 18px; }
.wv-hero .ln-h1 { margin: 0 0 20px; }
.wv-hero .wv-intro { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 58ch; margin: 0 auto 32px; }
.wv-play { display: inline-flex; align-items: center; gap: 10px; padding: 16px 34px; border-radius: 99px; border: 0;
  background: var(--tint); color: #160C06; font-size: 16px; font-weight: 600; cursor: pointer; transition: background .2s, transform .2s; }
.wv-play:hover { transform: translateY(-1px); }
.wv-play.on { background: var(--ink); }
.wv-play:disabled { opacity: .5; cursor: default; transform: none; }
.wv-plus-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.wv-clock { font-family: var(--serif, serif); font-size: 44px; margin: 22px 0 0; font-variant-numeric: tabular-nums; }
.wv-note { margin: 16px auto 0; max-width: 46ch; font-size: 14px; color: var(--muted); }
.wv-note a { color: inherit; }
.wv-content { max-width: 720px; margin: 0 auto; padding: 8px 0 56px; display: grid; gap: 48px; }
.wv-kv h2 { font-size: 20px; margin: 0 0 16px; }
.wv-kv ul, .wv-kv ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; color: var(--ink-2); line-height: 1.6; }
.wv-kv ul { list-style: disc; } .wv-kv ol { list-style: decimal; }
.wv-why { display: grid; gap: 18px; }
.wv-why b { display: block; font-size: 16px; margin-bottom: 4px; }
.wv-why span { color: var(--ink-2); line-height: 1.6; }
.wv-faq { display: grid; gap: 2px; }
.wv-faq details { border-bottom: 1px solid var(--hair); padding: 16px 0; }
.wv-faq summary { cursor: pointer; font-size: 15px; font-weight: 600; list-style: none; }
.wv-faq summary::-webkit-details-marker { display: none; }
.wv-faq summary::after { content: '+'; float: right; color: var(--muted); }
.wv-faq details[open] summary::after { content: '-'; }
.wv-faq p { margin: 12px 0 0; color: var(--ink-2); line-height: 1.6; }
.wv-doctor { font-size: 14px; color: var(--ink-2); background: var(--panel-2); border-radius: 12px; padding: 14px 16px; }
.wv-related { max-width: 720px; margin: 0 auto 56px; }
.wv-related h2 { font-size: 15px; color: var(--muted); font-weight: 400; margin: 0 0 14px; }
.wv-related ul { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.wv-related a { display: inline-block; padding: 9px 16px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; font-size: 14px; }
.wv-related a:hover { border-color: var(--tint); color: var(--ink); }
.wv-crumbs { max-width: 720px; margin: 20px auto 0; font-size: 13px; color: var(--muted); }
.wv-crumbs a { color: inherit; }
@media (max-width: 640px) { .wv-hero { padding: 44px 0 20px; } }

.bl-meta { font-size: 13px; color: var(--muted); margin: -12px 0 0; }
.bl-art { color: var(--ink-2); line-height: 1.7; font-size: 16px; }
.bl-art h2 { font-size: 20px; color: var(--ink); margin: 34px 0 14px; }
.bl-art h2:first-child { margin-top: 0; }
.bl-art p { margin: 0 0 16px; }
.bl-art ul { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 8px; list-style: disc; }
.bl-sources { font-size: 13px; color: var(--muted); border-top: 1px solid var(--hair); padding-top: 18px; }
.bl-sources h2 { font-size: 14px; color: var(--muted); font-weight: 400; margin: 0 0 10px; }
.bl-sources ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bl-sources a { color: inherit; }
.bl-index { max-width: 720px; margin: 0 auto; padding: 8px 0 56px; display: grid; gap: 22px; }
.bl-card { border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; }
.bl-card h2 { font-size: 19px; margin: 0 0 8px; }
.bl-card h2 a { color: inherit; text-decoration: none; }
.bl-card h2 a:hover { color: var(--tint); }
.bl-card p { margin: 0 0 10px; color: var(--ink-2); line-height: 1.6; }
.bl-card time { font-size: 13px; color: var(--muted); }

/* ---------- the door, signed out: one column, as little as it takes ----------
   title · Yandex ID · a ruled "or" · the fields · the button · "forgot?" ·
   and at the foot one line to switch between signing in and making an
   account. Every control 44 px tall; what you press is round-ended like
   "Sign in", what you type into keeps its 14 px corners; nothing greyed out. */

/* sign in with Yandex ID: always pressable, nothing to tick first */
.acc-quick { display: grid; gap: 12px; margin-top: 24px; }
.acc-yandex-go { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px;
  border: 0; border-radius: 999px; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink);
  background: rgba(254, 246, 228, .08); box-shadow: inset 0 0 0 1px rgba(254, 246, 228, .06); cursor: pointer; transition: background .2s; }
@media (hover: hover) { .acc-yandex-go:hover { background: rgba(254, 246, 228, .12); } }
.acc-yandex-go:focus-visible { outline: 1px solid var(--tint); outline-offset: 2px; }
.acc-yandex-go:disabled { cursor: progress; }
/* the Yandex mark as a drawing, not a letter in a font: a glyph sat off
   the middle of its circle */
.acc-yandex-mark { display: block; width: 20px; height: 20px; flex: none; }
#acc-yandex-msg { margin: 0; }

/* "or", ruled on both sides */
.acc-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 !important; color: var(--muted); }
.acc-or::before, .acc-or::after { content: ''; flex: 1; height: 1px; background: rgba(254, 246, 228, .1); }
#acc-out .acc-form { margin-top: 0; }

/* the fields: a ring when typed into, and the browser's autofill keeps our colours
   (Chrome painted a filled field navy blue) */
.app #acc-modal .acc-form input:not([type="checkbox"]) { transition: box-shadow .2s; }
.app #acc-modal .acc-form input:not([type="checkbox"]):focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 70%, transparent); }
#acc-modal input:-webkit-autofill, #acc-modal input:-webkit-autofill:hover, #acc-modal input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  -webkit-box-shadow: inset 0 0 0 1px rgba(254, 246, 228, .06), inset 0 0 0 100px #2A2320 !important;
  transition: background-color 100000s 0s, color 100000s 0s; }
#acc-modal input:-webkit-autofill:focus { -webkit-box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 70%, transparent), inset 0 0 0 100px #2A2320 !important; }

/* under the button: "forgot?", then the one line that switches sides */
#acc-out .acc-links { justify-content: center; margin-top: 16px; }
#acc-out .acc-links:has(> [hidden]:only-child) { display: none; }
.acc-switch { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 6px;
  margin: 24px 0 0; font-size: 14px; color: var(--muted); }
.acc-switch .link { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(254, 246, 228, .3); }
@media (hover: hover) { .acc-switch .link:hover { text-decoration-color: currentColor; } }
.acc-switch [hidden] { display: none; }
/* the terms: the last, quietest line of the door - read if wanted, never in the way */
.acc-terms { max-width: 34ch; margin: 20px auto 0; font-size: 12px; line-height: 1.5; color: var(--muted);
  text-align: center; text-wrap: balance; }
#acc-modal .acc-terms a { color: rgba(254, 246, 228, .78); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(254, 246, 228, .25); }
@media (hover: hover) { #acc-modal .acc-terms a:hover { color: var(--ink); text-decoration-color: currentColor; } }