/* Straddle network: the site in the terminal's own style. Greyscale on black, pixel type, hairline rules,
   inversion for what is picked. One sheet per page; nothing floats over it except the opening. */
:root {
  --b: #000;        /* ground */
  --p: #0c0c0c;     /* raised: pinned bars, inputs, open drawers */
  --r: #2b2b2b;     /* structure rules */
  --d: #767676;     /* disabled, key hints */
  --m: #8f8f8f;     /* secondary text, control outlines */
  --w: #ececec;     /* primary text, inverted fills */
  --hi: #fff;       /* brand, cursor */
  --f-body: VT323, "Martian Mono", "Courier New", monospace; --fs: 16px; --lh: 18px;
  --f-big: Doto, VT323, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--b); color: var(--w); font: 400 var(--fs)/var(--lh) var(--f-body); font-synthesis: none; font-variant-numeric: tabular-nums; overflow: hidden; letter-spacing: 0.02em; }
::selection { background: var(--w); color: var(--b); }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; padding: 0; border-radius: 0; margin: 0; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
input::placeholder, textarea::placeholder { color: var(--m); opacity: 1; }
:focus-visible { outline: 1px solid var(--w); outline-offset: 1px; }
* { scrollbar-width: thin; scrollbar-color: var(--r) var(--b); }
b, strong { font-weight: 400; color: var(--w); }
[hidden] { display: none !important; }
a { color: var(--w); text-decoration: underline; text-decoration-color: var(--m); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--w); }
code, .mono { font: inherit; }
.stepped { filter: invert(1); }
@keyframes blink { 50% { opacity: 0; } }
.cur { display: inline-block; width: 8px; height: 14px; background: var(--hi); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(1) infinite; }

.site { height: 100vh; display: grid; grid-template-rows: 32px minmax(0, 1fr) 30px; }

/* Top bar */
.top { display: flex; align-items: stretch; border-bottom: 1px solid var(--r); white-space: nowrap; background: var(--b); }
.top > * { display: flex; align-items: center; padding: 0 12px; border-right: 1px solid var(--r); text-transform: uppercase; letter-spacing: 0.05em; }
.top .brand { font-family: var(--f-big); font-size: 21px; font-weight: 800; letter-spacing: 0.06em; color: var(--hi); text-transform: none; }
.top .area { color: var(--m); }
.top .sp { flex: 1; padding: 0; border-right: 0; }
.top .sp + * { border-left: 1px solid var(--r); }
.top a, .top button { color: var(--m); text-decoration: none; }
.top a:hover, .top button:hover { background: var(--w); color: var(--b); }
.top .brand:hover { background: var(--b); color: var(--hi); }
.top a[aria-current="page"] { color: var(--w); }
.top .who { color: var(--m); }
.top .who b { margin-left: 8px; }
.top .role { color: var(--b); background: var(--w); }
.top .role.mgr { background: none; color: var(--w); box-shadow: inset 0 0 0 1px var(--m); }
.top .clk { color: var(--m); }

/* Body: directory rail + view */
.body { min-height: 0; display: grid; grid-template-columns: 25ch minmax(0, 1fr); }
.body.full { grid-template-columns: minmax(0, 1fr); }
.rail { min-height: 0; overflow: auto; border-right: 1px solid var(--r); padding: 10px 0 14px; display: flex; flex-direction: column; }
.rail .lbl { padding: 10px 12px 6px; color: var(--d); text-transform: uppercase; letter-spacing: 0.05em; }
.rail .lbl:first-child { padding-top: 2px; }
.rail a { display: flex; justify-content: space-between; gap: 8px; padding: 1px 12px 1px 24px; position: relative; color: var(--m); text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; }
.rail a:hover { color: var(--w); }
.rail a i { font-style: normal; color: var(--d); }
.rail a.active, .rail a[aria-current="page"] { background: var(--w); color: var(--b); }
.rail a.active i, .rail a[aria-current="page"] i { color: var(--b); }
.rail a.active::before, .rail a[aria-current="page"]::before { content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 11px; margin-top: -6px; background: var(--b); animation: blink 1s steps(1) infinite; }
.rail .none { padding: 1px 12px 1px 24px; color: var(--d); text-transform: uppercase; letter-spacing: 0.05em; }
.rail .foot { margin-top: auto; padding: 12px 12px 0; color: var(--d); border-top: 1px solid var(--r); text-transform: uppercase; letter-spacing: 0.05em; }
.view { min-height: 0; overflow: hidden auto; position: relative; }

