/* Maestria: the site's one stylesheet. Tokens and recipes from the validated app (19/9).
   Black #040404, smoked glass lit from the top edge, one human sentence in Cormorant
   Garamond italic, Inter for the rest, one white pill per screen, nothing bounces. */

/* ------------------------------------------------------------------ fonts (self-hosted, OFL) */
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url(/fonts/cormorant-garamond-500i-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url(/fonts/cormorant-garamond-500i-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/fonts/inter-var-latin.woff2) format("woff2-variations"), url(/fonts/inter-var-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/fonts/inter-var-latin-ext.woff2) format("woff2-variations"), url(/fonts/inter-var-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Metric-matched fallbacks (measured with fontkit on the real files): a swap causes no reflow.
   Apple and Windows have Georgia and Arial; Android has Noto Serif and Roboto. */
@font-face { font-family: "Cormorant Fallback"; font-style: italic; font-weight: 500;
  src: local("Georgia Italic");
  size-adjust: 79.49%; ascent-override: 116.24%; descent-override: 36.11%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback Android"; font-style: italic; font-weight: 500;
  src: local("Noto Serif Italic");
  size-adjust: 77.12%; ascent-override: 119.81%; descent-override: 37.21%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial");
  size-adjust: 105.78%; ascent-override: 91.58%; descent-override: 22.80%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Android"; src: local("Roboto");
  size-adjust: 107.52%; ascent-override: 90.10%; descent-override: 22.43%; line-gap-override: 0%; }

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: dark;
  /* validated, verbatim (kit §1) */
  --sol: #040404; --sol-haut: #0f0f0f;
  --encre: rgba(255,255,255,.95); --encre-2: rgba(255,255,255,.64); --encre-3: rgba(255,255,255,.42); --encre-4: rgba(255,255,255,.28);
  --filet: rgba(255,255,255,.08); --plein: #060606;
  --voile: rgba(14,14,14,.36);
  --lustre: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.02) 55%, rgba(255,255,255,.04));
  --flou: blur(26px) saturate(1.25);
  --bord: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.07) 45%, rgba(255,255,255,.12));
  --ombre: 0 18px 44px rgba(0,0,0,.5);
  --serif: "Cormorant Garamond", "Cormorant Fallback", "Cormorant Fallback Android", Georgia, serif;
  --sans: "Inter", "Inter Fallback", "Inter Fallback Android", "Helvetica Neue", Arial, sans-serif;
  --courbe: cubic-bezier(.4,0,.2,1);
  /* light: the one signifier */
  --light: #fff;
  --light-tube: linear-gradient(180deg, #fff, rgba(232,232,232,.92));
  --light-glow: 0 0 18px rgba(255,255,255,.55);
  --light-fill: linear-gradient(90deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
  --light-ring: rgba(255,255,255,.55);
  --present: rgba(255,255,255,.60);
  /* clear glass (the case only) */
  --case-sheen: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.012) 45%, rgba(255,255,255,.03));
  --case-shadow: 0 24px 60px rgba(0,0,0,.6);
  --case-glow: 0 0 70px rgba(255,255,255,.12);
  /* static glass: smoked look without backdrop-filter */
  --voile-static: rgba(18,18,18,.82);
  /* geometry */
  --gutter: 20px; --col: 430px;
  --r-pill: 999px; --r-card: 24px; --r-option: 18px; --r-sheet: 31px; --r-disc: 50%;
  /* motion; nothing overshoots */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-move: cubic-bezier(.22,1,.36,1);
  --ease-press: cubic-bezier(.32,.72,0,1);
  --ease-inout: cubic-bezier(.45,0,.55,1);
  --ease-out: cubic-bezier(.33,1,.68,1);
  --t-press: 120ms; --t-exit: 360ms; --t-move: 900ms; --t-fade: 1200ms; --stagger: 80ms;
  /* the S0 stage (B.2) */
  --textH: 266px;
  --stageCol: 430px;
  --stageH: clamp(260px, calc(100svh - var(--textH)), 470px);
  /* 270 at 390x664 (stage 398), 180 at 375x548 (stage 282): the road of evenings gets the room (V12) */
  --caseW: min(270px, calc(100vw - 90px), calc(var(--stageH) * .776 - 39px));
  --caseTop: 40px;
}
@supports not (height: 1svh) {
  :root { --stageH: clamp(260px, calc(100vh - var(--textH)), 470px); }
}

@keyframes rise { from { opacity: 0; transform: translateY(10px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sink { to { opacity: 0; transform: translateY(-6px); filter: blur(6px); } }
@keyframes rise-back { from { opacity: 0; transform: translateY(-10px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sink-back { to { opacity: 0; transform: translateY(6px); filter: blur(6px); } }
@keyframes breathe { 0%, 100% { opacity: .45; } 50% { opacity: .8; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }

/* ------------------------------------------------------------------ ground */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--sol); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--encre);
  font: 400 15px/1.45 var(--sans); letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  /* static grey grain (anti-banding on OLED), rasterised once, never animated */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E") repeat,
    radial-gradient(90% 520px at 50% 0%, #0f0f0f, #040404 75%) no-repeat,
    #040404;
  overscroll-behavior-y: none;
}
::selection { background: rgba(255,255,255,.22); color: #fff; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img, canvas, svg { display: block; }
[hidden] { display: none !important; }
/* until this stylesheet has arrived (it loads after the first paint, index.html), the screens after S0 stay invisible */
.css-wait main > .step:not(.step-open), .css-wait .back, .css-wait .startover { visibility: hidden !important; }
:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
noscript p { max-width: 350px; margin: 4px auto 16px; font: 400 13px/1.4 var(--sans); color: var(--encre); text-align: center; }

#app { position: relative; min-height: 100vh; overflow-x: clip; }
.col { width: min(100%, var(--col)); margin: 0 auto; padding: 0 var(--gutter); }

/* Font gate: the Cormorant lines wait at most 300 ms for their face (no JS: visible at once). */
.js .say { opacity: 0; }
.js.say-in .say { opacity: 1; transition: opacity .4s var(--ease); }

/* ------------------------------------------------------------------ type ramp */
.h-display { margin: 0; font: italic 500 42px/1 var(--serif); letter-spacing: -.015em; color: var(--encre); }
.say-l { margin: 0; font: italic 500 clamp(29px, 8.2vw, 34px)/1.08 var(--serif); letter-spacing: -.01em; color: var(--encre); text-wrap: balance; }
.echo { margin: 0; font: italic 500 24px/1.15 var(--serif); color: var(--encre); }
.serif-body { font: italic 500 20px/1.35 var(--serif); color: var(--encre-2); }
.serif-body b, .serif-body strong, .serif-body .own { font-weight: 500; color: var(--encre); }
.body { margin: 0; font: 400 15px/1.45 var(--sans); letter-spacing: -.011em; color: var(--encre-2); }
.foot { margin: 0; font: 400 13px/1.4 var(--sans); letter-spacing: -.005em; color: var(--encre-2); }
.caps { margin: 0; font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--encre-2); }
.own { color: var(--encre); }            /* her own words are always the brightest */
.price { font: 600 52px/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--encre); }
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ glass */
.bord, .opt { position: relative; }
.bord::before, .opt::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--bord);
  -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, linear-gradient(#000 0 0); mask-composite: exclude;
  pointer-events: none;
}
.verre { background: var(--lustre), var(--voile); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); box-shadow: var(--ombre); }
.verre-static { background: var(--lustre), var(--voile-static); box-shadow: var(--ombre); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .verre { background: var(--lustre), var(--voile-static); }
}

/* ------------------------------------------------------------------ the case system */
/* One rig for the whole visit. Everything is sized from --cw (the case width), so a size
   change re-lays out the engraving at once and the FLIP scale only exists in flight. */
.rig {
  --cw: var(--caseW);
  position: absolute; z-index: 30; top: var(--caseTop); left: calc(50% - var(--cw) / 2); width: var(--cw);
  pointer-events: none; -webkit-user-select: none; user-select: none;
}
.rig.is-fixed { position: fixed; }
.rig.size-hero { --cw: var(--caseW); }
.rig.size-stage { --cw: min(300px, calc(100vw - 90px)); }
.rig.size-medium { --cw: 200px; }
.rig.size-dock { --cw: 168px; }
.rig.size-mini { --cw: 56px; }
.rig-in { position: relative; will-change: auto; }
/* floor light and contact shadow, under the glass */
.rig-in::before { content: ""; position: absolute; left: 15%; right: 15%; top: calc(var(--cw) / 1.521 - 6px); height: 40px;
  background: radial-gradient(closest-side, rgba(255,255,255,.05), transparent); pointer-events: none; }
.rig-in::after { content: ""; position: absolute; left: 8%; right: 8%; top: calc(var(--cw) / 1.521 + 4px); height: 22px;
  background: radial-gradient(50% 50%, rgba(0,0,0,.85), transparent 70%); filter: blur(6px); pointer-events: none; z-index: -1; }
.size-mini .rig-in::before, .size-mini .rig-in::after { display: none; }

.case {
  position: relative; width: 100%; height: calc(var(--cw) / 1.521);
  border-radius: calc(var(--cw) * .0713); overflow: hidden;
  background: var(--case-sheen); box-shadow: var(--case-shadow);
  transition: box-shadow 1.1s var(--ease);
  isolation: isolate;
}
/* the glow of an opened case: a layer under the glass whose opacity moves (never an animated shadow) */
.case-glow { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--cw) / 1.521); border-radius: calc(var(--cw) * .0713);
  box-shadow: var(--case-glow); opacity: 0; transition: opacity 1.1s var(--ease); pointer-events: none; }
