/* ═══════════════════════════════════════════════════════════════════════════
   THE OPENING — full-screen beats, staged reveals, generous type.
   ═══════════════════════════════════════════════════════════════════════════ */

.stage {
  height: 100%; width: 100%; overflow-y: auto; overflow-x: hidden;
  display: flex; align-items: center; align-items: safe center; justify-content: center;
  position: relative; padding: 32px 24px;
}
/* `safe center`: content taller than the viewport scrolls from its top instead
   of centring and losing its head above the fold. The plain `center` before it
   is the fallback for a browser that does not know the keyword. */
.stage::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url('../assets/img/title_bg.jpg');
  background-size: cover; background-position: center;
  opacity: 0.26;
  mask-image: radial-gradient(ellipse 95% 75% at 50% 45%, black 15%, transparent 82%);
}
.stage-inner { width: 100%; max-width: 760px; text-align: center; position: relative; }

/* ── Staged text ─────────────────────────────────────────────────────────── */
.tw-line {
  opacity: 0; transform: translateY(9px); filter: blur(5px);
  transition: opacity 1.0s cubic-bezier(.16,1,.3,1), transform 1.0s cubic-bezier(.16,1,.3,1), filter 1.0s;
  margin-bottom: 22px;
}
.tw-line.shown { opacity: 1; transform: none; filter: none; }
.typing::after {
  content: '▍'; margin-left: 1px; color: var(--green);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
.reveal.shown { opacity: 1; transform: none; }

/* ── Cold open ───────────────────────────────────────────────────────────── */
.cold {
  font-size: clamp(15px, 2.1vw, 19px); line-height: 1.85; color: var(--ink-2);
  max-width: 640px; margin: 0 auto; text-align: left;
  transition: opacity .7s ease;
}
.cold.fading { opacity: 0; }
.cold .tw-line:first-child {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.2em;
  color: var(--green); text-transform: uppercase;
}
.skip-hint {
  position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4);
  animation: fadeIn 2.5s ease backwards; animation-delay: 3s;
}

/* ── Title ───────────────────────────────────────────────────────────────── */
.title-block { opacity: 1; transition: opacity .8s ease; }
.title-block.hidden-until { opacity: 0; pointer-events: none; position: absolute; inset: 0; }
.title-block.in { animation: titleIn 1.2s cubic-bezier(.16,1,.3,1); }
@keyframes titleIn { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(8px); } to { opacity: 1; } }
.title-kicker {
  font-size: 11px; letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 18px;
}
.title-word {
  font-size: clamp(40px, 7.5vw, 72px); font-weight: 780; letter-spacing: -0.045em; line-height: 0.94;
  background: linear-gradient(112deg, #ffffff 0%, #7ff5cf 26%, #00e5a0 48%, #4dd0e1 68%, #8b5cf6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.title-sub {
  font-size: clamp(14px, 1.7vw, 16px); color: var(--ink-2); line-height: 1.7;
  max-width: 520px; margin: 22px auto 0;
}
.title-sub.dim2 { color: var(--ink-3); margin-top: 14px; }
.title-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.title-legacy {
  display: flex; gap: 20px; justify-content: center; margin-top: 26px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
}
.title-foot { margin-top: 26px; font-size: 10.5px; color: var(--ink-4); line-height: 1.7; }

/* ── Beats ───────────────────────────────────────────────────────────────── */
.beat {
  width: 100%; max-width: 1040px; margin: 0 auto;
  animation: beatIn .55s cubic-bezier(.16,1,.3,1);
}
.beat.leaving { animation: beatOut .24s ease forwards; }
@keyframes beatIn { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; } }
@keyframes beatOut { to { opacity: 0; transform: translateY(-14px); filter: blur(6px); } }

.beat-chrome {
  display: flex; align-items: center; gap: 16px; margin-bottom: 46px;
}
.beat-back {
  width: 32px; height: 32px; border-radius: 8px; color: var(--ink-3);
  border: 1px solid var(--line); background: var(--panel); font-size: 14px;
  transition: all .15s;
}
.beat-back:hover { background: var(--panel-2); color: var(--ink); transform: translateX(-2px); }
.beat-dots { display: flex; gap: 7px; flex: 1; }
.beat-dot {
  height: 2px; flex: 1; max-width: 64px; border-radius: 2px;
  background: rgba(255,255,255,0.10); transition: background .4s, box-shadow .4s;
}
.beat-dot.done { background: rgba(0,229,160,0.42); }
.beat-dot.on { background: var(--green); box-shadow: 0 0 12px -2px var(--green); }
.beat-count { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }

.beat-body { text-align: left; }
.beat-body.narrow { max-width: 560px; margin: 0 auto; }
.beat-q {
  font-size: clamp(26px, 4.2vw, 42px); font-weight: 700; letter-spacing: -0.035em;
  line-height: 1.12; min-height: 1.2em; color: var(--ink);
}
.beat-sub { font-size: 14.5px; color: var(--ink-3); margin-top: 14px; line-height: 1.6; }
.beat-note { font-size: 12px; color: var(--ink-4); margin-top: 18px; }
.beat-next { margin-top: 30px; }