/* Status line */
.status { border-top: 1px solid var(--r); background: var(--p); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 18px; align-items: center; padding: 0 12px; }
.status > span:first-child { color: var(--hi); text-transform: uppercase; letter-spacing: 0.05em; }
.status > span:nth-child(2) { color: var(--m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.05em; }
.status > span:last-child { color: var(--d); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }

/* A view's own controls, pinned above its content */
.bar { position: sticky; top: 0; z-index: 3; background: var(--p); display: flex; align-items: stretch; min-height: 27px; border-bottom: 1px solid var(--r); flex-wrap: wrap; }
.bar > * { display: flex; align-items: center; padding: 0 8px; border-right: 1px solid var(--r); white-space: nowrap; color: var(--m); text-transform: uppercase; letter-spacing: 0.05em; min-height: 26px; }
.bar .title { color: var(--hi); }
.bar button:hover:not(:disabled) { background: var(--w); color: var(--b); }
.bar button[aria-pressed="true"] { background: var(--w); color: var(--b); }
.bar button b { margin-left: 6px; color: inherit; }
.bar button:disabled { color: var(--d); }
.bar .q { flex: 1 1 160px; min-width: 140px; padding: 0; text-transform: none; }
.bar .q input { width: 100%; height: 100%; padding: 0 8px; color: var(--w); }
.bar .q input:focus { background: var(--w); color: var(--b); outline: 0; }
.bar select { padding: 0 6px; height: 100%; color: var(--w); text-transform: uppercase; max-width: 26ch; }
.bar .grow { flex: 1; border-right: 0; padding: 0; }
.bar .grow + * { border-left: 1px solid var(--r); }
.bar .go { color: var(--b); background: var(--w); }
.bar .go:hover:not(:disabled) { background: var(--hi) !important; }
.bar .go:disabled { background: var(--r); color: var(--d); }
.lead { margin: 0; padding: 10px 14px; color: var(--m); border-bottom: 1px solid var(--r); }
.lead b { color: var(--w); }
.flash { padding: 7px 14px; border-bottom: 1px solid var(--r); color: var(--w); text-transform: uppercase; letter-spacing: 0.05em; display: flex; gap: 10px; align-items: center; }
.flash::before { content: ""; width: 7px; height: 7px; background: var(--w); flex: none; }
.flash.bad { background: var(--w); color: var(--b); }
.flash.bad::before { background: var(--b); }
.flash button { margin-left: auto; color: inherit; text-decoration: underline; }

/* Tables */
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th { position: sticky; top: 27px; z-index: 2; background: var(--b); text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--r); color: var(--m); font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; }
th.sort { cursor: pointer; }
th.sort:hover, th.sorted { color: var(--w); }
th.r, td.r { text-align: right; }
td { padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--m); border-bottom: 1px solid #111; }
td.w { color: var(--w); }
table.flat th { position: static; }
tr.row { cursor: pointer; }
tr.row:hover td { color: var(--w); }
tr.on td { color: var(--w); }
tr.row.sel td { background: var(--w); color: var(--b); }
tr.row.sel td .tag { box-shadow: inset 0 0 0 1px var(--b); color: var(--b); }
tr.row.sel td .tag.inv { background: var(--b); color: var(--w); }
tr.row.sel td .dot { background: var(--b); }
tr.row.sel td .dot.off { background: none; box-shadow: inset 0 0 0 1px var(--b); }
.empty { padding: 24px 14px; color: var(--m); margin: 0; }
.empty b { color: var(--w); }
.pager { display: flex; border-top: 1px solid var(--r); border-bottom: 1px solid var(--r); margin-top: -1px; }
.pager > * { padding: 3px 10px; border-right: 1px solid var(--r); color: var(--m); text-transform: uppercase; letter-spacing: 0.05em; }
.pager button:hover:not(:disabled) { background: var(--w); color: var(--b); }
.pager button:disabled { color: var(--d); }
.pager .grow { flex: 1; border-right: 0; }