.rig.is-glowing .case-glow { opacity: 1; }
.size-mini .case-glow { display: none; }
/* the travelling rim light on the 1 px top-lit edge: a 1 px strip whose highlight slides by
   transform only (compositor, no paint), 30 % -> 70 %, 11 s alternate; it moves only while the case
   is at hero or stage size, and rests at 50 % otherwise, under reduced motion and the kill switch (P1) */
.case.bord::before { z-index: 3; }
.case > .rim { position: absolute; left: 0; top: 0; width: 100%; height: 1px; overflow: hidden; z-index: 3; pointer-events: none; }
.case > .rim > span { position: absolute; left: 0; top: 0; width: 52%; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 14%, rgba(255,255,255,.62) 50%, rgba(255,255,255,0) 86%);
  transform: translateX(46.15%); }
.size-hero .case > .rim > span, .size-stage .case > .rim > span { animation: rim 11s var(--ease-inout) infinite alternate; will-change: transform; }
@keyframes rim { from { transform: translateX(7.69%); } to { transform: translateX(84.62%); } }
.size-mini .case { border-radius: 5px; }

.c-light { position: absolute; inset: 0; display: none; background: radial-gradient(60% 50% at 50% 38%, rgba(255,255,255,.05), transparent); }
.sil, .fp-cv {
  position: absolute; left: 4.57%; top: calc(var(--cw) * .0691);
  width: 90.86%; height: calc(var(--cw) * .3031); display: block;
}
.sil { object-fit: fill; }
.fp-cv { pointer-events: none; }
.sil-sm { display: none; }
.size-medium .sil-full, .size-dock .sil-full { display: none; }
.size-medium .sil-sm, .size-dock .sil-sm { display: block; }
@media (max-height: 580px), (max-width: 339px) {
  .size-hero .sil-full { display: none; }
  .size-hero .sil-sm { display: block; }
  .size-hero .m-op { display: none; }          /* under 250 px the meta keeps composer and bars */
  .size-hero .c-meta { letter-spacing: .2em; }
  .size-hero .c-eng { top: calc(var(--cw) * .383); }   /* the open shackle clears the meta at 180 px */
}
@media (max-width: 339px) {
  .size-stage .sil-full { display: none; }
  .size-stage .sil-sm { display: block; }
  .size-stage .m-op { display: none; }
}
.c-eng { position: absolute; left: 5%; right: 5%; top: calc(var(--cw) * .4145); text-align: center; }
.c-title { margin: 0; font: italic 500 calc(var(--cw) * .0936)/1 var(--serif); letter-spacing: -.005em; color: var(--encre); white-space: nowrap; }
.c-meta {
  margin: calc(var(--cw) * .029) 0 0; font: 600 max(11px, calc(var(--cw) * .0273))/1 var(--sans);
  letter-spacing: .24em; text-transform: uppercase; color: var(--encre-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* any piece but the Ballade: no notes, ever; the interior light and the engraved title */
.rig:not(.is-ballade) .sil, .rig:not(.is-ballade) .fp-cv, .no-sil .sil { display: none; }
.rig:not(.is-ballade) .c-light, .no-sil .c-light, .size-mini .c-light, .is-empty .c-light { display: block; }
.rig:not(.is-ballade) .c-eng {
  top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 0 calc(var(--cw) * .03);
}
.rig:not(.is-ballade) .c-title {
  font-size: calc(var(--cw) * .105); line-height: 1.04; white-space: normal; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%;
}
.rig:not(.is-ballade) .c-title.is-long { font-size: calc(var(--cw) * .085); }
.rig:not(.is-ballade) .c-meta { max-width: 100%; }
/* smaller cases: title only; the mini case is glass and light only */
.size-medium .c-meta, .size-dock .c-meta { display: none; }
.size-dock .c-title { font-size: max(13px, calc(var(--cw) * .0936)); }
.rig.size-dock:not(.is-ballade) .c-title { font-size: max(14px, calc(var(--cw) * .1)); }
.rig.size-mini .c-eng, .rig.size-mini .sil, .rig.size-mini .fp-cv { display: none; }
.is-empty .c-eng, .is-empty .sil, .is-empty .fp-cv { opacity: 0; }

/* the reflection: a 105° band that crosses the glass */
.reflet {
  position: absolute; top: -30%; bottom: -30%; width: 55%; left: -60%; z-index: 2;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.02) 38%, rgba(255,255,255,.13) 50%, rgba(255,255,255,.02) 62%, transparent 100%);
  pointer-events: none; mix-blend-mode: screen; opacity: 0;
}
.case.is-idle .reflet { animation: lk-idle 9s linear 4.5s infinite; }
@keyframes lk-sweep { 0% { transform: translateX(0); opacity: 1; } 99.9% { transform: translateX(327.3%); opacity: 1; } 100% { transform: translateX(327.3%); opacity: 0; } }
@keyframes lk-idle { 0% { transform: translateX(0); opacity: 1; } 15.5% { transform: translateX(327.3%); opacity: 1; } 15.6%, 100% { transform: translateX(327.3%); opacity: 0; } }

/* the padlock hangs from the case's bottom edge (kit §4.1) */
.cadenas {
  position: absolute; left: 50%; top: calc(var(--cw) / 1.521 - var(--cw) * .0486);
  width: calc(var(--cw) * .1249); height: calc(var(--cw) * .1249 * 46 / 36); transform: translateX(-50%);
}
.size-mini .cadenas { width: 9px; height: 11.5px; top: calc(56px / 1.521 - 3px); }
.cadenas svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.halo-cadenas {
  position: absolute; left: 50%; top: 62%; width: calc(var(--cw) * .335); height: calc(var(--cw) * .335);
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.5), rgba(255,255,255,0)); opacity: 0; pointer-events: none;
}
.key-glow { opacity: 0; }
/* keyframes for CSS-only lock sequences (kit §4.3); the anse also takes a transform attribute */
@keyframes lk-flash { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }

/* slots reserve the case's box on every screen */
.slot { position: relative; margin: 0 auto; pointer-events: none; }
.slot[data-size="stage"] { width: min(300px, calc(100vw - 90px)); height: calc(min(300px, calc(100vw - 90px)) * (1 / 1.521 + .12)); }
.slot[data-size="medium"] { width: 200px; height: calc(200px / 1.521 + 22px); }
.slot[data-size="dock"] { width: 168px; height: calc(168px / 1.521 + 16px); }
.slot[data-size="mini"] { width: 56px; height: 37px; }
.slot.is-button { pointer-events: auto; cursor: pointer; border-radius: 12px; min-height: 44px; }