/* ── Bare-line fields ────────────────────────────────────────────────────── */
.beat-fields { display: flex; flex-direction: column; gap: 30px; margin-top: 42px; }
.line-field { display: block; }
.line-label {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-4); margin-bottom: 8px; font-weight: 650;
}
.line-with-btn { display: flex; align-items: flex-end; gap: 10px; }
.line-input {
  width: 100%; background: none; border: none; outline: none;
  border-bottom: 1px solid var(--line-2); padding: 6px 2px 10px;
  font-size: clamp(20px, 3vw, 27px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.line-input:focus { border-bottom-color: var(--green); box-shadow: 0 1px 0 var(--green); }
.line-input::placeholder { color: var(--ink-4); }
.roll-btn {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; margin-bottom: 4px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-3); font-size: 15px;
  transition: all .15s;
}
.roll-btn:hover { background: var(--panel-2); color: var(--ink); transform: rotate(90deg); }

/* ── Choice cards ────────────────────────────────────────────────────────── */
.choice-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 12px; margin-top: 38px;
}
.choice-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 18px; border-radius: 14px; position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), border-color .18s, box-shadow .18s, opacity .3s;
}
.choice-card::before {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .18s;
  background: linear-gradient(150deg, color-mix(in srgb, var(--cc) 12%, transparent), transparent 62%);
}
.choice-card:hover:not(.locked):not(.dimmed) {
  transform: translateY(-4px); border-color: color-mix(in srgb, var(--cc) 55%, transparent);
  box-shadow: 0 14px 44px -22px var(--cc), inset 0 1px 0 rgba(255,255,255,0.06);
}
.choice-card:hover:not(.locked)::before { opacity: 1; }
.choice-card.locked { opacity: 0.30; cursor: not-allowed; }
.choice-card.dimmed { opacity: 0.16; transform: scale(.985); }
.choice-card.chosen {
  border-color: var(--cc); box-shadow: 0 0 0 1px var(--cc), 0 16px 50px -20px var(--cc);
  transform: translateY(-4px) scale(1.015);
}
.choice-card.chosen::before { opacity: 1; }
.cc-icon { font-size: 22px; position: relative; }
.cc-name { font-size: 16px; font-weight: 670; letter-spacing: -0.015em; position: relative; }
.cc-tag { font-size: 12px; color: var(--ink-3); font-style: italic; position: relative; }
.cc-desc { font-size: 12px; color: var(--ink-3); line-height: 1.55; position: relative; margin-top: 2px; }
/* The one mechanic this founder has that the others do not. It is a rule, so
   it prints as one: mono, small caps, in the card's own colour. */
.cc-perk {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cc); line-height: 1.5; position: relative; margin-top: 6px; opacity: 0.9;
}
.cc-stats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; position: relative; }
.cc-stat {
  font-family: var(--mono); font-size: 9.5px; padding: 2px 7px; border-radius: 5px;
  background: rgba(255,255,255,0.045); border: 1px solid var(--line); color: var(--ink-3);
}
.cc-stat.up { color: var(--green); border-color: rgba(0,229,160,0.24); }
.cc-stat.down { color: var(--red); border-color: rgba(255,77,94,0.24); }
.cc-stat.warn { color: var(--amber); border-color: rgba(245,166,35,0.26); }

/* ── Threshold ───────────────────────────────────────────────────────────── */
.threshold-lines {
  font-size: clamp(19px, 2.8vw, 26px); font-weight: 620; letter-spacing: -0.025em;
  line-height: 1.35; color: var(--ink);
}
.threshold-lines .tw-line:last-child { color: var(--ink-3); font-weight: 500; font-size: 0.82em; }
.threshold-card {
  display: flex; flex-direction: column; gap: 12px; margin-top: 34px;
  padding: 20px 22px; border-radius: 14px;
  background: linear-gradient(150deg, rgba(255,255,255,0.035), transparent);
  border: 1px solid var(--line-2);
}
.tc-row { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink-2); }
/* What each choice does to the run, under the row that names it: the same
   chips the beats showed, indented past the icon so they read as its detail. */
.tc-mods { display: flex; flex-wrap: wrap; gap: 5px; padding-left: 32px; margin-top: -6px; }
.tc-mods:empty { display: none; }
.threshold-beat .locked-strip { margin-top: 18px; }
.tc-row b { color: var(--ink); font-weight: 650; }
.tc-icon { width: 20px; text-align: center; font-size: 16px; }

.adv-toggle {
  display: block; margin: 20px 0 0;   /* its own line, whichever blocks follow it */
  font-size: 12px; color: var(--ink-3);
  border-bottom: 1px dashed var(--line-2); padding-bottom: 2px; transition: color .15s;
}
.adv-toggle:hover { color: var(--ink); }
.adv-panel {
  margin-top: 18px; padding: 18px; border-radius: 12px;
  background: rgba(255,255,255,0.02); border: 1px solid var(--line);
}
.adv-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-4); font-weight: 700; margin-bottom: 9px;
}
.adv-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.adv-chip {
  font-size: 11.5px; padding: 6px 11px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-2);
  transition: all .15s; white-space: nowrap;
}
.adv-chip:hover:not(.locked) { background: var(--panel-2); border-color: var(--line-2); }
.adv-chip.on { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 12%, transparent); color: var(--ink); }
.adv-chip.locked { opacity: .35; cursor: not-allowed; }
.adv-mult { font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); }
.adv-chip.on .adv-mult { color: var(--ac); }
.adv-note { font-size: 10.5px; color: var(--ink-4); margin-top: -8px; }

@media (max-width: 700px) {
  .stage { padding: 20px 14px; }
  .beat-chrome { margin-bottom: 30px; }
  .choice-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .beat-fields { gap: 22px; margin-top: 30px; }
  .cold { font-size: 15px; }
}

/* First run: one open archetype, the rest previewed rather than greyed out. */
.choice-grid.single { grid-template-columns: minmax(0, 1fr); }
.locked-strip { margin-top: 30px; }
.locked-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-4); font-weight: 700; margin-bottom: 10px;
}
.locked-row { display: flex; flex-wrap: wrap; gap: 7px; }
.locked-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; padding: 5px 11px; border-radius: 20px;
  background: rgba(255,255,255,0.022); border: 1px dashed var(--line-2);
  color: var(--ink-4); cursor: help; transition: all .15s;
}
.locked-chip:hover { color: var(--ink-3); border-color: rgba(255,255,255,0.2); }
.beat.narrow { max-width: 620px; }

/* ── The curtain ─────────────────────────────────────────────────────────── */
.curtain {
  position: fixed; inset: 0; z-index: 600;
  background: #04050a;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .55s ease;
  padding: 24px;
}
.curtain.in { opacity: 1; }
.curtain.out { opacity: 0; transition: opacity .75s ease; }
.curtain-lines {
  max-width: 520px; text-align: center;
  font-size: clamp(17px, 2.4vw, 22px); line-height: 1.6; color: var(--ink-2);
}
.curtain-lines .tw-line { margin-bottom: 18px; }
.curtain-mono {
  font-family: var(--mono); font-size: 0.72em; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--green);
}

/* ── The world, on the title ──────────────────────────────────────────────
   The headline feature, first screen. Reads as an instrument panel rather
   than a marketing card: a violet rail, mono labels, the tools as chips. */
