@font-face {
  font-family: "Stencil";
  src: url(/fonts/stencil-800-latin-ext.woff2) format("woff2");
  font-weight: 800;
  font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113;
}
@font-face {
  font-family: "Stencil";
  src: url(/fonts/stencil-800-latin.woff2) format("woff2");
  font-weight: 800;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Plot";
  src: url(/fonts/bstext-600-latin-ext.woff2) format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113;
}
@font-face {
  font-family: "Plot";
  src: url(/fonts/bstext-600-latin.woff2) format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
  --cyc: #050505;
  --floor: #08070c;
  --cobalt: #0a33ff;
  --cobalt-deep: #061c99;
  --rose: #ff6aae;
  --dawn: #ffc1d6;
  --day: #f7f5ff;
  --ink: #f4f1f8;
  --ink-2: #c9c3d6;
  --ink-3: #8f88a3;
  --line: rgba(244, 241, 248, 0.16);
  --glass: rgba(9, 8, 16, 0.72);

  --display: "Stencil", "Arial Narrow", sans-serif;
  --plot: "Plot", "Arial Narrow", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-light: cubic-bezier(0.77, 0, 0.175, 1);
  --cue: 2400ms;
  --hz: 72%;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--cyc);
  color: var(--ink);
  font: 400 17px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
::selection { background: var(--rose); color: var(--cyc); }
input { caret-color: var(--rose); }
:focus-visible { outline: 2px solid var(--dawn); outline-offset: 3px; }

/* ---------- the stage: a seamless cyclorama lit by phase ---------- */

.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--cyc); }
.stage > * { position: absolute; inset: 0; opacity: 0; transition: opacity var(--cue) var(--ease-light); will-change: opacity; }
.stage .sky-cobalt {
  background:
    radial-gradient(140% 30% at 50% var(--hz), rgba(10, 51, 255, 0.95) 0%, rgba(10, 51, 255, 0.55) 30%, rgba(6, 28, 153, 0.18) 62%, transparent 80%);
}
.stage .sky-rose {
  background:
    radial-gradient(150% 46% at 50% calc(var(--hz) - 2%), rgba(255, 106, 174, 0.9) 0%, rgba(255, 106, 174, 0.42) 34%, rgba(120, 40, 160, 0.16) 60%, transparent 78%);
}
.stage .sky-dawn {
  background:
    radial-gradient(130% 34% at 50% calc(var(--hz) - 1%), rgba(255, 193, 214, 0.95) 0%, rgba(255, 193, 214, 0.35) 40%, transparent 72%);
}
.stage .sky-day {
  background: linear-gradient(to top, transparent calc(100% - var(--hz)), rgba(247, 245, 255, 0.9) calc(100% - var(--hz)), rgba(247, 245, 255, 0.32) 52%, transparent 86%);
}
.stage .floor {
  opacity: 1;
  top: var(--hz);
  background:
    linear-gradient(to bottom, rgba(5, 5, 5, 0) 0%, var(--floor) 18%, var(--cyc) 100%);
}
.stage .floor::before {
  /* the lit floor just under the horizon */
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 22%;
  background: linear-gradient(to bottom, var(--floor-glow, transparent), transparent);
  transition: background var(--cue) var(--ease-light);
}
.stage .horizon {
  top: var(--hz); bottom: auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--horizon, rgba(244, 241, 248, 0.5)) 18%, var(--horizon, rgba(244, 241, 248, 0.5)) 82%, transparent);
  box-shadow: 0 0 18px 2px var(--horizon-glow, transparent);
}