/* ------------------------------------------------------------------ pill */
.pill {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center;
  height: 56px; width: min(calc(100% - 40px), 350px); margin: 0 auto; padding: 0 0 0 .22em;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: rgba(255,255,255,.10); color: #060606;
  font: 600 12.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  box-shadow: inset 0 1px .5px #fff, inset 0 -1px .5px rgba(0,0,0,.2), 0 0 24px rgba(255,255,255,.14), 0 14px 34px rgba(0,0,0,.55);
  transition: transform var(--t-press) var(--ease-press), color .6s var(--ease), box-shadow .6s var(--ease);
  -webkit-user-select: none; user-select: none; touch-action: manipulation; overflow: hidden;
}
/* the white is a layer of light: enabling slides it in from the left behind a straight,
   bright front (1.5 px edge and a soft glow ahead of it); the pill's radius clips the corners */
.pill::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #fff, #ededed);
  box-shadow: 1.5px 0 0 rgba(255,255,255,.9), 4px 0 10px rgba(255,255,255,.16);
  transform: none; transition: transform .6s var(--ease);
}
.pill:active { transform: scale(.97); }
.pill:disabled, .pill[aria-disabled="true"] { color: rgba(255,255,255,.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); cursor: default; }
.pill:disabled::before, .pill[aria-disabled="true"]::before { transform: translateX(calc(-100% - 32px)); }
.pill:disabled:active { transform: none; }
/* busy: the label dims and a present line crosses the pill */
.pill.is-busy { color: rgba(6,6,6,.3); pointer-events: none; }
.pill.is-busy::after {
  content: ""; position: absolute; top: 14px; bottom: 14px; left: 18%; width: 1.5px; background: rgba(6,6,6,.6);
  animation: busy 1.4s var(--ease-inout) infinite alternate;
}
@keyframes busy { from { left: 18%; } to { left: 82%; } }
.pill-zone {
  position: sticky; bottom: 0; z-index: 20; padding: 32px 0 max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(4,4,4,0), #040404 32px);
}

/* ------------------------------------------------------------------ back, text buttons */
.back {
  position: absolute; z-index: 40; left: 16px; top: max(16px, env(safe-area-inset-top));
  width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--encre);
  background: var(--lustre), var(--voile-static); box-shadow: var(--ombre);
  transition: transform var(--t-press) var(--ease-press);
}
.back::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.back svg { width: 14px; height: 14px; }
.back:active { transform: scale(.94); }
.tbtn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px;
  background: none; border: 0; cursor: pointer; color: var(--encre-2);
  font: 400 13px/1.4 var(--sans); letter-spacing: -.005em;
}
.tbtn:active { color: var(--encre); }
.tbtn-u { text-decoration: underline; text-decoration-color: rgba(255,255,255,.28); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tbtn-14 { font-size: 14px; }

/* ------------------------------------------------------------------ options (the light grammar) */
.opts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.opt {
  display: flex; align-items: center; width: 100%; min-height: 56px; margin: 0;
  padding: 16px 58px 16px 20px; border: 0; border-radius: var(--r-option); cursor: pointer;
  text-align: left; font: 500 16px/1.3 var(--sans); letter-spacing: -.011em; color: var(--encre);
  background: var(--lustre), var(--voile-static); box-shadow: var(--ombre);
  transition: transform var(--t-press) var(--ease-press), box-shadow .45s var(--ease-move);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
/* selected: translucent light revealed left to right, never solid white (white is the pill's) */
.opt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--light-fill); clip-path: inset(0 100% 0 0 round 18px);
  transition: clip-path .45s var(--ease-move);
}
.opt:active { transform: scale(.97); }
.opt[aria-pressed="true"], .opt[aria-checked="true"] { box-shadow: inset 0 0 0 1px var(--light-ring), 0 0 28px rgba(255,255,255,.12), var(--ombre); }
.opt[aria-pressed="true"]::after, .opt[aria-checked="true"]::after { clip-path: inset(0 0 0 0 round 18px); }
.opt .tube { position: absolute; right: 16px; top: 50%; width: 22px; height: 7px; margin-top: -3.5px; }
.opt[aria-pressed="true"] .tube .fill, .opt[aria-checked="true"] .tube .fill { transform: scaleX(1); animation: tube-glow .5s var(--ease) .12s both; }

/* the DOM glass tube (kit §5.5): hollow = to come; .fill lights it left to right */
.tube { position: relative; display: block; width: 22px; height: 7px; border-radius: 99px;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.022) 55%, rgba(255,255,255,.045)); }
.tube::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.13));
  -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, linear-gradient(#000 0 0); mask-composite: exclude; }
.tube .fill { position: absolute; inset: 0; border-radius: inherit; background: var(--light-tube);
  transform-origin: left; transform: scaleX(0); transition: transform .42s var(--ease-move); }
.tube.lit .fill, .tube.filling .fill { transform: scaleX(1); }
.tube.lit { box-shadow: var(--light-glow); }
.tube.slow .fill { transition-duration: .6s; transition-timing-function: var(--ease); }
@keyframes tube-glow { from { box-shadow: 0 0 18px rgba(255,255,255,.55); } to { box-shadow: 0 0 6px rgba(255,255,255,.18); } }
.tube.filling .fill { animation: tube-glow .5s var(--ease) both; }

/* ------------------------------------------------------------------ cards, chips, sheet, disc */
.card { border-radius: var(--r-card); padding: 22px 20px; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 14px; margin: 0;
  border-radius: 99px; max-width: 100%;
  font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--encre);
  white-space: nowrap; overflow: hidden;
}
.chip .rule { flex: none; width: 1px; height: 10px; background: rgba(255,255,255,.28); }
.chip .doux { color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; }
.sheet { border-radius: var(--r-sheet); padding: 20px 18px 18px; display: grid; gap: 12px; justify-items: center; }
.disc { border-radius: 50%; display: grid; place-items: center; }
.rule-h { height: 1px; background: var(--filet); border: 0; margin: 0; }
.segs { display: flex; gap: 8px; }
.seg {
  position: relative; height: 40px; min-width: 64px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: 500 15px/1 var(--sans); color: var(--encre); background: var(--lustre), var(--voile-static);
  transition: box-shadow .42s var(--ease-move);
}
.seg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--bord);
  -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, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.seg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--light-fill);
  opacity: 0; transition: opacity .42s var(--ease-move); pointer-events: none; }
.seg[aria-checked="true"] { box-shadow: inset 0 0 0 1px var(--light-ring), 0 0 22px rgba(255,255,255,.1); }
.seg[aria-checked="true"]::after { opacity: 1; }

/* ------------------------------------------------------------------ screens and motion */
.step { position: relative; }
.screen { width: min(100%, var(--col)); margin: 0 auto; padding: 0 var(--gutter); }
.rise { animation: rise var(--t-move) var(--ease) both; animation-delay: calc(150ms + var(--i, 0) * var(--stagger)); }
.rise-back { animation: rise-back var(--t-move) var(--ease) both; animation-delay: calc(150ms + var(--i, 0) * var(--stagger)); }

/* ------------------------------------------------------------------ S0 · Open */
.step-open { display: flex; flex-direction: column; min-height: 100vh; }
.stage {
  position: relative; height: var(--stageH); width: min(100%, var(--stageCol)); margin: 0 auto;
  cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; flex: none;
}
.stage:focus-visible { outline: 2px solid rgba(255,255,255,.5); outline-offset: -6px; border-radius: 24px; }
.stage::before { /* the key light behind the hero case */
  content: ""; position: absolute; left: -30%; right: -30%; top: 0; bottom: 0; pointer-events: none;
  background: radial-gradient(60% 46% at 50% 30%, rgba(255,255,255,.07), transparent 70%);
}
.wordmark { position: absolute; top: 12px; left: 0; right: 0; margin: 0; text-align: center; font: italic 500 20px/1 var(--serif); color: var(--encre-2); z-index: 1; pointer-events: none; }
.slot-hero { position: absolute; top: var(--caseTop); left: 50%; width: var(--caseW); height: calc(var(--caseW) / 1.521); margin-left: calc(var(--caseW) / -2); }
.film-cv { position: absolute; left: 0; top: 0; width: 100%; height: var(--stageH); pointer-events: none; }
.film-cv:not(.is-built) { visibility: hidden; }
#pathFar { filter: blur(3.4px); }
/* while the film plays (html.filming, set by film.js), the scene layers are promoted once, so a scale
   or a blur is composited and the silhouette is never re-rasterised per frame; at rest they are not (P2) */