.title-webmcp {
  position: relative; margin: 26px auto 0; max-width: 640px; text-align: left;
  padding: 16px 18px 15px 20px;
  border: 1px solid var(--edge); border-left: 2px solid var(--violet); border-radius: 0;
  background: linear-gradient(180deg, rgba(139,92,246,0.09), rgba(139,92,246,0.03));
}
.title-webmcp::after {
  content: ''; position: absolute; right: -1px; top: -1px; width: 10px; height: 10px;
  border-top: 1px solid var(--edge-hot); border-right: 1px solid var(--edge-hot);
}
.wm-kicker {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--violet);
}
.wm-mark { font-size: 12px; }
/* §D6. The plain sentence, above the standard's name. It is the first thing a
   new reader meets in this panel, so it is the largest thing in it — and the
   kicker under it drops to the register of a byline. */
.wm-plain {
  font-size: 14.5px; line-height: 1.6; color: var(--ink); margin: 0 0 10px;
  font-weight: 520; max-width: 62ch;
}
.wm-lead { font-size: 13.5px; line-height: 1.65; color: var(--ink-2); margin: 10px 0 0; }
.wm-lead.dim { color: var(--ink-3); font-size: 12.5px; margin-top: 8px; }
.wm-lead b { color: var(--ink); font-weight: 600; }
.wm-status {
  display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--etch);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.wm-dot { width: 7px; height: 7px; background: var(--ink-5); flex: 0 0 7px; }