/* State tags and the online mark */
.tag { display: inline-block; padding: 0 5px; line-height: 16px; box-shadow: inset 0 0 0 1px var(--m); color: var(--w); text-transform: uppercase; letter-spacing: 0.05em; }
.tag.inv { background: var(--w); color: var(--b); box-shadow: none; }
.tag.dim { color: var(--d); box-shadow: inset 0 0 0 1px var(--r); }
.tag.strike { color: var(--d); box-shadow: inset 0 0 0 1px var(--r); text-decoration: line-through; }
.dot { display: inline-block; width: 7px; height: 7px; background: var(--w); margin-right: 6px; vertical-align: 1px; }
.dot.live { background: var(--hi); animation: blink 1.6s steps(1) infinite; }
.dot.off { background: none; box-shadow: inset 0 0 0 1px var(--d); }

/* Blocks of a page, tiled on hairline rules */
.blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); margin-right: -1px; }
.blk { padding: 10px 14px 14px; border-right: 1px solid var(--r); border-bottom: 1px solid var(--r); min-width: 0; position: relative; }
.blk.wide { grid-column: 1 / -1; }
.blk.span2 { grid-column: span 2; }
h2 { margin: 14px 0 6px; padding-bottom: 7px; line-height: 14px; font-size: inherit; font-weight: 400; border-bottom: 1px solid var(--r); display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--w); text-transform: uppercase; letter-spacing: 0.05em; }
h2 > span + span { color: var(--m); }
.blk > h2:first-child, .insp > h2:first-child, .band > h2:first-child { margin-top: 0; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 12px; margin: 0; }
.kv dt { color: var(--m); text-transform: uppercase; letter-spacing: 0.05em; }
.kv dd { margin: 0; text-align: right; color: var(--w); min-width: 0; overflow-wrap: anywhere; }
.note { margin: 8px 0 0; color: var(--m); max-width: 64ch; }
.note b { color: var(--w); }
.sub { margin: -2px 0 8px; color: var(--m); max-width: 68ch; }
.row-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.cap { display: flex; justify-content: space-between; gap: 12px; padding: 16px 14px 6px; border-bottom: 1px solid var(--r); color: var(--w); text-transform: uppercase; letter-spacing: 0.05em; }
.cap span + span { color: var(--m); }