.filming .rig-in, .filming #pathCv, .filming #playerCv { will-change: transform, filter, opacity; }
.filming #pathFar, .filming .reflet, .filming .halo-cadenas, .filming .case-glow, .filming #line, .filming #ray,
.filming #pourGlow, .filming #filmChip, .filming #wordmark { will-change: transform, opacity; }
#playerCv { z-index: 32; }
.story-cv { opacity: 0; transition: opacity .6s var(--ease); }
.story-layer { transition: opacity .6s var(--ease); }
.story-layer:not(.is-on) { opacity: 0; }
.fp-cv.story-fp { opacity: 0; }
.fp-cv.story-fp.is-on, .story-cv.is-on { opacity: 1; }
/* the present line and the beam: one element (B.1) */
.line { position: absolute; left: 0; top: 0; width: 1.5px; height: 100px; transform-origin: 0 0; z-index: 33; pointer-events: none; opacity: 0; --present: 0; }
.line::before, .line::after { content: ""; position: absolute; inset: 0; border-radius: 1px; }
.line::before { /* beam: .85 at its foot -> .35, then into the dark */
  background: linear-gradient(to top, rgba(255,255,255,.9), rgba(255,255,255,.58) 45%, rgba(255,255,255,.35) 86%, rgba(255,255,255,0));
  box-shadow: 0 0 6px rgba(255,255,255,.35); opacity: calc(1 - var(--present));
}
.line::after { background: var(--present-line, rgba(255,255,255,.6)); opacity: var(--present); }
.line.is-breathing::before { animation: breathe 2.4s var(--ease) infinite; }
.ray { position: absolute; left: 0; top: 0; width: 1.8px; height: 10px; transform-origin: 50% 100%; z-index: 31; opacity: 0; pointer-events: none;
  border-radius: 1px; background: linear-gradient(to top, rgba(255,255,255,.85), rgba(255,255,255,.4)); box-shadow: 0 0 6px rgba(255,255,255,.3); }
.pour-glow { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; z-index: 31; opacity: 0; pointer-events: none;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,.12) 45%, rgba(255,255,255,0)); }
.film-chip { position: absolute; left: 16px; top: 14px; z-index: 34; opacity: 0; pointer-events: none; max-width: calc(100% - 32px); }

.s0-text { position: relative; z-index: 2; text-align: center; padding: 0 var(--gutter); flex: none; }
.s0-text .h-display { max-width: 330px; margin: 0 auto; text-wrap: balance; }
.s0-sub { max-width: 350px; margin: 10px auto 0; font: 400 15px/1.4 var(--sans); letter-spacing: -.011em; color: var(--encre-2); text-wrap: balance; }
.s0-text .pill { margin-top: 16px; }
.s0-note { max-width: 350px; margin: 10px auto 12px; font: 400 13px/1.4 var(--sans); color: var(--encre-2); }
.s0-note span { display: block; }

.site-foot {
  margin-top: auto; padding: 56px var(--gutter) max(24px, env(safe-area-inset-bottom));
  text-align: center; font: 400 12px/1.5 var(--sans); color: var(--encre-2);
}
.site-foot nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 6px; }
.site-foot a { color: var(--encre-2); text-decoration: none; padding: 8px 2px; }
.site-foot a:active { color: var(--encre); }
.site-foot .mail { -webkit-user-select: all; user-select: all; color: var(--encre-2); }
.site-foot .tbtn { font-size: 12px; min-height: 36px; padding: 0 6px; color: var(--encre); }

/* ------------------------------------------------------------------ desktop: a centred column; S0 gets a wider stage */
@media (min-width: 900px) and (min-height: 700px) {
  :root {
    --stageCol: 640px;
    --stageH: clamp(260px, calc(100vh - var(--textH) - 24px), 560px);
    --caseW: min(380px, calc(var(--stageH) * .776 - 39px));
    --caseTop: 52px;
  }
  .h-display { font-size: 48px; }
  .s0-text .h-display { max-width: 420px; }
  .wordmark { top: 18px; font-size: 22px; }
}
/* a large desktop gets its own composition: a wider column, a 400 px stage case, a bigger hero (V25);
   film.js scales the road and the player from the case and stage sizes */
@media (min-width: 1024px) and (min-height: 800px) {
  :root { --col: 520px; --stageCol: 720px; --caseW: min(420px, calc(var(--stageH) * .72)); }
  .rig.size-stage { --cw: 400px; }
  .slot[data-size="stage"] { width: 400px; height: calc(400px * (1 / 1.521 + .12)); }
  .h-display { font-size: 54px; }
  .s0-text .h-display { max-width: 560px; }
}

/* ------------------------------------------------------------------ reduced motion and the kill switch */
@media (prefers-reduced-motion: reduce) {
  .rise, .rise-back { animation: fade-in .3s var(--ease) both !important; }
  .sink, .sink-back { animation: fade-out .3s var(--ease) both !important; }
  .opt::after, .opt .tube .fill, .tube .fill, .seg::after, .pill::before { transition: none !important; }
  .opt[aria-pressed="true"] .tube .fill, .opt[aria-checked="true"] .tube .fill { animation: none !important; }
  .case > .rim > span, .case.is-idle .reflet, .line.is-breathing::before, .pill.is-busy::after { animation: none !important; }
  .js.say-in .say { transition: none; }
}
.motion-kill .case > .rim > span, .motion-kill .case.is-idle .reflet { animation: none; }

/* ================================================================== FUNNEL (S1-S12)
   Everything below builds on the engine's vocabulary above. */

/* screen changes: the old screen sinks where it stands while the new one rises */
.rise, .rise-back { animation-delay: calc(150ms + var(--d, 0ms) + var(--i, 0) * var(--stagger)); }
.step.leaving { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.step.leaving.sink-all { animation: sink var(--t-exit) var(--ease) both; }
.step.leaving.sink-all-back { animation: sink-back var(--t-exit) var(--ease) both; }
.step.is-entering { pointer-events: none; }
.motion-kill .rise, .motion-kill .rise-back { animation: fade-in .3s var(--ease) both; animation-delay: var(--d, 0ms); }
.motion-kill .step.leaving.sink-all, .motion-kill .step.leaving.sink-all-back { animation: fade-out .3s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .step.leaving.sink-all, .step.leaving.sink-all-back { animation: fade-out .3s var(--ease) both !important; }
  .rise, .rise-back { animation-delay: var(--d, 0ms) !important; }
}

/* shared chrome */
.back { position: absolute; left: max(16px, calc(50% - var(--col) / 2 + 16px)); transition: transform var(--t-press) var(--ease-press), opacity .36s var(--ease); }
.back.is-off { opacity: 0; pointer-events: none; }
.startover { position: absolute; z-index: 40; top: max(14px, env(safe-area-inset-top)); right: max(8px, calc(50% - var(--col) / 2 + 8px)); }

/* the question screens (S1, S3-S12) */
.screen.q { padding-top: 16px; padding-bottom: 28px; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.q > .slot { flex: none; }
.q-say { margin-top: 18px; max-width: 350px; text-align: left; outline: none; }
.q-say:focus-visible, .s2-say:focus-visible { outline: none; }
.echo {
  height: 28px; margin: 18px 0 0; white-space: nowrap; overflow: visible; transform-origin: 0 50%;
  transition: transform .9s var(--ease-move), color .9s var(--ease-move), opacity .7s var(--ease), filter .7s var(--ease);
}
.echo:empty { display: none; }
.echo + .q-say { margin-top: 8px; }
.echo.is-settled { transform: scale(.75); color: var(--encre-2); }
.echo.is-spent { opacity: .28; filter: blur(1.2px); }
.q-hint { margin-top: 8px; }
.q-hint-after { margin-top: 14px; }
.q .opts { margin-top: 24px; }
.q .opts + .q-hint { margin-top: 14px; }
.fastp { align-self: center; margin-top: 12px; }
.q .pill-zone { margin: auto -20px 0; padding-left: 20px; padding-right: 20px; }
.opt.is-pressing { transform: scale(.97); }

/* S1 · Choose */
.search-zone { position: sticky; top: 8px; z-index: 6; margin: 22px -20px 0; padding: 0 20px 24px;
  background: linear-gradient(to bottom, #040404 calc(100% - 24px), rgba(4,4,4,0)); }
.search { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border-radius: var(--r-option); cursor: text; }
.search svg { width: 16px; height: 16px; color: var(--encre-2); flex: none; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; color: var(--encre);
  font: 400 16px/1 var(--sans); letter-spacing: -.011em; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--encre-3); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search:focus-within { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), var(--ombre); }
.count { margin: -12px 0 6px; }
.empty { margin: -4px 0 10px; }
.empty-1 { margin: 0 0 4px; font: 400 16px/1.45 var(--sans); color: var(--encre); }
.empty .foot { margin-bottom: 8px; }
.rows { display: grid; }
.row {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 2px; margin: 0;
  border: 0; border-bottom: 1px solid var(--filet); background: none; text-align: left; cursor: pointer;
  transition: transform var(--t-press) var(--ease-press);
}
.row:last-child { border-bottom: 0; }
.row:active, .row.is-pressing { transform: scale(.985); }
.mini {
  position: relative; flex: none; width: 44px; height: 29px; border-radius: 5px; overflow: hidden;
  background: radial-gradient(60% 50% at 50% 38%, rgba(255,255,255,.11), transparent), var(--case-sheen);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 16px rgba(0,0,0,.55);
}
/* the reflection band of the big case, still */
.mini::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.08) 46%, transparent 60%); }
/* the Ballade (the one piece whose notes exist here): a hairline score line, no notes */
.row[data-id="chopin-ballade-4"] .mini { background: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)) 50% 46% / 70% 1px no-repeat,
  radial-gradient(60% 50% at 50% 38%, rgba(255,255,255,.11), transparent), var(--case-sheen); }