/* phase 0: blackout — only a pilot ember on the horizon, so the stage still reads as a stage */
.stage[data-phase="0"] .sky-cobalt { opacity: 0.14; }
.stage[data-phase="0"] .horizon { opacity: 0.3; --horizon: #3d5cff; --horizon-glow: rgba(10, 51, 255, 0.35); }
/* phase 1: first light — cobalt appears low */
.stage[data-phase="1"] .sky-cobalt { opacity: 0.55; }
.stage[data-phase="1"] .horizon { opacity: 0.6; --horizon: #5c78ff; --horizon-glow: rgba(10, 51, 255, 0.6); }
/* phase 2: cobalt rise */
.stage[data-phase="2"] .sky-cobalt { opacity: 1; }
.stage[data-phase="2"] .horizon { opacity: 0.85; --horizon: #7d93ff; --horizon-glow: rgba(10, 51, 255, 0.8); }
/* phase 3: rose gathers above the cobalt */
.stage[data-phase="3"] .sky-cobalt { opacity: 1; }
.stage[data-phase="3"] .sky-rose { opacity: 0.6; }
.stage[data-phase="3"] .horizon { opacity: 0.95; --horizon: #d9a3ff; --horizon-glow: rgba(255, 106, 174, 0.6); }
/* phase 4: dawn bloom */
.stage[data-phase="4"] .sky-cobalt { opacity: 0.8; }
.stage[data-phase="4"] .sky-rose { opacity: 1; }
.stage[data-phase="4"] .sky-dawn { opacity: 0.55; }
.stage[data-phase="4"] .horizon { opacity: 1; --horizon: #ffd3e3; --horizon-glow: rgba(255, 193, 214, 0.8); }
/* phase 5: day wash — every year found */
.stage[data-phase="5"] .sky-cobalt { opacity: 0.6; }
.stage[data-phase="5"] .sky-rose { opacity: 1; }
.stage[data-phase="5"] .sky-dawn { opacity: 1; }
.stage[data-phase="5"] .sky-day { opacity: 0.55; }
.stage[data-phase="5"] .horizon { opacity: 1; --horizon: #fff; --horizon-glow: rgba(255, 255, 255, 0.9); }
.stage[data-phase="1"] .floor, .stage[data-phase="2"] .floor { --floor-glow: rgba(10, 51, 255, 0.22); }
.stage[data-phase="3"] .floor, .stage[data-phase="4"] .floor { --floor-glow: rgba(255, 106, 174, 0.2); }
.stage[data-phase="5"] .floor { --floor-glow: rgba(255, 193, 214, 0.28); }
/* content-heavy scenes dim the house so text and video stay legible over the light */
.stage .scrim { background: rgba(5, 5, 5, 0.62); transition-duration: 700ms; transition-timing-function: var(--ease-out); }
body.dim .stage .scrim { opacity: 1; }
/* white out: the light leaves the screen for the lamp */
.stage[data-phase="out"] > * { transition-duration: 700ms; }
.stage[data-phase="out"] .sky-day { opacity: 1; background: var(--day); }
.stage[data-phase="black"] > * { opacity: 0; transition-duration: 1600ms; }
.stage[data-phase="black"] .floor { opacity: 1; }
.stage[data-phase="black"] .sky-rose { opacity: 0.16; transition-duration: 4000ms; }
.stage[data-phase="black"] .horizon { opacity: 0.45; --horizon: var(--dawn); --horizon-glow: rgba(255, 106, 174, 0.4); transition-duration: 4000ms; }

/* ---------- layout ---------- */

#app {
  position: relative; z-index: 1;
  max-width: 480px; margin: 0 auto;
  min-height: 100svh;
  padding: calc(14px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
.scene { flex: 1; display: flex; flex-direction: column; animation: scene-in 420ms var(--ease-out) both; }
@keyframes scene-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
.scene.leaving { animation: scene-out 200ms var(--ease-out) both; }
@keyframes scene-out { to { opacity: 0; filter: blur(4px); } }

.body { display: flex; flex-direction: column; gap: 22px; padding-top: 9vh; }
.body.tight { padding-top: 4vh; }
.dock { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 12px; }

/* status strip: where she is in the plot */
.strip { display: flex; align-items: center; justify-content: space-between; height: 32px; font: 600 13px/1 var(--plot); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); }
.ticks { display: flex; gap: 5px; }
.ticks i { display: block; width: 18px; height: 3px; background: rgba(244, 241, 248, 0.16); transition: background 600ms var(--ease-out); }
.ticks i.on { background: var(--tick, var(--rose)); }
.ticks i:nth-child(1).on { --tick: #3d5cff; }
.ticks i:nth-child(2).on { --tick: #6b6bff; }
.ticks i:nth-child(3).on { --tick: #b46bf0; }
.ticks i:nth-child(4).on { --tick: var(--rose); }
.ticks i:nth-child(5).on { --tick: var(--dawn); }

/* ---------- type ---------- */

h1, h2 { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 0.92; letter-spacing: 0.01em; text-wrap: balance; }
h1 { font-size: clamp(52px, 16vw, 68px); }
h2 { font-size: clamp(44px, 13.5vw, 60px); }
h1.long, h2.long { font-size: clamp(34px, 10vw, 44px); line-height: 0.98; }
.q { margin: 0; font: 600 26px/1.25 var(--body); letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0; }
.lede { font-size: 19px; line-height: 1.5; color: var(--ink); white-space: pre-line; max-width: 34ch; text-wrap: pretty; }
.soft { color: var(--ink-2); }
.label { font: 600 13px/1.2 var(--plot); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; }

/* ---------- controls ---------- */

.cue {
  appearance: none; border: 0; cursor: pointer; text-decoration: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 60px; padding: 0 20px;
  border-radius: 4px;
  font: 600 16px/1 var(--plot); letter-spacing: 0.24em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(100deg, var(--cobalt) 0%, #5a3cf0 48%, var(--rose) 100%);
  box-shadow: 0 10px 30px -12px rgba(255, 106, 174, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: transform 160ms var(--ease-out), opacity 200ms var(--ease-out), filter 200ms var(--ease-out);
}
.cue svg { width: 20px; height: 20px; flex: none; }
.cue:active { transform: scale(0.97); }
.cue.ghost { background: rgba(5, 5, 5, 0.5); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.cue.quiet { background: none; box-shadow: none; color: var(--ink-2); min-height: 48px; padding: 0; justify-content: flex-start; letter-spacing: 0.2em; font-size: 14px; }
.cue[disabled] { opacity: 0.4; pointer-events: none; }

/* the riddle: a dark glass cue card with the light along its top edge */
.card {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 4px;
  padding: 22px 20px 20px;
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -20px rgba(0, 0, 0, 0.9);
  display: flex; flex-direction: column; gap: 14px;
}
.card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 4px 4px 0 0;
  background: var(--edge, linear-gradient(90deg, var(--cobalt), var(--rose)));
}
html[data-phase="0"] { --edge: linear-gradient(90deg, #1b2a8a, #3d5cff); }
html[data-phase="1"] { --edge: linear-gradient(90deg, var(--cobalt-deep), var(--cobalt)); }
html[data-phase="2"] { --edge: linear-gradient(90deg, var(--cobalt), #6b6bff); }
html[data-phase="3"] { --edge: linear-gradient(90deg, var(--cobalt), #b46bf0, var(--rose)); }
html[data-phase="4"] { --edge: linear-gradient(90deg, #b46bf0, var(--rose), var(--dawn)); }
html[data-phase="5"] { --edge: linear-gradient(90deg, var(--rose), var(--dawn), var(--day)); }
.riddle-text { font: 500 22px/1.38 var(--body); letter-spacing: -0.01em; white-space: pre-line; text-wrap: pretty; }
.prompter { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.prompt-line { font-size: 16px; line-height: 1.45; color: var(--dawn); white-space: pre-line; animation: scene-in 500ms var(--ease-out) both; }
.prompt-line b { font: 600 12px/1 var(--plot); letter-spacing: 0.22em; text-transform: uppercase; color: var(--rose); margin-right: 8px; }
.prompt-wait { font: 600 13px/1.2 var(--plot); font-variant-numeric: tabular-nums; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }

.tap-note { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.tap-note svg { width: 22px; height: 22px; flex: none; color: var(--rose); margin-top: 1px; }

/* multiple choice: each answer is a row in the cue list */
.options { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.opt {
  position: relative; overflow: hidden; isolation: isolate;
  appearance: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px;
  min-height: 68px; padding: 14px 4px 14px 0;
  background: linear-gradient(90deg, rgba(5, 5, 5, 0.55), rgba(5, 5, 5, 0.2));
  color: var(--ink); font: 500 19px/1.3 var(--body);
  transition: transform 160ms var(--ease-out), opacity 300ms var(--ease-out), color 300ms var(--ease-out);
}
.opt .key { font: 800 30px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--rose); text-align: center; transition: color 300ms var(--ease-out); }
.opt:active { transform: scale(0.985); }
.opt .fill {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--dawn), var(--day));
  clip-path: inset(0 100% 0 0);
  transition: clip-path 520ms var(--ease-out);
}
.opt > span { position: relative; z-index: 1; }
.opt.right { color: var(--cyc); }
.opt.right .key { color: var(--cobalt); }
.opt.right .fill { clip-path: inset(0 0 0 0); }
.opt.out { pointer-events: none; background: none; }
.opt.out > span { opacity: 0.32; }
.opt.out > span:last-child { text-decoration: line-through; text-decoration-color: var(--rose); text-decoration-thickness: 2px; }
.reply { min-height: 26px; font: 600 15px/1.4 var(--plot); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose); }

/* PIN: four stencil cells over one real input */
.pin { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pin input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; border: 0; }
.pin .cell {
  height: 82px; border-radius: 4px; display: grid; place-items: center;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--line);
  font: 800 48px/1 var(--display); color: var(--ink);
  transition: box-shadow 200ms var(--ease-out), color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.pin .cell.now { box-shadow: inset 0 0 0 2px var(--rose); }
.pin.bad .cell { color: var(--rose); background-color: rgba(255, 106, 174, 0.12); box-shadow: inset 0 0 0 2px var(--rose); }

/* video: the year's scene */
.scene-frame { position: relative; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px -24px rgba(10, 51, 255, 0.6); background: #000; }
.scene-frame video { display: block; width: 100%; max-height: 62svh; background: #000; }

/* finale cue list */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.steps li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.45; }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps svg { width: 24px; height: 24px; color: var(--rose); margin-top: 1px; }

.countdown { font: 800 72px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--dawn); min-height: 72px; }

/* the note, on a dark stage */
.note { font: 500 24px/1.5 var(--body); letter-spacing: -0.01em; white-space: pre-line; color: var(--ink); opacity: 0; animation: note-in 5s 1.2s var(--ease-out) forwards; text-wrap: pretty; }
@keyframes note-in { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }

.list { display: flex; flex-direction: column; gap: 12px; }
.year-card { display: flex; flex-direction: column; gap: 14px; padding: 22px 0; border-top: 1px solid var(--line); }
.cue-head { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; gap: 6px; }
.cue-head .num { font: 800 44px/0.9 var(--display); font-variant-numeric: tabular-nums; color: var(--rose); }
.note-sign { font: 800 30px/1 var(--display); text-transform: uppercase; color: var(--dawn); opacity: 0; animation: note-in 3s 4s var(--ease-out) forwards; }
audio { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .cue:hover { filter: brightness(1.08); }
  .opt:hover { box-shadow: inset 0 0 0 1px rgba(244, 241, 248, 0.4); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --cue: 500ms; }
  .scene, .scene.leaving, .prompt-line { animation-duration: 1ms; }
  .note { animation: note-in 600ms forwards; }
  .stage > *, .stage .floor::before { transition: none !important; }
}