.wm-dot.on { background: var(--green); box-shadow: 0 0 9px var(--green); }
.wm-dot.on + .wm-state { color: var(--green); }
.wm-tier { margin-left: auto; color: var(--ink-4); }
.wm-reason { font-size: 11.5px; line-height: 1.55; color: var(--ink-3); margin-top: 6px; }
.wm-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); margin-top: 12px;
}
.wm-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.wm-tool {
  font-family: var(--mono); font-size: 11px; color: var(--cyan); padding: 3px 7px;
  border: 1px solid rgba(77,208,225,0.28); background: rgba(77,208,225,0.06); cursor: default;
}
/* The rest of the hand, named in its note rather than given a chip each. */
.wm-tool-more { color: var(--ink-4); border-color: var(--line-2); background: rgba(255,255,255,0.04); }
.wm-laters { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.wm-later b { font-family: var(--mono); font-weight: 500; color: var(--ink-2); }
.wm-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.wm-say { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.wm-say b { color: var(--green); font-weight: 600; }
@media (max-width: 520px) {
  .title-webmcp { padding: 14px 14px 13px 16px; }
  .wm-tier { display: none; }
}
/* A 900px-tall desktop is the common one, and the panel must not push Begin
   below the fold there. Under this height the panel tightens and the "earned
   by play" line steps aside — the How-it-works dialog still carries it. */
@media (max-height: 960px) {
  .title-sub { margin-top: 14px; }
  .title-sub.dim2 { margin-top: 8px; }
  .title-webmcp { margin-top: 16px; padding: 12px 16px 12px 18px; }
  .wm-plain { font-size: 13px; margin-bottom: 8px; line-height: 1.5; }
  .wm-lead { font-size: 12.5px; margin-top: 7px; line-height: 1.55; }
  .wm-lead.dim { margin-top: 5px; }
  .wm-status { margin-top: 10px; padding-top: 9px; }
  .wm-label { margin-top: 8px; }
  .wm-tools { margin-top: 5px; }
  .wm-laters, .wm-label-later { display: none; }
  .wm-cta { margin-top: 10px; }
  .title-actions { margin-top: 18px; }
  .title-legacy { margin-top: 16px; }
  .title-foot { margin-top: 14px; }
}

/* ── The question at the threshold ────────────────────────────────────────
   Two answers, both real, only in a browser with site tools. The recommended
   one is lit; the other is a plain plate. Square, like everything else. */
.assistant-pick { margin-top: 22px; text-align: left; }
.ap-kicker {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--violet);
}
.ap-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ap-opt {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 12px 14px; border: 1px solid var(--edge); border-radius: 0;
  background: rgba(255,255,255,0.02); color: var(--ink-3); cursor: pointer;
  transition: border-color .16s, background .16s, color .16s;
}
.ap-opt b { font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.ap-opt span { font-size: 11.5px; line-height: 1.5; }
.ap-opt span i { color: var(--ink-2); font-style: italic; }
.ap-opt:hover { border-color: var(--line-2, var(--edge)); background: rgba(255,255,255,0.04); color: var(--ink-2); }
.ap-opt.on {
  border-color: var(--violet); background: rgba(139,92,246,0.12); color: var(--ink-2);
  box-shadow: inset 2px 0 0 var(--violet);
}
.ap-opt.on b { color: var(--ink); }
.ap-handoff {
  margin-top: 8px; padding: 11px 13px 10px; border: 1px solid rgba(139,92,246,0.32);
  background: linear-gradient(100deg, rgba(139,92,246,0.11), rgba(77,208,225,0.035));
  box-shadow: inset 2px 0 0 var(--violet);
}
.aph-k {
  margin-bottom: 7px; font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  color: var(--violet); font-weight: 700;
}
.aph-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1.15fr; align-items: center; gap: 7px; }
.aph-flow span { font-size: 10.5px; line-height: 1.42; color: var(--ink-3); }
.aph-flow span b {
  display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 4px;
  border: 1px solid rgba(139,92,246,.45); color: var(--violet); font: 700 8.5px var(--mono);
}
.aph-flow span em { color: var(--ink); font-style: normal; }
.aph-flow > i { color: var(--ink-5); font-size: 10px; }
.aph-note { margin-top: 7px; font-size: 9.75px; line-height: 1.45; color: var(--ink-4); }
@media (max-width: 560px) {
  .ap-row { grid-template-columns: 1fr; }
  .aph-flow { grid-template-columns: 1fr; gap: 5px; }
  .aph-flow > i { display: none; }
}

/* ── Seen it: the panel steps back ──────────────────────────────────────── */
.title-webmcp.brief { padding-top: 12px; padding-bottom: 12px; }
.title-webmcp.brief .wm-status { margin-top: 10px; padding-top: 0; border-top: 0; }
.wm-say.dim { flex-basis: 100%; font-size: 11.5px; color: var(--ink-4); }

/* ── One line to yourself ───────────────────────────────────────────────────
   The only field at the threshold that is not a decision about the run, so it
   is quieter than the two rows under it: the shared `.line-input` rule at its
   smallest size, no label weight, and a hint that says it is optional rather
   than an asterisk that says it is not. Blank is a real answer. */
.self-letter { margin-top: 18px; text-align: left; }
.self-letter-field {
  font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.5;
  resize: none; font-family: inherit; padding-top: 4px;
}

/* ── Where the run starts ───────────────────────────────────────────────────
   This is a real product choice, not an unexplained title-screen shortcut.
   Both doors say what the player will actually see on the other side. */
.start-pick { margin-top: 18px; text-align: left; }
.start-row { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; }
.start-opt {
  display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 10px 12px;
  text-align: left; border: 1px solid var(--edge); border-radius: 0;
  background: rgba(255,255,255,0.02); color: var(--ink-3);
  transition: border-color .16s, background .16s, color .16s;
}
.start-opt b { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.start-opt span { font-size: 10.75px; line-height: 1.45; }
.start-opt span i { color: var(--violet); font-style: normal; white-space: nowrap; }
.start-opt:hover { border-color: var(--line-2); background: rgba(255,255,255,0.04); color: var(--ink-2); }
.start-opt.on {
  border-color: var(--ac); background: color-mix(in srgb, var(--ac) 10%, transparent);
  color: var(--ink-2); box-shadow: inset 2px 0 0 var(--ac);
}
.start-opt.on b { color: var(--ink); }
@media (max-width: 560px) { .start-row { grid-template-columns: 1fr; } }

/* ── The actual handoff ────────────────────────────────────────────────────
   It follows First Light when the AI world was chosen. This is deliberately a
   proper dialog rather than another toast: the page can publish tools, but a
   player has to originate the chat turn that uses them. */
.assistant-handoff-modal { --kind-color: var(--violet); }
.assistant-handoff { display: flex; flex-direction: column; gap: 16px; }
.ah-hero { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 18px; }
.ah-signal {
  width: 72px; height: 72px; display: grid; place-items: center; position: relative;
  border: 1px solid rgba(139,92,246,.42); background: rgba(139,92,246,.08);
  color: var(--violet); box-shadow: inset 0 0 28px rgba(139,92,246,.10), 0 0 30px rgba(139,92,246,.08);
}
.ah-signal::before, .ah-signal::after {
  content: ''; position: absolute; inset: 8px; border: 1px solid rgba(139,92,246,.26);
  animation: ahOrbit 7s linear infinite;
}
.ah-signal::after { inset: 16px; border-color: rgba(77,208,225,.25); animation-direction: reverse; animation-duration: 4.5s; }
.ah-signal span { font-size: 24px; filter: drop-shadow(0 0 9px currentColor); }
@keyframes ahOrbit { to { transform: rotate(360deg); } }
.ah-kicker { font: 700 9.5px var(--mono); letter-spacing: .2em; color: var(--violet); }
.ah-title { margin-top: 5px; font-size: 24px; font-weight: 680; letter-spacing: -.025em; color: var(--ink); }
.ah-copy { margin-top: 7px; max-width: 650px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.ah-copy b { color: var(--ink-2); font-weight: 650; }
.ah-copy code { font: 11px var(--mono); color: var(--cyan); }
.ah-instruction {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 5px 18px;
  padding: 14px 16px; border: 1px solid rgba(0,229,160,.34);
  background: linear-gradient(100deg, rgba(0,229,160,.09), rgba(139,92,246,.06));
  box-shadow: inset 3px 0 0 var(--green);
}
.ah-label { grid-column: 1 / -1; font: 700 8.5px var(--mono); letter-spacing: .19em; color: var(--green); }
.ah-instruction strong { font: 600 22px var(--mono); letter-spacing: -.02em; color: var(--ink); }
.ah-hint { align-self: center; font-size: 10.5px; color: var(--ink-4); }
.ah-route {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 8px;
}
.ah-route > span {
  min-width: 0; padding: 10px 11px; border: 1px solid var(--line);
  background: rgba(255,255,255,.018); color: var(--ink-3); font-size: 10.5px; line-height: 1.4;
}
.ah-route > span b {
  float: left; display: grid; place-items: center; width: 20px; height: 20px; margin: 0 8px 3px 0;
  border: 1px solid rgba(139,92,246,.4); color: var(--violet); font: 700 9px var(--mono);
}
.ah-route small { display: block; margin-bottom: 2px; font: 700 8px var(--mono); letter-spacing: .14em; color: var(--ink-2); }
.ah-route > i { align-self: center; color: var(--ink-5); font-size: 10px; }
.ah-route .done { border-color: rgba(0,229,160,.25); color: var(--ink-2); }
.ah-route .done b { border-color: rgba(0,229,160,.35); color: var(--green); }
.ah-route .live { border-color: rgba(77,208,225,.35); background: rgba(77,208,225,.055); color: var(--ink-2); }
.ah-route .live b { border-color: rgba(77,208,225,.4); color: var(--cyan); }
.ah-live {
  display: flex; align-items: center; gap: 8px; min-height: 20px;
  font: 650 8.5px var(--mono); letter-spacing: .14em; color: var(--ink-4);
}
.ah-live i { width: 6px; height: 6px; flex: 0 0 6px; background: var(--violet); box-shadow: 0 0 8px var(--violet); animation: ahPulse 1.3s ease-in-out infinite; }
.ah-live.on { color: var(--green); }
.ah-live.on i { background: var(--green); box-shadow: 0 0 9px var(--green); }
.ah-live.off i { background: var(--ink-4); box-shadow: none; animation: none; }
@keyframes ahPulse { 50% { opacity: .28; transform: scale(.72); } }
.assistant-handoff.connected .ah-signal { border-color: rgba(0,229,160,.5); color: var(--green); background: rgba(0,229,160,.08); }
.assistant-handoff.connected .ah-kicker { color: var(--green); }
.assistant-handoff.unavailable .ah-signal { color: var(--ink-4); border-color: var(--line-2); background: rgba(255,255,255,.025); box-shadow: none; }
.assistant-handoff.unavailable .ah-kicker { color: var(--ink-4); }
.ah-reason { padding: 10px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); font-size: 11px; line-height: 1.5; color: var(--ink-3); }
html.reduced-motion .ah-signal::before, html.reduced-motion .ah-signal::after, html.reduced-motion .ah-live i { animation: none; }
@media (max-width: 620px) {
  .ah-hero { grid-template-columns: 48px 1fr; gap: 12px; }
  .ah-signal { width: 48px; height: 48px; }
  .ah-signal::after { display: none; }
  .ah-title { font-size: 19px; }
  .ah-copy { font-size: 12px; }
  .ah-instruction { grid-template-columns: 1fr; }
  .ah-instruction strong { font-size: 18px; }
  .ah-hint { display: none; }
  .ah-route { grid-template-columns: 1fr; gap: 5px; }
  .ah-route > i { display: none; }
  .ah-route > span { padding: 8px 10px; }
}
@media (max-height: 620px) {
  .assistant-handoff { gap: 10px; }
  .ah-signal { width: 52px; height: 52px; }
  .ah-hero { grid-template-columns: 54px 1fr; gap: 12px; }
  .ah-title { font-size: 20px; }
  .ah-copy { margin-top: 4px; line-height: 1.45; }
  .ah-instruction { padding: 10px 12px; }
  .ah-route > span { padding: 7px 9px; }
}

/* The threshold has four real decisions on it. At the in-app browser's common
   720px height, keep the primary action on the first glass without shrinking
   any of the earlier, simpler beats. */
@media (max-height: 760px) {
  .threshold-beat .beat-chrome { margin-bottom: 18px; }
  .threshold-beat .threshold-lines { font-size: 20px; line-height: 1.22; }
  .threshold-beat .threshold-lines .tw-line { margin-bottom: 9px; }
  .threshold-beat .threshold-card { margin-top: 15px; padding: 11px 14px; gap: 7px; }
  .threshold-beat .tc-row { font-size: 12.5px; gap: 8px; }
  .threshold-beat .tc-icon { font-size: 13px; }
  .threshold-beat .assistant-pick { margin-top: 12px; }
  .threshold-beat .ap-kicker { margin-bottom: 5px; }
  .threshold-beat .ap-opt { padding: 8px 11px; gap: 3px; }
  .threshold-beat .ap-opt b { font-size: 12.25px; }
  .threshold-beat .ap-opt span { font-size: 10.25px; line-height: 1.35; }
  .threshold-beat .ap-handoff { padding: 8px 10px 7px; }
  .threshold-beat .aph-k { margin-bottom: 5px; }
  .threshold-beat .aph-flow span { font-size: 9.5px; line-height: 1.3; }
  .threshold-beat .aph-note { margin-top: 5px; font-size: 8.75px; }
  .threshold-beat .start-pick { margin-top: 10px; }
  .threshold-beat .adv-label { margin-bottom: 5px; }
  .threshold-beat .start-opt { padding: 7px 10px; gap: 3px; }
  .threshold-beat .start-opt b { font-size: 11.5px; }
  .threshold-beat .start-opt span { font-size: 9.75px; line-height: 1.32; }
  .threshold-beat .beat-next { margin-top: 12px; }
  .threshold-beat .beat-note { margin-top: 7px; font-size: 10.5px; }
}

/* ── The stage overflows ─────────────────────────────────────────────────────
   Eight choice cards do not fit a 900px laptop. `stageCue()` in
   src/ui/intro.js pins this to the bottom of #app — *outside* the scroller, or
   it would scroll away with the content it is describing — and toggles `.on`
   only when something is below, `.at-end` once you have reached it.

   The veil is `pointer-events: none` and the glyph alone takes the click: a
   108px band of dead pixels over the last row of cards is the same bug in a
   nicer coat. Both beats and the title screen use it. */
.stage-cue {
  position: absolute; left: 0; right: 0; bottom: 0; height: 112px;
  z-index: 6; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px;
  background: linear-gradient(to top, rgb(5 6 10 / .94) 0%, rgb(5 6 10 / .82) 34%, rgb(5 6 10 / 0) 100%);
  opacity: 0; transition: opacity .5s cubic-bezier(.16,1,.3,1);
}
.stage-cue.on { opacity: 1; }
.stage-cue.on.at-end { opacity: 0; }
.stage-cue-btn {
  pointer-events: auto; cursor: pointer; background: none; border: 0;
  padding: 6px 22px; line-height: 1; font-size: 17px;
  color: var(--ink-3); text-shadow: 0 0 14px rgb(0 229 160 / .18); opacity: .8;
  transition: color .2s ease, text-shadow .2s ease, opacity .2s ease;
}
/* Three bobs, then it holds still. The dock's attention rule, for the same
   reason: a cue that keeps waving is a cue people stop reading — and a control
   that never settles is one no automated hand can ever click. The animation is
   scoped to `.on`, so it re-arms by itself every time a new beat needs it. */
.stage-cue.on .stage-cue-btn { animation: cueBob 1.9s cubic-bezier(.4,0,.6,1) 3 both; }
.stage-cue-btn:hover { color: var(--green); text-shadow: 0 0 16px rgb(0 229 160 / .5); opacity: 1; }
@keyframes cueBob {
  0%, 100% { transform: translateY(0); opacity: .72; }
  50%      { transform: translateY(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-cue.on .stage-cue-btn { animation: none; opacity: .9; }
  .stage-cue { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE LANDING
   One page, one scroll, six movements, all of it inside `.stage` — the same
   scroller the beats use, so `stageCue()` and every harness that reaches for
   `.stage` keep working.

   The register changes once, at the fold. The hero is film: black, bare
   typography over a live node field, a reticle of four brackets, nothing with
   a frame around it. Everything below is machine — square plates, corner
   ticks, mono labels, closed frames — because that is what the game is.

   Two house rules that bind here:
   - a chamfer is `--ch` plus `clip-path` on the *same* rule, never on an
     ancestor, and a chamfered plate is two shapes: the element is the 1px line
     and a `z-index: -1` pseudo-element is the opaque fill;
   - colour closes. Every frame below is on all four sides or on none. A stripe
     down one edge is what `tools/oneside.mjs` is looking for.
   ═══════════════════════════════════════════════════════════════════════════ */

.stage.landing {
  display: block; padding: 0;
  scrollbar-gutter: stable;
}
/* The plexus photograph is the hero's canvas now, so the stage's own copy of
   it steps back to a texture under the sections below the fold. */
.stage.landing::before { opacity: 0.12; }

.ld-page { width: 100%; }

/* ── The hero ─────────────────────────────────────────────────────────────── */
.ld-hero {
  position: relative; background: var(--bg-0);
  /* `min-height: 100%` computes to nothing against `.ld-page`, whose own
     height is auto — so the hero silently became as tall as its contents and
     the next section peeked over the fold. Viewport units say it directly;
     `dvh` is the one that survives a mobile browser's disappearing chrome. */
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  justify-content: center; justify-content: safe center;
  padding: clamp(26px, 5vh, 64px) 24px clamp(30px, 5vh, 58px);
  overflow: hidden;
}
.ld-hero-inner {
  position: relative; z-index: 1;
  /* Wider than the copy, on purpose. `.ld-mark` is an inline-block whose width
     is its own content, and an inline-block wider than its line box does not
     centre — it starts at the left edge and overflows right, which put the
     wordmark a hundred and ten pixels off the axis everything under it sits
     on. The paragraphs keep their own measures below. */
  width: 100%; max-width: 1120px; margin: 0 auto; text-align: center;
}
.ld-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ld-field canvas { display: block; width: 100%; height: 100%; }

/* The vignette is a static layer, not a gradient repainted every frame: the
   rail already animates and a second static pass is free while it never
   changes. The centre well is what lets the dimmest line in the hero win over
   a plate crossing under it. */
.ld-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    /* The well under the type, and the vignette to black at the edges. Both
       are gradients on a layer that never repaints — a filter over an
       animating canvas is the cliff `styles/hud.css` has a rule about. */
    radial-gradient(ellipse 52% 56% at 50% 55%, rgba(5,6,10,0.93) 0%, rgba(5,6,10,0.62) 50%, rgba(5,6,10,0) 84%),
    radial-gradient(ellipse 92% 78% at 50% 48%, rgba(5,6,10,0) 0%, rgba(5,6,10,0.26) 58%, rgba(5,6,10,0.94) 100%),
    linear-gradient(180deg, rgba(5,6,10,0.62) 0%, rgba(5,6,10,0) 22%, rgba(5,6,10,0) 74%, rgba(5,6,10,0.96) 100%);
}

/* ── The wordmark and its reticle ─────────────────────────────────────────── */
/* `assets/readme/wordmark.webp` is the reference: white geometric uppercase,
   wide tracking, four cyan brackets standing off it. Set live rather than
   shipped as an image, so it is selectable, scalable and weighs nothing. */
.ld-mark { position: relative; display: inline-block; margin: 4px auto 0; padding: 26px 34px; }
.ld-hero .title-word {
  font-size: min(7.4vw, 96px);
  font-weight: 720; letter-spacing: 0.055em; line-height: 1.02;
  white-space: nowrap; color: #fff;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  text-shadow: 0 0 46px rgba(120,190,220,0.22);
}
.ld-reticle { position: absolute; inset: 0; pointer-events: none; }
.ld-reticle i {
  position: absolute; width: 26px; height: 26px;
  /* Two strokes drawn as backgrounds, not borders: a border on two sides is
     exactly the shape `oneside.mjs` is written to catch, and this is a bracket
     rather than an accent on an edge. */
  background:
    linear-gradient(var(--cyan), var(--cyan)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 0 0 / 1px 100% no-repeat;
  opacity: 0.82;
  animation: retIn .6s cubic-bezier(.16,1,.3,1) both;
}
.ld-reticle i:nth-child(1) { top: 0; left: 0; }
.ld-reticle i:nth-child(2) { top: 0; right: 0; transform: scaleX(-1); animation-delay: .07s; }
.ld-reticle i:nth-child(3) { bottom: 0; left: 0; transform: scaleY(-1); animation-delay: .14s; }
.ld-reticle i:nth-child(4) { bottom: 0; right: 0; transform: scale(-1); animation-delay: .21s; }
@keyframes retIn {
  from { opacity: 0; background-size: 0 1px, 1px 0; }
  to   { opacity: .82; background-size: 100% 1px, 1px 100%; }
}

.ld-tagline {
  max-width: 640px; margin: 20px auto 0; text-wrap: balance;
  font-size: clamp(15px, 1.9vw, 19px); font-weight: 520; color: var(--ink); line-height: 1.55;
}
.ld-pitch {
  max-width: 620px; margin: 12px auto 0; text-wrap: pretty;
  font-size: clamp(13px, 1.5vw, 14.5px); color: var(--ink-3); line-height: 1.65;
}
.ld-actions { margin-top: 26px; align-items: center; }
.ld-actions .btn-primary { min-width: 176px; }
.ld-actions .ld-import { align-self: center; }

/* ── The readout under the doors ──────────────────────────────────────────── */
.ld-readout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px;
  margin-top: 20px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--ink-4);
}
.ld-readout b { color: var(--cyan); font-weight: 600; letter-spacing: 0.09em; }
.ld-readout i { color: var(--ink-5); font-style: normal; }

/* ── Section furniture ────────────────────────────────────────────────────── */
.ld { position: relative; z-index: 1; }
.ld-sec {
  width: 100%; max-width: 1120px; margin: 0 auto;
  padding: clamp(56px, 8vh, 104px) 24px 0;
}
.ld-head { max-width: 720px; }
.ld-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--cyan); font-weight: 600;
}
.ld-title {
  margin-top: 12px;
  font-size: clamp(23px, 3.1vw, 34px); font-weight: 700; letter-spacing: -0.028em;
  line-height: 1.16; color: var(--ink);
}
.ld-body { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--ink-3); }
/* A rule is a real element with a background, never a one-sided border. */
.ld-rule {
  height: 1px; margin-top: 22px;
  background: linear-gradient(90deg, rgba(77,208,225,0.5), rgba(255,255,255,0.07) 42%, rgba(255,255,255,0));
}
.ld-count {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 20px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-4);
}
/* A rail that bleeds off the edge says there is more; this says how to get it,
   because thirteen people behind five plates is worth a sentence. */
