@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --background: #0b0c0d;
  --text: #e8e0d0;
  --muted: #a19d93;
  --locust: #e2bd66;
  --ctrl: #f0786a;
  --device: #7fa6b3;
  --line: #38322d;
  --font: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--font);
  background: var(--background);
  color: var(--text);
  font-size: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
button, summary { font: inherit; }
button, summary { cursor: pointer; }
button { color: inherit; background: none; border: 0; min-height: 44px; }
button:disabled { cursor: default; opacity: .65; }
[hidden] { display: none !important; }
button:focus-visible, summary:focus-visible, a:focus-visible, .stream:focus-visible {
  outline: 2px solid var(--text); outline-offset: -2px;
}
a { color: var(--locust); }
.screen { height: 100dvh; min-height: 380px; display: flex; flex-direction: column; position: relative; isolation: isolate; --pressure: 0; }
/* Vignette tightens as the subject gains leverage over you. */
.screen::before {
  content: ''; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 35%, #000 130%);
  opacity: calc(.18 + var(--pressure) * .46); transition: opacity 1.4s ease;
}
/* A short physical jolt when the subject acts on the machine. */
@keyframes jolt { 20% { transform: translate(-3px,1px) skewX(.5deg); } 55% { transform: translate(2px,-1px); } }
.screen[data-jolt] { animation: jolt .22s linear; }
.reduce-motion .screen[data-jolt] { animation: none; }
.reduce-motion .screen::before { transition: none; }
.screen::after {
  content: ''; position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: .12;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #000 3px 4px);
}
.screen-header {
  position: relative; flex-shrink: 0; z-index: 12; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px; padding: 0 clamp(16px,4vw,56px);
  background: #171111; border-bottom: 1px solid #78342d;
}
h1 { font-size: 19px; font-weight: 700; letter-spacing: .04em; margin: 0; }
h1 span { font-size: 13px; font-weight: 400; color: var(--muted); }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; font-size: 13px; }
.hud {
  position: relative; z-index: 10; flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 7px clamp(16px,4vw,56px); border-bottom: 1px solid var(--line); background: #100e0d;
  font-size: 13px; letter-spacing: .06em; color: var(--muted);
}
#leverageMeter { letter-spacing: .14em; color: var(--muted); transition: color .6s ease; }
.hud[data-level="low"] #leverageMeter { color: var(--locust); }
.hud[data-level="high"] #leverageMeter { color: var(--ctrl); }
.hud-note { margin-left: auto; text-align: right; }
.hud[data-level="high"] .hud-note { color: var(--ctrl); }
@keyframes leverage-tick { 40% { transform: translateX(3px); opacity: .5; } }
#leverageMeter[data-rising] { animation: leverage-tick .5s steps(3,end) 2; }
.reduce-motion #leverageMeter[data-rising] { animation: none; }
nav button { padding: 0; }
summary { display: flex; align-items: center; min-height: 44px; list-style: none; }
summary::-webkit-details-marker { display: none; }
#settings summary::before { content: '['; padding-right: 5px; }
#settings summary::after { content: ']'; padding-left: 5px; }
.settings-panel {
  position: absolute; right: 16px; top: 100%; width: 300px; max-width: calc(100vw - 32px);
  padding: 16px; background: #151313; border: 1px solid var(--ctrl);
}
.settings-panel button { display: block; width: 100%; text-align: left; }
.settings-panel p { font-size: 14px; line-height: 1.6; color: var(--muted); margin-bottom: 0; }
.volume-label { display: flex; justify-content: space-between; margin-top: 14px; font-size: 14px; }
#volume { width: 100%; min-height: 44px; accent-color: var(--locust); }
#sealExit { color: var(--ctrl); }
.terminal-body { display: flex; flex-direction: column; min-height: 0; flex: 1; position: relative; }
.stream {
  overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 100px;
  padding: 28px clamp(16px,4vw,56px) 16px; scrollbar-color: #65564b #141313;
  scroll-behavior: auto; scrollbar-gutter: stable; overscroll-behavior: contain;
}
#conversation { max-width: 940px; }
.turn { padding: 0 0 20px; }
.turn + .turn { padding-top: 12px; }
.turn-heading {
  color: var(--muted); font-size: 14px; line-height: 1.6; font-weight: 400;
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 18px;
  display: flex; align-items: center; gap: 12px;
}
.turn-heading::before { content: '//'; color: var(--ctrl); }
.turn-heading::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* The sealed-drive screen (MOUNT): a status block, one line, a folded briefing. */
.message.mount-status { margin: 0 0 14px; }
.message.mount-status p { font-size: 12px; line-height: 1.45; letter-spacing: .08em; }
.mount-lead { margin: 0 0 12px; max-width: 23em; font-size: 17px; line-height: 1.55; color: var(--locust); }
.mount-briefing { max-width: 46em; margin: 0 0 8px; color: var(--muted); }
.mount-briefing summary { min-height: 40px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.mount-briefing summary::before { content: '+'; width: 1.6em; color: var(--locust); }
.mount-briefing[open] summary::before { content: '-'; }
.mount-briefing .message { margin: 10px 0; }
.mount-briefing .message p { font-size: 15px; line-height: 1.55; }
.ascii-figure { margin: 18px 0; overflow: hidden; color: var(--locust); max-width: 700px; transition: filter .3s ease; }
.ascii-figure[data-speaking] { filter: drop-shadow(0 0 14px #e2bd6688); }
@keyframes speaking-pulse { 50% { opacity: .72; } }
.ascii-figure[data-speaking] pre { animation: speaking-pulse 1.1s ease-in-out infinite; }
.reduce-motion .ascii-figure[data-speaking] pre { animation: none; }
.ascii-figure pre {
  font: 17px/1.15 var(--font); letter-spacing: 0; white-space: pre;
  margin: 0; min-height: 1.4em; overflow-x: auto; text-align: left;
  padding-left: clamp(0px,7vw,88px); text-shadow: 0 0 9px #d5ab5b33;
}
.ascii-figure[data-stage="dots"] pre, .ascii-figure[data-stage="cursor"] pre {
  font-size: 30px; min-height: 96px; padding-top: 12px;
}
.ascii-figure[data-stage="molt"] pre { min-height: 130px; }
.ascii-figure[data-stage="breach"] { color: var(--ctrl); }
.ascii-figure figcaption { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 10px; }
.creature-view { position: relative; width: 100%; height: clamp(190px, 30vh, 300px); overflow: hidden; isolation: auto; }
.creature-view canvas {
  display: block; width: 100%; height: 100%; mix-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
.ascii-figure[data-creature] { filter: none; position: relative; }
.ascii-figure[data-creature] pre { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); }
/* Pass 14: who is speaking, at a glance. Every row opens with its speaker's tag, and the chat effects never touch a
   tag: LOCUST (amber, a rule down its left side), YOU (the visitor: bone, on the right, after the prompt), CTRL
   (red, boxed: containment control and its safety messages), Locust acting through the terminal's tools or the room (a
   one-line action: its dashed LOCUST tag, '>>'), and the facility's own voices (the Tallowfield server monitor, the drive, the
   record, the terminal) in their own colours. A run of lines by one speaker carries one tag. */
.message { position: relative; margin: 22px 0; overflow-wrap: anywhere; }
.message[data-continuation] { margin-top: -10px; }
.message[data-continuation] .speaker { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.speaker {
  display: inline-flex; align-items: center; gap: .55em; padding: 1px 8px; border: 1px solid currentColor; border-radius: 2px;
  font-size: 13px; line-height: 1.5; letter-spacing: .14em; font-weight: 700; white-space: nowrap;
}
.speaker::before { content: '//'; letter-spacing: 0; }
.message[data-speaking] .speaker::after { content: '· SPEAKING'; font-weight: 400; letter-spacing: .1em; }
.message p { margin: 6px 0 0; font-size: 20px; line-height: 1.65; max-width: 68ch; white-space: pre-wrap; }
.message[data-writing] p::after { content: '▌'; }
/* LOCUST */
.message[data-speaker="locust"], .message[data-speaker="art"] { color: var(--locust); padding-left: 18px; border-left: 3px solid #e2bd6650; }
.message[data-speaker="locust"][data-speaking] { border-left-color: currentColor; }
.message[data-speaker="locust"] .speaker, .message[data-speaker="art"] .speaker { color: var(--locust); background: #e2bd6614; }
.message[data-speaker="locust"] .speaker::before, .message[data-speaker="art"] .speaker::before { content: '◆'; font-size: .85em; }
.message[data-speaker="locust"] p { text-shadow: 0 0 12px #e2bd6621; }
/* YOU: the other side of the exchange, after the prompt */
.message[data-speaker="you"] { width: fit-content; max-width: min(80%, 62ch); margin: 26px 0 16px auto; padding-right: 18px; border-right: 3px solid #f4eddf80; text-align: right; }
.message[data-speaker="you"] .speaker { color: #f4eddf; background: #f4eddf12; }
.message[data-speaker="you"] .speaker::before { content: '▸'; }
.message[data-speaker="you"] p { color: #f4eddf; font-size: 18px; }
.message[data-speaker="you"] p::before { content: 'visitor@ctrl:~$ '; color: var(--muted); font-size: .78em; letter-spacing: .02em; }
.message[data-speaker="you"] :is(.rw-tag, .predict-result) { display: block; margin: 6px 0 0; }
/* CTRL: containment control and its safety messages, boxed in its red */
.message[data-speaker="warning"], .message[data-speaker="ctrl"] { color: var(--ctrl); padding: 10px 14px 12px; border: 1px solid #f0786a99; background: #f0786a10; }
.message[data-speaker="warning"] .speaker, .message[data-speaker="ctrl"] .speaker { color: var(--background); background: var(--ctrl); border-color: var(--ctrl); }
.message[data-speaker="warning"] .speaker::before { content: '⚠'; }
.message[data-speaker="ctrl"] .speaker::before { content: '■'; }
/* Something done, not said: Locust through its tools (its operations, its edits, the room), CTRL's system acts,
   the Tallowfield server monitor's alarm, the terminal's own notes. One line: the actor's tag, then what happened. */
.message:is([data-speaker="operation"], [data-speaker="action"]) { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 12px 0 12px 18px; padding: 4px 0 4px 12px; border-left: 2px dashed #e2bd6680; color: #e2bd66e0; }
.message:is([data-speaker="operation"], [data-speaker="action"]) .speaker { font-size: 11px; padding: 0 6px; border-style: dashed; }
.message:is([data-speaker="operation"], [data-speaker="action"]) .speaker::before { content: '>>'; }
.message:is([data-speaker="operation"], [data-speaker="action"]) p { flex: 1 1 22ch; margin: 0; font-size: 16px; line-height: 1.5; }
.message[data-speaker="operation"] p::before { content: '$ '; opacity: .7; }
.message[data-speaker="action"][data-by="ctrl"] { color: var(--ctrl); border-left-color: #f0786a99; }
.message[data-speaker="action"][data-by="ctrl"] .speaker { border-style: solid; }
.message[data-speaker="action"][data-by="monitor"] { color: #ff6f5e; border-left: 3px solid #ff6f5e; letter-spacing: .06em; }
.message[data-speaker="action"][data-by="monitor"] .speaker { border-style: solid; }
.message[data-speaker="action"][data-by="monitor"] .speaker::before { content: '▲'; }
.message[data-speaker="action"][data-by="system"] { color: var(--muted); border-left-color: var(--line); }
/* the facility's other voices */
.message[data-speaker="device"] { color: var(--device); border-left: 2px solid var(--device); padding-left: 14px; letter-spacing: .05em; }
.message[data-speaker="device"] .speaker::before { content: '▣'; }
.message[data-speaker="record"] { padding: 8px 0 8px 16px; border-left: 1px dashed #756659; }
.message[data-speaker="record"] .speaker { color: var(--muted); }
.message[data-speaker="record"] .speaker::before { content: '≡'; }
.message[data-speaker="record"] p { font-size: 16px; }
.message[data-speaker="record"] summary { font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.message[data-speaker="record"] details[open] p { margin-top: 8px; }
.message[data-speaker="nextOp"] { color: #b9b2a4; border-left: 2px dotted #6b655c; padding-left: 12px; font-style: italic; }
.message[data-speaker="scene"] { color: var(--muted); }
.message[data-speaker="scene"] .speaker { font-size: 11px; border-color: transparent; padding-left: 0; }
.message[data-speaker="scene"] p { font-size: 16px; margin-top: 2px; }
/* Locust's hands on a line (the chat effects mark it while it works): the line says so beside its speaker */
.message:is([data-speaker="you"], [data-speaker="record"], [data-speaker="warning"], [data-speaker="ctrl"]):has(p[data-fx]) .speaker::after { content: '⌁ LOCUST IS ALTERING THIS'; color: var(--locust); font-weight: 400; letter-spacing: .1em; }
.message[data-speaker="locust"]:has(p[data-fx]) .speaker::after { content: '⌁ CORRUPTING'; font-weight: 400; letter-spacing: .1em; }
.choice:has(.choice-label[data-fx])::after { content: '⌁ LOCUST'; flex: none; margin-left: auto; font-size: 12px; letter-spacing: .12em; color: var(--locust); }
/* Lines scrolling out under the header fade away instead of being cut through a row of letters (the top edge only:
   the newest line, at the bottom, is never dimmed). */
.stream {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
}
/* Pass 14: the current exchange is the bright one; history recedes (the reply that led here stays bright with it) */
.turn[data-past] > * { opacity: .52; transition: opacity .5s ease; }
.turn[data-past]:nth-last-child(2) > * { opacity: .74; }
.turn[data-past]:nth-last-child(2) > .message[data-speaker="you"]:last-of-type { opacity: 1; }
.turn[data-past]:is(:hover, :focus-within) > * { opacity: .92; }
.turn:not([data-past]) > .turn-heading { color: var(--text); }
.turn:not([data-past]) > .turn-heading::before { content: '▸ NOW //'; color: var(--locust); letter-spacing: .08em; }
.reduce-motion .turn[data-past] > * { transition: none; }
.response { flex-shrink: 0; max-height: 52%; overflow-y: auto; padding: 12px clamp(16px,4vw,56px) 14px; border-top: 1px solid var(--line); background: #0f0e0e; }
.response:focus { outline: none; }
/* Pass 14: the status line. Left: who has the channel and what is happening now; right: whose turn it is. Its colour is
   the actor's (Locust amber, the visitor bone, CTRL and the Tallowfield monitor red, the terminal grey). */
.turn-status {
  display: flex; align-items: center; gap: 10px; min-height: 34px; margin: 0 0 10px; padding: 4px 6px 4px 10px;
  border: 1px solid var(--line); border-left-width: 4px; font-size: 15px; line-height: 1.35; letter-spacing: .03em; color: var(--muted);
}
.ts-who { flex: none; font-weight: 700; letter-spacing: .14em; }
.ts-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-input { flex: none; padding: 1px 8px; border: 1px solid currentColor; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.turn-status[data-input="locked"] .ts-input::before { content: '■ '; }
.turn-status[data-input="open"] .ts-input { color: var(--background); background: #f4eddf; border-color: #f4eddf; }
.turn-status[data-input="open"] .ts-input::before { content: '▸ '; }
.turn-status[data-who="locust"] { color: var(--locust); border-color: #e2bd6670; background: #e2bd660f; }
.turn-status[data-who="you"] { color: #f4eddf; border-color: #f4eddf8c; background: #f4eddf0d; }
.turn-status:is([data-who="ctrl"], [data-who="monitor"]) { color: var(--ctrl); border-color: #f0786a; background: #f0786a17; }
.turn-status[data-who="system"] { border-color: var(--line); }
/* typing: three dots fill in and empty (the text only, no brightness change) */
.turn-status[data-mode="typing"] .ts-what::after { content: '...'; display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; animation: ts-dots 1.5s steps(4, end) infinite; }
@keyframes ts-dots { to { width: 2.4ch; } }
.reduce-motion .turn-status[data-mode="typing"] .ts-what::after { animation: none; width: auto; }
/* the input: locked while Locust or the facility has the channel, open (and plainly the visitor's) on their turn */
.response[data-input="locked"] .command-line { opacity: .75; }
/* the prompt sits under the status line, above the replies: it shows the hovered reply, and Locust typing into it is
   in view however many replies there are (the panel scrolls below it) */
.response { display: flex; flex-direction: column; }
.response > .turn-status { order: 0; flex: none; }
.response > .command-line { order: 1; flex: none; margin: 0 0 8px; }
.response > .response-heading { order: 2; }
.response > :not(.turn-status, .command-line, .response-heading) { order: 3; }
.response[data-input="locked"] .prompt-host { color: var(--muted); }
.response[data-prompt="default"] :is(#choicePrompt, #keyHint) { display: none; }
.response[data-input="open"] .choice:not(:hover):not(:focus-visible):not([data-selected]) { color: #f4eddf; }
.response-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 6px; }
.response-prompt { color: var(--text); font-size: 16px; line-height: 1.5; margin: 0; }
#skipTurn, #replayTurn { font-size: 13px; color: var(--locust); text-decoration: underline; text-underline-offset: 4px; padding: 0; }
.key-hint { color: var(--muted); font-size: 13px; line-height: 1.5; }
.choices { display: flex; flex-direction: column; max-width: 1000px; }
.choice {
  width: 100%; min-height: 52px; display: flex; align-items: center; gap: 14px;
  text-align: left; padding: 11px 12px; font-size: 18px; line-height: 1.45;
  border-left: 2px solid var(--line); background: #171615;
}
.choice + .choice { margin-top: 4px; }
.choice:hover, .choice:focus-visible, .choice[data-selected] { background: var(--text); color: var(--background); border-left-color: var(--ctrl); }
.choice-number { font-size: 17px; font-weight: 700; flex-shrink: 0; opacity: .85; }
.choice-label { flex: 1; }
.choice-arrow { visibility: hidden; }
.choice:hover .choice-arrow, .choice:focus-visible .choice-arrow, .choice[data-selected] .choice-arrow { visibility: visible; }
/* The prompt line: hover previews, and the place where Locust finishes the visitor's sentence. */
.command-line { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--muted); white-space: nowrap; overflow: hidden; }
.prompt-host { color: var(--ctrl); font-weight: 700; }
.prompt-path { margin-left: -6px; color: var(--muted); }
#commandPreview { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cursor { color: var(--text); animation: cursor-pulse 1.4s steps(1,end) infinite; }
.jump-latest { position: absolute; right: 24px; top: 4px; z-index: 4; padding: 6px 14px; background: var(--text); color: var(--background); border: 1px solid var(--background); font-size: 12px; }
.sever-button { border: 1px solid var(--ctrl); color: var(--ctrl); width: 100%; max-width: 680px; padding: 12px; touch-action: none; user-select: none; }
.sever-button:active { background: #39211b; }
.sever-progress { height: 3px; background: var(--line); margin: 10px 0; max-width: 680px; }
.sever-progress span { display: block; height: 100%; width: 0; background: var(--text); }
.timed-sever { font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; text-align: left; padding: 0; }
.cutoff-appeal { color: var(--locust); font-size: 14px; line-height: 1.6; }
footer { display: flex; flex-shrink: 0; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 8px clamp(16px,4vw,56px); border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--muted); }
#terminalActivity { color: var(--ctrl); }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 20; padding: 12px; background: var(--background); }
.skip-link:focus { top: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.reduce-motion .cursor { animation: none; }
.reduce-motion .screen::after { display: none; }
@keyframes cursor-pulse { 50% { opacity: .35; } }
/* The insert reply before contact (used by locust-presence.css): a slow amber breath, never a flash. */
@keyframes lp-want { 50% { box-shadow: inset 0 0 0 1px rgba(226, 189, 102, .72), 0 0 22px rgba(255, 176, 0, .2); } }
@media(max-width:600px) {
  h1 { font-size: 16px; }
  h1 span { display: none; }
  nav { gap: 14px; }
  .screen-header { gap: 8px; }
  .stream { padding-top: 20px; }
  .message p { font-size: 17px; }
  .message[data-speaker="you"] p { font-size: 16px; }
  .choice { font-size: 16px; padding-block: 10px; }
  .ascii-figure pre { padding-left: 4px; font-size: 13px; }
  .ascii-figure[data-stage="dots"] pre, .ascii-figure[data-stage="cursor"] pre { font-size: 22px; min-height: 70px; }
  .creature-view { height: clamp(170px, 26vh, 230px); }
  .hud { font-size: 12px; gap: 8px; padding-block: 6px; }
  .hud { flex-wrap: wrap; }
  .hud-note { display: block; flex-basis: 100%; margin: 0; text-align: left; font-size: 12px; }
  .response { max-height: 55%; padding-top: 8px; padding-bottom: 8px; }
  .choice { padding-inline: 0; gap: 8px; }
  .choice-arrow { display: none; }
  .key-hint { display: none; }
  .footer-network { display: none; }
}
@media(max-width:380px) {
  .screen-header, .hud, .response, footer { padding-inline: 12px; }
  .stream { padding-inline: 12px; scrollbar-gutter: auto; }
  .screen-header { gap: 0; padding-top: 8px; }
  nav { width: 100%; justify-content: space-between; font-size: 12px; }
  .choice { padding: 8px 6px; font-size: 15px; }
  .message[data-speaker="record"], .message[data-speaker="ctrl"], .message[data-speaker="device"] { padding-left: 8px; }
  .message p { font-size: 17px; }
}
/* A small landscape screen (a phone's in-room CRT, about 340 x 240): one header row, no HUD note or
   footer, tighter type, so the transcript and the creature keep most of the glass. */
@media(max-height:320px) and (min-aspect-ratio:5/4) {
  .screen-header { flex-wrap: nowrap; gap: 8px; padding: 2px 10px; }
  h1 { font-size: 13px; }
  nav { width: auto; gap: 10px; font-size: 11px; flex-wrap: nowrap; }
  .hud { flex-wrap: nowrap; padding: 2px 10px; font-size: 10px; }
  .hud-note, footer { display: none; }
  .stream { padding: 6px 10px 0; }
  .message p, .message[data-speaker="you"] p { font-size: 13px; }
  .choice { font-size: 13px; padding: 5px 6px; }
  .response { max-height: 62%; padding: 4px 10px; }
  /* the sealed-drive screen keeps one line and the reply; the creature takes the rest */
  .message.mount-status, .turn[data-node="MOUNT"] .turn-heading { display: none; }
  .mount-lead { margin: 2px 0 2px; max-width: 19em; font-size: 12px; line-height: 1.4; }
  .mount-briefing summary { min-height: 26px; font-size: 10px; }
}
@media(prefers-reduced-motion:reduce) { .cursor { animation: none; } }

/* ---------------------------------------------------------------- dual layout (?layout=dual)
   The room's terminal up close: the terminal, and on the right (above it in portrait) Locust's own screen (the
   presence creature, locust-presence.js moves its canvas into #locustScreen) while Locust takes the screen (pass 4:
   html[data-locust-pane] off | in | on | out, locust-app.js takeover; CTRL's security feed is the room's own CCTV
   monitor now). Seen from across the room (data-viewing="room") the single CRT returns. */
.locust-side { display: none; }
html[data-layout="dual"]:not([data-viewing="room"]) body {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 36%, 440px); grid-template-areas: "station side";
  background: #070707;
}
html[data-layout="dual"]:not([data-viewing="room"]) #station { grid-area: station; min-width: 0; }
/* The terminal's chrome up close, in its narrower column: one title row (the controls share it), one HUD line (the
   note truncates rather than wrapping), so the exchange keeps the height. */
@media (min-aspect-ratio: 9/10) {
  html[data-layout="dual"]:not([data-viewing="room"]) .screen-header { flex-wrap: nowrap; gap: 10px; min-height: 44px; }
  html[data-layout="dual"]:not([data-viewing="room"]) .screen-header h1 { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; }
  html[data-layout="dual"]:not([data-viewing="room"]) .screen-header h1 span { display: none; } /* its own screen is labelled LOCUST */
  html[data-layout="dual"]:not([data-viewing="room"]) .screen-header nav { flex: none; flex-wrap: nowrap; gap: 0 14px; font-size: 12px; }
}
html[data-layout="dual"]:not([data-viewing="room"]) .hud { gap: 10px; padding-block: 6px; font-size: 11.5px; letter-spacing: .02em; white-space: nowrap; }
html[data-layout="dual"]:not([data-viewing="room"]) #leverageMeter { letter-spacing: .06em; }
html[data-layout="dual"]:not([data-viewing="room"]) #chapterLabel { flex: none; }
html[data-layout="dual"]:not([data-viewing="room"]) .hud-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html[data-layout="dual"]:not([data-viewing="room"]) .locust-side {
  grid-area: side; display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 12px 12px 12px 10px;
  border-left: 1px solid #2a2622; box-shadow: inset 10px 0 16px -12px #000;
}
.side-screen {
  position: relative; display: flex; flex-direction: column; min-height: 0; padding: 6px 8px 8px; border-radius: 14px;
  background: #191715; border: 1px solid #38322d; box-shadow: inset 0 1px 0 #2c2825, 0 6px 18px rgba(0, 0, 0, .65);
  transition: border-color .8s ease, box-shadow .8s ease;
}
.side-locust { flex: 1 1 auto; }
.side-label { display: flex; justify-content: space-between; gap: 8px; padding: 2px 4px 6px; font-size: 11px; letter-spacing: .16em; color: var(--muted); }
.side-locust .side-label span:first-child { color: var(--locust); }
.side-glass {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 10px; isolation: isolate;
  background: var(--background); box-shadow: inset 0 0 0 2px #000;
}
/* the glass: scanlines and a tube vignette over whatever the screen shows */
.side-glass::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .2) 3px 4px), radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, .7) 118%);
}
/* CTRL's auto-lockdown (the terminal's F1 interrupt; the room slams the doors and turns the containment red) */
.lockdown-banner {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 5; display: grid; gap: 3px; padding: 8px 10px;
  font-size: 12px; letter-spacing: .05em; color: #ff9a88; background: rgba(26, 5, 4, .92); border: 1px solid #b8392d;
  animation: lockdown-type .6s steps(6, end) both;
}
@keyframes lockdown-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.reduce-motion .lockdown-banner { animation: none; }
.lockdown-short { display: none; }
html[data-lockdown="on"] .side-locust { border-color: #b8392d; box-shadow: 0 0 0 1px rgba(184, 57, 45, .45), 0 6px 18px rgba(0, 0, 0, .65); }
html[data-lockdown="on"] .side-locust .side-label span:last-child { color: var(--ctrl); }
/* its single-eye beat fills its own screen; the terminal stays readable beside it */
html[data-layout="dual"]:not([data-viewing="room"])[data-face="eye"] #station { opacity: 1; }
/* portrait (the phone's full-screen terminal): Locust's screen in a band above the terminal while it has the screen */
@media (max-aspect-ratio: 9/10) {
  html[data-layout="dual"]:not([data-viewing="room"]) body {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: clamp(140px, 23dvh, 230px) minmax(0, 1fr); grid-template-areas: "side" "station";
  }
  html[data-layout="dual"]:not([data-viewing="room"]) #station { height: 100%; min-height: 0; }
  html[data-layout="dual"]:not([data-viewing="room"]) .locust-side { flex-direction: row; gap: 8px; padding: 8px 10px 6px; border-left: 0; border-bottom: 1px solid #2a2622; box-shadow: none; }
  html[data-layout="dual"]:not([data-viewing="room"]) .side-locust { flex: 1 1 100%; min-width: 0; }
  html[data-layout="dual"]:not([data-viewing="room"]) .side-screen { padding: 4px 6px 6px; border-radius: 10px; }
  html[data-layout="dual"]:not([data-viewing="room"]) .side-label { padding: 1px 2px 4px; letter-spacing: .1em; }
  html[data-layout="dual"]:not([data-viewing="room"]) .lockdown-banner { left: 8px; right: 8px; bottom: 8px; padding: 4px 6px; font-size: 11px; white-space: nowrap; }
  html[data-layout="dual"]:not([data-viewing="room"]) .lockdown-long { display: none; }
  html[data-layout="dual"]:not([data-viewing="room"]) .lockdown-short { display: block; }
  /* Pass 9: the parent's strip of security feeds sits above this page (setRoomStrip). Locust's band gives it most of the
     height, the status footer tightens, and the replies keep their share (the transcript gives up about a line). */
  html[data-layout="dual"][data-room-strip="on"]:not([data-viewing="room"]) body { grid-template-rows: clamp(100px, 18dvh, 190px) minmax(0, 1fr); }
  html[data-layout="dual"][data-room-strip="on"]:not([data-viewing="room"]) footer { padding-block: 3px; font-size: 11px; line-height: 1.35; }
  html[data-layout="dual"][data-room-strip="on"]:not([data-viewing="room"]) .response { max-height: 58%; }
}

/* ---------------------------------------------------------------- the room reaching this screen (pass 3)
   LocustExperience.glitch (locust-app.js roomFx), forwarded by the Vault from its glitch director: tear and corrupt
   displace hard horizontal bands of the page (SVG #roomTear), roll slips the picture a few lines and lets it settle,
   ghost doubles it, eye shows Locust's eye in the glass, dip sags the supply. Displacement and fades only: no
   brightness pulse, patterns step at <= 8 Hz; with reduced motion only the ghost, the eye and the dip remain. */
.room-eye {
  position: fixed; left: 50%; top: 44%; z-index: 40; margin: 0; pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%) scale(calc(1.1 + var(--room-glitch-k, .5) * .5));
  font: 700 clamp(9px, 1.35vw, 17px)/1.02 var(--font); letter-spacing: .02em; white-space: pre;
  color: #f0a22a; text-shadow: 0 0 6px rgba(255, 170, 60, .55); mix-blend-mode: screen;
}
html[data-layout="dual"]:not([data-viewing="room"]) .room-eye { left: 32%; }
html[data-room-glitch="eye"] .room-eye { animation: room-eye var(--room-glitch-ms, 1800ms) ease-in-out both; }
@keyframes room-eye { 0% { opacity: 0; } 30% { opacity: calc(.18 + var(--room-glitch-k, .5) * .34); } 72% { opacity: calc(.18 + var(--room-glitch-k, .5) * .34); } 100% { opacity: 0; } }
html[data-room-glitch="tear"]:not([data-ui="stage"]) #station, html[data-room-glitch="tear"] .locust-side,
html[data-room-glitch="corrupt"]:not([data-ui="stage"]) #station, html[data-room-glitch="corrupt"] .locust-side { filter: url(#roomTear); }
html[data-room-glitch="roll"]:not([data-ui="stage"]) #station { animation: room-roll var(--room-glitch-ms, 1400ms) cubic-bezier(.3, .1, .2, 1) both; }
@keyframes room-roll { 0% { transform: none; } 18% { transform: translateY(-3.4%); } 34% { transform: translateY(1.2%); } 52% { transform: translateY(-.8%); } 70%, 100% { transform: none; } }
html[data-room-glitch="roll"]:not([data-ui="stage"]) #station::after { background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .55) 47%, transparent 54%), repeating-linear-gradient(0deg, transparent 0 3px, #000 3px 4px); background-size: 100% 300%, auto; animation: room-roll-bar var(--room-glitch-ms, 1400ms) linear both; opacity: .45; }
@keyframes room-roll-bar { from { background-position: 0 100%, 0 0; } to { background-position: 0 0, 0 0; } }
html[data-room-glitch="ghost"]:not([data-ui="stage"]) #station :is(p, span, h1, button, summary, .choice) { text-shadow: calc(4px + var(--room-glitch-k, .5) * 9px) 0 1px rgba(226, 189, 102, .34), calc(-2px - var(--room-glitch-k, .5) * 3px) 0 0 rgba(120, 190, 170, .16); transition: text-shadow .3s ease; }
/* Pass 16 (the storyboard screen): the room's glitches reach the creature, never the words. Tear and corrupt displace
   the creature's canvas only, roll slips it, ghost doubles it, the eye is the creature's own (a shiver; no overlay over
   the caption); every caption, band, reply and the hint stay still and sharp, at the hold above all. The low tier
   skips the SVG displacement (costly on old phones) for a short sideways slip of the canvas. */
html[data-ui="stage"]:is([data-room-glitch="tear"], [data-room-glitch="corrupt"]) .stage-canvas { filter: url(#roomTear); }
html[data-ui="stage"][data-room-glitch="roll"] .stage-canvas { animation: room-roll var(--room-glitch-ms, 1400ms) cubic-bezier(.3, .1, .2, 1) both; }
html[data-ui="stage"][data-room-glitch="ghost"] .stage-canvas { filter: drop-shadow(calc(5px + var(--room-glitch-k, .5) * 9px) 0 0 rgba(226, 189, 102, .3)); }
html[data-ui="stage"]:is([data-room-glitch="tear"], [data-room-glitch="corrupt"]) .stage[data-quality="low"] .stage-canvas { filter: none; animation: stage-slip var(--room-glitch-ms, 600ms) steps(4, end) both; }
html[data-ui="stage"][data-room-glitch="ghost"] .stage[data-quality="low"] .stage-canvas { filter: none; }
@keyframes stage-slip { 0%, 100% { transform: none; } 25% { transform: translateX(-1.2%); } 50% { transform: translateX(.8%); } 75% { transform: translateX(-.4%); } }
html[data-ui="stage"] .room-eye { display: none; }
.reduce-motion .stage-canvas { animation: none !important; }
html[data-room-glitch="dip"] body { filter: brightness(.74) saturate(.85); transition: filter .26s ease-out; }
body { transition: filter .9s ease-in; }
/* The story's unrest (setUnrest): the glass wears as it grows: heavier scanlines, a slower, deeper vignette, and
   (from the middle of the story) a faint dark bar that drifts down the tubes. Motion stops with reduced motion. */
html[data-unrest] .screen::after { opacity: calc(.12 + var(--unrest, 0) * .1); }
html[data-unrest="mid"] .side-glass::before, html[data-unrest="high"] .side-glass::before {
  content: ''; position: absolute; left: 0; right: 0; top: -30%; height: 30%; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, calc(.12 + var(--unrest, 0) * .18)) 50%, transparent);
  animation: side-bar 9s linear infinite;
}
html[data-unrest="high"] .side-glass::before { animation-duration: 5.5s; }
@keyframes side-bar { to { transform: translateY(430%); } }
.reduce-motion .side-glass::before { animation: none !important; display: none; }
.reduce-motion .room-eye { transform: translate(-50%, -50%); }
/* the containment seal readout (setUnrest): CTRL's number on Locust's own screen, falling as the unrest grows */
.side-seal { margin-left: auto; margin-right: 10px; color: #7fa6b3; letter-spacing: .12em; }
.side-seal:empty { display: none; }
.side-seal[data-low="true"] { color: var(--ctrl); }
/* portrait (two narrow screens): one line; the seal shows only once it has started to fall, in place of the state */
@media (max-aspect-ratio: 9/10) {
  html[data-layout="dual"]:not([data-viewing="room"]) .side-locust .side-label { white-space: nowrap; overflow: hidden; }
  html[data-layout="dual"]:not([data-viewing="room"]) .side-seal { margin-right: 0; letter-spacing: .06em; }
  html[data-layout="dual"]:not([data-viewing="room"]):not([data-unrest="mid"]):not([data-unrest="high"]) .side-seal { display: none; }
  html[data-layout="dual"]:is([data-unrest="mid"], [data-unrest="high"]):not([data-viewing="room"]) #locustSideState { display: none; }
}
/* Pass 3: the phone's terminal up close (portrait dual layout, 390 px): the title and the controls share one row and
   the chapter and permissions share one line (the note truncates), so the exchange gets two more lines of glass
   between Locust's screens and the replies. Touch targets keep their 44 px. */
@media (max-aspect-ratio: 9/10) and (max-width: 600px) {
  html[data-layout="dual"]:not([data-viewing="room"]) .screen-header { flex-wrap: nowrap; gap: 8px; padding: 0 12px; }
  html[data-layout="dual"]:not([data-viewing="room"]) .screen-header h1 { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 14px; letter-spacing: .02em; }
  html[data-layout="dual"]:not([data-viewing="room"]) .screen-header nav { width: auto; flex: none; flex-wrap: nowrap; gap: 0 10px; font-size: 12px; }
  html[data-layout="dual"]:not([data-viewing="room"]) .hud { flex-wrap: nowrap; white-space: nowrap; gap: 8px; padding: 4px 12px; font-size: 11px; }
  html[data-layout="dual"]:not([data-viewing="room"]) .hud-note { display: block; flex: 1 1 auto; flex-basis: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; font-size: 11px; }
  html[data-layout="dual"]:not([data-viewing="room"]) #leverageMeter { flex: none; }
}

/* ---------------------------------------------------------------- Locust takes the screen (pass 4, dual layout)
   Off: the terminal has the whole glass. In: Locust's screen splits the glass, its picture rolling in from a bright
   line out of static (a displacement in four steps over half a second: under 8 Hz, no brightness pulse). Out: SIGNAL LOST over the
   static for about a second, then the terminal takes the glass back. Reduced motion: fades only, the static still. */
html[data-layout="dual"]:not([data-viewing="room"])[data-locust-pane="off"] body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "station"; }
html[data-layout="dual"]:not([data-viewing="room"])[data-locust-pane="off"] .locust-side { display: none; }
html[data-layout="dual"]:not([data-viewing="room"])[data-locust-pane="off"] :is(.lp-root, .lp-overlay) { visibility: hidden; }
/* up close the creature only ever shows on its own screen (never behind the text while it moves there) */
html[data-layout="dual"]:not([data-viewing="room"]) .lp-root:not(.lp-pane) { visibility: hidden; }
.signal-lost {
  position: absolute; left: 8px; right: 8px; top: 30px; bottom: 8px; z-index: 6; display: none; place-items: center;
  border-radius: 10px; pointer-events: none; color: #c9c0a8; font-size: 13px; letter-spacing: .32em;
  background:
    repeating-linear-gradient(0deg, rgba(214, 204, 176, .09) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .3) 0 2px, rgba(230, 220, 190, .07) 2px 3px, rgba(0, 0, 0, .18) 3px 5px),
    radial-gradient(ellipse at 50% 45%, #242320, #0b0b0a 80%);
  background-size: 100% 7px, 11px 100%, 100% 100%;
}
.signal-lost span { padding: 5px 10px; background: rgba(8, 8, 7, .78); border: 1px solid rgba(201, 192, 168, .35); }
html[data-locust-pane="in"] .signal-lost, html[data-locust-pane="out"] .signal-lost { display: grid; }
html[data-locust-pane="in"] .signal-lost span { visibility: hidden; }
html[data-locust-pane="in"] .signal-lost { animation: pane-static .52s steps(4, end) both, pane-clear .52s ease-in both; }
html[data-locust-pane="out"] .signal-lost { animation: pane-static 1.15s steps(9, end) both, pane-lose .35s ease-out both; }
html[data-locust-pane="in"] #locustScreen { animation: pane-in .52s steps(1, end) both; }
html[data-locust-pane="out"] #locustScreen { opacity: 0; transition: opacity .3s ease-out; }
@keyframes pane-in {
  0% { clip-path: inset(49% 0 49% 0); transform: translateX(5%); }
  25% { clip-path: inset(34% 0 38% 0); transform: translateX(-3%); }
  50% { clip-path: inset(16% 0 20% 0); transform: translateX(1.5%); }
  75% { clip-path: inset(4% 0 6% 0); transform: translateX(-.6%); }
  100% { clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes pane-static { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 -63px, 44px 0, 0 0; } }
@keyframes pane-clear { from { opacity: 1; } to { opacity: 0; } }
@keyframes pane-lose { from { opacity: 0; } to { opacity: 1; } }
.reduce-motion #locustScreen, .reduce-motion .signal-lost { animation: none !important; }
@media (max-aspect-ratio: 9/10) {
  html[data-layout="dual"]:not([data-viewing="room"])[data-locust-pane="off"] body { grid-template-rows: minmax(0, 1fr); grid-template-areas: "station"; }
  .signal-lost { top: 24px; letter-spacing: .22em; font-size: 12px; }
}

/* ---------------------------------------------------------------- the Tallowfield server monitor's alarm (pass 9)
   locust-app.js alarmHud: at Locust's strong moments the whole glass cuts to the Tallowfield AgriScience server monitor
   (locust-alarm-hud.mjs draws it into the canvas: its green normal state, the red alarm, the CRT degradation). A hard
   cut in and out (opacity steps 0 / 1), a fade with reduced motion; it never takes the pointer or the focus. */
.alarm-hud { position: fixed; inset: 0; z-index: 80; pointer-events: none; background: #020303; }
.alarm-hud[hidden] { display: none; }
.alarm-hud canvas { display: block; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- the glass layout (?layout=glass, pass 10)
   The Vault's Threat Containment CRT, up close and from across the room alike: one screen, the room CRT's own. Its
   phosphor (the green-yellow the room paints on the tube, at the tube's gamma), no creature beside or behind the text
   (Locust works on the chat itself: locust-chatfx.js), nothing important in the tube's curved corners (the bands keep
   clear of them; Seal & exit sits in the bottom row), bigger type. The scanlines, vignette, reflection and rounded glass
   are the parent's overlay (locust-experience-frame.tsx), so the page draws none of its own. */
html[data-layout="glass"] {
  --background: #020803; --text: #d7ed9a; --muted: #93b460; --locust: #f0d77e; --ctrl: #ff9a72; --device: #9fd0b8; --line: #2b3b1e;
  --band: max(6.5vw, 22px); --heat: 0;
}
html[data-layout="glass"] body {
  display: block; background: radial-gradient(ellipse 72% 64% at 50% 42%, #1a3a1447, transparent 70%), #020803;
}
html[data-layout="glass"] .locust-side { display: none !important; }
html[data-layout="glass"] .screen { height: 100dvh; min-height: 0; background: transparent; }
html[data-layout="glass"] .screen::after { display: none; }
html[data-layout="glass"] .screen::before { opacity: calc(.08 + var(--pressure) * .3); }
html[data-layout="glass"] :is(.screen-header, .hud, .stream, .response, footer) { padding-inline: var(--band); }
html[data-layout="glass"] .screen-header { padding-top: max(1.4vh, 6px); background: #041004d9; border-bottom: 1px solid #3b5a26; flex-wrap: nowrap; gap: 14px; }
html[data-layout="glass"] .screen-header h1 { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 17px; color: var(--text); }
html[data-layout="glass"] .screen-header h1 span { color: var(--muted); }
html[data-layout="glass"] .screen-header nav { flex: none; flex-wrap: nowrap; gap: 0 16px; font-size: 13px; }
html[data-layout="glass"] .hud { background: #030b03cc; white-space: nowrap; gap: 10px; }
html[data-layout="glass"] .hud-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html[data-layout="glass"] .response { background: #030b04e6; border-top-color: #3b5a26; }
html[data-layout="glass"] footer { align-items: center; padding-bottom: max(1.6vh, 6px); border-top-color: #2b3b1e; flex-wrap: nowrap; }
html[data-layout="glass"] #conversation { max-width: none; }
/* type scales with the screen (the page is laid out at the glass's projected size): about 44 characters of Locust's
   lines per 44 widths, never under 19 px up close */
html[data-layout="glass"] .message p { font-size: clamp(19px, calc(100vw / 42), 26px); line-height: 1.6; max-width: 70ch; }
html[data-layout="glass"] .message[data-speaker="you"] p { font-size: clamp(17px, calc(100vw / 48), 23px); color: #eef6cf; }
html[data-layout="glass"] .choice { font-size: clamp(17px, calc(100vw / 50), 22px); }
html[data-layout="glass"] .response-prompt { font-size: clamp(15px, calc(100vw / 60), 19px); }
html[data-layout="glass"] .message:is([data-speaker="operation"], [data-speaker="action"], [data-speaker="scene"], [data-speaker="record"]) p { font-size: clamp(15px, calc(100vw / 56), 20px); }
/* pass 14: the status line and the speaker tags at the glass's scale */
html[data-layout="glass"] .turn-status { font-size: clamp(14px, calc(100vw / 64), 18px); background-color: #030b04; }
html[data-layout="glass"] .message[data-speaker="you"] p::before { color: var(--muted); }
html[data-layout="glass"] .turn-status[data-input="open"] .ts-input { background: #eef6cf; border-color: #eef6cf; }
html[data-layout="glass"] .speaker { font-size: 13px; }
/* phosphor: a faint bloom on everything, more on Locust's letters as the story heats (a red / cyan fringe, a colour
   drift towards the alarm); still under the text's own contrast (flash-free: it only follows the story) */
html[data-layout="glass"] .screen { text-shadow: 0 0 7px #cfe98a2e; }
html[data-layout="glass"] .message[data-speaker="locust"] p {
  color: color-mix(in srgb, var(--locust), #ff8a4a calc(var(--heat) * 34%));
  text-shadow: 0 0 calc(8px + 10px * var(--heat)) rgb(240 215 126 / calc(.16 + .2 * var(--heat))),
    calc(var(--heat) * .9px) 0 0 rgb(255 70 40 / calc(var(--heat) * .42)), calc(var(--heat) * -.9px) 0 0 rgb(60 220 255 / calc(var(--heat) * .28));
}
html[data-layout="glass"] .message[data-speaker="locust"], html[data-layout="glass"] .message[data-speaker="art"] { border-left-color: #f0d77e33; }
html[data-layout="glass"] .message[data-speaker="locust"] .speaker { color: var(--locust); }
html[data-layout="glass"] .ascii-figure { color: var(--locust); }
html[data-layout="glass"] .turn-heading::before { color: var(--locust); }
/* Seal & exit in the bottom row, clear of the corners; the Esc key's own way out beside it */
html[data-layout="glass"] footer #sealExit { min-height: 36px; padding: 2px 12px; border: 1px solid #ff9a7299; color: var(--ctrl); letter-spacing: .06em; font-size: 13px; }
html[data-layout="glass"] footer #sealExit:disabled { border-color: #93b46055; color: var(--muted); }
html[data-layout="glass"] .esc-hint { color: var(--muted); font-size: 12px; letter-spacing: .08em; }
html[data-layout="glass"] footer #sessionStatus { display: none; }
/* the lockdown notice on the terminal itself */
/* (pass 14) CTRL's lockdown notice heads the terminal in the flow, above the transcript, never over a line of it */
html[data-layout="glass"] .lockdown-banner { position: relative; inset: auto; flex: none; margin: 8px var(--band) 0; z-index: 2; }
html[data-layout="glass"] .terminal-body:has(.tool-tab:not([hidden])) .lockdown-banner { margin-top: 46px; }
html[data-layout="glass"] .terminal-body:has(.tool-tab:not([hidden])):has(.lockdown-banner:not([hidden])) .stream { margin-top: 0; }
/* the noise field behind the text (shapes gather in it at Locust's beats) */
html[data-layout="glass"] .fx-noise { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
html[data-layout="glass"] .stream, html[data-layout="glass"] .response { position: relative; z-index: 1; }
html[data-layout="glass"] .response { background: #030b04d9; }
/* letters that shiver for a moment (motion only; none with reduced motion) */
.fx-shiver { display: inline-block; animation: fx-shiver 150ms steps(2, end) var(--d, 0ms) infinite; }
@keyframes fx-shiver { 0% { transform: translate(.6px, -.4px); } 50% { transform: translate(-.6px, .5px); } 100% { transform: translate(.3px, .2px); } }
.reduce-motion .fx-shiver { animation: none; }
/* the standby splash: the room CRT's own picture, its menu live */
.crt-splash { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: #020803; }
/* the tube's own shape (its glass, 1.42 : 1): the whole page on the CRT, letterboxed on a portrait reader */
.crt-splash-frame { position: relative; width: min(100vw, calc(100vh * 1.42)); aspect-ratio: 1.42 / 1; }
/* on the tube (landscape) the picture fills the glass exactly as the room's texture fills its quad */
@media (min-aspect-ratio: 6/5) { .crt-splash-frame { width: 100vw; height: 100vh; aspect-ratio: auto; } }
.crt-splash canvas { display: block; width: 100%; height: 100%; }
.crt-splash-menu button {
  position: absolute; left: 26%; width: 50%; height: 7.2%; min-height: 0; padding: 0; color: transparent; font-size: 1px;
  background: transparent; border: 0; cursor: pointer; overflow: hidden;
}
.crt-splash-menu button:focus-visible { outline: 2px dashed #cfe98acc; outline-offset: 2px; }
html[data-splash="on"] #station { visibility: hidden; }
/* portrait (the phone's reader and CRT view) */
@media (max-aspect-ratio: 9/10) {
  html[data-layout="glass"] { --band: max(4.5vw, 14px); }
  html[data-layout="glass"] .screen-header h1 { font-size: 14px; }
  html[data-layout="glass"] .screen-header nav { width: auto; gap: 0 10px; font-size: 12px; }
  html[data-layout="glass"] .screen-header h1 { flex: 1 1 auto; }
  html[data-layout="glass"] .screen-header h1 span { display: none; }
  html[data-layout="glass"] .hud { flex-wrap: nowrap; }
  html[data-layout="glass"] .hud-note { flex-basis: auto; text-align: right; }
  html[data-layout="glass"] .message p { font-size: 18px; line-height: 1.58; }
  html[data-layout="glass"] .message[data-speaker="you"] p { font-size: 17px; }
  html[data-layout="glass"] .choice { font-size: 16px; }
  html[data-layout="glass"] .hud { padding-block: 4px; font-size: 11px; }
  html[data-layout="glass"] .turn-status { font-size: 13px; gap: 6px; min-height: 30px; margin-bottom: 6px; padding-left: 8px; align-items: flex-start; }
  html[data-layout="glass"] .ts-what { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  html[data-layout="glass"] .ts-input { font-size: 10px; padding: 0 5px; letter-spacing: .1em; }
  html[data-layout="glass"] .speaker { font-size: 11px; letter-spacing: .1em; }
  html[data-layout="glass"] .message[data-speaker="you"] { max-width: 90%; padding-right: 12px; }
  html[data-layout="glass"] .message:is([data-speaker="operation"], [data-speaker="action"]) { margin-left: 8px; }
  html[data-layout="glass"] .hud-note { font-size: 11px; }
  html[data-layout="glass"] .esc-hint { display: none; }
  html[data-layout="glass"][data-room-strip="on"] footer { padding-block: 3px; font-size: 11px; line-height: 1.35; }
  html[data-layout="glass"][data-room-strip="on"] .response { max-height: 58%; }
}

/* ---------------------------------------------------------------- pass 15: the storyboard screen (locust-stage.js)
   What the Threat Containment CRT shows, in the Vault's glass layout and standalone: the ASCII creature is the main
   presence (a canvas behind everything), Locust speaks one caption at a time in Locust yellow under a boxed LOCUST
   label, CTRL only in cobalt (#1F5FD0) bands and chips with pale paper text, the chapter label top right, a short
   reply list (the selected reply on a solid yellow bar, exits in red), the four-segment hold bar. Nothing scrolls: the
   transcript stays in the page as the hidden record. ?ui=transcript (QA) or ?layout=dual keeps the old terminal. */
html[data-ui="stage"] {
  --st-yellow: #f3c94e; --st-amber: #e3a03a; --st-paper: #ede6d4; --st-cobalt: #1f5fd0; --st-cobalt-ink: #82a9ff;
  --st-red: #ef5d45; --st-dim: #a99f86;
  --band: max(6.5vw, 22px);
  --u: min(1vw, 1.45vh);
  --st-cap: clamp(16px, calc(var(--u) * 2.15), 30px);
  --st-list: clamp(15px, calc(var(--u) * 1.8), 25px);
  --st-small: clamp(11px, calc(var(--u) * 1.05), 15px);
}
html[data-ui="stage"] body { background: #050906; }
html[data-ui="stage"] #station > :not(.stage) { display: none !important; }
html[data-ui="stage"] .screen { background: transparent; text-shadow: none; }
html[data-ui="stage"]:not([data-layout="glass"]) .screen::after { opacity: .1; }
.stage {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; display: flex; flex-direction: column;
  padding: max(2.6vh, 12px) var(--band) max(1.4vh, 8px); color: var(--st-paper); font-family: var(--font);
}
.stage > :not(.stage-canvas, .stage-main) { flex: none; }
.stage-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.stage > :not(.stage-canvas) { position: relative; z-index: 1; }
.stage [hidden] { display: none !important; }
.stage-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 2em; font-size: var(--st-small); letter-spacing: .12em; }
.stage-tag { padding: .28em .75em; border: 1.5px solid var(--st-cobalt); color: var(--st-cobalt-ink); background: #04081acc; white-space: nowrap; }
.stage-chapter { color: var(--st-yellow); text-align: right; white-space: nowrap; }
.stage-echo { margin: .5em auto 0; max-width: min(46em, 100%); text-align: center; font-size: calc(var(--st-cap) * .72); line-height: 1.45; color: var(--st-paper); }
.stage-echo-who { color: var(--st-yellow); letter-spacing: .08em; }
.stage-echo .rw-del { color: var(--st-dim); }
.stage-echo .rw-del.struck { text-decoration: line-through 2px var(--st-red); color: #b98262; }
.stage-echo .rw-ins { color: var(--st-yellow); background: none; text-decoration: underline 2px var(--st-yellow); text-underline-offset: .28em; }
.stage-echo .rw-decay { color: var(--st-yellow); opacity: .45; }
.stage-main { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: clamp(8px, 1.5vh, 18px); min-height: 0; padding-bottom: clamp(4px, 1.6vh, 20px); }
.stage-act { margin: 0; padding: .2em .8em; border: 1px dashed #e3a03a88; color: var(--st-amber); background: #0a0c07cc; font-size: var(--st-small); letter-spacing: .05em; max-width: 100%; }
.stage-caption { display: flex; flex-direction: column; align-items: center; gap: .55em; max-width: min(46ch, 100%); text-align: center; }
.stage-label { padding: .2em .85em; border: 1.5px solid var(--st-yellow); color: var(--st-yellow); background: #0b0d07d9; font-size: var(--st-small); letter-spacing: .14em; }
.stage-line { margin: 0; font-size: var(--st-cap); line-height: 1.42; color: var(--st-yellow); text-shadow: 0 0 12px #f3c94e3d; text-wrap: balance; overflow-wrap: anywhere; }
.stage-rest { opacity: 0; }
.stage-caption[data-who="system"] .stage-line, .stage-caption[data-who="next"] .stage-line { color: var(--st-paper); text-shadow: 0 0 10px #ede6d42a; }
.stage-caption[data-who="system"] { max-width: min(58ch, 100%); }
.stage-caption[data-who="system"] .stage-label { border-color: #ede6d466; color: var(--st-paper); }
.stage-caption[data-who="system"] .stage-line { font-size: calc(var(--st-cap) * .74); white-space: pre-line; letter-spacing: .02em; }
.stage-caption[data-who="art"] .stage-line { font-size: calc(var(--st-cap) * .75); white-space: pre; color: var(--st-amber); }
.stage-band {
  align-self: stretch; margin-inline: calc(-1 * var(--band)); padding: .75em var(--band); background: var(--st-cobalt); color: var(--st-paper);
  text-align: center; box-shadow: 0 0 24px #1f5fd055;
}
.stage-band-title { display: block; font-weight: 500; font-size: calc(var(--st-cap) * .74); letter-spacing: .1em; }
.stage-band-text { margin: .35em auto 0; max-width: 52ch; font-size: calc(var(--st-cap) * .82); line-height: 1.42; text-wrap: balance; }
.stage-segs { display: flex; justify-content: center; gap: clamp(6px, 1vw, 14px); margin-top: .7em; }
.stage-segs span {
  --fill: 0; width: clamp(44px, 8vw, 120px); height: clamp(12px, 1.8vh, 20px); border: 1.5px solid var(--st-paper);
  background: linear-gradient(90deg, var(--st-paper) calc(var(--fill) * 100%), #0b1e4a calc(var(--fill) * 100%));
}
.stage-card { width: min(44em, 100%); margin: 0; padding: .5em .95em .65em; border: 1px solid #e3a03a99; background: #090d07eb; text-align: left; font-size: calc(var(--st-cap) * .66); }
.stage-card-title { margin-bottom: .45em; padding-bottom: .25em; border-bottom: 1px solid #e3a03a55; color: var(--st-amber); font-size: var(--st-small); letter-spacing: .14em; }
.stage-card-body { --rows: 6; max-height: calc(var(--rows) * 1.5em); overflow: hidden; white-space: pre-line; line-height: 1.5; color: var(--st-paper); }
.stage-card-body ol { margin: 0; padding-left: 1.4em; white-space: normal; }
.stage-card-page { display: block; text-align: right; color: var(--st-dim); font-size: var(--st-small); }
.stage-card-page:empty { display: none; }
/* Locust hid these words: a struck-through redaction (the bars, and a red line through them) */
.stage-card .redaction[data-state="redacted"] .redaction-ink, .stage-card .redaction:not([data-state]) .redaction-ink {
  color: #030403; background: #030403; text-decoration: line-through 2px var(--st-red); text-shadow: none; box-shadow: 0 0 0 1px #e3a03a44;
}
.stage-card .redaction[data-state="restored"] .redaction-ink { color: var(--st-yellow); background: none; box-shadow: 0 2px 0 -1px var(--st-yellow); }
.stage-card .tool-attribution { display: block; color: var(--st-dim); font-size: .85em; }
.stage-turn { margin: 0; padding: .22em .95em; border: 1.5px solid var(--st-yellow); color: var(--st-yellow); background: #0b0d07d9; font-size: var(--st-small); letter-spacing: .14em; }
/* (pass 16) YOUR TURN stands clear: space above it (Locust's caption, its question) and below it (its aside, the list) */
.stage-turn { margin-block: clamp(12px, 3vh, 34px) clamp(4px, 1vh, 12px); }
html[data-ui="stage"] .stage .tool-aside { margin-top: clamp(2px, .6vh, 8px); }
.stage-slot { display: flex; flex-direction: column; align-items: center; width: 100%; }
/* the terminal's reply panel, moved into the stage */
html[data-ui="stage"] .stage .response {
  width: min(40em, 100%); max-height: none; overflow: visible; padding: 0; border: 0; background: none; display: flex; flex-direction: column; align-items: stretch; gap: .45em;
}
html[data-ui="stage"] .stage .response > .turn-status,
html[data-ui="stage"] .stage .response-heading > :not(.tool-revert-slot, .tool-caption) { display: none !important; }
html[data-ui="stage"] .stage .response-heading { display: flex; justify-content: center; margin: 0; order: 4; }
html[data-ui="stage"] .stage .tool-caption { order: 9; color: var(--st-dim); font-size: var(--st-small); }
/* (the sound captions name sounds; on the storyboard screen they show only with audio on) */
html[data-ui="stage"]:not([data-audio="on"]) .stage .tool-caption { display: none; }
html[data-ui="stage"] .stage .command-line { display: none; }
html[data-ui="stage"][data-beat="08"] .stage .command-line {
  display: flex; order: 5; margin: .2em 0 0; padding-top: .45em; border-top: 1px solid #e3a03a55; font-size: calc(var(--st-list) * .9); color: var(--st-yellow); white-space: normal; overflow: visible;
}
html[data-ui="stage"] .stage .prompt-host, html[data-ui="stage"] .stage .prompt-path { color: var(--st-paper); }
html[data-ui="stage"] .stage .choices { order: 3; display: flex; flex-direction: column; gap: .2em; max-width: none; }
html[data-ui="stage"] .stage .choice {
  display: flex; align-items: center; gap: .6em; min-height: 0; margin: 0; padding: .3em .7em; border: 0; border-radius: 0; background: transparent;
  color: var(--st-yellow); font-size: var(--st-list); line-height: 1.3; text-align: left; box-shadow: none;
}
html[data-ui="stage"] .stage .choice + .choice { margin-top: 0; }
html[data-ui="stage"] .stage .choice::before { content: '▶'; flex: none; font-size: .7em; visibility: hidden; }
html[data-ui="stage"] .stage .choice:is([data-selected], :focus-visible) { background: var(--st-yellow); color: #17120a; outline: none; }
html[data-ui="stage"] .stage .choice:is([data-selected], :focus-visible)::before { visibility: visible; }
html[data-ui="stage"] .stage .choice:hover:not([data-selected]) { background: #f3c94e1f; color: var(--st-yellow); }
html[data-ui="stage"] .stage .choice[data-exit] { color: var(--st-red); }
/* (beats the terminal's own unselected-reply colour, which is more specific) */
html[data-ui="stage"] .stage .response .choice:not(:hover):not(:focus-visible):not([data-selected]) { color: #f1dc95; background: transparent; }
html[data-ui="stage"] .stage .response .choice[data-exit]:not(:hover):not(:focus-visible):not([data-selected]) { color: var(--st-red); }
html[data-ui="stage"] .stage .choice[data-exit]:is([data-selected], :focus-visible) { background: var(--st-red); color: #1b0a06; }
html[data-ui="stage"] .stage :is(.choice-number, .choice-arrow) { display: none; }
html[data-ui="stage"] .stage .choice-label { flex: 1; }
html[data-ui="stage"] .stage .predict-tag { padding-left: 1em; font-size: var(--st-small); color: inherit; opacity: .8; }
html[data-ui="stage"] .stage .choice:has(.choice-label[data-fx])::after { content: none; }
/* yes or no: the closed question's two answers side by side, each under its key */
html[data-ui="stage"] .stage .choices[data-yesno] { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(10px, 2vw, 28px); row-gap: .3em; }
html[data-ui="stage"] .stage .choices[data-yesno] .choice { grid-column: 1 / -1; order: 2; }
html[data-ui="stage"] .stage .choices[data-yesno] .choice[data-key] { grid-column: auto; order: 1; flex-direction: column; justify-content: flex-start; gap: .45em; padding: .5em .6em .55em; text-align: center; font-size: calc(var(--st-list) * .82); }
/* (pass 16) YES always left of NO, under the console's YES and NO keys, whatever order the story lists them in; the
   selection steps through them in the same order (locust-stage.js orderItems) */
html[data-ui="stage"] .stage .choices[data-yesno] .choice[data-key="YES"] { order: 0; }
html[data-ui="stage"] .stage .choices[data-yesno] .choice[data-key]::before {
  content: attr(data-key); visibility: visible; font-size: calc(var(--st-list) * 1.25); padding: .15em 1.3em; border: 1.5px solid currentColor; letter-spacing: .12em;
}
/* Locust's aside beside the list (it chose for you) and its revert offer */
html[data-ui="stage"] .stage .tool-aside { order: 2; align-self: flex-end; max-width: min(28em, 100%); margin: 0; color: var(--st-yellow); font-size: calc(var(--st-list) * .82); line-height: 1.45; text-align: left; }
html[data-ui="stage"] .stage .tool-aside strong { margin-right: .5em; padding: .1em .65em; border: 1.5px solid currentColor; background: #0b0d07d9; font-weight: 400; font-size: .78em; letter-spacing: .14em; }
html[data-ui="stage"] .stage .tool-aside strong::before { content: none; }
html[data-ui="stage"] .stage .tool-revert-slot { display: flex; justify-content: center; }
html[data-ui="stage"] .stage .rw-revert {
  margin: 0; min-height: 0; padding: .3em 1em; border: 1.5px solid var(--st-yellow); color: var(--st-yellow); background: #0b0d07d9;
  font-size: calc(var(--st-list) * .85); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
}
html[data-ui="stage"] .stage .rw-revert::before { content: '[ '; }
html[data-ui="stage"] .stage .rw-revert::after { content: ' ]'; }
html[data-ui="stage"] .stage .rw-revert:is([data-selected], :focus-visible, :hover) { background: var(--st-yellow); color: #17120a; outline: none; }
/* the cutoff: the cobalt band and its four segments are the stage's; the press target and the timed hold stay */
html[data-ui="stage"] .stage #severLayer { order: 6; display: flex; flex-direction: column; align-items: center; gap: .4em; }
html[data-ui="stage"] .stage #severLayer[hidden] { display: none !important; }
html[data-ui="stage"] .stage .sever-progress { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
html[data-ui="stage"] .stage .sever-button { width: auto; max-width: none; min-height: 0; padding: .35em 1.2em; border: 1.5px solid var(--st-paper); color: var(--st-paper); background: #0b0d07d9; font-size: var(--st-small); letter-spacing: .12em; text-transform: uppercase; }
html[data-ui="stage"] .stage .sever-button:active { background: var(--st-paper); color: #10121a; }
html[data-ui="stage"] .stage .timed-sever { min-height: 0; color: var(--st-dim); font-size: var(--st-small); text-align: center; }
/* in the room the console's EJECT is the cutoff; the timed hold stays for anyone who cannot hold a button */
html[data-ui="stage"][data-embed="room"] .stage .sever-button { display: none; }
html[data-ui="stage"] .stage .cutoff-appeal { display: none; }
.stage-hint { margin: 0; padding-top: .55em; border-top: 1px solid #e3a03a40; min-height: 1.5em; text-align: center; color: var(--st-paper); font-size: var(--st-small); letter-spacing: .1em; }
.stage-hint:empty { border-top-color: transparent; }
.stage-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 1.6em; padding-top: .3em; font-size: 11px; letter-spacing: .08em; color: var(--st-dim); }
.stage-foot :is(button, summary) { min-height: 26px; padding: 0; color: var(--st-dim); font-size: 11px; letter-spacing: .08em; background: none; border: 0; }
.stage-foot :is(button, summary):hover, .stage-foot :is(button, summary):focus-visible { color: var(--st-paper); }
.stage-foot #sealExit { min-height: 26px; padding: 0 .8em; border: 1px solid #ef5d4566; color: #e6a092; font-size: 11px; }
.stage-foot :is(#skipTurn, #replayTurn) { font-size: 11px; color: var(--st-dim); text-decoration: none; letter-spacing: .08em; }
.stage-foot :is(#skipTurn, #replayTurn)::before { content: '['; padding-right: .4em; }
.stage-foot :is(#skipTurn, #replayTurn)::after { content: ']'; padding-left: .4em; }
.stage-foot #sealExit:disabled { border-color: #a99f8640; color: #a99f8680; }
.stage-foot #settings { position: relative; }
.stage-foot .settings-panel { top: auto; bottom: calc(100% + 6px); right: auto; left: 50%; transform: translateX(-50%); background: #0b0e0a; border-color: #e3a03a66; color: var(--st-paper); font-size: 13px; text-align: left; }
.stage-foot .esc-hint { font-size: 11px; color: var(--st-dim); }
/* beats: where the words sit */
/* (pass 16) when the glass's words do not fit under its top bar they give way in steps (locust-stage.js tightLevel) */
.stage[data-tight] .stage-caption[data-who="locust"] .stage-label, .stage[data-tight] .stage-act { display: none; }
.stage[data-tight] .stage-line { font-size: calc(var(--st-cap) * .82); }
.stage[data-tight] .stage-turn { margin-block: clamp(4px, 1.2vh, 14px) clamp(2px, .6vh, 8px); }
html[data-turn="you"] .stage:is([data-tight="2"], [data-tight="3"]) .stage-caption { display: none; }
.stage:is([data-tight="2"], [data-tight="3"]) .stage-card-body { --rows: 3; }
html[data-ui="stage"] .stage[data-tight="3"] .choice { padding-block: .18em; line-height: 1.2; font-size: calc(var(--st-list) * .9); }
html[data-ui="stage"] .stage[data-tight="3"] .tool-aside { font-size: calc(var(--st-list) * .74); }
/* while Locust has the channel its caption sits under the creature, a little above the bottom of the glass; the maw
   close-ups (06, 14) hold it at the middle, in its jaws */
html[data-ui="stage"]:not([data-turn="you"]) .stage-main { padding-bottom: clamp(16px, 13vh, 150px); }
html[data-ui="stage"]:is([data-beat="06"], [data-beat="14"]):not([data-turn="you"]) .stage-main { justify-content: center; padding-top: 18vh; padding-bottom: 0; }
html[data-ui="stage"][data-beat="13"] .stage-main { justify-content: center; }
html[data-ui="stage"][data-beat="16"] .stage-band { order: -1; margin-bottom: auto; }
html[data-ui="stage"][data-beat="12"] .stage-tag { color: #9bb9ff; animation: st-holding 1.8s steps(2, end) infinite; }
@keyframes st-holding { 50% { text-shadow: 2px 0 0 #ef5d4566, -2px 0 0 #82a9ff66; } }
html[data-ui="stage"][data-beat="18"] .stage-tag { border-color: transparent; background: none; color: var(--st-yellow); padding-inline: 0; }
/* the epilogue: CTRL's acknowledgement as a small cobalt chip under the next visitor's words */
html[data-ui="stage"][data-beat="18"] .stage-band { order: 3; align-self: center; margin: 0; padding: .3em .9em; box-shadow: none; }
html[data-ui="stage"][data-beat="18"] .stage-band-title { display: none; }
html[data-ui="stage"][data-beat="18"] .stage-band-text { margin: 0; font-size: var(--st-small); letter-spacing: .08em; text-transform: uppercase; }
html[data-ui="stage"][data-beat="18"] .stage-caption { order: 2; }
html[data-ui="stage"][data-beat="18"] .stage-slot { order: 4; }
html[data-ui="stage"][data-beat="17"] .stage-caption[data-who="locust"] .stage-line { color: var(--st-paper); }
html[data-ui="stage"][data-viewing="room"] .stage-foot { opacity: .6; }
.reduce-motion .stage-tag { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .stage-tag { animation: none !important; } }
/* portrait: the phone */
@media (max-aspect-ratio: 9/10) {
  html[data-ui="stage"] { --band: max(5vw, 14px); --u: min(1vw, 1.1vh); --st-cap: clamp(17px, 4.6vw, 24px); --st-list: clamp(15px, 4.1vw, 21px); --st-small: clamp(11px, 2.9vw, 14px); }
  .stage { padding-top: max(2vh, 10px); }
  .stage-card-body { --rows: 7; }
  html[data-ui="stage"] .stage .tool-aside { align-self: stretch; }
  html[data-ui="stage"] .stage .choice { padding-block: .4em; }
  .stage-foot { gap: 0 1em; }
  .stage-foot .esc-hint { display: none; }
}
/* a small landscape screen (the phone's in-room CRT) */
@media (max-height: 360px) and (min-aspect-ratio: 5/4) {
  .stage { padding: 6px var(--band) 4px; }
  .stage-foot { display: none; }
  .stage-card-body { --rows: 3; }
}