/* A facility terminal: cold near-black panels, cut corners, one signal colour borrowed from the exit
   signs. Labels are narrow technical capitals; Korean text stays plain and small. Nothing warm, nothing
   friendly: the interface is the building's, and the building measures. */
/* The terminal's own typeface: a subset of D2Coding (SIL OFL 1.1, see fonts/LICENSE.txt), only the
   characters the game uses. If the story text changes, subset it again so new characters are in it. */
@font-face { font-family: 'BoundaryMono'; src: url('fonts/BoundaryMono.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'BoundaryMono'; src: url('fonts/BoundaryMonoBold.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
:root {
  --bg: #0b0d0e;
  --panel: rgba(12, 15, 16, .94);
  --panel-2: #141819;
  --ink: #e4e8e5;
  --dim: #858d89;
  --faint: #4a524f;
  --line: rgba(228, 232, 229, .13);
  --signal: #35d873;
  /* Fonts every platform already has: no download. Windows, then Apple, then Android. */
  --tech: 'Bahnschrift', 'DIN Alternate', 'D-DIN', 'Arial Narrow', 'Roboto Condensed', 'sans-serif-condensed', sans-serif;
  --mono: 'BoundaryMono', 'D2Coding', 'Cascadia Mono', Consolas, 'SF Mono', Menlo, 'Roboto Mono', 'Noto Sans Mono', ui-monospace, monospace;
  --text: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Noto Sans CJK KR', system-ui, sans-serif;
  color-scheme: dark;
  font-family: var(--text);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 0; }
button:focus-visible, input:focus-visible, canvas:focus-visible { outline: 1px solid var(--signal); outline-offset: 2px; }
[hidden] { display: none !important; }
kbd { display: inline-block; min-width: 18px; padding: 1px 5px; font: 600 10px/13px var(--tech); letter-spacing: .5px; text-align: center; color: var(--ink); border: 1px solid var(--faint); }

canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* Corner brackets, the way a recogniser outlines what it has found. */
.term, .slot, .code-field, .gate-inner, .aim.ready { --c: var(--faint); --cl: 10px;
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-repeat: no-repeat;
  background-size: var(--cl) 1px, 1px var(--cl), var(--cl) 1px, 1px var(--cl), var(--cl) 1px, 1px var(--cl), var(--cl) 1px, 1px var(--cl);
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
}

/* ---- In the space. */
.hud { position: fixed; top: 16px; left: 18px; display: flex; flex-direction: column; gap: 3px; font: 500 11px/1.2 var(--tech); letter-spacing: 1.5px; color: #00000094; mix-blend-mode: multiply; pointer-events: none; user-select: none; }
.hint { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); margin: 0; font-size: 10.5px; color: #00000099; mix-blend-mode: multiply; pointer-events: none; transition: opacity 1.5s; white-space: nowrap; }
.hint.fade { opacity: 0; }
@media (max-width: 600px) { .hint { bottom: 64px; width: calc(100% - 32px); white-space: normal; text-align: center; } .bag-btn kbd { display: none; } }
.aim { position: fixed; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; background-color: #00000059; mix-blend-mode: multiply; pointer-events: none; }
.aim.ready { width: 12px; height: 12px; margin: -6px 0 0 -6px; background-color: transparent; --c: #000000a0; --cl: 4px; }
.hand { position: fixed; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 8px; font: 500 12px var(--tech); letter-spacing: 1px; color: #000000a6; mix-blend-mode: multiply; pointer-events: none; user-select: none; }
.hand b { font-size: 15px; font-weight: 400; }
.hand.empty { animation: hand-empty .5s steps(4, end); }
@keyframes hand-empty { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
.icon { width: 16px; height: 16px; }
.chip { position: fixed; bottom: 14px; display: flex; align-items: center; gap: 8px; padding: 7px 10px; font: 600 11px var(--tech); letter-spacing: 1.5px; background: #0000000f; border: 1px solid #00000033; color: #000000b0; }
.chip span { font-family: var(--text); font-weight: 400; letter-spacing: 0; }
.chip kbd { color: #000000a0; border-color: #00000033; }
.bag-btn { left: 16px; }
.pause-btn { right: 16px; top: 14px; bottom: auto; padding: 9px 12px; }
.wave-btn { right: 16px; bottom: 110px; padding: 9px 12px; }
#hudPeople { color: #1f8a4a; }
.dark-place #hudPeople { color: #35d873; }
.mark-btn { right: 16px; bottom: 48px; padding: 14px 18px; }
.dark-place .hud, .dark-place .hint, .dark-place .hand, .dark-place .chip { color: #ffffff99; mix-blend-mode: screen; }
.dark-place .chip { background: #ffffff0d; border-color: #ffffff2e; }
.dark-place .chip kbd { color: #ffffffa0; border-color: #ffffff2e; }
.dark-place .aim { background-color: #ffffff66; mix-blend-mode: screen; }
.dark-place .aim.ready { background-color: transparent; --c: #ffffffa0; }

.hud.vanish { animation: hud-vanish 1.1s steps(1, end) forwards; }
@keyframes hud-vanish {
  0% { opacity: 1; transform: none; } 10% { opacity: .2; transform: translateX(3px); } 18% { opacity: 1; transform: translateX(-5px) skewX(-12deg); }
  30% { opacity: .6; transform: translateX(1px); letter-spacing: 4px; } 42% { opacity: 0; } 50% { opacity: 1; transform: translateX(-2px) scaleY(.4); }
  64% { opacity: .3; transform: translateX(6px); } 76% { opacity: .8; transform: translateX(-1px) skewX(20deg); } 88% { opacity: .1; } 100% { opacity: 0; transform: translateX(0) scaleY(.1); }
}
@media (prefers-reduced-motion: reduce) { .hud.vanish { animation: hud-fade .8s linear forwards; } }
@keyframes hud-fade { to { opacity: 0; } }

/* ---- The building's shell. The bag and the records are a terminal session: tabs are commands, lists
   are listings, details are the output of the command above them, records stream out a token at a
   time and end in <eos>. Monospace for the machine, plain Korean for what it says. */
.term, .guide, .doc { --text: var(--mono); }
.term { position: fixed; z-index: 4; background-color: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(0, 0, 0, .55); backdrop-filter: blur(6px); font-family: var(--mono); }
.term::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .18) 2px 3px); }
.term-head { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #0e1311; }
.term-id { font: 600 11px var(--mono); letter-spacing: .5px; color: var(--signal); }
.term-title { font: 400 12px var(--mono); color: var(--dim); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.term-title b { color: var(--ink); font-weight: 400; }
.term-title::after { content: '▍'; margin-left: 2px; color: var(--signal); animation: caret 1.1s steps(2, end) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.term-head .term-close + .term-close { margin-left: 6px; }
.term-close { padding: 2px 6px; font: 600 10px var(--mono); background: none; border: 1px solid var(--faint); color: var(--dim); }
.term-foot { display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px; border-top: 1px solid var(--line); font: 400 10.5px var(--mono); color: var(--ink); background: #16301f; }
@media (pointer: coarse) { .term-foot { display: none; } }
.term-foot span:first-child::before { content: '-- READ -- '; color: var(--signal); font-weight: 600; }

.bag { left: 50%; bottom: 60px; transform: translateX(-50%); width: min(740px, calc(100% - 24px)); }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 8px 10px; font: 400 12px var(--mono); background: none; border: 0; border-right: 1px solid var(--line); color: var(--dim); white-space: nowrap; }
.tabs button kbd { border: 0; padding: 0; min-width: 0; font: 600 11px var(--mono); color: var(--faint); }
.tabs button kbd::after { content: ':'; }
.tabs button code { font: inherit; }
.tabs button span { font: 400 11px var(--text); color: var(--faint); }
.tabs button i { font: 400 10.5px var(--mono); font-style: normal; color: var(--faint); }
.tabs button[aria-selected=true] { color: var(--ink); background: #121a14; box-shadow: inset 0 -2px 0 var(--signal); }
.tabs button[aria-selected=true] code::before { content: '$ '; color: var(--signal); }
.tabs button[aria-selected=true] kbd, .tabs button[aria-selected=true] i { color: var(--signal); }
.tab-role { margin: 0; padding: 7px 12px; font: 400 11.5px var(--text); color: var(--dim); border-bottom: 1px solid var(--line); }
.tab-role::before { content: '# '; font-family: var(--mono); color: var(--faint); }
.bag-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; padding: 12px; min-height: 236px; }
.bag-list { display: flex; flex-direction: column; max-height: 256px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--faint) transparent; }
.bag-list.items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; align-content: start; }
.bag-detail { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding-left: 14px; border-left: 1px dashed var(--line); }
.bag-detail > .cmd, .cmd { margin: 0; font: 400 11.5px var(--mono); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd::before { content: '$ '; color: var(--signal); }
.bag-detail > b { font: 600 14px var(--text); }
.bag-detail > p { margin: 0; font: 400 12px/1.75 var(--text); color: var(--dim); word-break: keep-all; }
.bag-detail .after { color: var(--ink); padding: 6px 8px; background: #0f1d14; border-left: 2px solid var(--signal); }
.after-k { display: block; margin-bottom: 2px; font: 600 10.5px var(--mono); color: var(--signal); }
.after-k::before { content: '+ '; }
.item-k { font: 500 10px var(--mono); letter-spacing: .5px; color: var(--faint); }
.needs { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); }
.need { display: grid; grid-template-columns: 34px 44px 1fr; gap: 6px; align-items: baseline; padding: 4px 6px; font-size: 12px; color: var(--dim); }
.need span:first-child { font: 600 11px var(--mono); color: var(--faint); }
.need span:nth-child(2), .need span:nth-child(3) { font-family: var(--text); font-size: 11.5px; }
.need.ok { color: var(--ink); }
.need.ok span:first-child { color: var(--signal); }
.hint-line { margin: 4px 0 0; padding: 6px 8px; font: 400 11.5px/1.7 var(--mono); color: var(--ink); background: #0f1d14; border-left: 2px solid var(--faint); }
.hint-line::before { content: '? '; color: var(--signal); }
.empty { margin: 8px 0; font: 400 12px var(--text); color: var(--faint); }
.empty::before { content: '> '; font-family: var(--mono); }
.slot { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; background-color: #0e1211; border: 1px solid var(--line); color: var(--ink); --cl: 7px; }
.slot .icon { width: 22px; height: 22px; }
.slot small { font: 400 10px var(--text); color: var(--dim); max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-n { position: absolute; top: 3px; left: 5px; font: 500 9px var(--mono); font-style: normal; color: var(--faint); }
.slot:hover:not(:disabled) { border-color: var(--faint); }
.slot[aria-pressed=true] { border-color: var(--signal); background-color: #122017; }
.slot[aria-pressed=true] .slot-n { color: var(--signal); }
.slot:disabled { cursor: default; color: var(--faint); background-color: transparent; border-style: dashed; border-color: rgba(228, 232, 229, .07); }
.slot:disabled .icon { opacity: .3; }
.shapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.shapes button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 0 4px; font-size: 16px; background: #0e1211; border: 1px solid var(--line); color: var(--dim); }
.shapes button small { font: 500 9px var(--mono); color: var(--faint); }
.shapes button[aria-pressed=true] { color: var(--bg); background: var(--signal); border-color: var(--signal); }
.shapes button[aria-pressed=true] small { color: #0b0d0e99; }
/* A listing row: index, name, state, confidence. */
.note-row { position: relative; display: grid; grid-template-columns: 34px 1fr auto auto; align-items: baseline; gap: 10px; text-align: left; padding: 5px 4px; font: 400 12px var(--mono); background: none; border: 0; color: var(--ink); }
.note-row span:nth-child(2) { font-family: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-row .state { font: 400 10.5px var(--text); color: var(--dim); }
.note-row span:first-child, .note-row span:last-child { font: 400 11px var(--mono); color: var(--dim); }
.note-row.locked { color: var(--faint); }
.note-row.locked span:nth-child(2) { font-family: var(--mono); letter-spacing: 1px; }
.note-row.hidden-note span:first-child { color: var(--signal); }
.note-row:hover, .note-row:focus-visible { background: #16301f; }
.note-row:hover span:first-child::before { content: '>'; position: absolute; margin-left: -9px; color: var(--signal); }
@media (max-width: 600px) {
  .bag-body { grid-template-columns: 1fr; } .bag-detail { padding-left: 0; border-left: 0; border-top: 1px dashed var(--line); padding-top: 10px; }
  .tabs { display: grid; grid-template-columns: repeat(4, 1fr); }
  .tabs button { flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px; font-size: 10.5px; white-space: normal; }
  .tabs button kbd { display: none; } .tabs button span { display: block; font-size: 11px; color: inherit; }
  .tabs button[aria-selected=true] code::before { content: ''; }
}

/* Small pickers: the chalk's list of buildings, the desk terminal's questions. */
.pick { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100% - 32px)); z-index: 5; }
.pick > .cmd { padding: 10px 14px 4px; }
.pick-list { display: flex; flex-direction: column; padding: 4px 8px 10px; }
.pick-list button { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: baseline; text-align: left; padding: 8px 8px; font: 400 13px var(--mono); background: none; border: 0; color: var(--ink); }
.pick-list button:hover, .pick-list button:focus-visible { background: #16301f; }
.pick-list button span:first-child { color: var(--signal); }
.pick-list button span:last-child { color: var(--dim); font-size: 11px; }
.pick-list .empty { padding: 6px 8px; }
.quiz-q { margin: 0; padding: 6px 14px 4px; font: 400 15px/1.8 var(--mono); color: var(--ink); word-break: keep-all; }
.quiz-log { margin: 0; padding: 0 14px 12px; min-height: 1.6em; font: 400 11.5px var(--mono); color: var(--dim); }
.quiz-log.ok { color: var(--signal); }
.quiz-log.bad { color: #ff8a7a; }
.chalk-k { color: #f3f1e6; }
.dial-row { display: flex; gap: 8px; padding: 6px 14px 8px; }
.dial-row input { flex: 1; min-width: 0; padding: 8px 10px; font: 500 22px var(--mono); letter-spacing: 8px; background: #070909; color: var(--ink); border: 1px solid var(--line); outline: none; }
.dial-row .enter { padding: 8px 14px; }

/* A record: the command that printed it, its tag and confidence, then the text as it streams out. */
.note { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100% - 32px)); padding: 14px 18px 12px; }
.note-cmd { margin: 0 0 8px; font: 400 11.5px var(--mono); color: var(--dim); }
.note-cmd::before { content: '$ '; color: var(--signal); }
.note-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font: 400 11px var(--mono); color: var(--dim); }
.note-meta span:first-child { color: var(--signal); font-weight: 600; }
.note-meta span:nth-child(2) { font-family: var(--text); color: var(--ink); }
.note-bar { margin: 6px 0 12px; font: 400 11px var(--mono); color: var(--signal); letter-spacing: 1px; white-space: nowrap; overflow: hidden; }
.note.hidden-note { border-color: rgba(53, 216, 115, .4); }
.note-text { margin: 0; font: 400 15px/1.95 var(--text); word-break: keep-all; color: var(--ink); }
.tok { transition: opacity .12s; }
.tok.pending { opacity: 0; }
.tok.low { color: var(--dim); }
.note-text.streaming::after { content: '▍'; color: var(--signal); animation: caret .7s steps(2, end) infinite; }
.redact { color: transparent; background: var(--ink); user-select: none; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 1px; }
.unredacted { color: var(--signal); }
.note-eos { margin: 12px 0 0; font: 400 10.5px var(--mono); color: var(--faint); }
.note-close { display: flex; align-items: center; gap: 8px; margin: 8px 0 0 auto; padding: 4px 0; font: 400 11px var(--mono); background: none; border: 0; color: var(--dim); }

/* ---- The gate. */
.gate { position: fixed; inset: 0; display: flex; overflow-y: auto; overscroll-behavior: contain; padding: 24px 16px; background: rgba(8, 10, 11, .72); backdrop-filter: blur(10px) saturate(.4) brightness(.7); }
.gate-inner { margin: auto; width: min(380px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 14px; padding: 22px; background-color: var(--panel); border: 1px solid var(--line); --cl: 14px; --c: var(--dim); }
.logo { display: block; width: 210px; height: auto; }
.loading .logo { width: 190px; animation: live 1.6s steps(2, end) infinite; }
.gate-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); font: 600 11px var(--tech); letter-spacing: 3px; }
.live { display: flex; align-items: center; gap: 7px; font: 400 11px var(--text); letter-spacing: 0; color: var(--dim); }
.live::before { content: ''; width: 6px; height: 6px; background: var(--signal); box-shadow: 0 0 8px var(--signal); animation: live 1.8s steps(2, end) infinite; }
@keyframes live { 50% { opacity: .15; } }
.gate-eyebrow { margin: 4px 0 0; font: 600 11px var(--tech); letter-spacing: 2px; color: var(--signal); }
.gate h1 { margin: 0 0 6px; font-weight: 300; font-size: 30px; letter-spacing: -1px; }
.code-field { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background-color: #070909; border: 1px solid var(--line); --c: var(--signal); --cl: 6px; }
.code-field span { font: 600 10px var(--tech); letter-spacing: 2.5px; color: var(--dim); }
.code-field input { flex: 1; min-width: 0; background: none; border: 0; color: var(--ink); font: 500 26px/1.1 var(--tech); letter-spacing: 10px; text-transform: uppercase; outline: none; }
.enter { padding: 13px; font: 600 13px var(--tech); letter-spacing: 1px; background: var(--signal); color: #06130b; border: 0; }
.enter:hover { filter: brightness(1.08); }
.progress { margin: 2px 0 0; padding: 10px 12px; border: 1px solid var(--line); font: 11.5px/1.75 var(--tech); color: var(--ink); }
.progress p { margin: 0; display: grid; grid-template-columns: minmax(7.5em, auto) 4.5em 1fr; gap: 0 10px; align-items: baseline; }
.progress p.cmd { display: block; color: var(--dim); margin-bottom: 4px; }
.progress p.cmd::before { content: '$ '; color: var(--signal); }
.progress span { color: var(--dim); }
.progress b { font-weight: 600; text-align: right; }
.progress i { font-style: normal; color: var(--signal); letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress p.left { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--line); }
.progress p.left b { color: var(--signal); }
.gate-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; }
.calm[aria-pressed=true] { color: var(--signal); }
.logo-en { display: block; margin-top: 4px; font: 600 10px var(--mono); letter-spacing: 2px; color: var(--dim); }
.lang { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.wipe.armed { color: #ff8a7a; }
.settings { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: #070909; border: 1px solid var(--line); font-size: 11.5px; }
.settings label { display: grid; grid-template-columns: 84px 1fr 34px; align-items: center; gap: 10px; color: var(--ink); }
.settings label.check { grid-template-columns: auto 1fr; }
.settings output { font: 400 11px var(--mono); color: var(--signal); text-align: right; }
.settings input[type=range] { accent-color: var(--signal); width: 100%; }
.settings input[type=checkbox] { accent-color: var(--signal); margin: 0; }
.gate-note a { color: var(--dim); text-underline-offset: 3px; }
.gate-note a:hover { color: var(--ink); }
/* First-minute guidance: one terminal line at a time, low in the picture. */
.guide { position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 3; max-width: calc(100% - 32px); margin: 0; padding: 7px 12px; font: 400 12.5px/1.6 var(--text); color: var(--ink); background: rgba(10, 13, 12, .86); border-left: 2px solid var(--signal); word-break: keep-all; animation: line-in .6s ease-out both; }
.guide::before { content: '> '; font-family: var(--mono); color: var(--signal); }
.guide::after { content: '▍'; margin-left: 3px; color: var(--signal); animation: caret 1s steps(2, end) infinite; }
.progress { font: 400 11px var(--mono); color: var(--signal); white-space: nowrap; }
.warn { margin: 0; font-size: 10.5px; line-height: 1.7; color: var(--ink); word-break: keep-all; }
.warn::before { content: '! '; font-family: var(--mono); color: var(--signal); }
.text-btn { padding: 4px 0; font-size: 11px; background: none; border: 0; color: var(--dim); }
.text-btn:hover { color: var(--ink); }
#cardBtn { color: var(--signal); }
.sound[aria-pressed=false] { text-decoration: line-through; }
.inapp { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid rgba(53, 216, 115, .45); background: #101812; font-size: 12px; line-height: 1.7; word-break: keep-all; }
.inapp p { margin: 0; color: var(--ink); }
.inapp b { color: var(--signal); font-weight: 600; }
.inapp-k { font: 600 10px var(--tech); letter-spacing: 2px; color: var(--signal) !important; }
.inapp-row { display: flex; gap: 16px; flex-wrap: wrap; }
.inapp-row .text-btn { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.gate-note { margin: 2px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 10.5px; line-height: 1.8; color: var(--dim); word-break: keep-all; }

/* ---- The way out. White, then words one at a time. */
.ending { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; padding: 24px; background: #f6f7f5; color: #111; animation: ending-in 2.4s ease-out both; }
@keyframes ending-in { from { background: #fff; } }
.ending-lines { width: min(440px, 100%); min-height: 260px; }
.ending-lines p { margin: 0 0 14px; font-size: 17px; line-height: 1.7; animation: line-in 1.2s ease-out both; }
.ending-lines p:nth-child(4) { font-family: var(--tech); font-weight: 600; letter-spacing: 1px; }
@keyframes line-in { from { opacity: 0; } }
.ending-actions { display: flex; align-items: center; gap: 18px; }
.ending .text-btn { color: #555; }
a.text-btn { text-decoration: underline; text-underline-offset: 3px; }
/* The refusal: a window drawn back in behind the words, too bright to see through. */
.ending.refused { background: #fbfbf8; }
/* The escape: daylight through the first version's window. */
.ending.escaped { background: linear-gradient(#e9f2fb, #f7f9f6 60%); }
.ending.refused::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(520px, 80vw); height: min(620px, 80vh); transform: translate(-50%, -50%); border: 14px solid #d9dad4; box-shadow: inset 0 0 0 2px #c6c7c0; background: linear-gradient(#d9dad4, #d9dad4) center / 10px 100% no-repeat, linear-gradient(#d9dad4, #d9dad4) center / 100% 10px no-repeat, #ffffff; animation: ending-in 4s ease-out both; }
.ending > * { position: relative; }
.ending.refused .ending-lines { padding: 26px 30px; background: rgba(255, 255, 255, .92); }

/* Tension closes the edges of the picture in. */
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, .6) 68%, rgba(0, 0, 0, .95) 100%); transition: opacity .6s linear; }
.toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 6; margin: 0; padding: 7px 14px; font: 600 11px var(--tech); letter-spacing: 2px; background: var(--panel); color: var(--signal); border: 1px solid rgba(53, 216, 115, .45); }
.fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }

/* ---- The report card. */
.card { position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; background: rgba(5, 6, 7, .85); backdrop-filter: blur(6px); }
.card img { max-width: min(432px, 100%); max-height: calc(100% - 70px); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.card-actions { display: flex; align-items: center; gap: 18px; }
.card-actions .enter { padding: 10px 18px; }

.loading { z-index: 6; position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); color: var(--faint); font: 600 12px var(--tech); letter-spacing: 6px; }

.touch { position: fixed; inset: 0; pointer-events: none; }
.touch i { position: absolute; width: 96px; height: 96px; border-radius: 50%; border: 1px solid #0000002e; transform: translate(-50%, -50%); }
.touch b { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; border-radius: 50%; background: #0000001f; transform: translate(-50%, -50%); }

/* ---- The privacy page: the same terminal, one long output. */
.doc { overflow-y: auto; height: 100%; }
.doc main { width: min(640px, calc(100% - 32px)); margin: 48px auto; display: flex; flex-direction: column; gap: 14px; font-size: 13.5px; line-height: 1.85; word-break: keep-all; }
.doc main .logo { width: 170px; margin-bottom: 8px; }
.doc h1 { margin: 0; font: 400 20px var(--text); }
.doc h2 { margin: 18px 0 0; font: 600 12px var(--mono); color: var(--signal); }
.doc h2::before { content: '$ '; }
.doc p, .doc li { margin: 0; color: var(--dim); }
.doc ul { margin: 0; padding-left: 18px; }
.doc code { font: 400 12px var(--mono); color: var(--ink); }
.doc a { color: var(--ink); }

/* ---- Phones held sideways: the invitation in two columns (who is asking | what to do), scrollable if it
   still does not fit; the bag sits lower and its grid is flatter. */
@media (max-height: 520px) and (orientation: landscape) {
  .gate { overflow-y: auto; place-items: start center; padding: 10px 16px; }
  .gate-inner { width: min(780px, calc(100vw - 32px)); display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; column-gap: 26px; row-gap: 10px; padding: 16px 20px; }
  .gate-head, .gate-eyebrow, .gate h1, .progress, .warn, .gate-note { grid-column: 1; }
  .code-field, .enter, .gate-row, .settings, .inapp { grid-column: 2; }
  .gate h1 { font-size: 24px; margin: 0; }
  .gate-head { padding-bottom: 8px; }
  .logo { width: 160px; }
  .code-field { padding: 8px 12px; }
  .code-field input { font-size: 22px; }
  .enter { padding: 10px; }
  .bag { bottom: 8px; max-height: calc(100vh - 16px); overflow-y: auto; }
  .bag-body { min-height: 0; }
  .bag-list.items { grid-template-columns: repeat(8, minmax(0, 1fr)); overflow-x: hidden; }
  .note, .pick { max-height: calc(100vh - 16px); overflow-y: auto; }
  .hint { bottom: 12px; }
}

/* The extension list beside the phone. */
.book-k { margin: 6px 0 2px; font: 600 11px var(--tech); letter-spacing: 1px; color: var(--dim); }
.dial-book { list-style: none; margin: 0 0 8px; padding: 6px 10px; border: 1px dashed var(--line); font: 12px/1.7 var(--tech); columns: 2; column-gap: 18px; }
.dial-book li { display: flex; gap: 10px; break-inside: avoid; }
.dial-book b { font-weight: 600; letter-spacing: 1px; min-width: 3.4em; color: var(--ink); }
.dial-book span { color: var(--dim); }
.dial-book li.called b { color: var(--signal); }
/* The requester's pencil memo on an object, and holding two objects together. */
.memo { margin: 8px 0 0; padding: 6px 8px; border-left: 2px solid #a8a08a; color: #cfc6ae; font-style: italic; font-size: 13px; line-height: 1.7; }
.overlay-btn { margin-top: 8px; }
.overlay-btn[aria-pressed="true"] { color: var(--signal); }
.slot.overlay-target { outline: 1px dashed var(--signal); outline-offset: 2px; }

/* The title card at the end of every ending: the name of the place as a dictionary entry. */
.ending-title { margin: 28px auto 0; max-width: 30em; text-align: center; opacity: 0; transition: opacity 1.8s; }
.ending-title.on { opacity: 1; }
.ending-title img { width: min(220px, 60vw); height: auto; opacity: .9; }
.et-term { margin: 10px 0 4px; font: 600 13px var(--tech); letter-spacing: 3px; color: var(--signal); }
.et-define { margin: 0 0 14px; font-size: 13px; line-height: 1.8; color: var(--dim); word-break: keep-all; }
.et-line { margin: 0; font-size: 15px; line-height: 1.8; word-break: keep-all; }
.ending { overflow-y: auto; }
.ending .ending-title img { filter: brightness(.3) contrast(1.2); opacity: 1; }
/* Centred while it fits, scrollable from the top when it does not. */
.ending { justify-content: flex-start; }
.ending > :first-child { margin-top: auto; }
.ending > :last-child { margin-bottom: auto; }

/* The first visit: the building's side of a terminal conversation, and yours. */
.intro { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; z-index: 9; }
.intro-log { flex: 1; min-height: 180px; max-height: 52vh; overflow-y: auto; padding: 14px 16px 6px; font: 400 14.5px/1.85 var(--text); word-break: keep-all; cursor: pointer; }
.intro-log p { margin: 0 0 10px; }
.intro-sys { color: var(--dim); font: 12px var(--tech); letter-spacing: .5px; }
.intro-who { color: var(--signal); font: 600 12px var(--tech); }
.intro-me { color: var(--dim); padding-left: 10px; }
.intro-last { color: var(--ink); }
.intro-choices { display: flex; flex-direction: column; gap: 6px; padding: 8px 16px 16px; min-height: 56px; }
.intro-choice { text-align: left; padding: 9px 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 14px var(--text); cursor: pointer; }
.intro-choice:hover, .intro-choice:focus-visible { border-color: var(--signal); }
.intro-choice i { font-style: normal; color: var(--signal); font-family: var(--tech); }
.intro-go { align-self: stretch; }
/* Pushed past the ring: running. The ring widens and the knob lights. */
.touch i { transition: box-shadow .15s, border-color .15s; }
.touch i.run { border-color: var(--signal); box-shadow: 0 0 0 10px rgba(53, 216, 115, .12); }
.touch i.run b { background: rgba(53, 216, 115, .55); }

/* Under a sheet: what lifted its masks, or what they still wait for. */
.note-diff { margin: 6px 0 0; font: 11.5px/1.6 var(--tech); color: var(--dim); }
.note-diff.lifted { color: var(--signal); }