.ld-count i { font-style: normal; color: var(--ink-5); }
.ld-count i::after { content: ' \203a\203a'; }
.ld-note { margin-top: 18px; font-size: 12px; line-height: 1.65; color: var(--ink-4); max-width: 720px; }

/* ── 2. The terminal ──────────────────────────────────────────────────────── */
.ld-term {
  --ch: 12px; clip-path: var(--cut-br); position: relative;
  margin-top: 26px; background: rgba(77,208,225,0.30);
}
.ld-term::before {
  content: ''; position: absolute; inset: 1px; z-index: -1;
  clip-path: var(--cut-br-in);
  background: linear-gradient(170deg, #080b11, #05060a 62%);
}
.ld-term-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 16px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-4);
}
.ld-term-name { color: var(--cyan); }
.ld-term-body {
  padding: 6px 22px 26px;
  font-family: var(--mono); font-size: clamp(12px, 1.35vw, 13.5px); line-height: 1.9;
  color: var(--ink-2); min-height: 266px;
}
.ld-term-body .tw-line { margin-bottom: 10px; }
.ld-term-body .tw-line:first-child { color: var(--green); letter-spacing: 0.18em; }
.ld-term.live .ld-term-body::after {
  content: '\258D'; color: var(--green);
  animation: caret 1s steps(1) infinite;
}