.mini::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.07) 45%, rgba(255,255,255,.12));
  -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, linear-gradient(#000 0 0); mask-composite: exclude; }
.mini.fly { position: fixed; z-index: 45; margin: 0; transform-origin: 0 0; pointer-events: none; }
.row-txt { min-width: 0; flex: 1; }
.row-t { display: block; font: italic 500 21px/1.1 var(--serif); color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-m { display: block; margin-top: 3px; font: 400 13px/1.35 var(--sans); color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* S2 · Locked */
.s2 { padding-top: 56px; text-align: center; min-height: 100vh; min-height: 100svh; }
.s2-say { margin: 22px auto 0; max-width: 330px; outline: none; }
.s2-caps { margin: 14px auto 0; max-width: 320px; }
.s2-another { margin: 10px auto 0; }

/* S5 · The answer */
.answer-card { margin-top: 24px; display: grid; gap: 14px; }
.ans-row { display: flex; gap: 14px; align-items: flex-start; margin: 0; font: 400 16px/1.45 var(--sans); letter-spacing: -.011em; color: var(--encre); }
.ans-row .tube { flex: none; width: 20px; height: 7px; margin-top: 8.5px; }

/* S9 · the folded "it hears" intro */
.s9 { position: relative; padding-bottom: 0; }
.hears { position: absolute; left: var(--gutter); right: var(--gutter); top: 16px; z-index: 3; padding-top: calc(168px / 1.521 + 16px); }
.hears-say { margin: 18px 0 0; font: italic 500 24px/1.15 var(--serif); color: var(--encre); outline: none; }
.player-card {
  position: relative; margin-top: 16px; height: clamp(250px, 38svh, 300px); border-radius: var(--r-card); overflow: hidden;
  background: radial-gradient(62% 60% at 50% 48%, #121212, #030303); box-shadow: var(--ombre);
}
.player-card.is-tall { height: clamp(270px, 40svh, 300px); }
.player-card canvas { position: absolute; left: 0; top: 0; }
.hears-chip { position: absolute; left: 12px; top: 12px; z-index: 2; max-width: calc(100% - 24px); }
.fix-chip { position: absolute; left: 0; top: 0; z-index: 3; opacity: 0; transform: translateY(6px); max-width: calc(100% - 24px);
  transition: opacity .3s var(--ease), transform .3s var(--ease-move); }
.fix-chip.is-on { opacity: 1; transform: none; }
.fix-chip.two { height: auto; padding: 8px 14px; border-radius: 14px; flex-direction: column; align-items: flex-start; gap: 5px; }
.fix-chip.two .rule { display: none; }
.hears-label { margin-top: 10px; text-align: center; }
.s9-line { position: absolute; left: 0; top: 0; z-index: 4; opacity: 0; }
.path-view { position: relative; }
.path-view.is-pre { visibility: hidden; }
.path-zone { position: relative; height: clamp(150px, calc(100svh - 514px), 290px); margin: 0 -20px; }
#s9Cv { position: absolute; left: 0; top: -34px; pointer-events: none; }
.tile-lab { position: absolute; left: 0; top: 0; z-index: 2; font: 500 13px/1.3 var(--sans); letter-spacing: -.005em; color: var(--encre-2); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); }
.tile-lab.is-on { opacity: 1; }
.tile-lab span { display: block; }
.s9-sheet { position: relative; z-index: 2; margin: 0 -4px 16px; justify-items: stretch; text-align: left; gap: 10px; opacity: 0; transform: translateY(12px); }
.s9-sheet.is-on { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.recap { margin: 0; font: 500 13px/1.35 var(--sans); color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recap span { opacity: .28; transition: opacity .3s var(--ease); }
.recap span.is-lit { opacity: 1; }
.s9-say { margin: 0; font: italic 500 28px/1.08 var(--serif); letter-spacing: -.01em; color: var(--encre); outline: none; text-wrap: balance; }
.s9-body { margin: 0; }
.s9-sheet .rule-h { margin: 2px 0; }
.first-ev { margin: -4px 0 0; font: 500 15px/1.4 var(--sans); }
.minutes { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.minutes .segs { gap: 6px; }
.minutes .seg { min-width: 0; padding: 0 12px; }
.sheet-pill { position: sticky; bottom: 0; z-index: 3; margin: 4px -18px -18px; padding: 22px 18px max(18px, env(safe-area-inset-bottom));
  border-radius: 0 0 var(--r-sheet) var(--r-sheet); background: linear-gradient(to bottom, rgba(12,12,12,0), rgba(12,12,12,.94) 22px); }
.sheet-pill .pill { width: 100%; }

/* S10 · The pact */
.pact { margin-top: 20px; border-radius: 28px; padding: 26px 22px 14px; text-align: center; }
.pact-body { margin: 14px 0 20px; font-size: 22px; line-height: 1.38; outline: none; text-wrap: pretty; }
.print { position: relative; width: 96px; height: 96px; margin: 0 auto; cursor: pointer; touch-action: none;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; transition: box-shadow .6s var(--ease); }
.print .fp { position: absolute; left: 10px; top: 10px; width: 76px; height: 76px; overflow: visible; }
.fp-grey { stroke: rgba(255,255,255,.64); }
.fp-lit { stroke: #fff; clip-path: inset(100% 0 0 0); filter: drop-shadow(0 0 4px rgba(255,255,255,.5)); }
.fp-front { position: absolute; left: 12px; right: 12px; top: 10px; height: 1px; background: var(--present); opacity: 0; pointer-events: none; box-shadow: 0 0 6px rgba(255,255,255,.35); }
.print.is-bloom { box-shadow: 0 0 60px rgba(255,255,255,.35), var(--ombre); }
.print.is-sealed { box-shadow: 0 0 60px rgba(255,255,255,.12), var(--ombre); cursor: default; }
.sign-label { margin: 12px 0 0; min-height: 36px; display: flex; align-items: center; justify-content: center; font: 400 13px/1.4 var(--sans); color: var(--encre-2); }
.sign-label.is-sealed { font: italic 500 26px/1 var(--serif); color: var(--encre); }
.pact .tbtn { margin: 0 auto; }
.pact-pill { margin: 14px 0 10px; }
.pact-pill .pill { width: 100%; }

/* S11 · The offer */
.offer-say { margin: 18px auto 0; max-width: 350px; text-align: center; }
.price-card { margin-top: 20px; }
.price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 12px; }
.p-now { margin: 0; white-space: nowrap; }
.per { font: 400 17px/1 var(--sans); color: var(--encre-2); }
.p-then { margin: 0 0 3px; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font: 400 13px/1.3 var(--sans); color: var(--encre-2); }
.p-then .num { font: 500 17px/1.2 var(--sans); color: var(--encre-2); letter-spacing: -.01em; }
.p-l1, .p-l2 { margin: 12px 0 0; font: 400 15px/1.45 var(--sans); letter-spacing: -.011em; color: var(--encre); }
.p-l2 { margin-top: 6px; color: var(--encre-2); }
.price-card .rule-h { margin: 16px 0 14px; }
.bens { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bens li { display: flex; gap: 12px; align-items: flex-start; font: 400 15px/1.4 var(--sans); letter-spacing: -.011em; color: var(--encre); }
.bens .tube { flex: none; width: 20px; height: 7px; margin-top: 7.5px; }
.bens b { font-weight: 400; }
.tl { margin-top: 12px; border-radius: 24px; padding: 20px 18px 6px; position: relative; }
.tl-row { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding-bottom: 16px; }
.tl-row::before { content: ""; position: absolute; left: 19.5px; top: 22px; bottom: -4px; width: 1px; background: var(--filet); }
.tl-row:last-child::before { display: none; }
.tl-node { position: relative; height: 28px; }
.tl-node canvas { position: absolute; left: 0; top: 0; width: 40px; height: 30px; }
.tl-row.far .tl-node canvas { opacity: .5; filter: blur(.6px); }
.tl-now { position: absolute; left: 19.25px; top: -4px; width: 1.5px; height: 24px; background: var(--present); animation: breathe 2.4s var(--ease) infinite; }
.tl-beam { position: absolute; left: 19.25px; top: -8px; width: 1.5px; height: 16px; border-radius: 1px;
  background: linear-gradient(to top, rgba(255,255,255,.85), rgba(255,255,255,.35)); animation: breathe 2.4s var(--ease) infinite; }
.tl-date { margin: 2px 0 2px; font: 500 13px/1.35 var(--sans); color: var(--encre-2); }
.tl-t { margin: 0; font: 400 15px/1.4 var(--sans); letter-spacing: -.011em; color: var(--encre-2); }
.tl-t .own { color: var(--encre); }
.tl-row.tl-in { opacity: 0; transform: translateY(10px); filter: blur(6px); }
.tl-row.tl-in.is-in { opacity: 1; transform: none; filter: none; transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.offer-zone { margin: 4px -20px 0; padding: 40px 20px max(12px, env(safe-area-inset-bottom)); bottom: 0;
  background: linear-gradient(to bottom, rgba(4,4,4,0), #040404 40px); }
.offer-zone.is-arriving { animation: zone-in .52s var(--ease-press) .6s both; }
@keyframes zone-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
.pay-note { margin: 10px auto 0; max-width: 340px; text-align: center; }
.pay-note span { display: block; }
.pay-off { margin: 10px auto 0; max-width: 340px; text-align: center; font: 400 13px/1.4 var(--sans); color: var(--encre); }
.closed { margin-top: 14px; text-align: center; }
.closed .body { max-width: 340px; margin: 0 auto; }
.closed .pill { margin-top: 22px; }
.p-vat { margin-top: 10px; }
/* VAT included (the UK, the EU): cents sit small, cap to cap, and the opening price takes its own line when
   the row runs out of room */
.price .cents { font-size: .5em; letter-spacing: -.01em; vertical-align: .72em; }
.price-card.is-vat .price-row { flex-wrap: wrap; row-gap: 8px; }
.price-card.is-vat .p-then { margin-left: auto; }
/* S11 · the lifetime's spots and timer (api/_offer.js): real numbers, in the case's light. A lit tube is a
   spot already paid; the timer counts to the second, in tabular figures so nothing shifts as it runs */
.offer-note { margin: 10px auto 0; max-width: 340px; text-align: center; color: var(--encre); text-wrap: balance; }
.seats { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--filet); }
.seats-row { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 15px/1.4 var(--sans); letter-spacing: -.011em; color: var(--encre); }
.seat-tubes { display: inline-flex; flex: none; gap: 6px; }
.seat-tubes[hidden] { display: none; }
.seat-tubes .tube { width: 20px; height: 7px; }
.ends-row { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; margin: 8px 0 0; font: 400 15px/1.4 var(--sans); letter-spacing: -.011em; color: var(--encre-2); }
.countdown { font: 500 15px/1.4 var(--sans); letter-spacing: 0; color: var(--encre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.countdown i { font-style: normal; font-weight: 400; color: var(--encre-2); margin: 0 1px 0 1px; }
.ends-note { margin-top: 4px; text-wrap: balance; }
/* the price and its unit take the row; the other price (what everyone else pays, or the month) sits under it,
   on one line */
.price-card .price-row { flex-wrap: wrap; row-gap: 6px; }
.price-card .p-then { flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 6px; width: 100%; margin: 0; text-align: left; }
.p-l1, .p-l2 { text-wrap: pretty; }
.faq-a a { color: var(--encre); text-decoration: underline; text-decoration-color: rgba(255,255,255,.28); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.region { margin-top: 14px; text-align: center; }
.region .body { max-width: 340px; margin: 0 auto; text-wrap: balance; }
.wait-form { position: relative; display: grid; gap: 12px; width: min(100%, 350px); margin: 22px auto 0; }
.wait-form .pill { width: 100%; }
.wait-status { min-height: 18px; text-wrap: balance; }
.wait-status .tbtn { min-height: 44px; margin: -12px 0; padding: 0 4px; vertical-align: middle; color: var(--encre); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.faq { display: grid; gap: 10px; margin-top: 30px; }
.faq-item { border-radius: var(--r-option); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 56px; padding: 14px 18px 14px 20px;
  border: 0; background: none; cursor: pointer; text-align: left; font: 500 16px/1.3 var(--sans); letter-spacing: -.011em; color: var(--encre); }
.faq-q svg { width: 12px; height: 12px; flex: none; color: var(--encre-2); transition: transform .32s var(--ease); }
.faq-q[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-move); }
.faq-a > div { overflow: hidden; }
.faq-a p { margin: 0; padding: 0 20px 18px; font: 400 15px/1.5 var(--sans); letter-spacing: -.011em; color: var(--encre-2); }
.faq-a .tbtn { min-height: 32px; padding: 0 4px; color: var(--encre); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-a p { animation: rise .5s var(--ease) both; }
.under-faq { margin: 18px auto 0; text-align: center; }
.offer .site-foot { padding-top: 36px; margin: 0 -20px; }

/* the piece bar (S11 scrolled): glass over the scrolling page */
.piecebar {
  position: fixed; z-index: 45; top: max(12px, env(safe-area-inset-top)); left: max(12px, calc(50% - var(--col) / 2 + 12px)); right: max(12px, calc(50% - var(--col) / 2 + 12px));
  height: 56px; border-radius: 18px; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 10px;
  transform: translateY(calc(-100% - 20px)); transition: transform .32s var(--ease-press); pointer-events: none;
}
.piecebar.is-on { transform: none; }
.piecebar .slot { flex: none; margin: 0; top: -3px; }
.pb-t { flex: 1; min-width: 0; margin: 0; font: italic 500 18px/1.1 var(--serif); color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-p { margin: 0; font: 600 15px/1 var(--sans); color: var(--encre); }
.rig.is-fixed { z-index: 50; }

/* S12 · Checkout */
.co { padding-top: 68px; }
.sumbar { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 16px 0 12px; border-radius: 20px; }
.sumbar .slot { flex: none; margin: 0; top: -3px; }
.sum-txt { min-width: 0; }
.sum-t { margin: 0 0 3px; font: italic 500 18px/1.1 var(--serif); color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-note { margin: 12px 4px 14px; text-align: center; }
.co-panel { position: relative; min-height: 560px; padding: 8px; border-radius: 24px; background: rgba(255,255,255,.03); }
.co-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; pointer-events: none; transition: opacity .4s var(--ease); }
.co-wait.is-off { opacity: 0; }
.co-line { display: block; width: 1px; height: 64px; background: var(--present); animation: co-breathe 1.2s var(--ease) infinite alternate; }
@keyframes co-breathe { from { opacity: .35; } to { opacity: .7; } }
.co-slow { opacity: 0; transition: opacity .6s var(--ease); }
.co-slow.is-on { opacity: 1; }
.co-err { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.co-err[hidden] { display: none; }
.co-err-say { margin: 0; font: italic 500 26px/1.1 var(--serif); color: var(--encre); outline: none; }
.co-err .pill { width: 100%; margin: 8px 0 0; }
.co-err .foot { max-width: 300px; }
.co-err .tbtn { min-height: 32px; padding: 0 4px; color: var(--encre); }
#checkout { position: relative; z-index: 1; border-radius: 18px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .echo, .s9-sheet.is-on, .tile-lab, .fix-chip, .tl-row.tl-in.is-in, .faq-a, .piecebar { transition-duration: .3s !important; }
  .offer-zone.is-arriving { animation: fade-in .3s var(--ease) both; }
  .tl-now, .tl-beam, .co-line { animation: none; }
  .faq-item.is-open .faq-a p { animation: none; }
}
#slotHears { position: absolute; top: 16px; left: 50%; margin-left: -84px; }
#slotPath { margin: 0 auto; }
.hears-chip { letter-spacing: .12em; padding: 0 12px; gap: 8px; }
.s9-sheet .caps { letter-spacing: .13em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-note span, .co-note { text-wrap: balance; }
.player-card { height: clamp(250px, 42svh, 320px); }
.player-card.is-tall { height: clamp(270px, 44svh, 320px); }
a.pill { text-decoration: none; }
.chip.two { height: auto; padding: 8px 14px; border-radius: 14px; flex-direction: column; align-items: flex-start; gap: 5px; }
.chip.two .rule { display: none; }
.hears-label { text-wrap: balance; }
.seg, .minutes > .foot { white-space: nowrap; }
.minutes { flex-wrap: wrap; row-gap: 8px; }
.q .pill-zone .pill, .offer-zone .pill { width: min(100%, 350px); }
/* busy: the pill stays white, its label dims and the present line crosses it */
.pill.is-busy:disabled { color: rgba(6,6,6,.3); box-shadow: inset 0 1px .5px #fff, inset 0 -1px .5px rgba(0,0,0,.2), 0 0 24px rgba(255,255,255,.14), 0 14px 34px rgba(0,0,0,.55); }
.pill.is-busy:disabled::before { transform: none; }
#checkout { opacity: 0; transition: opacity .3s var(--ease); }   /* .3 s: the form shows as soon as it is ready (1/10) */
#checkout.is-ready { opacity: 1; }
.is-empty .fp-cv.story-fp, .is-empty .story-fp.is-on { opacity: 0 !important; }

/* ================================================================== FUNNEL fixes, round 1 (23/9) */
/* the ground's grain, so a sticky fade or a scrim never reads as a flat tile over the page */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); }
.pill-zone { background: var(--grain) repeat, linear-gradient(to bottom, rgba(4,4,4,0), #040404 32px); background-clip: padding-box; }
.offer-zone { background: var(--grain) repeat, linear-gradient(to bottom, rgba(4,4,4,0), #040404 40px); }
.pill-zone, .offer-zone { -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,0), #000 24px); mask: linear-gradient(to bottom, rgba(0,0,0,0), #000 24px); }

/* busy: a 2 px line runs along the pill's bottom edge, left to right, looping; the label stays legible */
.pill.is-busy, .pill.is-busy:disabled { color: rgba(6,6,6,.55); overflow: hidden; }
.pill.is-busy::after {
  top: auto; bottom: 0; left: 0; width: 34%; height: 2px;
  background: linear-gradient(90deg, rgba(6,6,6,0), rgba(6,6,6,.6), rgba(6,6,6,0));
  animation: busy-run 1.2s var(--ease) infinite;
}
@keyframes busy-run { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* Back stays on screen on long screens; on the checkout nothing is fixed while Stripe is mounted */
.back { position: fixed; z-index: 48; }
html[data-step="checkout"] .back { position: absolute; }
html.bar-on .back { top: max(20px, calc(env(safe-area-inset-top) + 8px)); }
.back, .startover { scroll-margin-top: 0; }

/* focused controls scroll clear of the sticky pill zones and the fixed Back/piece bar */
.opt, .fastp, .faq-q, .tbtn, .seg, .row, .search input { scroll-margin-bottom: 170px; scroll-margin-top: 96px; }

/* hit areas (44 px) and the search field's focus ring */
.site-foot a { padding: 13px 4px; }
.site-foot .tbtn, .faq-a .tbtn, .co-err .tbtn { min-height: 44px; }
.faq-a .tbtn, .co-err .tbtn { margin: -12px 0; vertical-align: middle; }
.closed .body { text-wrap: balance; }
.closed .tbtn { min-height: 44px; margin: -12px 0; padding: 0 4px; vertical-align: middle; color: var(--encre); }
.site-foot .mail-row { flex-basis: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; }
.search:focus-within { box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), var(--ombre); }
.search input::placeholder { color: var(--encre-2); }

/* S1: the search zone has no ground at rest; once stuck, a gradient of the ground spans the viewport,
   with a band above the field for the Back circle */
.stick-mark { display: block; height: 1px; margin-bottom: -1px; }
.search-zone {
  position: sticky; top: 0; z-index: 6; margin: -42px calc(50% - 50vw) 0; padding: 64px calc(50vw - 50%) 24px;
  background: none; pointer-events: none;
}
.search-zone::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grain) repeat, linear-gradient(to bottom, #040404 calc(100% - 24px), rgba(4,4,4,0));
  -webkit-mask: linear-gradient(#000 calc(100% - 24px), rgba(0,0,0,0)); mask: linear-gradient(#000 calc(100% - 24px), rgba(0,0,0,0));
  opacity: 0; transition: opacity .2s var(--ease);
}
.search-zone.is-stuck::before { opacity: 1; }
.search-zone .search { pointer-events: auto; }

/* S2, S7: no orphan words */
.s2-caps { text-wrap: balance; }
.opt { text-wrap: balance; padding-right: 54px; }

/* S3-S7 on short screens: a smaller dock case, tighter options, the fifth option above the pill */
@media (max-height: 720px) {
  html[data-step="audience"] .rig.size-dock, html[data-step="blockers"] .rig.size-dock, html[data-step="answer"] .rig.size-dock,
  html[data-step="played"] .rig.size-dock, html[data-step="hands"] .rig.size-dock { --cw: 128px; }
  #step-audience .slot[data-size="dock"], #step-blockers .slot[data-size="dock"], #step-answer .slot[data-size="dock"],
  #step-played .slot[data-size="dock"], #step-hands .slot[data-size="dock"] { width: 128px; height: calc(128px / 1.521 + 14px); }
  .opt { min-height: 48px; padding: 12px 54px 12px 18px; }
  .q .opts { gap: 8px; margin-top: 18px; }
  .echo { margin-top: 4px; }
  .echo + .q-say { margin-top: 2px; }
  .say-l { font-size: 29px; }
  .q-hint { margin-top: 6px; }
  .q .opts { margin-top: 14px; }
  .answer-card { margin-top: 18px; gap: 12px; }
  .fastp { margin-top: 4px; }
}
@media (max-height: 620px) {
  .say-l { font-size: 27px; }
  .q .pill-zone:not(.offer-zone) { position: relative; }
}

/* S9: a column that fits the screen; the path takes what the sheet leaves; the pill sits in the sheet */
.screen.q.s9 { padding-bottom: 0; }
.path-view { flex: 1 1 auto; display: flex; flex-direction: column; }
.path-zone { flex: 1 1 auto; height: auto; min-height: 110px; }
.s9-sheet { flex: none; margin: 0 -4px max(16px, env(safe-area-inset-bottom)); padding: 18px 16px 16px; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.s9-sheet::after {                                    /* Today's light, glowing through the glass edge */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(110px 50px at var(--t0x, 50%) 0, rgba(255,255,255,.14), rgba(255,255,255,0) 70%);
}
.s9-body { font-size: 14px; line-height: 1.4; }
.sheet-pill { position: static; margin: 2px 0 0; padding: 0; background: none; border-radius: 0; }
.minutes { flex-wrap: nowrap; gap: 8px; }
.minutes .segs { flex: none; }
.minutes .seg { height: 34px; min-width: 56px; padding: 0 12px; font-size: 14px; }
@media (max-width: 380px) { .minutes .seg { padding: 0 9px; } .minutes .segs { gap: 5px; } }
.seg .hit { position: absolute; left: -3px; right: -3px; top: -5px; bottom: -5px; }
.tile-lab span { display: inline; }
.tile-lab.two span { display: block; }
.recap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fixChip { z-index: 5; }                               /* above the present line: the line never cuts its words */
.player-card::before { z-index: 4; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.05)); }
.player-card { box-shadow: var(--ombre); }
@media (max-height: 720px) {
  .s9-body { display: none; }
  .screen.q.s9 { padding-top: 12px; }
  #slotHears { top: 12px; }
  #slotPath { width: 168px; height: calc(168px / 1.521 + 16px); }
}
@media (max-height: 620px) {
  .s9-sheet { padding: 16px 16px 14px; gap: 8px; }
  .s9-say { font-size: 26px; }
}

/* S10 on short screens: the dock case, a tighter card; "Sign without holding" stays in view */
@media (max-height: 620px) {
  #step-pact .screen.q { padding-top: 12px; }
  #slotPact { width: 168px; height: calc(168px / 1.521 + 16px); }
  .pact { margin-top: 12px; padding: 20px 18px 8px; }
  .pact-body { font-size: 19px; line-height: 1.32; margin: 10px 0 12px; }
  .print { width: 84px; height: 84px; }
  .print .fp { left: 9px; top: 9px; width: 66px; height: 66px; }
  .fp-front { left: 10px; right: 10px; top: 9px; }
  .sign-label { margin-top: 4px; min-height: 30px; }
}

/* S11: the price card holds the price only; the benefits have their own card after the timeline */
.bens-card { margin-top: 12px; padding: 18px 20px; }
.pay-note { max-width: 350px; margin-inline: auto; text-wrap: balance; }
.pay-note span { display: inline; }
.pay-note span + span::before { content: " "; }
@media (max-height: 620px) {
  #slotOffer { display: none; }
  .offer-say { margin-top: 64px; font-size: 28px; }
}
/* the piece bar: room on its left for the fixed Back circle, and a scrim of the ground above it */
.piecebar { padding-left: 58px; }
#slotBar { min-height: 37px; }
#slotBar::after { content: ""; position: absolute; inset: -4px -6px; }
.pb-scrim {
  position: fixed; z-index: 44; left: 0; right: 0; top: 0; height: calc(max(12px, env(safe-area-inset-top)) + 64px);
  background: var(--grain) repeat, linear-gradient(#040404 70%, rgba(4,4,4,0));
  -webkit-mask: linear-gradient(#000 70%, rgba(0,0,0,0)); mask: linear-gradient(#000 70%, rgba(0,0,0,0));
  opacity: 0; transition: opacity .32s var(--ease); pointer-events: none;
}
.pb-scrim.is-on { opacity: 1; }

/* S12: the summary bar sits under the Back circle; the mini case centres on it */
.screen.q.co { padding-top: calc(max(16px, env(safe-area-inset-top)) + 52px); }
.sumbar .slot { top: auto; align-self: center; margin-top: -6px; }

@media (prefers-reduced-motion: reduce) {
  .search-zone::before, .pb-scrim { transition-duration: .3s; }
}

/* ================================================================== FUNNEL fixes, round 2 (23/9) */
/* S1: the list track never grows past the column, so long titles end in their ellipsis inside the gutter;
   rows below the fold skip layout until they come near */
.rows { grid-template-columns: minmax(0, 1fr); }
.row { min-width: 0; content-visibility: auto; contain-intrinsic-size: auto 64px; }

/* S4: the hint folded into the sentence (read with it everywhere, shown inline on short screens) */
.q-hint-in { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* S3-S7 on small phones (≤ 620 px tall): the pill stays sticky; the screen gives back height instead */
@media (max-height: 620px) {
  .q .pill-zone:not(.offer-zone) { position: sticky; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  html[data-step="audience"] .rig.size-dock, html[data-step="blockers"] .rig.size-dock, html[data-step="answer"] .rig.size-dock,
  html[data-step="played"] .rig.size-dock, html[data-step="hands"] .rig.size-dock { --cw: 104px; }
  #step-audience .slot[data-size="dock"], #step-blockers .slot[data-size="dock"], #step-answer .slot[data-size="dock"],
  #step-played .slot[data-size="dock"], #step-hands .slot[data-size="dock"] { width: 104px; height: calc(104px / 1.521 + 14px); }
  #step-audience .screen.q, #step-blockers .screen.q, #step-answer .screen.q, #step-played .screen.q, #step-hands .screen.q { padding-top: 12px; }
  .echo { height: 24px; }
  .opt { min-height: 44px; padding: 10px 54px 10px 16px; }
  .q .opts { gap: 6px; margin-top: 12px; }
  #step-blockers .q-hint { display: none; }
  .q-hint-in { position: static; width: auto; height: auto; margin: 0 0 0 4px; overflow: visible; clip: auto; white-space: nowrap;
    font: 400 13px/1.4 var(--sans); letter-spacing: -.005em; color: var(--encre-2); vertical-align: .2em; }
}

/* S9 · the sheet never takes a tap before it is shown (a tap during the build settles the path) */
.s9-sheet { pointer-events: none; }
.s9-sheet.is-on { pointer-events: auto; }
/* her own words, whole: two lines at most, never an ellipsis */
.recap { white-space: normal; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: clip; }
.s9-body-short, .first-short { display: none; }
.first-short { margin: 0; font: 500 13px/1.4 var(--sans); letter-spacing: -.005em; color: var(--encre-2); }
.first-short .own { color: var(--encre); white-space: nowrap; }
.first-short.no-week .fs-w { display: none; }
.recap span { white-space: nowrap; }
/* S9 intro: the missed note's ring, and the zoom layer (canvas + ring scale together) */
.hears-zoom { position: absolute; left: 0; top: 0; right: 0; bottom: 0; transform-origin: 0 0; }
/* a 1 px ring of light around the note that did not sound; it breathes .45 <-> .8 (light only, never colour) */
.miss-ring { position: absolute; left: 0; top: 0; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.miss-ring.is-on { opacity: 1; }
.miss-ring > i { position: absolute; inset: 0; border-radius: inherit; border: 1px solid #fff; opacity: .45; animation: ring-breathe 2.4s var(--ease) infinite; }
@keyframes ring-breathe { 0%, 100% { opacity: .45; } 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .miss-ring > i { animation: none; opacity: .6; } }
/* S9 on short screens (≤ 720 px): the road is the hero; the sheet is tighter */
@media (max-height: 720px) {
  .s9-body { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .s9-body-short { display: block; margin: 0; font-size: 13px; line-height: 1.35; }
  .s9-say { font-size: 24px; line-height: 1.1; }         /* the promise names her piece: two lines when it must */
  .s9-sheet { padding: 14px 16px 14px; gap: 8px; }
  .s9-sheet .caps, .first-ev { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .first-short { display: block; }
  .minutes .seg { height: 32px; }
  .s9-sheet .rule-h { margin: 0; }
}
@media (max-height: 620px) {
  .recap { display: none; }
  .s9-sheet .rule-h { display: none; }
  .s9-say { font-size: 24px; }
}
@media (max-height: 720px) and (max-width: 380px) { .s9-say { font-size: 23px; } }
/* S9 -> S10: the path screen does not sink as a block; its sheet sinks and its road fades (450 ms, JS) */
#step-path.leaving.sink-all, #step-path.leaving.sink-all-back { animation: none; }