/* Controls */
.act { display: inline-block; padding: 0 8px; box-shadow: inset 0 0 0 1px var(--m); line-height: 20px; color: var(--w); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; text-decoration: none; }
.act:hover:not(:disabled) { background: var(--w); color: var(--b); box-shadow: none; }
.act:disabled { color: var(--d); box-shadow: inset 0 0 0 1px var(--r); text-decoration: line-through; }
.act.inv { background: var(--w); color: var(--b); box-shadow: none; }
.act.inv:hover:not(:disabled) { background: var(--hi); }
.act.sm { line-height: 16px; padding: 0 5px; }
.sw { width: 11px; height: 11px; box-shadow: inset 0 0 0 1px var(--m); flex: none; display: inline-block; }
.sw.on { background: var(--w); box-shadow: none; }
.swrow { display: flex; gap: 10px; align-items: center; padding: 3px 0; cursor: pointer; text-align: left; color: var(--m); }
.swrow b { color: var(--w); text-transform: uppercase; letter-spacing: 0.05em; }
.swrow:hover b { color: var(--hi); }
.swrow:hover .sw { box-shadow: inset 0 0 0 1px var(--w); }
.swrow:hover .sw.on { background: var(--hi); }
.fld { display: grid; gap: 3px; width: 100%; }
.fld > span { color: var(--m); text-transform: uppercase; letter-spacing: 0.05em; }
.fld .in { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px dotted var(--m); }
.fld .in:focus-within { border-bottom: 1px solid var(--w); }
.fld input, .fld select { flex: 1; min-width: 0; padding: 3px 0; color: var(--w); }
.fld input:focus, .fld select:focus { outline: 0; }
.fld .in:focus-within input { color: var(--hi); }
.fld .in button, .fld .in .pre { color: var(--m); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.fld .in button:hover { color: var(--w); }
.fld small { color: var(--d); font-size: inherit; }
select option { background: var(--b); color: var(--w); }
.err { margin: 0; background: var(--w); color: var(--b); padding: 1px 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips button { padding: 0 6px; line-height: 18px; box-shadow: inset 0 0 0 1px var(--m); color: var(--m); text-transform: uppercase; letter-spacing: 0.05em; }
.chips button[aria-pressed="true"], .chips button.on { background: var(--w); color: var(--b); box-shadow: none; }
.chips button:hover { color: var(--w); }
.chips button.on:hover { color: var(--b); background: var(--hi); }
.code { font-size: 22px; line-height: 26px; letter-spacing: 0.12em; color: var(--hi); margin: 4px 0; }
.mono-box { border: 1px solid var(--r); padding: 8px 10px; color: var(--w); background: var(--p); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.days { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; margin: 6px 0 8px; }
.days i { height: 9px; box-shadow: inset 0 0 0 1px var(--r); }
.days i.on { background: var(--w); box-shadow: none; }
.days.kept i.on { background: repeating-conic-gradient(var(--w) 0 25%, transparent 0 50%) 0 0 / 2px 2px; }
.clock { display: flex; align-items: flex-end; gap: 10px; margin: 2px 0 6px; }
.clock .n { font-family: var(--f-big); font-weight: 800; font-size: 56px; line-height: 0.8; color: var(--hi); }
.clock .u { color: var(--m); text-transform: uppercase; letter-spacing: 0.05em; line-height: 16px; }
.hm { display: inline-flex; gap: 2px; vertical-align: 0; }
.hm i { width: 7px; height: 7px; background: var(--w); }
.hm i.used { background: none; box-shadow: inset 0 0 0 1px var(--d); }
.confirm { border: 1px solid var(--w); padding: 8px 10px; display: grid; gap: 6px; margin-top: 8px; }
.confirm p { margin: 0; color: var(--w); text-transform: uppercase; letter-spacing: 0.05em; }
.confirm .row-acts { margin-top: 0; }
.once { display: grid; gap: 6px; margin-top: 8px; }
.once > span { color: var(--m); text-transform: uppercase; letter-spacing: 0.05em; }
.once .row-acts, .once .note { margin-top: 0; }
.relay { display: grid; grid-template-columns: 14ch minmax(0, 1fr) 8ch auto; gap: 0 12px; align-items: center; padding: 5px 0; border-bottom: 1px solid #111; }
.relay > span:first-child { color: var(--w); text-transform: uppercase; letter-spacing: 0.05em; overflow: hidden; text-overflow: ellipsis; }
.relay > span:nth-child(3) { color: var(--m); text-transform: uppercase; letter-spacing: 0.05em; }
.relay code { color: var(--w); background: var(--b); box-shadow: inset 0 0 0 1px var(--r); padding: 1px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.stack { display: grid; gap: 12px; max-width: 380px; }
.mini { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: s; color: var(--m); }
.mini li { counter-increment: s; position: relative; padding-left: 4ch; }
.mini li::before { content: counter(s, decimal-leading-zero); color: var(--d); position: absolute; left: 0; }
.mini b { color: var(--w); }
.lnk { color: var(--w); text-decoration: underline; text-decoration-color: var(--m); text-underline-offset: 3px; text-align: right; }
.lnk:hover { text-decoration-color: var(--w); }
.list { display: grid; margin-bottom: 8px; }
.row2 { display: flex; justify-content: space-between; padding: 2px 0; text-decoration: none; border-bottom: 1px solid #111; color: var(--m); text-transform: uppercase; letter-spacing: 0.05em; }
a.row2:hover { color: var(--w); }

/* An inline form that opens in the sheet itself: no modals */
.drawer { border-bottom: 1px solid var(--r); background: var(--p); padding: 12px 14px 14px; display: grid; gap: 10px; }
.drawer h3 { margin: 0; font-size: inherit; font-weight: 400; color: var(--hi); text-transform: uppercase; letter-spacing: 0.05em; display: flex; justify-content: space-between; }
.drawer h3 button { color: var(--m); text-transform: uppercase; }
.drawer h3 button:hover { color: var(--w); }
/* Fields sit on one top line whatever their hints; widths are capped so a wide screen keeps them together,
   and a long chip list (books) takes a row of its own. */
.drawer .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 300px)); gap: 14px 24px; align-items: start; }
.drawer .grid .span2 { grid-column: 1 / -1; }
.drawer .grid > .swrow { grid-column: 1 / -1; }
.drawer .grid .fld > span:first-child { min-height: 18px; }
.drawer .grid .chips { padding-top: 3px; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.drawer .result { display: grid; gap: 6px; }
.drawer .row-acts { margin-top: 0; }
.locked { color: var(--w); padding: 3px 0; border-bottom: 1px dotted var(--r); text-transform: uppercase; letter-spacing: 0.05em; }

/* A table with the picked row worked on beside it */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 42ch; align-items: start; }
.split .tbl { min-width: 0; }
.insp { position: sticky; top: 27px; border-left: 1px solid var(--r); padding: 10px 14px 16px; max-height: calc(100vh - 89px); overflow: auto; min-height: 240px; }
.insp .chips button { line-height: 20px; padding: 0 8px; }
.insp h2 .nm { flex: 1; min-width: 0; color: var(--hi); text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 0; border-bottom: 1px dotted transparent; }
.insp h2 .nm:hover { border-bottom-color: var(--m); }
.insp h2 .nm:focus { outline: 0; border-bottom-color: var(--w); }
.insp h2 form { flex: 1; min-width: 0; display: flex; }
.band { padding: 14px 14px 20px; max-width: 84ch; }

/* Counters along the top of a page */
.counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-bottom: 1px solid var(--r); }
.counters > div { padding: 12px 14px 10px; border-right: 1px solid var(--r); display: grid; gap: 8px; }
.counters > div:last-child { border-right: 0; }
.counters .n { font-family: var(--f-big); font-weight: 800; font-size: 40px; line-height: 0.85; color: var(--hi); }
.counters span + span { color: var(--m); text-transform: uppercase; letter-spacing: 0.05em; }

/* Live wires on the NOW page: one bar per sample of the arbs it holds */
.lane { display: grid; grid-template-columns: 30ch minmax(0, 1fr) 8ch 10ch; gap: 0 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid #111; }
.lane .nm { color: var(--w); text-transform: uppercase; letter-spacing: 0.05em; min-width: 0; }
.lane .nm small { display: block; color: var(--d); font-size: inherit; text-transform: none; letter-spacing: 0.02em; }
.lane .bars { height: 30px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 1px; overflow: hidden; background: repeating-linear-gradient(90deg, var(--d) 0 1px, transparent 1px 4px) bottom / 100% 1px no-repeat; }
.lane .bars i { width: 2px; flex: none; background: var(--w); }
.lane .n { text-align: right; color: var(--hi); font-size: 22px; }
.lane .st { text-align: right; }

/* Settings */
.wire h2 .swrow { padding: 0; }
.wire .fld { margin-top: 10px; }
.wire .note { margin-top: 6px; }
.board { display: grid; grid-template-columns: 11px minmax(0, 1fr) auto; gap: 0 12px; align-items: center; width: 100%; padding: 6px 0; border-bottom: 1px solid #111; text-align: left; color: var(--m); text-transform: uppercase; letter-spacing: 0.05em; }
.board .nm { color: var(--w); }
.board .nm small { display: block; color: var(--d); font-size: inherit; text-transform: none; letter-spacing: 0.02em; }
.board:hover .nm { color: var(--hi); }

/* Gates: log on, join, install, control room */
.gate { min-height: 100%; display: grid; grid-template-columns: minmax(380px, 560px) minmax(0, 1fr); }
.gate .panel { border-right: 1px solid var(--r); display: grid; align-content: center; padding: 32px max(28px, 5vw); gap: 14px; }
.gate .prompt { color: var(--m); display: grid; gap: 2px; text-transform: uppercase; letter-spacing: 0.05em; }
.gate .prompt b { color: var(--w); }
.gate h1 { margin: 0 0 4px; font-family: var(--f-big); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: 0.04em; color: var(--hi); }
.gate form { display: grid; gap: 14px; max-width: 400px; }
.gate .go { justify-self: start; line-height: 26px; padding: 0 16px; }
.gate .links { display: grid; gap: 4px; color: var(--m); text-transform: uppercase; letter-spacing: 0.05em; }
.gate .art { position: relative; min-width: 0; min-height: 420px; }
.gate .art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gate .art .cap2 { position: absolute; left: 24px; bottom: 18px; color: var(--d); text-transform: uppercase; letter-spacing: 0.05em; }
.steps { display: grid; }
.step { display: grid; grid-template-columns: 6ch minmax(0, 1fr); gap: 0 12px; padding: 12px 0; border-bottom: 1px solid var(--r); }
.step > span { color: var(--hi); font-family: var(--f-big); font-weight: 800; font-size: 28px; line-height: 1; }
.step b { display: block; color: var(--w); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.step p { margin: 0; color: var(--m); }

/* The opening and the welcome: words in dots across the window */
.intro { position: fixed; inset: 0; z-index: 60; background: #000; cursor: pointer; }
.intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro p { position: absolute; margin: 0; color: #ececec; font-family: VT323, monospace; }
.intro .isub { left: 0; right: 0; text-align: center; font-size: 26px; letter-spacing: 0.6em; text-indent: 0.6em; text-transform: uppercase; }
.intro .iboot { left: 28px; bottom: 24px; font-size: 16px; line-height: 18px; color: #8f8f8f; white-space: pre; }
.intro .iskip { right: 28px; bottom: 24px; font-size: 16px; color: #767676; }
.intro .icur { display: inline-block; width: 8px; height: 14px; background: #ececec; vertical-align: -2px; margin-left: 2px; animation: blink 0.8s steps(1) infinite; }

/* Changing page: the new page prints in from the top in steps, a scan line running ahead of it,
   and the tab that was picked blinks twice in negative. */
@keyframes st-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes st-scan { from { transform: translateY(0); opacity: 1; } 90% { opacity: 1; } to { transform: translateY(calc(100vh - 62px)); opacity: 0; } }
@keyframes st-flash { 0%, 66% { filter: invert(1); } 33%, 100% { filter: none; } }
.view.st-enter { animation: st-wipe 300ms steps(8, end) both; }
.view.st-enter::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--hi); box-shadow: 0 0 0 1px #000; pointer-events: none; z-index: 9; animation: st-scan 300ms steps(8, end) both; }
.st-flash { animation: st-flash 300ms steps(1, end) both; }

/* Lost connection to the server (interactive pages) */
#blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 30px; z-index: 50; background: var(--w); color: var(--b); padding: 5px 12px; text-transform: uppercase; letter-spacing: 0.05em; }
#blazor-error-ui a { color: var(--b); margin-left: 12px; cursor: pointer; }

/* Help pages (guide, FAQ): a contents rail and one reading column. Text only for now. */
.doc { display: grid; grid-template-columns: 32ch minmax(0, 1fr); min-height: 100%; }
.doc-toc { position: sticky; top: 0; align-self: start; max-height: calc(100vh - 62px); overflow: auto; border-right: 1px solid var(--r); padding: 14px 0 20px; display: flex; flex-direction: column; }
.doc-toc .lbl { padding: 12px 14px 6px; color: var(--d); text-transform: uppercase; letter-spacing: 0.05em; }
.doc-toc .lbl:first-child { padding-top: 2px; }
.doc-toc a { display: flex; gap: 10px; padding: 2px 14px; color: var(--m); text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; position: relative; }
.doc-toc a span { color: var(--d); width: 3ch; flex: none; }
.doc-toc a.t3 { padding-left: calc(14px + 3ch + 10px); color: var(--d); text-transform: none; letter-spacing: 0.02em; }
.doc-toc a:hover, .doc-toc a.t3:hover { color: var(--w); }
.doc-toc a.on { background: var(--w); color: var(--b); }
.doc-toc a.on span { color: var(--b); }
.doc-body { padding: 28px clamp(20px, 4vw, 56px) 96px; max-width: 880px; }
.doc-toc a.q { text-transform: none; letter-spacing: 0.02em; }
.doc-hero { border-bottom: 1px solid var(--r); padding-bottom: 22px; display: grid; gap: 10px; }
.doc-hero .prompt { color: var(--m); display: grid; gap: 2px; text-transform: uppercase; letter-spacing: 0.05em; }
.doc-hero .prompt b { color: var(--w); }
.doc-hero h1 { margin: 8px 0 0; font-family: var(--f-big); font-weight: 800; font-size: 46px; line-height: 1.05; letter-spacing: 0.04em; color: var(--hi); text-transform: uppercase; }
.doc-hero .sub { color: var(--m); max-width: 72ch; margin: 0; }
.doc-sec { padding: 30px 0 10px; border-bottom: 1px solid var(--r); }
.doc-sec h2 { display: flex; gap: 14px; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; border: 0; margin: 0 0 12px; padding: 0; line-height: 1.1; }
.doc-sec h2 .num { font-family: var(--f-big); font-weight: 800; font-size: 36px; line-height: 0.9; color: var(--hi); }
.doc-sec h2 .t { font-size: 24px; color: var(--hi); }
.doc-sec h2 .s { color: var(--m); text-transform: none; letter-spacing: 0.02em; }
.doc-sec h3 { margin: 26px 0 8px; font-size: inherit; font-weight: 400; color: var(--hi); text-transform: uppercase; letter-spacing: 0.05em; display: flex; gap: 10px; align-items: center; scroll-margin-top: 12px; }
.doc-sec h3::before { content: ""; width: 7px; height: 7px; background: var(--w); flex: none; }
.doc-sec p { color: var(--m); margin: 0 0 10px; max-width: 76ch; }
.doc-sec p.lead { color: var(--w); padding: 0; border: 0; }
.doc-sec b, .qa b { color: var(--w); }
.doc code { color: var(--w); box-shadow: inset 0 0 0 1px var(--r); padding: 0 4px; }
.defs { margin: 8px 0 16px; display: grid; border-top: 1px solid var(--r); }
.defs > div { display: grid; grid-template-columns: minmax(16ch, 30ch) minmax(0, 1fr); gap: 0 22px; padding: 8px 0; border-bottom: 1px solid #161616; }
.defs > div:hover dt { color: var(--hi); }
.defs dt { color: var(--w); text-transform: uppercase; letter-spacing: 0.04em; }
.defs dt small { display: block; color: var(--d); text-transform: none; font-size: inherit; letter-spacing: 0.02em; }
.defs dd { margin: 0; color: var(--m); }
.callout { border: 1px solid var(--r); border-left: 3px solid var(--w); padding: 9px 12px; margin: 10px 0 16px; color: var(--m); background: var(--p); max-width: 80ch; }
.callout.warn::before { content: "CAREFUL"; display: inline-block; background: var(--w); color: var(--b); padding: 0 6px; margin-right: 10px; letter-spacing: 0.05em; }
.steps-list { margin: 6px 0 14px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 6px; max-width: 76ch; }
.steps-list li { counter-increment: s; position: relative; padding-left: 5ch; color: var(--m); }
.steps-list li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; color: var(--hi); }
.qa { border: 0; border-bottom: 1px solid var(--r); padding: 0; scroll-margin-top: 12px; }
.qa summary { list-style: none; display: grid; grid-template-columns: 5ch minmax(0, 1fr) 3ch; gap: 0 12px; align-items: baseline; padding: 13px 0; cursor: pointer; text-transform: none; letter-spacing: 0.02em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .num { color: var(--d); }
.qa summary .t { color: var(--w); }
.qa summary .pm { text-align: right; color: var(--m); }
.qa summary .pm::before { content: "+"; }
.qa[open] summary .pm::before { content: "\2212"; }
.qa summary:hover .t, .qa[open] summary .t { color: var(--hi); }
.qa[open] summary .num { color: var(--hi); }
.qa .a { padding: 0 0 18px calc(5ch + 12px); }
.qa .a p { color: var(--m); margin: 0 0 8px; max-width: 76ch; }
.qa .a p.aside { color: var(--d); }
.qa .a .mono-box { margin: 4px 0 10px; max-width: 60ch; }
.doc-foot { color: var(--m); margin: 22px 0 0; text-transform: uppercase; letter-spacing: 0.05em; }
/* Russian text: VT323, Doto and Silkscreen have no Cyrillic, so it is set in Martian Mono, condensed, a
   terminal mono that does. The big digits stay in Doto. */
.doc.ru, .ru { font-family: "Martian Mono", "Courier New", monospace; font-stretch: 87.5%; letter-spacing: 0; }
.doc.ru { font-size: 12.5px; line-height: 21px; }
.ru { font-size: 12px; }
.doc.ru .doc-hero h1 { font-family: "Martian Mono", monospace; font-weight: 700; font-size: 34px; line-height: 1.15; letter-spacing: -0.01em; }
.doc.ru .doc-sec h2 .t { font-weight: 600; font-size: 18px; text-transform: uppercase; }
.doc.ru .doc-sec h2 .num { font-family: var(--f-big); }
.doc.ru h3, .doc.ru dt, .doc.ru .doc-toc a.t2, .doc.ru .lbl { font-weight: 500; letter-spacing: 0.02em; }
.doc.ru .doc-toc a { font-size: 12px; padding-top: 3px; padding-bottom: 3px; }
.doc.ru .doc-hero .prompt, .doc.ru .callout.warn::before { font-family: VT323, monospace; font-size: 16px; letter-spacing: 0.05em; font-stretch: normal; }
.lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.92); display: grid; place-items: center; cursor: zoom-out; }
.lightbox img { max-width: 96vw; max-height: 94vh; }

@media (max-width: 1320px) {
  .gate { grid-template-columns: minmax(360px, 480px) minmax(0, 1fr); }
  .body { grid-template-columns: 22ch minmax(0, 1fr); }
  .blk.span2 { grid-column: 1 / -1; }
  .c-opt { display: none; }
  .split { grid-template-columns: minmax(0, 1fr) 39ch; }
}
@media (max-width: 900px) {
  .doc { grid-template-columns: 1fr; }
  .doc-toc { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--r); }
  .gate { grid-template-columns: 1fr; }
  .gate .art { display: none; }
  .split { grid-template-columns: 1fr; }
  .insp { position: static; max-height: none; border-left: 0; border-top: 1px solid var(--r); }
}
@media (prefers-reduced-motion: reduce) { .stepped { filter: none; } .cur, .rail a.active::before, .rail a[aria-current]::before, .dot.live, .intro .icur { animation: none !important; } }