/* ── 3. The cast ──────────────────────────────────────────────────────────── */
.ld-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 208px;
  gap: 12px; margin-top: 14px; padding: 4px 24px 20px; margin-left: -24px; margin-right: -24px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: 24px;
}
.ld-person {
  --ch: 10px; clip-path: var(--cut-br); position: relative;
  scroll-snap-align: start;
  padding: 12px 13px 14px; background: rgba(255,255,255,0.13);
  transition: background .18s ease, transform .18s cubic-bezier(.2,.8,.3,1);
}
.ld-person::before {
  content: ''; position: absolute; inset: 1px; z-index: -1;
  clip-path: var(--cut-br-in);
  background: linear-gradient(168deg, #0b0e14, #06070c 70%);
}
.ld-person:hover { background: color-mix(in srgb, var(--ac) 62%, transparent); transform: translateY(-3px); }
.ld-portrait { position: relative; aspect-ratio: 1; overflow: hidden; background: #05060a; }
.ld-face { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.04); }
.ld-face-none {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ac) 16%, transparent), transparent 68%);
}
.ld-face-none i { font-style: normal; font-size: 42px; color: var(--ac); opacity: .8; }
/* One corner tick, inside the plate, so the clip cannot eat it. */
.ld-tick {
  position: absolute; right: 0; top: 0; width: 11px; height: 11px;
  background:
    linear-gradient(var(--ac), var(--ac)) 100% 0 / 100% 1px no-repeat,
    linear-gradient(var(--ac), var(--ac)) 100% 0 / 1px 100% no-repeat;
  opacity: .85;
}
.ld-person-id { margin-top: 11px; display: flex; flex-direction: column; gap: 2px; }
.ld-person-id b { font-size: 13.5px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.ld-person-id span { font-size: 11px; color: var(--ink-3); }
.ld-arc {
  margin-top: 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ac); opacity: .9;
}
.ld-bio {
  margin-top: 9px; font-size: 11.5px; line-height: 1.55; color: var(--ink-4);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .28s cubic-bezier(.16,1,.3,1), opacity .28s ease, margin-top .28s ease;
}
.ld-person:hover .ld-bio, .ld-person:focus-within .ld-bio { max-height: 190px; opacity: 1; }

