/* site.css: the Source Map world, first draft (from the v3 sample's site.css). ONE document, two ways of showing it,
   chosen on <html data-view>:
     world  the edition's own elements placed in 3D by src/world.js (each .obj gets a matrix3d), over the three.js canvas
     text   the SAME elements as a plain semantic page (served this way, so it reads with no script at all)
   Colours and type come from brand.json through src/brand.css. System fonts only; nothing is loaded from elsewhere.
   World objects are drawn at 1:1 when the camera is at rest in front of them, so their text is the browser's own text,
   as sharp as any page. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--w-sky); color: var(--ink); font: 18px/1.55 var(--f-body); }
p { margin: 0; }
button { font: inherit; color: inherit; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--w-accent); outline-offset: 3px; border-radius: 4px; }
.skip { position: fixed; left: 8px; top: -80px; z-index: 100; background: var(--w-accent); color: var(--w-on-accent); font: 700 15px/1.2 var(--f-display);
  padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 8px; }
html[data-view="text"] .skip { display: none; }

/* ── shared pieces: stamps, the score, buttons ───────────────────────────────────────────────────────── */
.stamp { display: inline-block; font: 800 12px/1 var(--f-display); letter-spacing: .08em; padding: 5px 6px 4px; border-radius: 3px;
  border: 2px solid currentColor; transform: rotate(-4deg); align-self: start; justify-self: start; }
.stamp.saw { color: var(--p-saw-text); background: var(--p-saw); border-color: var(--p-saw-text); }
.stamp.stated { color: var(--p-stated); background: var(--p-paper); border-style: double; border-width: 4px; padding: 3px 5px 2px; }
/* INFER: our reasoning, never fetched: no fill, a dashed outline in the receipt's own ink, set level (not stamped on) */
.stamp.infer { color: var(--p-print2); background: var(--p-paper); border-style: dashed; transform: none; }
.read { display: inline-flex; align-items: center; gap: 5px; }
.clock { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }

.score { margin: 16px 0 4px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 18px; align-items: center; }
.sc-total { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 4px; grid-row: span 2; }
.sc-big { font: 800 52px/.9 var(--f-display); color: var(--w-accent); }
.sc-of { font: 700 19px/1 var(--f-display); }
.sc-label { grid-column: 1 / -1; font: 700 11.5px/1.6 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.sc-rows { margin: 0; display: grid; gap: 3px; }
.sc-row { display: grid; grid-template-columns: 92px auto; align-items: center; gap: 8px; }
.sc-row dt { font: 700 11.5px/1.3 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.sc-row dd { margin: 0; display: flex; align-items: center; gap: 8px; }
.cells { display: inline-flex; gap: 4px; }
.cells i { width: 18px; height: 12px; border-radius: 2px; border: 1.5px solid var(--ink2); opacity: .7; }
.cells i.on { background: var(--w-accent); border-color: var(--w-accent); opacity: 1; }
.sc-n { font: 600 12px/1 var(--f-display); color: var(--ink2); }
.sc-meas { grid-column: 1 / -1; font: 12.5px/1.45 var(--f-mono); color: var(--ink2); margin-top: 6px; }
.sc-how { grid-column: 1 / -1; font: 600 14px/1.4 var(--f-display); margin-top: 2px; }
.sc-how a { display: inline-block; padding: 8px 0; }

.btn { display: grid; gap: 2px; text-align: left; text-decoration: none; cursor: pointer; border-radius: 12px; padding: 11px 14px 10px;
  background: color-mix(in srgb, var(--w-sky) 70%, transparent); color: var(--w-ink); border: 1.5px solid color-mix(in srgb, var(--w-ink) 35%, transparent); }
.btn b { font: 800 17px/1.15 var(--f-display); }
.btn small { font: 600 13px/1.25 var(--f-display); color: var(--ink2); }
.btn:hover { border-color: var(--w-accent); }
.btn.primary { background: var(--w-accent); color: var(--w-on-accent); border-color: var(--w-accent); }
.btn.primary small { color: var(--w-on-accent); opacity: .82; }

/* ── the receipt: thermal paper, SAW filled, STATED double outlined ───────────────────────────────────── */
.receipt { background: var(--p-paper); color: var(--p-print); font: 13.5px/1.5 var(--f-mono); position: relative; }
.receipt::before, .receipt::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; background: var(--p-paper);
  -webkit-mask: var(--zig) repeat-x; mask: var(--zig) repeat-x; }
.receipt::before { top: -7px; --zig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 8h12L6 0z'/%3E%3C/svg%3E"); }
.receipt::after { bottom: -7px; --zig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0h12L6 8z'/%3E%3C/svg%3E"); }
.r-title { margin: 0; }
.r-toggle { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; text-align: left;
  background: none; border: 0; padding: 14px 16px 12px; cursor: pointer; color: var(--p-print); font: 13.5px/1.35 var(--f-mono); border-radius: 4px; }
.r-toggle:focus-visible { outline: 3px solid var(--p-stated); outline-offset: -3px; }
.r-name { font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.r-counts { grid-column: 1; color: var(--p-print2); font-size: 12px; }   /* wraps rather than running under the button */
.r-act { grid-row: 1 / span 2; grid-column: 2; font: 800 13px/1 var(--f-display); background: var(--p-print); color: var(--p-paper); border-radius: 999px; padding: 9px 12px 8px; white-space: nowrap; }
.r-close { display: none; }
.receipt.is-open .r-open { display: none; } .receipt.is-open .r-close { display: inline; }
.receipt:not(.is-open) .slip { display: none; }
.slip { padding: 2px 16px 18px; }
.r-brand { text-align: center; font-weight: 700; font-size: 14px; letter-spacing: .28em; text-transform: uppercase; padding-top: 10px; border-top: 1px dashed var(--p-print2); }
.r-for { text-align: center; color: var(--p-print2); font-size: 12.5px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--p-print2); }
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.line { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 10px; position: relative; }
.line .stamp { grid-row: 1 / span 3; }
.line .fact, .line .who, .line .read { grid-column: 2; }
.line .who, .line .read, .line .rests { font-size: 12px; line-height: 1.45; color: var(--p-print2); margin-top: 3px; }
.line .rests { grid-column: 2; }
.line.infer .fact { font-style: italic; }
.line.pointed { background: color-mix(in srgb, var(--p-saw) 45%, transparent); margin: -5px -8px; padding: 5px 8px; border-radius: 4px;
  box-shadow: inset 4px 0 0 var(--p-print); }
.line.unprinted .fact, .line.unprinted .who, .line.unprinted .read, .line.unprinted .rests { opacity: .16; }
.line.unprinted .stamp { opacity: .2; }
.line .tour-stamp { position: absolute; right: -6px; top: -8px; font: 800 13px/1 var(--f-display); letter-spacing: .06em; padding: 6px 8px 5px;
  border: 3px solid var(--p-stated); color: var(--p-stated); border-radius: 4px; transform: rotate(-7deg); background: color-mix(in srgb, var(--p-paper) 70%, transparent); }
.line .tour-stamp.saw { border-color: var(--p-saw-text); color: var(--p-saw-text); background: color-mix(in srgb, var(--p-saw) 60%, transparent); }
.line .tour-stamp.infer { border-style: dashed; }
.totals { margin: 14px 0 0; padding-top: 10px; border-top: 3px double var(--p-print2); display: grid; gap: 2px; }
.totals > div { display: flex; justify-content: space-between; gap: 12px; }
.totals dt, .totals dd { margin: 0; }
.totals > div:not(.sub) { font-weight: 700; }
.totals .sub { color: var(--p-print2); padding-left: 2ch; }
.r-key { margin-top: 10px; font-size: 11.5px; color: var(--p-print2); }
.r-sources { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--p-print2); }
.r-sub { color: var(--p-print2); font-size: 12px; margin-bottom: 4px; }
.r-sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.r-sources a { color: var(--p-print); overflow-wrap: anywhere; text-decoration-color: var(--p-print2); text-decoration-thickness: 2px; display: inline-block; padding: 3px 0; }
html[data-view="text"] .r-sources { display: none; }
.r-page { margin: 10px 0 0; font-size: 13px; }
.r-page a { color: var(--p-print); text-decoration-color: var(--p-print2); text-decoration-thickness: 2px; display: inline-block; padding: 3px 0; }

/* ── doors: each source a doorway, labelled with where it goes ─────────────────────────────────────────── */
.doors { list-style: none; margin: 0; padding: 0; }
.door { display: grid; gap: 1px; text-decoration: none; color: var(--w-ink); }
.door-k { font: 700 11.5px/1.3 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--w-door); }
.door-new { font: 600 12px/1.3 var(--f-display); color: var(--ink2); }
.door-host { font: 800 20px/1.2 var(--f-display); color: var(--w-ink); }
.door-to { font: 12.5px/1.4 var(--f-mono); color: var(--ink2); overflow-wrap: anywhere; text-wrap: balance; }

/* ═════════════════════════════════════ THE WORLD ══════════════════════════════════════════════════════ */
html[data-view="world"], html[data-view="world"] body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html[data-view="world"] body { position: fixed; inset: 0; }
html[data-view="world"] .stage { position: fixed; inset: 0; overflow: clip; touch-action: pinch-zoom; cursor: grab; user-select: none; -webkit-user-select: none;
  background: radial-gradient(120% 80% at 50% 40%, var(--w-sky2), var(--w-sky)); }
html[data-view="world"] .stage.dragging { cursor: grabbing; }
.gl { display: none; }
html[data-view="world"] .gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-view="world"] .viewport { position: absolute; inset: 0; overflow: clip; }
html[data-view="world"] .camera { position: absolute; left: 0; top: 0; transform-style: preserve-3d; pointer-events: none; }
/* the camera's own box is never a target, only what it carries: at rest the perspective is dropped, so its box (at the world's
   origin) can sort in front of a place BEHIND the origin, and the Earlier editions sign, the one place there, took no clicks
   (Stewart, 9 Oct; elementFromPoint gave the camera). Every object turns pointer events back on; a far one turns them off */
html[data-view="world"] .track, html[data-view="world"] .place, html[data-view="world"] .section, html[data-view="world"] .doors,
html[data-view="world"] .door-li, html[data-view="world"] .edition { position: absolute; left: 0; top: 0; width: 0; height: 0; margin: 0; padding: 0; transform-style: preserve-3d; }
html[data-view="world"] .obj { position: absolute; left: 0; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; margin: 0;
  transform-origin: 0 0; opacity: 0; zoom: var(--rz, 1); pointer-events: auto; }
/* --rz: world.js lays every object out at the device pixel ratio and scales it back in its 3D matrix, so its text is
   drawn at the screen's resolution while the camera moves (see rasterZoom in world.js) */
html[data-view="world"] .obj.far { pointer-events: none; }
/* the forest (F2a): a place that is not mounted keeps its box (so every measure stays true) but is not rendered, so it costs
   no composited layer and takes no focus (world.js, MOUNTING PER PLACE) */
html[data-view="world"] .obj.off-stage { visibility: hidden; }
/* until the layout is measured, the world shows only its sky: the objects appear in place, never in a heap */
html[data-view="world"]:not(.laid) .viewport { visibility: hidden; }

/* object widths: set by world.js for the screen (wide: side by side; narrow: stacked) */
:root { --bw: 550px; --cw: 380px; --mw: 640px; --hw: 380px; --sw: 520px; --ew: 560px; --aw: 420px; }
html[data-view="world"] .board { width: var(--bw); }
html[data-view="world"] .receipt, html[data-view="world"] .door { width: var(--cw); }
html[data-view="world"] .mast { width: var(--mw); }
html[data-view="world"] .how { width: var(--hw); }
html[data-view="world"] .sign { width: var(--sw); }
html[data-view="world"] .endcard { width: var(--ew); }
html[data-view="world"] .agents { width: var(--aw); }

