:root {
  --bg: #000000;
  --ink: #F2F0EB;
  --mute: #A8A49C;
  --label: #8A867E;
  --faint: #7F7B74;
  --line: #2A2826;
  --line2: #4A4743;
  --off: #6E6A63;
  --silver: #C9C6BF;
  --display: 'Cinzel', 'Times New Roman', serif;
  --text: 'EB Garamond', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: #FFFFFF; }
a:focus-visible, button:focus-visible, input:focus-visible + span, .otp:focus-within .otp-cells {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }

.wrap {
  max-width: 440px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(44px + env(safe-area-inset-top, 0px)) 28px calc(40px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.logo { display: block; line-height: 0; }
.logo img { width: 30px; height: auto; }

/* ---------- type */
.kicker { font-style: italic; font-size: 17px; color: var(--mute); }
.numeral { font-family: var(--display); font-size: 88px; line-height: 1; margin-top: 4px; }
.door-title, .label.center {
  font-family: var(--display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.32em;
  padding-left: 0.32em;
  margin-top: 8px;
}
.door-title.spaced { margin-top: 18px; font-size: 16px; letter-spacing: 0.24em; padding-left: 0.24em; text-align: center; }
.lead { font-size: 19px; color: var(--mute); text-align: center; margin-top: 10px; }
.big {
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  text-align: center;
}
.big.smaller { font-size: 17px; line-height: 1.6; letter-spacing: 0.12em; padding-left: 0.12em; }
.trial-title { font-family: var(--display); font-weight: 400; font-size: 40px; letter-spacing: 0.12em; padding-left: 0.12em; }
.theme { font-style: italic; font-size: 20px; color: var(--mute); margin-top: 2px; }
.who { margin-top: 14px; font-size: 15px; color: var(--faint); text-align: center; }
.who a { color: var(--mute); margin-left: 8px; }
.who.quiet { font-style: italic; font-size: 16px; }
.note { font-size: 15px; color: var(--faint); text-align: center; line-height: 1.5; }
.note a { color: var(--mute); }
.small { font-size: 14px; color: var(--faint); }
.label { display: block; font-style: italic; font-size: 16px; color: var(--label); margin-bottom: 6px; }
.label.center { font-style: normal; color: var(--ink); text-align: center; margin: 0 0 10px; }

/* ---------- sections */
.gate, .trial, .wait, .final, .accepted, .closed {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 26px;
}
.wait { flex: 1; margin-top: 0; }
.wait .big { margin-top: 56px; }
.wait .lead { font-size: 20px; margin-top: 16px; }
.when { margin-top: 28px; font-size: 16px; color: var(--mute); text-align: center; }
.soon { margin-top: 22px; font-family: var(--display); font-size: 12px; letter-spacing: 0.26em; padding-left: 0.26em; color: var(--label); text-align: center; text-transform: uppercase; line-height: 1.7; }
.coda {
  margin-top: auto;
  padding-top: 28px;
  width: 100%;
  border-top: 1px solid var(--line);
  text-align: center;
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
}
.wait .countdown { margin-top: 48px; }
.actions { margin-top: auto; padding-top: 32px; width: 100%; display: flex; flex-direction: column; gap: 12px; }

/* ---------- forms */
.form { width: 100%; margin-top: 32px; display: flex; flex-direction: column; gap: 22px; }
.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.line-input { display: flex; align-items: center; gap: 4px; height: 46px; border-bottom: 1px solid var(--line2); }
.line-input:focus-within { border-bottom-color: var(--ink); }
.line-input .at { font-size: 20px; color: var(--label); }
.line-input input {
  flex: 1;
  min-width: 0;
  height: 42px;
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 20px;
  outline: none;
  padding: 0;
}
.line-input input::placeholder { color: #5E5A54; }
.code-input { font-family: var(--display) !important; letter-spacing: 0.14em; text-transform: uppercase; }

.otp { position: relative; }
.otp-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.otp-cells span {
  height: 50px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line2);
  font-family: var(--display);
  font-size: 28px;
}
.otp-cells span.filled { border-bottom-color: var(--label); }
.otp:focus-within .otp-cells span.active { border-bottom-color: var(--ink); }
.otp:focus-within .otp-cells { outline: none; }
.otp input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  font-size: 16px;
  color: transparent;
  caret-color: transparent;
}

.colors { display: flex; justify-content: space-between; margin: 0 -7px; }
.swatch { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.swatch input { position: absolute; opacity: 0; width: 44px; height: 44px; margin: 0; cursor: pointer; }
.swatch span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
  transition: box-shadow 0.15s ease;
}
.swatch input:checked + span { box-shadow: 0 0 0 3px #000000, 0 0 0 4px var(--ink); }
.swatch input:focus-visible + span { outline-offset: 5px; }
.swatch.red span { background: #D93A3A; }
.swatch.orange span { background: #F08A24; }
.swatch.yellow span { background: #F2CF3A; }
.swatch.green span { background: #2FA35E; }
.swatch.blue span { background: #2F7DE1; }
.swatch.indigo span { background: #4B3BA8; }
.swatch.violet span { background: #A55AD6; }
.color-name { height: 22px; margin-top: 6px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 13px; letter-spacing: 0.3em; padding-left: 0.3em; }
.color-name .hint { font-family: var(--text); font-style: italic; font-size: 15px; letter-spacing: 0; color: var(--faint); }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  background: var(--ink);
  color: #000000;
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.3em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { color: #000000; background: #FFFFFF; }
.btn:disabled { background: transparent; border-color: #3A3835; color: var(--off); cursor: default; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); letter-spacing: 0.2em; }
.btn.ghost.quiet { border-color: var(--line2); font-family: var(--text); font-size: 17px; letter-spacing: 0; }
.btn.ghost.small { width: auto; min-height: 48px; padding: 0 24px; font-size: 14px; letter-spacing: 0.26em; margin-top: 18px; border-color: var(--line2); }
.btn.busy { opacity: 0.6; pointer-events: none; }
.msg { min-height: 0; text-align: center; font-size: 16px; color: var(--mute); }
.msg.show { min-height: 24px; }
.msg .denied { display: block; font-family: var(--display); font-size: 15px; letter-spacing: 0.3em; padding-left: 0.3em; color: var(--ink); }
.form .note { margin-top: -6px; }
.field-help { margin-top: 8px; font-size: 15px; color: var(--faint); line-height: 1.45; }
.worthy { margin-top: 6px; font-style: italic; font-size: 19px; color: var(--mute); text-align: center; }

/* ---------- Trial III: the seven nobles
   A round table seen from above. The only colour is the one the restored Table gives the Z. */
body.nobles-room { background-image: radial-gradient(ellipse at 50% 34%, rgba(242, 240, 235, 0.05), transparent 58%); background-repeat: no-repeat; }
.nobles .theme { margin-top: 4px; }
.nobles .verse { font-size: 21px; }
.chamber { position: relative; width: calc(100% + 32px); max-width: 420px; aspect-ratio: 1 / 1; margin: 40px -16px 0; }
.table-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-chamber { fill: none; stroke: rgba(242, 240, 235, 0.08); stroke-width: 0.25; stroke-dasharray: 0.4 1.6; }
.ring-table { fill: #060606; stroke: rgba(242, 240, 235, 0.38); stroke-width: 0.3; transition: stroke 1.6s ease; }
.ring-inlay { fill: none; stroke: rgba(242, 240, 235, 0.12); stroke-width: 0.2; transition: stroke 1.6s ease; }
.ring-core { fill: #000000; stroke: rgba(242, 240, 235, 0.22); stroke-width: 0.25; transition: stroke 1.6s ease; }
.spoke { stroke: rgba(242, 240, 235, 0.1); stroke-width: 0.22; transition: stroke 1.6s ease 0.2s; }
.marker { fill: var(--mute); }
.table-z { font-family: var(--display); font-size: 15px; fill: var(--silver); }
/* The reveal, in order: beams run from each card to the centre (clockwise from the mark),
   the circle around the Z takes the colour, then the Z itself. Each line is 23 units long. */
.beam { stroke: var(--reveal, transparent); stroke-width: 0.55; stroke-linecap: round; stroke-dasharray: 23; stroke-dashoffset: 23; opacity: 0; }
.restored .beam { opacity: 0.95; animation: beam-in 0.9s cubic-bezier(0.45, 0, 0.3, 1) forwards; }
.restored .beam.b1 { animation-delay: 0.12s; }
.restored .beam.b2 { animation-delay: 0.24s; }
.restored .beam.b3 { animation-delay: 0.36s; }
.restored .beam.b4 { animation-delay: 0.48s; }
.restored .beam.b5 { animation-delay: 0.6s; }
.restored .beam.b6 { animation-delay: 0.72s; }
@keyframes beam-in { from { stroke-dashoffset: 23; } to { stroke-dashoffset: 0; } }
.restored .ring-table { stroke: rgba(242, 240, 235, 0.72); }
.restored .ring-inlay { stroke: rgba(242, 240, 235, 0.3); }
.restored .spoke { stroke: rgba(242, 240, 235, 0.25); }
.restored .ring-core { stroke: var(--reveal, rgba(242, 240, 235, 0.5)); stroke-width: 0.5; transition: stroke 0.8s ease 1.55s, stroke-width 0.8s ease 1.55s; }
.restored .table-z { fill: var(--reveal, var(--silver)); transition: fill 1.8s ease 2.05s; }
/* Returning players: the finished state, without replaying the reveal. */
.still .beam, .still .ring-core, .still .table-z, .still .spoke, .still .ring-table, .still .ring-inlay { animation: none !important; transition: none !important; }
.still .beam { stroke-dashoffset: 0; }

.seat { position: absolute; width: 50px; height: 50px; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.seat-card { width: 24px; height: 34px; border: 1px solid rgba(242, 240, 235, 0.45); border-radius: 2px; background: #000000; transform: rotate(var(--rot, 0deg)); transition: background 0.25s ease, border-color 0.25s ease; }
.seat.read .seat-card { border-color: rgba(242, 240, 235, 0.85); }
.seat.active .seat-card { background: var(--ink); border-color: var(--ink); }
.seat:active .seat-card { transform: rotate(var(--rot, 0deg)) scale(0.94); }
.seat:focus-visible { outline: none; }
.seat:focus-visible .seat-card { outline: 1px solid var(--ink); outline-offset: 4px; }
/* Seven seats, clockwise from the mark at the top (radius 41% of the chamber). */
.seat.s0 { left: 50%; top: 9%; --rot: 0deg; }
.seat.s1 { left: 82.05%; top: 24.44%; --rot: 51.43deg; }
.seat.s2 { left: 89.97%; top: 59.12%; --rot: 102.86deg; }
.seat.s3 { left: 67.79%; top: 86.94%; --rot: 154.29deg; }
.seat.s4 { left: 32.21%; top: 86.94%; --rot: 205.71deg; }
.seat.s5 { left: 10.03%; top: 59.12%; --rot: 257.14deg; }
.seat.s6 { left: 17.95%; top: 24.44%; --rot: 308.57deg; }
.reveal { min-height: 12px; margin-top: 6px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.reveal .restored-line.delay-0 { animation-delay: 2.6s; }
.reveal .restored-line.delay-1 { animation-delay: 3.6s; }
.z-name { margin-top: 14px; font-family: var(--display); font-size: 12px; letter-spacing: 0.3em; padding-left: 0.3em; text-transform: uppercase; color: var(--mute); animation: fadeIn 1s ease 4.4s both; }
.still .restored-line, .still .z-name { animation: none; }

.card-panel { width: 100%; min-height: 172px; margin-top: 12px; padding: 24px 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.card-hint { font-style: italic; font-size: 17px; color: var(--faint); }
.card-text { animation: fadeIn 0.45s ease; }
.card-text p { font-size: 19px; line-height: 1.5; }
.card-text p + p { margin-top: 6px; }
.card-text .card-title { margin-bottom: 12px; font-family: var(--display); font-size: 14px; line-height: 1.5; letter-spacing: 0.22em; padding-left: 0.22em; text-transform: uppercase; }
.card-text .card-note { margin-top: 16px; font-style: italic; font-size: 17px; color: var(--mute); }

.restore { width: 100%; margin-top: 52px; padding-top: 36px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; }
.card-panel + .restore { margin-top: 44px; padding-top: 0; border-top: 0; }
.room-title { font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: 0.3em; padding-left: 0.3em; text-transform: uppercase; }
.restore-lead { margin-top: 10px; font-style: italic; font-size: 18px; color: var(--mute); text-align: center; }
.column-wrap { width: 100%; max-width: 300px; margin-top: 26px; }
.column-head { margin-bottom: 6px; padding-right: 8px; font-family: var(--display); font-size: 12px; letter-spacing: 0.1em; color: var(--label); text-align: right; }
.column { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line2); }
.column li + li { border-top: 1px solid var(--line); }
.slot { width: 100%; min-height: 52px; display: grid; grid-template-columns: 46px 1fr; align-items: stretch; padding: 0; background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background 0.2s ease; }
.slot .pnum { display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--line); font-family: var(--display); font-size: 14px; color: var(--label); }
.slot .slot-name { display: flex; align-items: center; padding: 8px 14px; font-family: var(--display); font-size: 11px; line-height: 1.45; letter-spacing: 0.14em; text-transform: uppercase; }
.slot.empty .slot-name::before { content: 'Empty'; font-family: var(--text); font-size: 15px; font-style: italic; letter-spacing: 0; text-transform: none; color: var(--off); }
.slot.target { background: rgba(242, 240, 235, 0.04); }
.slot.target.empty .slot-name::before { content: 'Place here'; color: var(--mute); }
.slot:disabled { cursor: default; }
.slot:focus-visible { outline: 1px solid var(--ink); outline-offset: -3px; }
.tray-hint { margin-top: 26px; font-style: italic; font-size: 16px; color: var(--faint); text-align: center; }
.tray { width: 100%; margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 22px; background: none; color: var(--ink); font-family: var(--display); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.chip.selected { background: var(--ink); border-color: var(--ink); color: #000000; }
.restore > .btn { margin-top: 24px; }
.restore-msg { min-height: 24px; margin-top: 18px; font-size: 16px; color: var(--mute); text-align: center; }
.restored-line { font-family: var(--display); font-size: 12px; line-height: 1.8; letter-spacing: 0.22em; padding-left: 0.22em; color: var(--ink); text-wrap: balance; animation: fadeIn 1.2s ease both; }

/* ---------- your progress (look back at unlocked Trials) */
.trail { width: 100%; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.trail-label { font-style: italic; font-size: 16px; color: var(--label); }
.trail ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.t-step { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 12px; letter-spacing: 0.04em; color: var(--ink); text-decoration: none; transition: border-color 0.2s ease; }
a.t-step:hover { color: var(--ink); border-color: var(--ink); }
.t-step.here { background: var(--ink); color: #000000; border-color: var(--ink); }
.t-step.locked { border-style: dashed; border-color: var(--line); color: var(--off); }
.wait .trail { margin-top: 28px; padding-top: 0; border-top: 0; }

/* ---------- welcome (first screen) */
.welcome { flex: 1; }
.welcome-line { margin-top: 56px; font-family: var(--display); font-size: 20px; letter-spacing: 0.16em; padding-left: 0.16em; text-align: center; }
.welcome .lead { margin-top: 14px; font-size: 20px; line-height: 1.5; }
.welcome > .btn { margin-top: 48px; }
.return { width: 100%; margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.return-ask { font-style: italic; font-size: 18px; color: var(--mute); }
.cf-turnstile { display: flex; justify-content: center; }

/* ---------- trial page */
.slides { width: 100%; margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.slide {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #000000;
  cursor: zoom-in;
  line-height: 0;
}
.slide img { width: 100%; height: auto; display: block; }
.slide.placeholder { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; cursor: default; line-height: 1.4; color: var(--faint); font-style: italic; }
.next { width: 100%; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ask { font-style: italic; font-size: 22px; }
.tools { width: 100%; margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.linkish { background: none; border: 0; padding: 8px; color: var(--mute); font: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.code-out { width: 100%; text-align: center; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- Trial II: the seven notes
   One bold element: the notes climbing the staff. Red appears only when the lone note
   reveals it, and in the colour circles. Errors stay grey. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.notes-room {
  /* faint ruled music paper: five lines, then rest */
  background-image: repeating-linear-gradient(180deg,
    transparent 0 120px,
    rgba(242, 240, 235, 0.035) 120px 121px, transparent 121px 129px,
    rgba(242, 240, 235, 0.035) 129px 130px, transparent 130px 138px,
    rgba(242, 240, 235, 0.035) 138px 139px, transparent 139px 147px,
    rgba(242, 240, 235, 0.035) 147px 148px, transparent 148px 156px,
    rgba(242, 240, 235, 0.035) 156px 157px, transparent 157px 210px);
}
.notes .theme { margin-top: 4px; }
.verse { margin-top: 40px; font-size: 24px; line-height: 1.45; text-align: center; }
.notes .lead { margin-top: 24px; font-style: italic; font-size: 18px; line-height: 1.5; }
.phones { margin-top: 12px; font-family: var(--display); font-size: 11px; letter-spacing: 0.32em; padding-left: 0.32em; text-transform: uppercase; color: var(--faint); }

/* Notes sit on a real treble staff: lines are E G B D F from the bottom; C has a ledger line. */
.staff {
  --g: 14px;                    /* gap between staff lines */
  --r: 19px;                    /* note radius */
  --base: calc(4 * var(--g) + 18px); /* y of the bottom staff line */
  position: relative;
  width: calc(100% + 32px);
  margin: 44px -16px 0;
  height: calc(var(--base) + var(--g) + var(--r) + 10px);
}
.staff-lines span { position: absolute; left: 0; right: 0; height: 1px; background: rgba(242, 240, 235, 0.16); }
.staff-lines span:nth-child(1) { top: var(--base); }
.staff-lines span:nth-child(2) { top: calc(var(--base) - var(--g)); }
.staff-lines span:nth-child(3) { top: calc(var(--base) - 2 * var(--g)); }
.staff-lines span:nth-child(4) { top: calc(var(--base) - 3 * var(--g)); }
.staff-lines span:nth-child(5) { top: calc(var(--base) - 4 * var(--g)); }
.pitch {
  position: absolute;
  left: calc(var(--i) * 12.5%);
  top: calc(var(--base) - var(--p) * var(--g) / 2 - var(--r) - 4px);
  width: 12.5%;
  height: calc(2 * var(--r) + 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.pitch.p0 { --i: 0; --p: -2; } .pitch.p1 { --i: 1; --p: -1; } .pitch.p2 { --i: 2; --p: 0; } .pitch.p3 { --i: 3; --p: 1; }
.pitch.p4 { --i: 4; --p: 2; } .pitch.p5 { --i: 5; --p: 3; } .pitch.p6 { --i: 6; --p: 4; } .pitch.p7 { --i: 7; --p: 5; }
.pitch .head {
  position: relative;
  width: calc(2 * var(--r));
  height: calc(2 * var(--r));
  border-radius: 50%;
  border: 1px solid rgba(242, 240, 235, 0.55);
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 16px;
  line-height: 1;
  transition: background 0.7s ease, color 0.7s ease, border-color 0.7s ease, transform 0.12s ease;
}
.pitch:active .head { transform: scale(0.93); }
.pitch.lit .head { background: var(--ink); color: #000000; border-color: var(--ink); transition: background 0.05s, color 0.05s, border-color 0.05s, transform 0.12s ease; }
.pitch.p0::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(2 * var(--r) + 14px); height: 1px; transform: translate(-50%, -50%); background: rgba(242, 240, 235, 0.3); }
.pitch .up { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); color: var(--mute); }
.pitch:focus-visible { outline: none; }
.pitch:focus-visible .head { outline: 1px solid var(--ink); outline-offset: 3px; }

.lone-wrap { margin-top: 40px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lone { width: 64px; height: 76px; padding: 0; background: none; border: 0; color: var(--mute); cursor: pointer; transition: color 2.6s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.lone svg { width: 34px; height: 54px; transition: transform 0.12s ease; }
.lone:active svg { transform: scale(0.94); }
.lone.revealed { color: var(--reveal, var(--mute)); }
.lone-text { margin-top: 8px; font-style: italic; font-size: 17px; line-height: 1.5; color: var(--mute); }
.lone-name { min-height: 20px; margin-top: 10px; font-family: var(--display); font-size: 12px; letter-spacing: 0.3em; padding-left: 0.3em; text-transform: uppercase; color: var(--mute); opacity: 0; transition: opacity 1s ease 2.2s; }
.lone-name.show { opacity: 1; }

.riddle { width: 100%; margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.riddle p { font-size: 19px; line-height: 1.5; max-width: 330px; }
.riddle .riddle-open { font-style: italic; font-size: 22px; }

.journeys { list-style: none; width: 100%; margin: 32px 0 0; padding: 0; }
.journey { display: grid; grid-template-columns: 1fr auto 44px; align-items: center; gap: 16px; min-height: 68px; border-bottom: 1px solid var(--line); }
.journey:first-child { border-top: 1px solid var(--line); }
.j-num { font-style: italic; font-size: 16px; color: var(--label); }
.j-show { display: flex; align-items: center; gap: 10px; }
.j-note { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(242, 240, 235, 0.45); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 14px; line-height: 1; }
.j-note .up { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); color: var(--mute); }
.j-arrow { position: relative; width: 36px; height: 1px; background: var(--line2); }
.j-arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid var(--line2); border-right: 1px solid var(--line2); transform: rotate(45deg); }
.j-play { width: 44px; height: 44px; padding: 0 0 0 2px; border-radius: 50%; border: 1px solid var(--line2); background: none; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.3s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.j-play.playing { border-color: var(--ink); }

.speak { margin-top: 32px; font-style: italic; font-size: 19px; line-height: 1.5; color: var(--mute); text-align: center; }
.hint-box { margin-top: 16px; display: flex; flex-direction: column; align-items: center; }
.hint-text { margin-top: 6px; font-size: 18px; line-height: 1.5; text-align: center; animation: fadeIn 0.6s ease; }
.door-form { width: 100%; margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; }
.door-form .form { margin-top: 24px; }
.door-form > .btn { margin-top: 20px; }

/* ---------- granted / accepted */
.beam { width: 1px; height: 96px; margin-top: 4px; background: linear-gradient(180deg, #000000 0%, var(--ink) 50%, #000000 100%); }
.accepted .big, .granted .big { margin-top: 24px; font-size: 24px; letter-spacing: 0.2em; padding-left: 0.2em; }
.granted { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; margin-top: 26px; }
.granted .lead { font-style: italic; font-size: 20px; margin-top: 8px; }
.code-box { width: 100%; margin-top: 40px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.code-box .label { margin: 0; }
.code { font-family: var(--display); font-size: 28px; letter-spacing: 0.14em; padding-left: 0.14em; }
.code-box p.small { font-size: 16px; color: var(--mute); text-align: center; max-width: 300px; line-height: 1.45; }
.btn-line { margin-top: 6px; min-height: 44px; padding: 0 22px; background: transparent; border: 1px solid var(--line2); border-radius: 2px; color: var(--ink); font: inherit; font-size: 16px; cursor: pointer; }
.granted .stack { width: 100%; margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.facts { width: 100%; margin-top: 40px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.facts .label { font-size: 15px; margin-bottom: 4px; }
.fact-num { font-family: var(--display); font-size: 20px; }
.fact { font-size: 20px; overflow-wrap: anywhere; }
.small-lead { font-size: 17px; margin-top: 28px; line-height: 1.5; }
.flash { position: fixed; inset: 0; background: #000000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 28px; z-index: 30; animation: fadeIn 0.4s ease; }
.flash .big { font-size: 24px; }
.flash .lead { font-style: italic; animation: fadeIn 0.8s ease 0.5s both; }
main.leaving { opacity: 0; transition: opacity 0.35s ease; }

/* ---------- final */
.timebar { width: 100%; margin-top: 18px; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.timebar > span:first-child { font-style: italic; font-size: 16px; color: var(--label); }
.cd-inline { font-family: var(--display); font-size: 24px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.final .trial-title { margin-top: 40px; font-size: 34px; }
.final .form { margin-top: 48px; }
.final > .note { margin-top: 14px; }
.notice { width: 100%; margin-top: 24px; padding: 14px 16px; border: 1px solid var(--line2); border-radius: 2px; font-size: 16px; line-height: 1.45; text-align: center; color: var(--ink); }

/* ---------- countdown */
.countdown { display: flex; align-items: flex-start; gap: 6px; }
.cd-group { width: 84px; display: flex; flex-direction: column; align-items: center; }
.cd-num { font-family: var(--display); font-size: 50px; line-height: 1; font-variant-numeric: tabular-nums; }
.cd-label { margin-top: 10px; font-style: italic; font-size: 14px; color: var(--faint); }
.cd-sep { font-family: var(--display); font-size: 40px; line-height: 1.1; color: var(--line2); }
.countdown.has-days .cd-group { width: 66px; }
.countdown.has-days .cd-num { font-size: 40px; }
.countdown.has-days .cd-sep { font-size: 32px; }
.countdown.has-days { gap: 4px; }

/* ---------- closed */
.closed { flex: 1; }
.card-outline { margin-top: 48px; width: 120px; height: 168px; border: 1px dashed var(--line2); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.card-outline.filled { border-style: solid; border-color: var(--ink); font-family: var(--display); font-size: 48px; }
.closed .big { margin-top: 40px; font-size: 22px; letter-spacing: 0.18em; padding-left: 0.18em; }
.closed .lead { max-width: 320px; }
.next-puzzle { margin-top: auto; padding-top: 24px; width: 100%; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.next-puzzle .label { margin: 0; }
.np-title { font-family: var(--display); font-size: 18px; letter-spacing: 0.2em; padding-left: 0.2em; }

/* ---------- overlays */
.overlay { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; }
.overlay img { max-width: 100%; max-height: 82vh; object-fit: contain; }
.overlay p { color: var(--mute); text-align: center; font-size: 16px; max-width: 320px; }
.overlay .btn { max-width: 320px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- live board (OBS, 1920x1080) */
body.live .wrap { max-width: none; width: 100vw; height: 100vh; padding: 4vh 5vw; }
body.live .logo img { width: 2.4vw; }
.live-board { width: 100%; flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; gap: 3vh 4vw; margin-top: 2vh; }
.live-head { grid-column: 1 / 3; text-align: center; }
.live-title { font-family: var(--display); font-weight: 400; font-size: 4.2vw; letter-spacing: 0.12em; }
.live-timer { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.live-label { font-style: italic; font-size: 1.6vw; color: var(--label); }
.big-inline { font-size: 7vw; }
.live-art { display: flex; align-items: center; justify-content: center; }
.live-art img { max-width: 100%; max-height: 52vh; }
.live-placeholder { color: var(--faint); font-style: italic; font-size: 1.4vw; border: 1px solid var(--line); padding: 10vh 4vw; }
.live-blanks { display: grid; grid-template-columns: repeat(6, 5vw); gap: 1.2vw; justify-content: center; align-self: end; }
.live-blanks span { height: 7vh; border-bottom: 2px solid var(--line2); }
.live-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4vh 2vw; align-self: end; font-size: 1.3vw; }
.live-stats div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 0.6vh 0; }
.live-stats span { color: var(--label); font-style: italic; }
.live-stats b { font-family: var(--display); font-weight: 400; }
.live-stats .live-last { grid-column: 1 / -1; margin: .4vh 0 0; font-style: italic; color: var(--mute); }

/* ---------- admin */
body.admin .wrap { max-width: 1100px; align-items: stretch; }
body.admin .logo { align-self: center; }
.admin-wrap h2 { font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: 0.24em; margin: 34px 0 10px; }
.admin-wrap p { color: var(--mute); }
.admin-row { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; margin-top: 16px; color: var(--mute); font-size: 16px; }
.admin-row form { margin: 0; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
th { color: var(--label); font-weight: 400; font-style: italic; }
form.inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
form.inline input { background: #000000; color: var(--ink); border: 1px solid var(--line2); border-radius: 2px; padding: 6px 8px; font: inherit; font-size: 14px; color-scheme: dark; }
.mini { background: transparent; color: var(--ink); border: 1px solid var(--line2); border-radius: 2px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; min-height: 36px; }
.mini:hover { border-color: var(--ink); }
.form.plain { margin-top: 24px; }

/* Solved cards: turn clockwise, then send their light into the centre. */
.seat-card { width: 34px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.seat-back { display: flex; flex-direction: column; align-items: center; line-height: 1.05; visibility: hidden; }
.seat-symbol { font-family: Georgia, serif; font-size: 19px; }
.seat-row { margin-top: 3px; font-size: 12px; }
.seat.active .seat-card { color: #000; }
.restored .seat-card { transform: rotate(0deg); animation: noble-flip 0.65s ease both; }
.restored .seat-back { visibility: visible; animation: noble-face 0.65s step-end both; }
.restored .s1 .seat-card, .restored .s1 .seat-back { animation-delay: 0.12s; }
.restored .s2 .seat-card, .restored .s2 .seat-back { animation-delay: 0.24s; }
.restored .s3 .seat-card, .restored .s3 .seat-back { animation-delay: 0.36s; }
.restored .s4 .seat-card, .restored .s4 .seat-back { animation-delay: 0.48s; }
.restored .s5 .seat-card, .restored .s5 .seat-back { animation-delay: 0.6s; }
.restored .s6 .seat-card, .restored .s6 .seat-back { animation-delay: 0.72s; }
@keyframes noble-flip { 0% { transform: rotate(var(--rot)) scaleX(1); } 50% { transform: rotate(0deg) scaleX(0); } 100% { transform: rotate(0deg) scaleX(1); } }
@keyframes noble-face { 0% { visibility: hidden; } 50%, 100% { visibility: visible; } }
.restored .beam { animation-delay: 1.5s; }
.restored .beam.b1 { animation-delay: 1.62s; }
.restored .beam.b2 { animation-delay: 1.74s; }
.restored .beam.b3 { animation-delay: 1.86s; }
.restored .beam.b4 { animation-delay: 1.98s; }
.restored .beam.b5 { animation-delay: 2.1s; }
.restored .beam.b6 { animation-delay: 2.22s; }
.restored .ring-core { transition-delay: 3.05s; }
.restored .table-z { transition-delay: 3.55s; }
.reveal .restored-line.delay-0 { animation-delay: 4.1s; }
.reveal .restored-line.delay-1 { animation-delay: 5.1s; }
.z-name { animation-delay: 5.9s; }
.still .seat-card, .still .seat-back { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .nobles *, .nobles *::before, .nobles *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .restored .beam { stroke-dashoffset: 0; }
}

/* The spectrum gathers at the centre, then resolves into the answer colour. */
.rainbow-ring { fill: none; stroke: url(#noble-rainbow); stroke-width: 0.85; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
.rainbow-wash { fill: url(#noble-rainbow); opacity: 0; transform-origin: 50px 50px; }
.restored:not(.still) .beam { stroke: url(#noble-rainbow); animation-name: beam-in, spectrum-settle; animation-duration: 0.9s, 0.01s; animation-timing-function: ease, linear; animation-fill-mode: forwards, forwards; }
.restored:not(.still) .beam.b0 { animation-delay: 1.5s, 4.8s; }
.restored:not(.still) .beam.b1 { animation-delay: 1.62s, 4.8s; }
.restored:not(.still) .beam.b2 { animation-delay: 1.74s, 4.8s; }
.restored:not(.still) .beam.b3 { animation-delay: 1.86s, 4.8s; }
.restored:not(.still) .beam.b4 { animation-delay: 1.98s, 4.8s; }
.restored:not(.still) .beam.b5 { animation-delay: 2.1s, 4.8s; }
.restored:not(.still) .beam.b6 { animation-delay: 2.22s, 4.8s; }
.restored:not(.still) .rainbow-ring { animation: spectrum-ring 3s ease 2.2s both; }
.restored:not(.still) .rainbow-wash { animation: spectrum-fill 3s ease 2.2s both; }
@keyframes spectrum-ring { 0% { opacity: 0; stroke-dashoffset: 100; } 12% { opacity: 1; } 65% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes spectrum-fill { 0% { opacity: 0; transform: scale(0.1); } 60% { opacity: 0.3; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes spectrum-settle { to { stroke: var(--reveal); } }
.restored .ring-core { transition-delay: 4.4s; }
.restored .table-z { transition-delay: 4.8s; }
.reveal .restored-line.delay-0 { animation-delay: 5.5s; }
.reveal .restored-line.delay-1 { animation-delay: 6.2s; }
.z-name { animation-delay: 6.8s; }
.replay-reveal { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) {
  .restored:not(.still) .beam { stroke: var(--reveal); }
  .rainbow-ring, .rainbow-wash { display: none; }
}
/* Trials IV–VI: three instruments within the same ivory-on-black world. */
.room .verse { margin: 30px 0; font-size: 20px; line-height: 1.65; text-align: center; }
.room-instruction { font-size: 17px; line-height: 1.5; color: var(--mute); text-align: center; margin: 18px 0; }
.room-feedback { min-height: 28px; text-align: center; font-size: 16px; color: var(--mute); margin: 18px 0; }
.room button, .room select { touch-action: manipulation; }
.room button:disabled { cursor: default; }
.room .door-form { width: 100%; margin-top: 44px; }
.room-reward { width: 100%; text-align: center; line-height: 1.7; margin-top: 32px; }
.room-reward.earned { padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); animation: fadeIn 1.2s ease; }
.room-reward strong { display: block; color: var(--reward,var(--ink)); font-family: var(--display); font-weight: 400; letter-spacing: .2em; margin-top: 12px; }
.optical-bench { position: relative; width: 100%; max-width: 330px; aspect-ratio: 1; margin: 30px auto; }
.optical-art { width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: .4; }
.optical-rim { stroke: var(--line2); }.optical-inlay { stroke: var(--line); stroke-dasharray: .3 1.2; }.optical-ticks { stroke: var(--mute); }
[data-light-paths] { stroke-width: .65; opacity: .45; }
[data-light-paths].resolved { stroke-width: 1.4; opacity: 1; stroke-linecap: round; }
.optical-layer { animation: optical-align .65s ease both; transform-origin: 50px 50px; }.optical-layer.layer-1 { animation-name: optical-align-back; }
@keyframes optical-align { from { opacity: .15; transform: translate(-5px,3px); } to { opacity: 1; transform: translate(0,0); } }
@keyframes optical-align-back { from { opacity: .15; transform: translate(5px,-3px); } to { opacity: 1; transform: translate(0,0); } }
.bench-mark { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: #000; padding: 0 10px; color: var(--mute); font-family: var(--display); font-size: 15px; }
.lens-tray { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px 7px; width: 100%; margin-top: 26px; }
.lens { background: none; border: 1px solid transparent; padding: 8px 0; color: var(--mute); font-family: var(--text); font-size: 15px; cursor: pointer; border-radius: 36px 36px 4px 4px; min-height: 76px; }
.lens-glass { display: block; height: 40px; width: 40px; border: 1px solid var(--lens); border-radius: 50%; margin: 0 auto 9px; box-shadow: inset 0 0 0 4px #000,inset 0 0 0 5px var(--lens); opacity: .6; transition: opacity .25s,box-shadow .25s; }
.lens[aria-pressed=true] { border-color: var(--line2); color: var(--ink); }.lens[aria-pressed=true] .lens-glass { background: var(--lens); opacity: 1; box-shadow: inset 0 0 0 4px #000; }
.lens-0 { --lens:#D93A3A; }.lens-1 { --lens:#F08A24; }.lens-2 { --lens:#F2CF3A; }.lens-3 { --lens:#2FA35E; }.lens-4 { --lens:#2F7DE1; }.lens-5 { --lens:#7060ce; }.lens-6 { --lens:#A55AD6; }
.prism-study { width: 100%; margin-top: 38px; border-top: 1px solid var(--line); padding-top: 28px; text-align: center; }.prism-study>p { margin-top: 20px; line-height: 1.65; }.spectrum-label { font-size: 14px; color: var(--mute); }.spectrum { display:flex; height: 24px; margin-top: 10px; gap:3px; }.band{flex:1;}.band-0{background:#D93A3A}.band-1{background:#F08A24}.band-2{background:#F2CF3A}.band-3{background:#2FA35E}.band-4{background:#2F7DE1}.band-5{background:#4B3BA8}.band-6{background:#A55AD6}
.celestial-chart { position: relative; width: 100%; aspect-ratio: 1; margin: 30px 0 20px; }.star-art { width:100%;height:100%;fill:none;stroke:var(--line2);stroke-width:.25; }.star-art .heptagram{stroke:var(--silver);stroke-width:.23;}.star-art .star-inner{stroke-dasharray:.5 1.3;}.star-art text{fill:var(--mute);stroke:none;font-family:var(--display);font-size:9px;}
.star-day{position:absolute;transform:translate(-50%,-50%);min-width:64px;min-height:48px;padding:5px 2px;border:1px solid transparent;background:#000;color:var(--ink);font:12px var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;}.day-body{font-family:Georgia,serif;font-size:22px;line-height:1.1;margin-top:3px;}.star-day.traced{border-color:var(--silver);}.day-0{left:50%;top:7%;}.day-1{left:84%;top:23%;}.day-2{left:91%;top:59%;}.day-3{left:69%;top:88%;}.day-4{left:31%;top:88%;}.day-5{left:9%;top:59%;}.day-6{left:16%;top:23%;}
.path-notes { color:var(--mute);text-align:center;min-height:48px;font-size:16px;line-height:1.6; }.celestial-cards{width:100%;margin:32px 0;}.celestial-card{border-top:1px solid var(--line);}.celestial-card:last-child{border-bottom:1px solid var(--line);}.celestial-card summary{display:flex;gap:18px;align-items:center;list-style:none;cursor:pointer;padding:16px 8px;min-height:64px;}.celestial-card summary::-webkit-details-marker{display:none}.celestial-symbol{font-family:Georgia,serif;font-size:31px;min-width:32px;text-align:center;color:var(--silver);}.card-open{margin-left:auto;color:var(--mute)}.celestial-card[open] .card-open{transform:rotate(45deg)}.celestial-card>p{padding:0 12px 20px 58px;color:var(--mute);font-size:18px;line-height:1.5;}.sun-awake{color:var(--reward,var(--ink));transition:color 1.5s;}.mapping{width:100%;margin-top:28px}.map-row{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:12px;margin:14px 0;}.map-row select{width:100%;min-height:46px;background:#080808;border:1px solid var(--line2);border-radius:0;color:var(--ink);font:16px var(--text);padding:10px 6px;color-scheme:dark;}.mapping .btn,.night-ledger>.btn{margin-top:24px;width:100%;}
.journey-count{font-size:13px;color:var(--mute);display:flex;align-items:center;gap:7px;}.journey-count input{width:40px;min-height:44px;background:#080808;border:1px solid var(--line2);color:var(--ink);font:22px var(--text);text-align:center;border-radius:0;}.journeys .journey{grid-template-columns:minmax(0,1fr) auto 44px;gap:12px;padding:12px 0;}.journey-count{grid-column:1/-1;justify-content:flex-end;}.journey-count input:disabled{opacity:.7;}
@media(min-width:420px){.lens-tray{grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;}.lens{font-size:12px;}.lens-glass{width:34px;height:34px;}.star-day{font-size:14px;}}
@media(max-width:360px){.map-row{grid-template-columns:78px minmax(0,1fr);gap:8px;}.star-day{min-width:54px;font-size:11px;}.room .verse{font-size:18px;}}
@media(prefers-reduced-motion:reduce){.room *, .room *::before, .room *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}
/* Unlabelled glass: all colours are deductions, never decorative identifiers. */
.calibration{width:100%;max-width:280px;margin:26px auto 8px;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--mute);font:14px var(--text);}.calibration>div{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;}.calibration-cross{font:44px Georgia,serif;color:var(--silver);}
.engraved-lenses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;margin:28px 0;}.engraved-lens{border:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;background:#030303;}.engraved-lens:last-child{grid-column:1/-1;}.engraved-lens p{font-size:16px;line-height:1.5;}.engraved-lens .engraving{font-style:italic;color:var(--mute);font-size:15px;margin-top:auto;}.neutral-lens{width:82px;min-height:100px;border:1px solid var(--line2);border-radius:44px 44px 6px 6px;background:#000;color:var(--ink);font:14px var(--display);display:flex;flex-direction:column;align-items:center;gap:12px;padding:10px;cursor:pointer;}.neutral-lens[aria-pressed=true]{border-color:var(--ink);background:#171614;}.lens-pointer{display:block;font:32px Georgia,serif;transition:transform .2s;}.turn-0{transform:rotate(0deg)}.turn-1{transform:rotate(90deg)}.turn-2{transform:rotate(180deg)}.turn-3{transform:rotate(270deg)}
.turn-controls{display:flex;align-items:center;justify-content:space-between;width:100%;gap:2px;}.turn-controls button{min-width:44px;min-height:44px;background:none;border:1px solid var(--line2);color:var(--ink);font:25px Georgia,serif;cursor:pointer;}.turn-controls span{font-size:13px;color:var(--mute);}.spectrum-rail{width:100%;text-align:center;margin-top:18px;}.spectrum-rail>div{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;}.spectrum-rail label{display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--mute);}.spectrum-rail select{min-height:48px;width:100%;background:#080808;color:var(--ink);border:1px solid var(--line2);font:16px var(--text);padding:6px 0;color-scheme:dark;}.optical-hint{width:100%;margin:24px 0;color:var(--mute);font-size:17px;}.optical-hint summary{cursor:pointer;padding:12px 0;min-height:44px;text-align:center;}.optical-hint p{line-height:1.65;padding:16px 8px;}
@media(max-width:360px){.engraved-lenses{grid-template-columns:1fr;}.spectrum-rail>div{gap:3px;}}

/* ---------- Trial V: the star board
   The chart is where the sky is restored. When it aligns, the whole star wakes together:
   no line is drawn from a start point, so the reading order is never given away. */
.celestial-chart { margin: 26px 0 6px; }
.star-art .sky-rim { stroke: var(--line2); stroke-width: .25; }
.star-art .sky-ticks line { stroke: var(--line2); stroke-width: .22; }
.star-art .sky-orbit { stroke: rgba(242, 240, 235, .14); stroke-dasharray: .4 1.4; }
.star-art .heptagram { stroke: var(--silver); stroke-width: .25; opacity: .55; transition: opacity 1.6s ease, stroke 1.6s ease, stroke-width 1.6s ease; }
.star-art .heptagram-glow { stroke: var(--ink); stroke-width: 1.4; opacity: 0; transition: opacity 2.2s ease .4s; }
.aligned .star-art .heptagram { opacity: 1; stroke: var(--ink); stroke-width: .32; }
.aligned .star-art .heptagram-glow { opacity: .32; }
.aligned .star-art text { fill: var(--ink); transition: fill 1.6s ease; }
.still .star-art .heptagram, .still .star-art .heptagram-glow, .still .star-art text { transition: none; }
.star-day { gap: 5px; padding: 2px; min-width: 66px; background: transparent; border: 0; color: var(--mute); -webkit-tap-highlight-color: transparent; }
.star-day .day-name { font: 12px var(--text); letter-spacing: .02em; }
.star-day .day-body { width: 40px; height: 40px; margin-top: 0; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line2); border-radius: 50%; background: #000; color: var(--ink); font: 22px Georgia, serif; line-height: 1; transition: border-color .2s ease, background .2s ease, color 1.5s ease, box-shadow 1.5s ease; }
.star-day.filled .day-body { border-style: solid; border-color: rgba(242, 240, 235, .6); }
.star-day.target .day-body { border-color: var(--ink); background: #0d0c0b; }
.star-day.active .day-body { background: var(--ink); color: #000; }
.star-day.active { color: var(--ink); }
.star-day:focus-visible { outline: none; }
.star-day:focus-visible .day-body { outline: 1px solid var(--ink); outline-offset: 3px; }
.star-day .day-body.sun-awake { color: var(--reward, var(--ink)); border-color: var(--reward, var(--ink)); box-shadow: 0 0 14px -2px var(--reward, transparent); }
.star-day.active .day-body.sun-awake { background: var(--reward, var(--ink)); color: #000; }
.wanderer-tray { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.wanderer-chip { min-height: 46px; padding: 0 16px 0 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line2); border-radius: 23px; background: none; color: var(--ink); font: 16px var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.wanderer-chip .chip-symbol { font: 20px Georgia, serif; color: var(--silver); }
.wanderer-chip.selected { background: var(--ink); border-color: var(--ink); color: #000; }
.wanderer-chip.selected .chip-symbol { color: #000; }
.room-5 [data-submit-mapping] { width: 100%; margin-top: 22px; }
.room-5 .riddle + .room-title { margin-top: 44px; }
.star-panel { width: 100%; min-height: 124px; margin: 8px 0 14px; padding: 22px 8px; display: flex; flex-direction: column; justify-content: center; gap: 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.star-panel .star-panel-title { font: 14px var(--display); letter-spacing: .14em; text-transform: uppercase; }
.star-panel p:not(.star-panel-title):not(.card-hint) { font-size: 18px; line-height: 1.5; color: var(--mute); animation: fadeIn .45s ease; }

/* =====================================================================
   Site-wide finish. One idea per screen, all of it quiet:
   texture, a gentle arrival, the calling card, the door, the clock ring.
   ===================================================================== */

/* Film grain and a soft vignette over every page. Texture, never decoration. */
body::before { content: ''; position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: .055; 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='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
body::after { content: ''; position: fixed; inset: 0; z-index: 59; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 62%, rgba(0, 0, 0, .32) 100%); }
body.live::before, body.live::after, body.admin::before, body.admin::after { display: none; }

/* Every page arrives the same way: a short fade, settling upward. */
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
main.wrap { animation: arrive .7s cubic-bezier(.2, .7, .2, 1) backwards; }

/* The calling card (welcome page): Zero's card, marked 07 and the spade. */
/* The card turns in 3D: stage (perspective) > card (tilt) > inner (deal and turn) > two faces. */
.card-stage { margin: 18px auto 0; perspective: 1000px; }
.calling-card { position: relative; display: block; width: min(236px, 70vw); aspect-ratio: 5 / 7; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; transform-style: preserve-3d; transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .6s cubic-bezier(.2, .7, .2, 1); touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.cc-inner { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.5, 0, .2, 1); }
.cc-inner.turned { transform: rotateY(180deg); }
.cc-face { position: absolute; inset: 0; padding: 26px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(242, 240, 235, .42); border-radius: 12px; background: radial-gradient(ellipse at var(--gx, 50%) 28%, #151413, #050505 72%); box-shadow: 0 0 0 5px #000, 0 0 0 6px rgba(242, 240, 235, .12), 0 34px 60px -24px rgba(0, 0, 0, .95); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cc-back { transform: rotateY(180deg); background: repeating-linear-gradient(45deg, rgba(242, 240, 235, .045) 0 1px, transparent 1px 11px), repeating-linear-gradient(-45deg, rgba(242, 240, 235, .045) 0 1px, transparent 1px 11px), radial-gradient(ellipse at 50% 42%, #161514, #050505 74%); }
.cc-back-frame { position: absolute; inset: 10px; border: 1px solid rgba(242, 240, 235, .26); border-radius: 7px; }
.cc-back-frame::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(242, 240, 235, .1); border-radius: 4px; }
.cc-back-mark { position: relative; width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(242, 240, 235, .38); border-radius: 50%; background: #050505; box-shadow: 0 0 0 6px #050505, 0 0 0 7px rgba(242, 240, 235, .14); }
.cc-back-mark img { width: 26px; height: auto; }
.cc-back-word { position: relative; margin-top: 16px; font-family: var(--display); font-size: 11px; letter-spacing: .5em; padding-left: .5em; color: var(--mute); }
.calling-card.tilting { transition: transform .08s linear; }
.calling-card .kicker { margin: 0; }
.calling-card .numeral { font-size: 74px; margin-top: 2px; }
.calling-card .door-title { margin-top: 6px; font-size: 13px; letter-spacing: .3em; text-align: center; }
.cc-index { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--mute); font-family: var(--display); font-size: 12px; line-height: 1; }
.cc-index b { font-weight: 400; letter-spacing: .04em; }
.cc-index svg { width: 10px; height: 11px; }
.cc-top { top: 13px; left: 13px; }
.cc-bottom { right: 13px; bottom: 13px; transform: rotate(180deg); }
.cc-sheen { position: absolute; inset: -40% -70%; pointer-events: none; background: linear-gradient(112deg, transparent 43%, rgba(242, 240, 235, .1) 50%, transparent 57%); transform: translateX(-62%); animation: card-sheen 2.8s cubic-bezier(.45, 0, .2, 1) .6s both; }
@keyframes card-sheen { to { transform: translateX(62%); } }
.welcome .welcome-line { margin-top: 40px; }

/* The door: a crack of light, widening as the door swings, then the words. */
.door-open { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; animation: fadeIn .3s ease; }
.door-light { position: absolute; top: 0; bottom: 0; left: 50%; width: 72vw; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(242, 240, 235, .06) 26%, rgba(242, 240, 235, .15) 50%, rgba(242, 240, 235, .06) 74%, transparent); animation: door-swing 1.5s cubic-bezier(.6, 0, .15, 1) .6s backwards; }
.door-light::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, var(--ink) 22%, var(--ink) 78%, transparent); box-shadow: 0 0 18px 2px rgba(242, 240, 235, .45); animation: door-crack .65s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes door-crack { from { transform: translateX(-50%) scaleY(0); } to { transform: translateX(-50%) scaleY(1); } }
@keyframes door-swing { from { width: 2px; } to { width: 72vw; } }
.door-words { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 28px; text-align: center; animation: fadeIn .9s ease 1.3s backwards; }
.door-words .big { font-size: 24px; text-shadow: 0 0 26px #000; }
.door-words .lead { font-style: italic; text-shadow: 0 0 20px #000; animation: fadeIn .9s ease 1.8s backwards; }

/* Keys: a full key settles into place; a refused one shivers once. */
.otp.complete .otp-cells span { border-bottom-color: var(--ink); animation: cell-set .5s ease backwards; }
.otp.complete .otp-cells span:nth-child(2) { animation-delay: .04s; }
.otp.complete .otp-cells span:nth-child(3) { animation-delay: .08s; }
.otp.complete .otp-cells span:nth-child(4) { animation-delay: .12s; }
.otp.complete .otp-cells span:nth-child(5) { animation-delay: .16s; }
.otp.complete .otp-cells span:nth-child(6) { animation-delay: .2s; }
@keyframes cell-set { 50% { transform: translateY(-3px); } }
@keyframes deny-shiver { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.form.denied .otp, .form.denied .colors { animation: deny-shiver .42s ease; }

/* A chosen colour glows in its own light (colours here are puzzle answers, so only on choice). */
.swatch.red { --sw: #D93A3A; } .swatch.orange { --sw: #F08A24; } .swatch.yellow { --sw: #F2CF3A; } .swatch.green { --sw: #2FA35E; }
.swatch.blue { --sw: #2F7DE1; } .swatch.indigo { --sw: #6a5ad0; } .swatch.violet { --sw: #A55AD6; }
.swatch span { transition: box-shadow .25s ease, transform .25s ease; }
.swatch input:checked + span { transform: scale(1.07); box-shadow: 0 0 0 3px #000000, 0 0 0 4px var(--ink), 0 0 22px 1px var(--sw, transparent); }

/* The sound switch, on every room with sound. */
.sound-toggle { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); z-index: 55; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(0, 0, 0, .65); color: var(--mute); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .2s ease, border-color .2s ease; }
.sound-toggle:hover { color: var(--ink); border-color: var(--line2); }
.sound-toggle[aria-pressed=false] { color: var(--off); }
.sound-toggle svg { width: 19px; height: 19px; }

/* The clock ring above a countdown: its dot keeps the real second. */
.cd-orbit { position: relative; width: 52px; height: 52px; margin: 40px auto 0; border: 1px solid var(--line2); border-radius: 50%; }
.cd-orbit::before { content: ''; position: absolute; top: 4px; left: 50%; width: 1px; height: 5px; background: var(--mute); transform: translateX(-50%); }
.cd-hand { position: absolute; inset: 0; animation: orbit 60s linear infinite; animation-delay: var(--sec-delay, 0s); }
.cd-hand::after { content: ''; position: absolute; top: -3px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 9px rgba(242, 240, 235, .6); }
@keyframes orbit { to { transform: rotate(360deg); } }
.wait .cd-orbit + .countdown { margin-top: 24px; }

/* ---------- Fluid: pages flow into each other, a light follows the finger, things arrive as you reach them. */
/* Moving between pages crossfades instead of flashing; the Z stays put while everything else changes. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .26s ease both; }
::view-transition-new(root) { animation: vt-in .45s ease both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
.logo { view-transition-name: zero-mark; }
/* Zero's world is dark: a faint light follows the cursor or finger. */
.torch { position: fixed; inset: 0; z-index: 58; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 28%), rgba(242, 240, 235, .055), transparent 70%); opacity: 0; transition: opacity 1.2s ease; }
.torch.lit { opacity: 1; }
/* Sections below the first screen rise in as they are reached (added by app.js only). */
.reveal:not(.in) { opacity: 0; transform: translateY(18px); }
.reveal { transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
/* Countdown seconds settle as they change. */
.cd-num.ticked { animation: cd-tick .5s cubic-bezier(.2, .7, .2, 1); }
@keyframes cd-tick { from { opacity: .35; transform: translateY(-5px); } }
/* Buttons give under the finger. */
.btn, .route-chip, .wanderer-chip, .btn-line, .linkish { transition-property: background, color, border-color, transform, opacity; transition-duration: .2s, .2s, .2s, .12s, .2s; }
.btn:active:not(:disabled), .route-chip:active, .wanderer-chip:active, .btn-line:active { transform: scale(.975); }
/* A placed piece lands. */
.pop { animation: piece-land .38s cubic-bezier(.2, .9, .3, 1.25); }
@keyframes piece-land { from { opacity: 0; transform: translateY(-6px) scale(.92); } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .torch { display: none; }
  .reveal:not(.in) { opacity: 1; transform: none; }
  .cd-num.ticked, .pop { animation: none; }
}
.launch { width: 100%; margin-top: 30px; display: flex; flex-direction: column; align-items: center; }
.launch .cd-orbit { margin-top: 0; }
.launch .countdown { margin-top: 20px; }
.launch .when { margin-top: 18px; }

/* ---------- Trial VII: the wall of clocks. The stream board is drawn for 1920x1080. */
.vii-letters text { fill: var(--ink); font-family: var(--display); font-size: 9.6px; }
.vii-one { fill: var(--ink); font-family: var(--display); font-size: 12px; }
body.live .wrap { padding: 3.2vh 3.4vw; }
body.live .logo { position: absolute; top: 3.6vh; left: 3.4vw; }
body.live .logo img { width: 2.1vw; }
.vii-head { padding-left: 3.6vw; }
.live-board.vii { position: relative; height: 100%; margin-top: 0; display: grid; grid-template-columns: minmax(0, 1fr) 29vw; grid-template-rows: auto minmax(0, 1fr) auto; gap: 2vh 3vw; }
.vii-head { grid-column: 1; text-align: left; }
.vii-head .kicker { font-size: 1.2vw; }
.vii-head .live-title { font-size: 3.2vw; letter-spacing: .14em; }
.vii-line { margin-top: .6vh; font-family: var(--display); font-size: 1.3vw; letter-spacing: .26em; }
.vii-sub { margin-top: .5vh; font-style: italic; font-size: 1.3vw; color: var(--mute); }
.vii-wall { grid-column: 1; grid-row: 2; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2.4vh 2vw; align-items: center; justify-items: center; }
.vii-cell { width: 100%; height: 100%; min-height: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.vii-clock { height: 100%; max-height: 31vh; width: auto; aspect-ratio: 1; }
.vii-side { grid-column: 2; grid-row: 1 / 3; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 2.4vh; padding-left: 2.6vw; border-left: 1px solid var(--line); }
.vii-side .big-inline { font-size: 5.4vw; letter-spacing: .04em; }
.vii-side .vii-cell { height: auto; }
.vii-seventh .vii-clock { max-height: 25vh; }
.vii-seventh figcaption { margin-top: 1.2vh; font-style: italic; font-size: 1.45vw; color: var(--ink); text-align: center; }
.vii-feed { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 1.6vh; border-top: 1px solid var(--line); }
.vii-feed-title { font-style: italic; font-size: 1.1vw; color: var(--label); }
.vii-count { font-family: var(--display); font-size: 3vw; line-height: 1.15; font-variant-numeric: tabular-nums; }
.vii-count.pulse { animation: count-pulse 1.4s ease; }
@keyframes count-pulse { 30% { text-shadow: 0 0 24px rgba(242, 240, 235, .85); } }
.vii-feed ol { list-style: none; margin: 1vh 0 0; padding: 0; overflow: hidden; font-size: 1.1vw; color: var(--mute); }
.vii-feed li { padding: .55vh 0; border-bottom: 1px solid var(--line); animation: fadeIn .6s ease; }
.vii-feed li.quiet { font-style: italic; border: 0; }
.vii-feed li b { margin-right: .6vw; font-family: var(--display); font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.vii-side .live-stats { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8vh 1.6vw; font-size: .95vw; }
.vii-foot { grid-column: 1 / 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 3vw; }
.vii-foot .live-blanks { grid-template-columns: repeat(6, 3.4vw); gap: .9vw; justify-content: start; }
.vii-foot .live-blanks span { height: 5vh; }
.vii-prize { font-style: italic; font-size: 1.2vw; color: var(--mute); text-align: center; }
.vii-where { font-size: 1.2vw; color: var(--mute); text-align: right; }
.vii-where b { font-family: var(--display); font-weight: 400; letter-spacing: .06em; color: var(--ink); }
.vii-banner { position: absolute; top: 50%; left: 50%; z-index: 5; padding: 2.6vh 3vw; transform: translate(-50%, -50%); border: 1px solid var(--ink); background: rgba(0, 0, 0, .9); box-shadow: 0 0 80px rgba(0, 0, 0, .95); font-family: var(--display); font-size: 1.8vw; letter-spacing: .2em; text-align: center; animation: fadeIn 1s ease; }
.vii-preview { margin-top: 1vh; padding: .5vh .8vw; display: inline-block; border: 1px dashed var(--line2); font-style: italic; font-size: .9vw; color: var(--mute); }
.vii-missing { grid-column: 1 / -1; font-style: italic; font-size: 1.4vw; color: var(--faint); }
/* The board is drawn for a 1920x1080 OBS screen. On a phone or any tall screen (your preview from
   admin) it stacks instead: header, clocks two by two, timer and seventh clock, feed, footer. */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  body.live .wrap { width: 100%; height: auto; min-height: 100vh; padding: 64px 16px 32px; }
  body.live .logo { top: 16px; left: 16px; }
  body.live .logo img { width: 24px; }
  .live-board.vii { height: auto; display: flex; flex-direction: column; gap: 26px; }
  .vii-head { padding-left: 0; text-align: center; }
  .vii-head .kicker { font-size: 14px; }
  .vii-head .live-title { font-size: 34px; }
  .vii-line { font-size: 12px; letter-spacing: .2em; }
  .vii-sub { font-size: 16px; }
  .vii-preview { font-size: 13px; padding: 6px 10px; }
  .vii-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 18px 16px; }
  .vii-cell { height: auto; }
  .vii-clock { width: 100%; height: auto; max-height: none; }
  .vii-side { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line); gap: 18px; }
  .live-label { font-size: 15px; }
  .vii-side .big-inline { font-size: 40px; }
  .vii-seventh .vii-clock { width: 58%; max-height: none; margin: 0 auto; }
  .vii-seventh figcaption { margin-top: 8px; font-size: 17px; }
  .vii-feed-title, .vii-feed ol { font-size: 14px; }
  .vii-count { font-size: 32px; }
  .vii-feed li b { margin-right: 8px; }
  .vii-side .live-stats { font-size: 14px; gap: 6px 16px; }
  .vii-foot { grid-template-columns: 1fr; gap: 14px; justify-items: center; }
  .vii-foot .live-blanks { grid-template-columns: repeat(6, 36px); gap: 8px; justify-content: center; }
  .vii-foot .live-blanks span { height: 40px; }
  .vii-prize, .vii-where { font-size: 15px; text-align: center; }
  .vii-banner { position: fixed; width: calc(100% - 32px); padding: 18px; font-size: 18px; }
  .vii-missing { font-size: 16px; }
}
/* The same clocks on the final key page, only if admin switches the stream fallback on. */
.vii-site { width: 100%; margin-top: 28px; text-align: center; }
.vii-site .vii-line { font-size: 13px; letter-spacing: .22em; }
.vii-site .vii-sub { font-size: 16px; }
.vii-site .vii-wall { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 14px; }
.vii-site .vii-cell { height: auto; }
.vii-site .vii-clock { width: 100%; height: auto; max-height: none; }
.vii-site .vii-seventh { grid-column: 1 / -1; }
.vii-site .vii-seventh .vii-clock { width: 62%; }
.vii-site .vii-seventh figcaption { margin-top: 8px; font-size: 17px; }
@media(prefers-reduced-motion:reduce){.lens-pointer{transition:none}}

.optical-guide{width:100%;padding:22px 18px;border:1px solid var(--line2);margin:16px 0 28px;text-align:center}.optical-guide>p+p{margin-top:14px;font-size:17px;line-height:1.6;color:var(--mute)}.optical-step{margin-top:32px}

/* Trial IV — the glazier's window. */
.glass-window{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;width:100%;margin:30px 0 12px;padding:12px 8px 8px;border:1px solid var(--line2);border-radius:90px 90px 4px 4px;background:#080808;box-shadow:inset 0 0 32px #000}
.glass-pane{position:relative;height:170px;display:flex;align-items:center;justify-content:center;border:1px solid #62605a;border-radius:60px 60px 2px 2px;background:repeating-linear-gradient(135deg,transparent 0 24px,#ffffff0c 25px 26px),linear-gradient(160deg,#252524,#101010);color:var(--ink);transition:background .4s,box-shadow 1.2s}
.glass-pane[class*="glass-0"]{--glass:#a93232}.glass-1{--glass:#b5662c}.glass-2{--glass:#ae9436}.glass-3{--glass:#34714f}.glass-4{--glass:#326b9c}.glass-5{--glass:#474c96}.glass-6{--glass:#805294}
.glass-pane[class*=" glass-"]{background:repeating-linear-gradient(135deg,transparent 0 24px,#ffffff16 25px 26px),linear-gradient(160deg,var(--glass),#111)}
.glass-position{position:absolute;bottom:9px;font:12px var(--display);color:#fff}.glass-mark{font:clamp(22px,6vw,40px) var(--display);color:#fff;text-shadow:0 0 15px #fff8;opacity:0;transition:opacity 1.3s}.restored .glass-mark{opacity:1}.restored .glass-pane{box-shadow:inset 0 0 25px var(--glass),0 0 14px color-mix(in srgb,var(--glass) 40%,transparent)}
.glass-reading{text-align:center;font-size:18px;line-height:1.6;min-height:24px}.glass-clues,.glass-controls{width:100%;margin-top:30px}.glass-clues ol{padding-left:25px;margin-top:22px}.glass-clues li{padding-left:7px;margin:18px 0;font-size:18px;line-height:1.6}.glass-clues li::marker{color:var(--mute);font:13px var(--display)}.glass-row{display:grid;grid-template-columns:75px 1fr;gap:14px;align-items:center;margin:12px 0}.glass-row select{width:100%;min-height:48px;background:#080808;border:1px solid var(--line2);color:var(--ink);font:17px var(--text);padding:10px;color-scheme:dark}.glass-controls>.btn{width:100%;margin-top:20px}
@media(max-width:360px){.glass-window{gap:3px;padding:9px 5px 5px}.glass-pane{height:145px}}

.restored .glass-position{visibility:hidden}

/* A single gentle sweep; replay is explicit and reduced motion stays still. */
.glass-pane{overflow:hidden;--pane-delay:0s}.glass-pane:nth-child(2){--pane-delay:.15s}.glass-pane:nth-child(3){--pane-delay:.3s}.glass-pane:nth-child(4){--pane-delay:.45s}.glass-pane:nth-child(5){--pane-delay:.6s}.glass-pane:nth-child(6){--pane-delay:.75s}.glass-pane:nth-child(7){--pane-delay:.9s}
.glass-celebrate .glass-pane::after{content:'';position:absolute;inset:-20% -70%;background:linear-gradient(110deg,transparent 35%,#fff9 50%,transparent 65%);pointer-events:none;animation:glass-sweep 1.4s ease-in-out calc(.35s + var(--pane-delay)) both}
.glass-celebrate .glass-mark{animation:glass-number 1s ease-out calc(.8s + var(--pane-delay)) both}
.glass-celebrate .glass-pane.glass-5{animation:glass-indigo 2.6s ease-in-out 1.3s both}
@keyframes glass-sweep{from{transform:translateX(-100%);opacity:0}25%{opacity:.7}to{transform:translateX(100%);opacity:0}}
@keyframes glass-number{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes glass-indigo{0%,100%{filter:brightness(1)}50%{filter:brightness(1.65)}}
@media(prefers-reduced-motion:reduce){.glass-celebrate .glass-pane::after{display:none}.glass-celebrate .glass-mark,.glass-celebrate .glass-pane.glass-5{animation:none!important}}

/* Trial V: simultaneous light from all seven bodies, without suggesting reading order. */
.celestial-chart{--sky-gold:#F2CF3A}
.sky-beam{fill:none;stroke:var(--sky-gold);stroke-width:.48;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.aligned .star-art .heptagram{stroke:var(--sky-gold);stroke-width:.4;opacity:1}
.aligned .star-art .heptagram-glow{stroke:var(--sky-gold);opacity:.5}
.aligned .star-art .star-inner,.aligned .star-art .sky-orbit{stroke:var(--sky-gold);opacity:.6}
.aligned .star-art text{fill:var(--sky-gold)}
.aligned .star-day .day-body{color:var(--sky-gold);border-color:var(--sky-gold);box-shadow:0 0 18px -3px #f2cf3a99;transition:color 1s,border-color 1s,box-shadow 1.5s}
.aligned .star-day.active .day-body{background:var(--sky-gold);color:#080808}
.sky-celebrate .sky-beam{animation:sky-light-travel 2s ease-in-out .25s both}
.sky-celebrate .star-art .heptagram{animation:sky-gold-settle 2.4s ease-in-out both}
.sky-celebrate .star-art .heptagram-glow{animation:sky-gold-halo 3s ease-in-out both}
.sky-celebrate .star-art text,.sky-celebrate .star-art .star-inner{animation:sky-heart-light 2.6s ease-in-out both}
.sky-reading{margin:12px 0 20px}.room-5 [data-replay-sky][hidden],.room-5 .star-panel[hidden]{display:none}
@keyframes sky-light-travel{0%{stroke-dashoffset:1;opacity:0}12%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes sky-gold-settle{0%,55%{stroke:var(--silver);opacity:.4}100%{stroke:var(--sky-gold);opacity:1}}
@keyframes sky-gold-halo{0%,35%{opacity:0}100%{opacity:.5}}
@keyframes sky-heart-light{0%,55%{opacity:.25}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.sky-celebrate .sky-beam{animation:none!important;stroke-dashoffset:0;opacity:1}.aligned .star-art *,.aligned .star-day .day-body{animation:none!important;transition:none!important}}
/* An invitation before the numbered doors. */
.welcome .welcome-spade{display:block;width:92px;color:#f0e9d9;filter:drop-shadow(0 0 18px #e9ddbc22)}
.welcome .welcome-spade svg{display:block;width:100%;height:auto}
.welcome .cc-index{font-size:20px;color:#d6cebd}
.welcome .cc-index svg{width:13px;height:15px}
.welcome .welcome-line{font-weight:400;font-size:clamp(23px,5vw,29px);letter-spacing:.06em;line-height:1.4}
.welcome .lead{font-size:16px;color:#bdb8ae;line-height:1.8}
.welcome-action{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:30px}
.welcome-action>.btn{min-width:220px}

/* ---------- The theater (welcome): the curtain parts, the Ace is dealt, the stakes rise in. */
/* The deal: the card falls face down and turns to the Ace. */
.welcome .cc-inner { animation: card-deal 1.9s cubic-bezier(.2, .7, .2, 1) .15s backwards; }
@keyframes card-deal {
  0% { opacity: 0; transform: translateY(-34px) rotateZ(-7deg) rotateY(180deg) scale(.9); }
  22% { opacity: 1; }
  52% { transform: translateY(0) rotateZ(0) rotateY(180deg) scale(1); }
  100% { transform: rotateY(0); }
}
.welcome .cc-sheen { animation-delay: 2.2s; }
/* What is on the line. */
.prize-line { margin-top: 26px; font-family: var(--display); font-size: clamp(25px, 7.4vw, 38px); line-height: 1.15; letter-spacing: .08em; text-align: center; text-shadow: 0 0 28px rgba(242, 240, 235, .16); }
.prize-sub { margin-top: 12px; font-style: italic; font-size: 17px; line-height: 1.6; color: var(--mute); text-align: center; }
/* Lines rise through a mask, one after another. */
.rise { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .04em .08em; }
.rise > span { display: inline-block; animation: line-rise 1.1s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes line-rise { from { transform: translateY(110%); } }
.welcome-line .rise > span { animation-delay: 1.35s; }
.prize-line .rise:first-child > span { animation-delay: 1.65s; }
.prize-line .rise:last-child > span { animation-delay: 1.8s; }
.wf { animation: fadeIn 1s ease backwards; }
.wf1 { animation-delay: 2.15s; } .wf2 { animation-delay: 2.35s; } .wf3 { animation-delay: 2.55s; } .wf4 { animation-delay: 2.75s; } .wf5 { animation-delay: 2.95s; }
/* The ticker: what is at stake, passing slowly. */
.ticker { width: 100%; margin-top: 44px; padding: 13px 0; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.ticker-track { display: flex; align-items: center; width: max-content; animation: ticker 42s linear infinite; }
.ticker span { padding: 0 14px; font-family: var(--display); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; color: var(--mute); }
.ticker i { display: block; width: 8px; height: 9px; color: var(--line2); }
.ticker i svg { display: block; width: 100%; height: 100%; }
@keyframes ticker { to { transform: translateX(-50%); } }
/* zerotheater.com: the first visit of a session opens on a curtain (added by app.js; a tap skips it). */
.curtain { position: fixed; inset: 0; z-index: 70; cursor: pointer; }
.curtain-half { position: absolute; top: 0; bottom: 0; width: 50.5%; background: repeating-linear-gradient(90deg, #030303 0 22px, #090808 22px 30px, #030303 30px 44px); transition: transform 1.25s cubic-bezier(.7, 0, .2, 1); }
.curtain-half.left { left: 0; box-shadow: inset -30px 0 40px -20px rgba(242, 240, 235, .05); }
.curtain-half.right { right: 0; box-shadow: inset 30px 0 40px -20px rgba(242, 240, 235, .05); }
.curtain.open .curtain-half.left { transform: translateX(-101%); }
.curtain.open .curtain-half.right { transform: translateX(101%); }
.curtain-mark { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; animation: fadeIn .7s ease backwards; transition: opacity .45s ease; }
.curtain.open .curtain-mark { opacity: 0; }
.curtain-mark img { width: 34px; height: auto; }
.curtain-mark p { font-family: var(--display); font-size: 12px; letter-spacing: .55em; padding-left: .55em; color: var(--mute); }
.curtain-line { position: relative; width: 120px; height: 1px; overflow: hidden; background: rgba(242, 240, 235, .14); }
.curtain-line::after { content: ''; position: absolute; inset: 0; background: var(--ink); transform-origin: left; animation: curtain-line 1.05s cubic-bezier(.6, 0, .2, 1) .2s backwards; }
@keyframes curtain-line { from { transform: scaleX(0); } }
/* While the curtain is closed, everything behind it waits its turn. */
.curtain-on .welcome .cc-inner, .curtain-on .rise > span, .curtain-on .wf, .curtain-on .welcome .cc-sheen { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .welcome .cc-inner, .rise > span, .wf { animation: none; }
  .ticker-track { animation: none; }
  .cc-inner { transition: none; }
}