/* ── 4. Five acts ─────────────────────────────────────────────────────────── */
.ld-acts { list-style: none; margin-top: 26px; }
.ld-act { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 14px; }
/* The rule that links the five. A real element with a background — not a
   border on one side of the plate beside it. */
.ld-act-rule { position: relative; }
.ld-act-rule::after {
  content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(77,208,225,0.36), rgba(139,92,246,0.30));
}
.ld-act:last-child .ld-act-rule::after { bottom: 50%; }
.ld-act:first-child .ld-act-rule::after { top: 50%; }
.ld-act-rule i {
  position: absolute; left: 4px; top: calc(50% - 4px); width: 9px; height: 9px;
  background: var(--cyan); box-shadow: 0 0 10px rgba(77,208,225,.55);
}
.ld-act:nth-child(4) .ld-act-rule i, .ld-act:nth-child(5) .ld-act-rule i {
  background: var(--violet); box-shadow: 0 0 10px rgba(139,92,246,.55);
}
.ld-act-plate {
  --ch: 12px; clip-path: var(--cut-br); position: relative;
  margin-bottom: 14px; min-height: 148px; background: rgba(255,255,255,0.12);
  display: grid; align-items: stretch;
}
.ld-act-plate::before {
  content: ''; position: absolute; inset: 1px; z-index: -1;
  clip-path: var(--cut-br-in); background: #06070c;
}
.ld-act-img {
  position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px);
  object-fit: cover; opacity: .40;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 42%, #000 100%);
}
.ld-act-text { position: relative; padding: 20px 22px; max-width: 640px; }
.ld-act-num {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--cyan); font-weight: 600;
}
.ld-act-name { margin-top: 7px; font-size: clamp(19px, 2.3vw, 25px); font-weight: 700; letter-spacing: -0.028em; color: var(--ink); }
.ld-act-sub {
  margin-top: 3px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-4);
}
.ld-act-line { margin-top: 11px; font-size: 13px; line-height: 1.65; color: var(--ink-2); }

/* ── 5. The world layer ───────────────────────────────────────────────────── */
/* Three plates have two tidy shapes and `auto-fit` steps through the third:
   at 760 it lands on two columns and strands the last one under a gap. Same
   family as `.grid-tiles` and the four-card agent rack — when a count and a
   column number disagree, pick the shape. */
.ld-plates {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin-top: 16px;
}
@media (max-width: 900px) { .ld-plates { grid-template-columns: minmax(0, 1fr); } }
.ld-plate {
  --ch: 12px; clip-path: var(--cut-br); position: relative;
  padding: 18px 19px 19px; background: rgba(139,92,246,0.34);
}
.ld-plate::before {
  content: ''; position: absolute; inset: 1px; z-index: -1;
  clip-path: var(--cut-br-in);
  background: linear-gradient(165deg, #0b0913, #06070c 68%);
}
.ld-plate-title { font-size: 15px; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); }
.ld-plate-body { margin-top: 9px; font-size: 12.5px; line-height: 1.62; color: var(--ink-3); }
.ld-tools { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; }
/* Deliberately not `.wm-tool`: `tools/titleshot.mjs` counts that class across
   the whole document to prove the brief panel dropped the hand. */