/* a panel standing in the world */
html[data-view="world"] .board, html[data-view="world"] .how, html[data-view="world"] .sign, html[data-view="world"] .endcard,
html[data-view="world"] .agents {
  background: linear-gradient(180deg, var(--w-panel-top), var(--w-panel-bottom)); border: 1.5px solid rgba(108, 198, 220, .45); border-radius: 22px;
  padding: 26px 28px 24px; color: var(--w-ink); box-shadow: 0 34px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(169, 219, 232, .25); }
html[data-view="world"] .board::before, html[data-view="world"] .endcard::before { content: ""; position: absolute; left: 60px; right: 60px; top: -1px; height: 3px;
  background: linear-gradient(90deg, rgba(108, 198, 220, 0), rgba(169, 219, 232, .95), rgba(108, 198, 220, 0)); border-radius: 2px; }
.kicker { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.kicker .no { font: 800 22px/1 var(--f-display); color: var(--w-accent); }
.kicker .sec { font: 700 12.5px/1.3 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.tour-from, .story-play { margin-left: auto; font: 700 13px/1 var(--f-display); color: inherit; background: transparent; border: 1.5px solid rgba(159, 180, 182, .45); border-radius: 999px; padding: 10px 12px; min-height: 38px; cursor: pointer; }
.tour-btns { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tour-btns .tour-from, .tour-btns .story-play { margin-left: 0; font-size: 12px; padding: 8px 10px; min-height: 34px; }
.tour-from:hover, .story-play:hover { border-color: var(--w-accent); }
.headline { margin: 0 0 12px; font: 700 34px/1.08 var(--f-display); letter-spacing: -.01em; }
.place-link { color: inherit; text-decoration: none; }
.place-link:hover, .place-link:focus-visible { text-decoration: underline; text-decoration-color: var(--w-accent); text-decoration-thickness: 3px; }
.summary { font-size: 18px; line-height: 1.5; }
.trace { margin: 14px 0 0; display: grid; gap: 8px; }
.tr { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; }
.tr::before { content: ""; width: 11px; height: 11px; border-radius: 50%; margin-top: 6px; grid-row: span 2; }
.tr.origin::before { background: var(--w-origin); box-shadow: 0 0 0 3px rgba(240, 103, 159, .28); }
.tr.found::before { border: 2px solid var(--w-accent); }
.tr dt { font: 700 13.5px/1.3 var(--f-display); color: var(--ink2); }
.tr dd { margin: 0; font-size: 16px; line-height: 1.45; }
.why { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(159, 180, 182, .3); font-size: 16.5px; line-height: 1.5; }
.why-label { display: block; font: 700 13.5px/1.3 var(--f-display); color: var(--w-accent); margin-bottom: 2px; }
.tr.origin dt { color: var(--w-origin); }
html[data-view="world"] .story.here .board { border-color: rgba(108, 198, 220, .85); }
html[data-view="world"] .story.guided .board { box-shadow: 0 0 0 3px var(--w-accent), 0 34px 70px rgba(0, 0, 0, .5); }

/* the receipt object: a ticket from the printer above it; open, it prints out and hangs down in front of the doors */
html[data-view="world"] .receipt { box-shadow: 0 24px 50px rgba(0, 0, 0, .45); border-radius: 2px; }
html[data-view="world"] .receipt.is-open .slip { max-height: var(--slip-max, 560px); overflow: auto; overscroll-behavior: contain; touch-action: pan-y; }
html[data-view="world"] .receipt.is-open { box-shadow: 0 0 0 2px var(--w-accent), 0 30px 60px rgba(0, 0, 0, .55); }

/* the doors */
html[data-view="world"] .door { padding: 16px 20px 14px; border-radius: 120px 120px 14px 14px / 46px 46px 14px 14px; text-align: center; justify-items: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(243, 141, 181, .16), rgba(12, 31, 39, .94) 70%); border: 1.5px solid rgba(243, 141, 181, .7);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .4); }
html[data-view="world"] .door:hover, html[data-view="world"] .door:focus-visible { border-color: var(--w-accent); background: radial-gradient(120% 90% at 50% 0%, rgba(108, 198, 220, .28), rgba(12, 31, 39, .94) 70%); }
html[data-view="world"] .door:focus-visible { outline-offset: 5px; }
html[data-view="world"] .door.beckon { border-color: var(--w-accent); animation: beckon 2.4s ease-in-out infinite; }
@keyframes beckon { 0%, 100% { box-shadow: 0 0 0 3px rgba(108, 198, 220, .9), 0 0 26px 6px rgba(108, 198, 220, .35); } 50% { box-shadow: 0 0 0 3px rgba(108, 198, 220, .9), 0 0 44px 14px rgba(108, 198, 220, .55); } }
html[data-view="world"] .door .door-new { display: block; margin-bottom: 2px; }

/* the exhibit beside a narrated story: a real button over v2's diagram, opening the receipt at the claim it draws */
.emblem-btn { display: none; }
html[data-view="world"] .emblem-btn { display: block; background: transparent; border: 0; border-radius: 18px; padding: 0; cursor: pointer; }
html[data-view="world"] .emblem-btn:hover { box-shadow: inset 0 0 0 1.5px rgba(108, 198, 220, .5); }
html[data-view="world"] .emblem-btn:focus-visible { outline: 3px solid var(--w-accent); outline-offset: 2px; }
html[data-view="world"] .emblem-btn.off { visibility: hidden; }
/* section gates: their names written on the arch over the line */
html[data-view="world"] .gate { margin: 0; white-space: nowrap; text-align: center; padding: 0 30px; color: var(--w-ink);
  font: 800 64px/1 var(--f-display); letter-spacing: -.01em; text-shadow: 0 0 30px rgba(108, 198, 220, .35), 0 2px 0 rgba(6, 18, 23, .8); }
html[data-view="world"] .gate .gate-n { display: block; margin-top: 12px; font: 700 18px/1 var(--f-display); letter-spacing: .24em; text-transform: uppercase; color: var(--w-accent); }

/* the front of the edition: the masthead floats over the start of the line */
html[data-view="world"] .mast { color: var(--w-ink); text-shadow: 0 2px 18px rgba(6, 18, 23, .85); padding: 26px 28px 24px; border-radius: 28px;
  background: radial-gradient(130% 120% at 30% 35%, rgba(6, 18, 23, .82), rgba(6, 18, 23, .62) 60%, rgba(6, 18, 23, .25)); box-shadow: 0 0 90px 40px rgba(6, 18, 23, .45); }
.mast-sample { display: inline-block; font: 800 14px/1 var(--f-display); letter-spacing: .06em; color: var(--w-on-accent); background: var(--w-accent); border-radius: 4px; padding: 7px 9px 6px; text-shadow: none; }
.wordmark { margin: 14px 0 0; font: var(--f-wordmark-style) 104px/.9 var(--f-wordmark); font-stretch: condensed; letter-spacing: -.01em; white-space: nowrap; }
.wordmark::after { content: ""; display: inline-block; width: .15em; height: .15em; margin-left: .07em; border-radius: 50%; background: var(--w-origin);
  box-shadow: 0 0 0 .05em rgba(240, 103, 159, .3); vertical-align: .02em; }
.tagline { font: 400 30px/1.2 var(--f-body); margin-top: 12px; }
.dateline { font: 600 17px/1.4 var(--f-display); color: var(--ink2); margin-top: 16px; }
.dateline time { color: var(--w-ink); font-weight: 800; }
.dateline span { display: block; }
.byline { font: 600 17px/1.35 var(--f-display); margin-top: 6px; }
.mast .note { font-size: 15.5px; line-height: 1.5; color: var(--ink2); font-style: italic; margin-top: 4px; }   /* the edition's note (not the agent's) */
.way-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.hint { margin-top: 14px; font: 600 15px/1.45 var(--f-display); color: var(--w-accent); }
.how h2, .sign h2, .endcard h2, .agents h2 { margin: 0 0 12px; font: 800 24px/1.15 var(--f-display); }
.promise { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: p; }
.promise li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.45; color: var(--ink2); counter-increment: p; }
.promise li::before { content: counter(p); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font: 800 12px/1 var(--f-display); color: var(--w-on-accent); background: var(--w-accent); }
.promise li:last-child::before { background: var(--w-origin); }
.promise b { color: var(--w-ink); font: 700 15.5px/1.35 var(--f-display); }
.how-h3 { margin: 0 0 10px; padding-top: 12px; border-top: 1px solid rgba(159, 180, 182, .3); font: 700 15px/1.3 var(--f-display); letter-spacing: .02em; }
.hb-tip { text-decoration: none; display: inline-flex; align-items: center; }
.btn.tip { border-color: rgba(240, 103, 159, .6); }
.legend { margin: 0; display: grid; gap: 8px; }
.legend > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: baseline; gap: 12px; }
.legend dt { margin: 0; } .legend dd { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ink2); }
.legend .read { font: 13px/1 var(--f-mono); color: var(--ink2); }
.how-doors { margin-top: 12px; font-size: 15.5px; line-height: 1.45; color: var(--ink2); }
.rubric { margin-top: 12px; border: 1px solid rgba(159, 180, 182, .35); border-radius: 10px; padding: 8px 12px; }
.rubric summary { font: 700 15px/1.4 var(--f-display); cursor: pointer; }
.rubric pre { white-space: pre-wrap; font: 12px/1.5 var(--f-mono); margin: 8px 0 0; overflow-wrap: anywhere; }
.sign p + p, .endcard p + p, .agents p + p { margin-top: 10px; }
.sign p, .endcard p, .agents p { font-size: 16px; line-height: 1.5; }
.agents p { font-size: 14.5px; }
.fine { color: var(--ink2); font-size: 14px !important; margin-top: 14px; }
html[data-view="world"] .earlier .sign { background: linear-gradient(180deg, #0C1D25, #08161B); border-color: rgba(159, 180, 182, .45); }
/* the forest (F2a): an earlier edition's front is a sign lit like a board (a place to read, unlike the earlier sign, which
   only points back); the earlier sign lists the editions behind; an earlier edition's stories carry its date in the kicker */
html[data-view="world"] .edition-front .sign::before { content: ""; position: absolute; left: 60px; right: 60px; top: -1px; height: 3px;
  background: linear-gradient(90deg, rgba(108, 198, 220, 0), rgba(169, 219, 232, .95), rgba(108, 198, 220, 0)); border-radius: 2px; }
.edition-front .sign h2 { font: 800 30px/1.1 var(--f-display); letter-spacing: -.01em; margin-bottom: 4px; }
.edition-front .dateline { margin: 0 0 10px; }
.edition-front .sign .note { font-size: 15.5px; line-height: 1.5; color: var(--ink2); font-style: italic; }
.earlier-list { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.earlier-list li { font-size: 16px; line-height: 1.45; padding: 2px 0 2px 14px; border-left: 3px solid var(--w-accent); }
.earlier-list a[data-go] { font: 800 17px/1.3 var(--f-display); }
.kicker .sec.ed { color: var(--w-accent); border: 1.5px solid currentColor; border-radius: 4px; padding: 3px 6px 2px; letter-spacing: .08em; }

/* ── the HUD: the brand, the way round, the tour, the map ─────────────────────────────────────────────── */
.hud { display: none; }
html[data-view="world"] .hud { display: flex; position: fixed; z-index: 20; left: 0; right: 0; align-items: center; gap: 12px; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-top { top: 0; padding: 12px 16px; justify-content: space-between; background: linear-gradient(180deg, rgba(6, 18, 23, .82), rgba(6, 18, 23, 0)); }
.hud-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hud-word { font: var(--f-wordmark-style) 25px/1 var(--f-wordmark); font-stretch: condensed; color: var(--w-ink); text-decoration: none; white-space: nowrap; }
.hud-word::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 3px; border-radius: 50%; background: var(--w-origin); vertical-align: 1px; }
.pill { font: 800 12.5px/1 var(--f-display); color: var(--w-accent); border: 2px solid currentColor; border-radius: 4px; padding: 5px 7px 4px; white-space: nowrap; }
.hud-nav { display: flex; gap: 8px; }
.hb { font: 700 14px/1 var(--f-display); color: var(--w-ink); background: rgba(12, 31, 39, .75); border: 1.5px solid rgba(226, 236, 233, .32);
  border-radius: 999px; padding: 10px 14px; cursor: pointer; white-space: nowrap; min-height: 40px; }
.hb:hover { border-color: var(--w-accent); }
.hb[aria-pressed="true"], .hb[aria-expanded="true"] { background: var(--w-accent); color: var(--w-on-accent); border-color: var(--w-accent); }
.hb-world { display: none; }
html[data-view="text"] .hb-detail { display: none; }
.hb-theme { display: none; }
html[data-view="text"] .hb-theme { display: inline-block; }
@media (max-width: 899px) { .hb-detail { display: none; } }
html[data-view="text"] .hb-world { display: inline-block; }
html[data-view="text"] .hb-text { display: none; }
.hud-bottom { bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); justify-content: center; background: linear-gradient(0deg, rgba(6, 18, 23, .8), rgba(6, 18, 23, 0)); }
.where { font: 700 14px/1.3 var(--f-display); color: var(--w-ink); text-align: center; min-width: 0; flex: 0 1 520px; text-shadow: 0 1px 8px rgba(6, 18, 23, .9); }
.where b { color: var(--w-accent); }
.step { flex: none; }
.captions { display: none; }
html[data-view="world"] .captions.on, html[data-view="text"] .captions.on { display: block; position: fixed; z-index: 21; left: 50%; bottom: 148px; transform: translateX(-50%); width: min(86vw, 900px); text-align: center; pointer-events: none; }
.captions span { font: 700 clamp(17px, 2vw, 26px)/1.35 var(--f-display); color: var(--w-ink); background: rgba(6, 18, 23, .82); padding: .12em .45em; border-radius: 6px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.captions span:empty { display: none; }
.tourbar { position: fixed; z-index: 22; left: 50%; bottom: 72px; transform: translateX(-50%); width: min(760px, calc(100vw - 24px)); display: flex; align-items: center; gap: 10px;
  background: rgba(12, 31, 39, .92); border: 1.5px solid rgba(108, 198, 220, .45); border-radius: 16px; padding: 8px 10px; color: var(--w-ink); }
.tourbar[hidden] { display: none; }
.tourbar button { font: 800 14px/1 var(--f-display); border-radius: 999px; padding: 9px 14px; cursor: pointer; white-space: nowrap; min-height: 38px; }
.pp { background: var(--w-accent); color: var(--w-on-accent); border: 0; min-width: 78px; }
.cc, .leave { background: transparent; color: var(--w-ink); border: 1.5px solid rgba(226, 236, 233, .32); }
.cc[aria-pressed="false"] { text-decoration: line-through; color: var(--ink2); }
.time { font: 600 13px/1 var(--f-mono); color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.scrub-wrap { position: relative; flex: 1; min-width: 60px; height: 32px; display: flex; align-items: center; }
.scrub-wrap input { width: 100%; margin: 0; accent-color: var(--w-accent); position: relative; z-index: 2; background: transparent; }
.ticks { position: absolute; left: 8px; right: 8px; top: 2px; height: 6px; z-index: 1; }
.ticks i { position: absolute; top: 0; width: 2px; height: 7px; background: var(--ink2); opacity: .6; transform: translateX(-1px); }
.ticks i.narrated { height: 9px; width: 3px; background: var(--w-accent); opacity: 1; }
.big-tap { position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: 4px; justify-items: center; cursor: pointer;
  background: var(--w-accent); color: var(--w-on-accent); border: 0; border-radius: 16px; padding: 20px 28px; box-shadow: 0 16px 50px rgba(0, 0, 0, .55); }
.big-tap b { font: 800 21px/1.15 var(--f-display); } .big-tap small { font: 600 14px/1.2 var(--f-display); }
.big-tap[hidden] { display: none; }
.notice { position: fixed; z-index: 25; left: 50%; bottom: 84px; transform: translateX(-50%); max-width: min(640px, calc(100vw - 24px)); font: 600 14.5px/1.4 var(--f-display);
  color: var(--w-ink); background: rgba(12, 31, 39, .94); border: 1px solid rgba(226, 236, 233, .3); border-radius: 10px; padding: 10px 14px; }
.notice[hidden] { display: none; }
.notice button { margin-left: 10px; font: 800 13px/1 var(--f-display); background: var(--w-accent); color: var(--w-on-accent); border: 0; border-radius: 999px; padding: 7px 11px; cursor: pointer; }

/* the map: the whole line, from above */
.map { position: fixed; z-index: 24; top: 64px; left: 12px; bottom: 76px; width: min(500px, calc(100vw - 24px)); overflow: auto; overscroll-behavior: contain;
  background: var(--page); border: 1.5px solid rgba(108, 198, 220, .45); border-radius: 18px; padding: 18px 18px 14px; color: var(--w-ink); }
.map[hidden] { display: none; }
.map-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.map h2 { margin: 0; font: 800 22px/1.1 var(--f-display); }
.map-close { font: 700 13.5px/1 var(--f-display); color: var(--w-ink); background: transparent; border: 1.5px solid rgba(226, 236, 233, .35); border-radius: 999px; padding: 9px 12px; cursor: pointer; }
.map-sub { font: 500 13.5px/1.4 var(--f-display); color: var(--ink2); margin: 4px 0 8px; }
.map-line { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.map-line::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(159, 180, 182, .25) 0, rgba(159, 180, 182, .25) 8%, var(--w-accent) 14%, var(--w-accent) 100%); }
.map-line a { display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto; align-items: center; gap: 1px 10px; padding: 5px 8px 5px 0; min-height: 38px; color: var(--w-ink);
  text-decoration: none; border-radius: 10px; position: relative; }
.map-line a:hover { background: rgba(108, 198, 220, .1); }
.map-line a[aria-current="location"] { background: rgba(108, 198, 220, .18); box-shadow: inset 3px 0 0 var(--w-accent); }
.m-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--w-accent); border: 3px solid var(--page); justify-self: center; z-index: 1; }
.m-earlier .m-dot { background: var(--w-unlit); }
.m-no { font: 800 13px/1 var(--f-display); color: var(--w-accent); white-space: nowrap; }
.m-t { font: 700 14.5px/1.2 var(--f-display); }
.m-s { grid-column: 3; font: 500 13px/1.3 var(--f-display); color: var(--ink2); }
.m-earlier a, .m-arrival a, .m-end a, .m-front a { grid-template-columns: 22px minmax(0, 1fr); }
.m-earlier .m-s, .m-arrival .m-s, .m-end .m-s, .m-front .m-s { grid-column: 2; }
.m-score { font: 800 16px/1 var(--f-display); color: var(--w-on-accent); background: var(--w-accent); border-radius: 7px; padding: 5px 6px 4px; white-space: nowrap; }
.m-score small { font-size: 10px; opacity: .75; }
.m-section { padding: 8px 0 2px 34px; font: 700 12px/1.3 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.map-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(159, 180, 182, .25); font: 700 13px/1 var(--f-display); color: var(--ink2); }
.map-detail button { font: 700 13px/1 var(--f-display); color: var(--w-ink); background: transparent; border: 1.5px solid rgba(226, 236, 233, .35); border-radius: 999px; padding: 8px 11px; cursor: pointer; }
.detail-auto { flex-basis: 100%; font-weight: 500; }
.map-detail button[aria-pressed="true"] { background: var(--w-accent); color: var(--w-on-accent); border-color: var(--w-accent); }
html[data-view="text"] .map-detail { display: none; }

/* the agent session strip: the person is in charge */
/* top right on wider screens, clear of the map (left), the tour bar and the captions (bottom) */
.agent-strip { position: fixed; right: 12px; top: 66px; z-index: 40; max-width: min(560px, calc(100vw - 24px)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 10px 14px; background: var(--w-ink); color: #08171D; padding: 12px 14px; border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); font: 500 15px/1.35 var(--f-display); }
.agent-strip[hidden] { display: none; }
.agent-strip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--p-stated); }
.strip-why { font: italic 400 15px/1.4 var(--f-body); margin-top: 3px; }
.strip-why .who { font: 600 14px var(--f-display); font-style: normal; opacity: .75; }
.strip-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.agent-strip button { font: 700 14px/1 var(--f-display); border-radius: 8px; padding: 10px 12px; cursor: pointer; white-space: nowrap; min-height: 38px; }
.agent-strip .end { background: #08171D; color: var(--w-ink); border: 0; }
.agent-strip .take { background: transparent; color: #08171D; border: 1.5px solid rgba(8, 23, 29, .5); }
.agent-strip .tap-sound { background: var(--w-accent); color: var(--w-on-accent); border: 0; }
.agent-strip.ended .dot { background: #6B7F85; }
.agent-strip.ended .strip-actions, .agent-strip.ended .strip-why { display: none; }
.agent-strip.collapsed { grid-template-columns: auto auto; padding: 8px 12px; border-radius: 999px; font-size: 13px; }
.agent-strip :focus-visible { outline-color: #08171D; }
/* on wide screens the strip is one wide row, so the agent's note takes one or two lines and the strip takes as little of
   the frame as it can (the frames are measured below it) */
@media (min-width: 900px) {
  .agent-strip { max-width: min(900px, calc(100vw - 24px)); padding: 10px 14px; }
}
/* and on screens wide enough, it sits IN the top bar, in the free middle between the brand and the buttons (the detail
   and tip buttons step aside while a session runs; both are also in the map and at the end), so it takes next to no
   height from the frame (acceptance, 7 Oct 2026) */
@media (min-width: 1200px) {
  body.in-session .hud-nav .hb-detail, body.in-session .hud-nav .hb-tip { display: none; }
  html[data-view="world"] .agent-strip { top: 6px; left: 400px; right: 300px; max-width: none; padding: 6px 10px; gap: 2px 10px; border-radius: 12px; font-size: 13.5px; }
  html[data-view="world"] .agent-strip .strip-status { font-size: 13px; line-height: 1.3; }
  html[data-view="world"] .strip-why { font-size: 13.5px; line-height: 1.32; margin-top: 1px; }
  html[data-view="world"] .agent-strip button { padding: 7px 10px; min-height: 32px; font-size: 13px; }
  html[data-view="world"] .agent-strip.collapsed { left: auto; right: 300px; }
  /* with a tour, the top bar also holds the tour's Pause or Resume and Mute: the strip stops short of them (measured 7 Oct:
     at 300px the tour button sat under the strip at 1200, 1440 and 1920 px wide) */
  html[data-tour="on"][data-view="world"] .agent-strip { right: 372px; }
  html[data-tour="on"][data-view="world"] .agent-strip.collapsed { right: 372px; }
  /* in the bar, the agent's note takes the status line's place while there is one (the person was told on joining what
     the assistant can see; the dot and the two buttons stay), so the strip stays within the bar's height */
  html[data-view="world"] .agent-strip.has-note .strip-status { display: none; }
}

/* phones and narrow screens */
@media (max-width: 699px) {
  .hud-top { padding: 8px 10px 10px; gap: 6px 8px; flex-wrap: wrap; background: var(--w-sky); border-bottom: 1px solid rgba(159, 180, 182, .2); }
  html[data-view="world"] .mast { background: rgba(8, 23, 29, .94); box-shadow: 0 0 60px 30px rgba(6, 18, 23, .6); }
  .notice { bottom: 70px; }
  .hud-word { font-size: 20px; }
  .pill { font-size: 11px; padding: 4px 5px 3px; }
  .hud-nav { gap: 6px; }
  .hb { padding: 9px 11px; font-size: 13.5px; min-height: 40px; }
  .hud-bottom { padding: 10px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px; background: var(--w-sky); border-top: 1px solid rgba(159, 180, 182, .2); }
  .where .w-h { display: none; }
  .where { font-size: 13px; }
  .map { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 46vh; border-radius: 18px 18px 0 0; padding: 12px 14px 10px; }
  .map h2 { font-size: 19px; } .map-sub { font-size: 12.5px; margin: 2px 0 6px; } .map-line a { min-height: 34px; padding: 3px 6px 3px 0; } .m-t { font-size: 14px; }
  .tourbar { bottom: 62px; flex-wrap: wrap; } .scrub-wrap { order: 5; flex-basis: 100%; }
  .captions.on { bottom: 212px !important; }
  .agent-strip { left: 8px; right: 8px; top: auto; bottom: 64px; max-width: none; grid-template-columns: auto minmax(0, 1fr); }
  /* the front page on a phone: the ways in come before the edition's note, so they are on screen on arrival however long
     the note is (acceptance, 7 Oct 2026); the page's own order, for the text view and assistive technology, is unchanged */
  html[data-view="world"] .mast { display: flex; flex-direction: column; align-items: flex-start; }
  html[data-view="world"] .mast > * { align-self: stretch; }
  html[data-view="world"] .mast > .mast-sample { align-self: flex-start; }
  html[data-view="world"] .mast .way-in { order: 1; } html[data-view="world"] .mast .hint { order: 2; } html[data-view="world"] .mast .note { order: 3; }
  body.map-open .agent-strip, body.touring .agent-strip { top: 100px; bottom: auto; }
  .strip-actions { grid-column: 1 / -1; }
  .agent-strip.collapsed { right: auto; }
  .wordmark { font-size: 58px; } .tagline { font-size: 23px; }
  .way-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .btn { padding: 9px 11px 8px; } .btn b { font-size: 15px; } .btn small { font-size: 12px; }
  .headline { font-size: 28px; } .summary { font-size: 17px; }
  html[data-view="world"] .board, html[data-view="world"] .how, html[data-view="world"] .sign, html[data-view="world"] .endcard,
  html[data-view="world"] .agents { padding: 20px 18px 18px; border-radius: 18px; }
  html[data-view="world"] .gate { font-size: 40px; }
}
@media (max-width: 380px) { .pill { display: none; } }
@media (max-width: 899px) { html[data-view="world"] .hb-tip { display: none; } }

/* ═════════════════════════════════════ THE TEXT VIEW ═══════════════════════════════════════════════════
   The same elements, as a plain page. No 3D, no canvas, nothing moves. */
html[data-view="text"] body { background: var(--page); --gutter: 16px; --wide: 1240px; }
@media (min-width: 760px) { html[data-view="text"] body { --gutter: 32px; } }
html[data-view="text"] .hud-top { display: flex; position: sticky; top: 0; z-index: 20; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px var(--gutter); background: color-mix(in srgb, var(--page) 94%, transparent); border-bottom: 1px solid var(--rule); }
html[data-view="text"] .hud-top .hb { background: transparent; }
html[data-view="text"] .hud-nav { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 699px) { html[data-view="text"] .hud-top { padding: 8px 12px; } html[data-view="text"] .hud-nav { justify-content: flex-start; } }
html[data-view="text"] .obj { transform: none !important; opacity: 1 !important; visibility: visible !important; }
html[data-view="text"] .viewport, html[data-view="text"] .camera { transform: none !important; perspective: none !important; width: auto !important; height: auto !important; }
html[data-view="text"] .hud-top .hb[aria-pressed="true"], html[data-view="text"] .hud-top .hb[aria-expanded="true"] { background: var(--w-accent); color: var(--w-on-accent); }
html[data-view="text"] .track { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter) 80px; display: block; }
html[data-view="text"] .arrival { display: grid; gap: 28px 56px; padding: 34px 0 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { html[data-view="text"] .arrival { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
html[data-view="text"] .wordmark { font-size: clamp(56px, 8vw, 110px); }
html[data-view="text"] .how { background: var(--page2); border: 1px solid var(--rule); border-radius: 12px; padding: 20px; }
html[data-view="text"] .hint { display: none; }
html[data-view="text"] .way-in { max-width: 560px; }
html[data-view="text"] .way-in [data-act="view"] { display: none; }
html[data-view="text"] .gate { margin: 64px 0 0; padding-bottom: 8px; border-bottom: 2px solid var(--ink); font: 800 clamp(36px, 6vw, 72px)/.98 var(--f-display); letter-spacing: -.02em;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; }
html[data-view="text"] .gate-n { font: 600 17px/1 var(--f-display); color: var(--ink2); }
html[data-view="text"] .story { display: grid; gap: 22px 64px; padding: 44px 0 16px; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) { html[data-view="text"] .story { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
  html[data-view="text"] .story .receipt, html[data-view="text"] .story .doors { grid-column: 2; }
  html[data-view="text"] .story .board { grid-row: 1 / span 2; } }
html[data-view="text"] .board { max-width: 700px; }
html[data-view="text"] .headline { font-size: clamp(28px, 3.6vw, 44px); }
html[data-view="text"] .summary { font-size: 19px; }
html[data-view="text"] .receipt { margin: 8px 0 0; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .3)); max-width: 460px; }
html[data-view="text"] .doors { display: grid; gap: 8px; max-width: 460px; }
html[data-view="text"] .doors::before { content: "Sources"; font: 700 13px/1.3 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
html[data-view="text"] .door { padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--page2); }
html[data-view="text"] .door:hover { border-color: var(--link); }
html[data-view="text"] .door-host { font-size: 17px; color: var(--link); text-decoration: underline; text-underline-offset: .18em; }
html[data-view="text"] .story.guided .board { box-shadow: -14px 0 0 -10px var(--w-accent); }
html[data-view="text"] .story.here .headline { color: var(--w-accent); }
html[data-view="text"] .door.beckon { border-color: var(--w-accent); box-shadow: 0 0 0 2px var(--w-accent); }
html[data-view="text"] .earlier, html[data-view="text"] .end { display: grid; gap: 22px 40px; padding: 48px 0 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { html[data-view="text"] .end { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
html[data-view="text"] .sign, html[data-view="text"] .endcard, html[data-view="text"] .agents { background: var(--page2); border: 1px solid var(--rule); border-radius: 12px; padding: 22px; }
/* the forest (F2a): each earlier edition opens with its own front, after the earlier sign */
html[data-view="text"] .edition-front { display: grid; padding: 72px 0 0; grid-template-columns: minmax(0, 1fr); }
html[data-view="text"] .edition-front .sign, html[data-view="text"] .edition + .earlier .sign { max-width: 760px; }
html[data-view="text"] .kicker .sec.ed { color: var(--accent); }
html[data-view="text"] .earlier-list li { border-left-color: var(--accent); }
html[data-view="text"] .captions.on { bottom: 84px; }
html[data-view="text"] .tourbar { bottom: 16px; }
html[data-view="text"] .map { top: 70px; bottom: 16px; }
html[data-view="text"] .agent-strip { top: 70px; }
html[data-view="text"] .notice { top: 76px; bottom: auto; }
/* the text view's colours follow its own tokens (dark by default, light by choice) */
html[data-view="text"] .kicker .no, html[data-view="text"] .sc-big, html[data-view="text"] .why-label, html[data-view="text"] .story.here .headline,
html[data-view="text"] .pill { color: var(--accent); }
html[data-view="text"] .cells i.on, html[data-view="text"] .tr.origin::before { background: var(--accent); border-color: var(--accent); }
html[data-view="text"] .tr.found::before { border-color: var(--accent); }
html[data-view="text"] .hud-word, html[data-view="text"] .hb, html[data-view="text"] .door { color: var(--ink); }
html[data-view="text"] .hb { border-color: var(--rule); }
html[data-view="text"] .door-k { color: var(--ink2); }
html[data-view="text"] .btn { background: var(--page2); color: var(--ink); border-color: var(--rule); }
html[data-view="text"] .btn.primary { background: var(--button); color: var(--button-text); border-color: var(--button); }
html[data-view="text"] .btn.primary small { color: inherit; opacity: .8; }
html[data-view="text"] .tour-from, html[data-view="text"] .story-play { border-color: var(--rule); }
@media (prefers-reduced-motion: reduce) { html[data-view="world"] .door.beckon { animation: none; box-shadow: 0 0 0 4px var(--w-accent); } }

/* the text view: the promise and the tip link read in its own colours */
html[data-view="text"] .promise li { color: var(--ink2); }
html[data-view="text"] .promise b { color: var(--ink); }
html[data-view="text"] .promise li::before { background: var(--accent); color: var(--page); }
html[data-view="text"] .promise li:last-child::before { background: var(--origin); }
html[data-view="text"] .tr.origin::before { background: var(--origin); border-color: var(--origin); box-shadow: none; }
html[data-view="text"] .tr.origin dt { color: var(--origin); }
html[data-view="text"] .how-h3 { border-top-color: var(--rule); }
html[data-view="text"] .wordmark::after, html[data-view="text"] .hud-word::after { background: var(--origin); }
html[data-view="text"] .mast-sample { background: var(--accent); color: var(--page); }
/* a deep link in the text view lands below the sticky header, which wraps to two rows on a phone */
html[data-view="text"] .place, html[data-view="text"] #how, html[data-view="text"] .receipt { scroll-margin-top: 76px; }
@media (max-width: 699px) {
  html[data-view="text"] .hb-tip { display: none; }
  html[data-view="text"] .place, html[data-view="text"] #how, html[data-view="text"] .receipt { scroll-margin-top: 146px; }
}
/* the consent step before an agent session connects (both views) */
.consent { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(6, 18, 23, .86); overflow: auto; }
.consent[hidden] { display: none; }
.consent-card { width: min(560px, 100%); background: var(--w-panel-top); color: var(--w-ink); border: 1px solid var(--w-contour); border-radius: 18px; padding: 22px 22px 20px; box-shadow: 0 18px 60px rgba(0, 0, 0, .45); }
.consent-card h2 { margin: 0 0 10px; font: 800 22px/1.2 var(--f-display); }
.consent-card h2:focus:not(:focus-visible) { outline: none; }
.consent-card p, .consent-card li { font: 400 16px/1.5 var(--f-body); margin: 0 0 8px; }
.consent-card ul { margin: 0 0 10px; padding-left: 20px; }
.consent-sub { color: var(--w-ink-dim); }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.consent-actions .btn { background: transparent; color: var(--w-ink); border: 1.5px solid var(--w-contour); }
.consent-actions .btn.primary { background: var(--w-accent); color: var(--w-on-accent); border-color: var(--w-accent); }
html[data-view="text"] .consent-card { background: var(--page2); color: var(--ink); border-color: var(--rule); }
html[data-view="text"] .consent-sub { color: var(--ink2); }
html[data-view="text"] .consent-actions .btn { color: var(--ink); border-color: var(--rule); }
html[data-view="text"] .consent-actions .btn.primary { background: var(--button); color: var(--button-text); border-color: var(--button); }
@media (max-width: 420px) { .consent-actions { grid-template-columns: 1fr; } .consent-card h2 { font-size: 20px; } }