.ld-tool {
  --ch: 4px; clip-path: var(--cut-br);
  font-family: var(--mono); font-size: 10.5px; color: var(--cyan);
  padding: 3px 7px; background: rgba(77,208,225,0.08);
  border: 1px solid rgba(77,208,225,0.30);
}
.ld-tool.earned { color: var(--ink-4); background: rgba(255,255,255,0.035); border-color: var(--line-2); }
.ld-plate-quiet { margin-top: 12px; background: rgba(255,255,255,0.13); }
.ld-plate-quiet::before { background: linear-gradient(165deg, #0a0c11, #06070c 68%); }
.ld-contract {
  margin-top: 12px; padding-top: 11px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-4); line-height: 1.7;
  background: linear-gradient(90deg, rgba(255,255,255,0.09), rgba(255,255,255,0)) top / 100% 1px no-repeat;
}

/* ── The endings ──────────────────────────────────────────────────────────── */
/* Eight plates: 4x2 or 2x4, never a row of three with two under it. */
.ld-ends {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-top: 22px;
}
@media (max-width: 980px) { .ld-ends { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ld-end {
  --ch: 10px; clip-path: var(--cut-br); position: relative;
  background: rgba(255,255,255,0.13);
}
.ld-end::before {
  content: ''; position: absolute; inset: 1px; z-index: -1;
  clip-path: var(--cut-br-in); background: #06070c;
}
.ld-end img {
  display: block; width: calc(100% - 2px); height: 128px; margin: 1px;
  object-fit: cover; opacity: .62; filter: saturate(.85);
}
.ld-end figcaption { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px 13px; }
.ld-end-name {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-3);
}
.ld-end-name.tone-good { color: var(--green); }
.ld-end-name.tone-bad { color: var(--red); }
.ld-end-name.tone-dark { color: var(--ink-4); }
.ld-end-name.tone-strange { color: var(--violet); }
.ld-end-name.tone-neutral { color: var(--cyan); }

/* ── 6. Two housings ──────────────────────────────────────────────────────── */
/* Two 1600px screenshots side by side stop being readable somewhere under a
   thousand pixels, so they stack before they get there rather than after. */
.ld-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 14px; margin-top: 22px; }
.ld-shot {
  --ch: 12px; clip-path: var(--cut-br); position: relative;
  background: rgba(255,255,255,0.13);
}
.ld-shot::before {
  content: ''; position: absolute; inset: 1px; z-index: -1;
  clip-path: var(--cut-br-in); background: #06070c;
}
.ld-shot img { display: block; width: calc(100% - 2px); margin: 1px; height: auto; }
.ld-shot figcaption {
  display: flex; align-items: baseline; gap: 9px; padding: 11px 14px 13px;
  font-size: 12.5px; color: var(--ink-2);
}
.ld-shot figcaption b { font-weight: 650; color: var(--ink); }
.ld-shot figcaption span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-4); }

/* ── The rack ─────────────────────────────────────────────────────────────── */
/* Twelve tiles: 6x2, 4x3, 3x4, 2x6. `auto-fit` chose five at a thousand
   pixels and left an orphan pair under a gap. */
.ld-rack {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px; margin-top: 22px;
}
@media (max-width: 1150px) { .ld-rack { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .ld-rack { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ld-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ld-tile {
  --ch: 8px; clip-path: var(--cut-br); position: relative;
  padding: 14px 15px 15px; background: rgba(255,255,255,0.12);
}
.ld-tile::before {
  content: ''; position: absolute; inset: 1px; z-index: -1;
  clip-path: var(--cut-br-in); background: #07080d;
}
.ld-tile b { display: block; font-family: var(--mono); font-size: 25px; font-weight: 600; letter-spacing: -0.03em; color: var(--green); }
.ld-tile span {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--ink-2);
}
.ld-tile i { display: block; margin-top: 5px; font-style: normal; font-size: 10.5px; line-height: 1.5; color: var(--ink-4); }

/* ── The foot ─────────────────────────────────────────────────────────────── */
.ld-foot {
  width: 100%; max-width: 1120px; margin: 0 auto;
  padding: clamp(48px, 7vh, 84px) 24px clamp(56px, 10vh, 120px);
  text-align: center;
}
.ld-foot-rule {
  height: 1px; margin-bottom: 24px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.10) 50%, rgba(255,255,255,0));
}
.ld-foot-line { font-size: 12px; line-height: 1.7; color: var(--ink-3); }
.ld-foot-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
}
.ld-link { color: var(--cyan); }
.ld-link:hover { color: var(--green); }
.ld-foot-tag { color: var(--ink-4); }
.ld-foot-sep { color: var(--ink-5); }

/* ── The cold open, as a beat ─────────────────────────────────────────────── */
/* Film, like the beats around it: no plate, no frame, nothing but the lines. */
.cold-beat .beat-body { padding-top: 6vh; }
.cold-doors {
  display: flex; align-items: center; gap: 12px; margin-top: 34px;
  opacity: 0; animation: fadeIn 1.6s ease forwards; animation-delay: 2.4s;
}
.skip-note {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4);
}
@keyframes fadeIn { to { opacity: 1; } }

/* ── Narrow ───────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .ld-sec, .ld-foot { padding-left: 16px; padding-right: 16px; }
  .ld-hero { padding-left: 16px; padding-right: 16px; }
  .ld-rail { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; grid-auto-columns: 176px; scroll-padding-inline: 16px; }
  /* The reveal wipes and rebuilds the container, so the plate reserves the
     height it will finish at. Measured, not guessed: 236-262px above 700,
     259 at 560, 350 at 420 and 396 at 360. */
  .ld-term-body { min-height: 300px; }
  .ld-mark { padding: 20px 24px; }
  .ld-reticle i { width: 18px; height: 18px; }
  .ld-act { grid-template-columns: minmax(0, 1fr); }
  .ld-act-rule { display: none; }
  .ld-act-text { padding: 15px 16px; }
  .ld-term-body { padding: 4px 15px 22px; min-height: 220px; }
  .ld-tile b { font-size: 21px; }
  .ld-actions { flex-direction: column; }
  .ld-actions .btn { width: 100%; max-width: 320px; }
}
/* A short screen keeps the button and drops the strip and the panel below the
   fold rather than the other way round — which is the order they are written
   in, so this only has to stop the hero from padding itself out of range. */
@media (max-height: 780px) {
  .ld-hero { padding-top: 22px; padding-bottom: 24px; min-height: 100%; }
  .ld-mark { padding: 18px 26px; margin-top: 0; }
  .ld-tagline { margin-top: 14px; }
  .ld-pitch { margin-top: 9px; }
  .ld-actions { margin-top: 18px; }
  .ld-readout { margin-top: 14px; }
}

@media (max-width: 480px) {
  .ld-term-body { min-height: 400px; }
}

@media (prefers-reduced-motion: reduce) {
  .ld-reticle i { animation: none; opacity: .82; }
  .ld-person { transition: none; }
  .ld-person:hover { transform: none; }
  .ld-bio { transition: none; }
  .cold-doors { animation: none; opacity: 1; }
  .ld-term.live .ld-term-body::after { animation: none; }
}