@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700;800&display=swap');
/* Terminal Core on the game's widgets (web/features/terminal-core/index.js): the command dock (#hud), the hyperflux pylon menu and
   every other panel, bone on black glass, mono type, crop-mark corners, dashed rules, a still scan-line texture. Colour only where it means
   something: the race accent for what is yours and chosen, orange and red for danger. No blur, no glow, no shadow;
   nothing here animates. Every rule is scoped to html.tc-panels, so with the look off nothing changes. Layout, sizes
   and the game's own unit and building pictures are untouched. */
html.tc-panels{--tc-void:rgba(11,11,12,.92);--tc-cell:rgba(233,230,223,.035);--tc-cell-hover:rgba(233,230,223,.08);--tc-bone:#e9e6df;
  --tc-dim:#b9b6af;--tc-ink:#8a8d91;--tc-line:rgba(233,230,223,.18);--tc-rule:rgba(233,230,223,.12);--tc-orange:#ff6a3d;--tc-red:#e8322a;
  --tc-mono:'JetBrains Mono',ui-monospace,monospace;--tc-scan:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
  --tc-mark:linear-gradient(var(--tc-bone),var(--tc-bone))}
/* The frames: black glass, a hairline, crop marks at the corners (the Astral Dojo sigils and veils give way). */
html.tc-panels :is(#hud,.pylon-menu){background:var(--tc-scan),var(--tc-void);border:1px solid var(--tc-line);border-radius:0;box-shadow:none;
  color:var(--tc-bone);font-family:var(--tc-mono)}
html.tc-panels :is(#hud,.pylon-menu)::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:
  var(--tc-mark) top left/12px 1.5px no-repeat,var(--tc-mark) top left/1.5px 12px no-repeat,
  var(--tc-mark) top right/12px 1.5px no-repeat,var(--tc-mark) top right/1.5px 12px no-repeat,
  var(--tc-mark) bottom left/12px 1.5px no-repeat,var(--tc-mark) bottom left/1.5px 12px no-repeat,
  var(--tc-mark) bottom right/12px 1.5px no-repeat,var(--tc-mark) bottom right/1.5px 12px no-repeat}
html.tc-panels :is(#hud,.pylon-menu,#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar) :is(p,small,strong,b,h2,h3,span,em,dt,dd,kbd,button){font-family:var(--tc-mono)}
html.tc-panels :is(#hud,.pylon-menu,#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar) .eyebrow{color:var(--accent);text-shadow:none;letter-spacing:.18em;font-weight:700}
html.tc-panels :is(#hud,.pylon-menu,#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar) p{color:var(--tc-dim)}
html.tc-panels :is(#hud,.pylon-menu,#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar) kbd{border:1px solid var(--tc-line);border-radius:0;color:var(--tc-ink);font-family:var(--tc-mono)}
/* Buttons and cards: square cells on the glass; hover lifts the hairline to bone; yours and chosen take the accent. */
html.tc-panels :is(#hud,.pylon-menu,#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar) button:not(.primary,.augment-card,.directives-head){background:var(--tc-cell);border:1px solid var(--tc-line);border-radius:0;
  color:var(--tc-bone);box-shadow:none}
html.tc-panels :is(#hud,.pylon-menu,#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar) button:not(.primary,.augment-card,.directives-head):hover:not(:disabled){background:var(--tc-cell-hover);border-color:var(--tc-bone);box-shadow:none}
html.tc-panels :is(#hud,.pylon-menu,#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar) :is(button.active,button[aria-pressed="true"],.building-card.active){
  border-color:var(--accent);background:rgba(var(--accent-rgb),.12)}
html.tc-panels :is(#hud,.pylon-menu,#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar) .primary{background:var(--tc-bone);color:#0b0b0c;border:0;border-radius:0;box-shadow:none;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase}
html.tc-panels :is(#hud,.pylon-menu,#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar) .primary:hover:not(:disabled){background:#fff}
html.tc-panels :is(#hud,.pylon-menu,#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar) .primary kbd{color:#0b0b0c;border-color:rgba(11,11,12,.35)}
/* The dock's header: the race in its accent, the world in bone capitals, vitals as label and value. */
html.tc-panels .civilization-mark{border-radius:0;border-color:var(--tc-line);background:var(--tc-cell)}
html.tc-panels .dock-heading h2{font-weight:800;letter-spacing:.06em;color:var(--tc-bone)}
html.tc-panels .vitals{border-top:1px dashed var(--tc-line)}
html.tc-panels .vitals span{color:var(--tc-ink);letter-spacing:.12em}html.tc-panels .vitals b{color:var(--tc-bone);font-weight:700}
html.tc-panels .territory-line{color:var(--tc-dim)}
/* The experience meter: a stepped bar in the accent, read in bone over it. */
html.tc-panels .xp-bar{border:1px solid var(--tc-line);background:rgba(233,230,223,.04)}
html.tc-panels .xp-bar i,html.tc-panels.astral .xp-bar i,html.tc-panels #xpFill{background:repeating-linear-gradient(90deg,rgba(var(--accent-rgb),.6) 0 6px,transparent 6px 7px)}
html.tc-panels .xp-bar span{color:var(--tc-bone);font-weight:700;letter-spacing:.1em;text-shadow:0 0 3px #0b0b0c,0 1px 2px #0b0b0c}
/* Command and buildings: dashed rules, ink symbols, bone counts (red when capped). */
html.tc-panels .resources{background:transparent;border-block:1px dashed var(--tc-line)}
html.tc-panels .resources>div{border-left:1px dashed var(--tc-line)}html.tc-panels .resources>div:nth-child(odd){border:0}
html.tc-panels .resource-symbol{color:var(--tc-ink)}
html.tc-panels .resources b{font-family:var(--tc-mono);font-weight:700;color:var(--tc-bone)}html.tc-panels .resources b.capped{color:var(--tc-red)}
html.tc-panels .resources small{color:var(--tc-ink);letter-spacing:.16em}
/* Tabs: ink capitals; the open one in bone over a bone underline. */
html.tc-panels .dock-tabs{border-bottom:1px dashed var(--tc-line)}
html.tc-panels #hud .dock-tabs button:not(.primary,.augment-card,.directives-head){background:none;border:0;border-bottom:1px solid transparent;
  color:var(--tc-ink);text-transform:uppercase;letter-spacing:.12em;font-size:11px;text-shadow:none}
html.tc-panels #hud .dock-tabs button.active:not(.primary,.augment-card){color:var(--tc-bone);border-bottom-color:var(--tc-bone);background:none}
html.tc-panels #hud .dock-tabs button:hover:not(:disabled):not(.primary,.augment-card){background:none;border-color:transparent;color:var(--tc-bone)}
html.tc-panels #hud .dock-tabs button.active:hover:not(:disabled):not(.primary,.augment-card){border-bottom-color:var(--tc-bone)}
html.tc-panels .dock-tabs kbd{border:0;padding:0;color:var(--tc-ink)}
/* Section captions read like the terminal's event rules: ink capitals over a dashed line. */
html.tc-panels :is(#hud,.pylon-menu,#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar) .section-caption{color:var(--tc-ink);letter-spacing:.16em;text-transform:uppercase;padding-bottom:4px;border-bottom:1px dashed var(--tc-rule)}
html.tc-panels :is(#hud,.pylon-menu,#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar) .section-caption span:first-child::before{content:'+- ';color:var(--tc-line)}
html.tc-panels :is(#hud,.pylon-menu,#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar) .section-caption span:last-child{color:var(--tc-dim)}
html.tc-panels .base-group+.base-group{border-top:1px dashed var(--tc-rule)}
/* Unit and building cards: the game's pictures on a square cell; names in bone, roles in ink, a short card's cost in orange. */
html.tc-panels :is(.army-catalog,.building-catalog,.pylon-augments) strong{color:var(--tc-bone);font-weight:700;letter-spacing:.02em}
html.tc-panels :is(.army-catalog,.building-catalog) small,html.tc-panels .pylon-augments em{color:var(--tc-ink)}
html.tc-panels .army-catalog button.short small{color:var(--tc-orange)}
html.tc-panels .building-card.active small,html.tc-panels .pylon-augments .building-card.fitted em{color:var(--accent)}
html.tc-panels .pylon-augments .building-card.fitted{border-color:rgba(var(--accent-rgb),.7)}
html.tc-panels .building-card kbd{background:#0b0b0c}
/* The factory queue, placement line and army roster. */
html.tc-panels .production-row{border-top:1px dashed var(--tc-rule)}html.tc-panels .production-row small{color:var(--tc-ink)}
html.tc-panels :is(#hud,.pylon-menu,#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar) progress{accent-color:var(--tc-bone)}
html.tc-panels #productionStatus{color:var(--tc-ink)}
html.tc-panels .placement-status #blueprintDescription{color:var(--tc-ink)}
html.tc-panels #hud.placing .placement-status p{color:var(--accent)}
html.tc-panels .army-roster{border-top:1px dashed var(--tc-rule)}html.tc-panels .army-roster b{color:var(--tc-bone)}
html.tc-panels .army-roster button.partial{border-color:rgba(var(--accent-rgb),.5)}
html.tc-panels .commander-ability{background:var(--tc-cell);border-color:var(--accent)}
html.tc-panels .dock-footer{background:transparent;border-top:1px dashed var(--tc-line);color:var(--tc-dim)}
html.tc-panels .selection-dot{border-radius:0;background:var(--accent)}
/* The other tabs' cards and callouts on the same glass. */
html.tc-panels #hud .augment-card{background:var(--tc-cell);border-radius:0;box-shadow:none}
html.tc-panels .claim{background:var(--tc-cell)}html.tc-panels .claim b{color:var(--tc-bone)}html.tc-panels .claim-where{color:var(--tc-ink)}
html.tc-panels .vein-info{border-radius:0;border:1px dashed var(--tc-line);background:var(--tc-cell)}html.tc-panels .vein-info .section-caption span:first-child{color:var(--tc-bone)}
html.tc-panels #warpManifest{color:var(--tc-orange)}
html.tc-panels .ascension dt{color:var(--tc-ink)}html.tc-panels .ascension dd{color:var(--tc-bone)}
/* The pylon menu: its title in the terminal's bracket, the hint in dim mono. */
html.tc-panels .pylon-menu .eyebrow::before{content:'-=[ ';color:var(--tc-ink)}html.tc-panels .pylon-menu .eyebrow::after{content:' ]=-';color:var(--tc-ink)}
html.tc-panels .pylon-menu .eyebrow{color:var(--tc-bone);font-weight:800}
html.tc-panels .pylon-menu .pylon-head{padding-bottom:5px;border-bottom:1px dashed var(--tc-line)}
html.tc-panels .pylon-menu p{color:var(--tc-dim)}
html.tc-panels :is(#hud,.pylon-menu){scrollbar-color:var(--tc-line) transparent}
html.tc-panels #hud #jumpTargets button[aria-pressed="true"]{border-color:var(--accent);background:rgba(var(--accent-rgb),.12)}
/* Mono runs wider than the old sans: captions stay on one line (the long right-hand note ends in an ellipsis), names
   and hints sit a touch tighter and smaller so every card and the pylon hint show what they showed before. */
html.tc-panels :is(#hud,.pylon-menu,#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar) .section-caption{font-size:10px;letter-spacing:.1em}
html.tc-panels :is(#hud,.pylon-menu,#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar) .section-caption span{white-space:nowrap}
html.tc-panels :is(#hud,.pylon-menu,#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar) .section-caption span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;letter-spacing:.04em}
html.tc-panels :is(.army-catalog,.building-catalog,.pylon-augments) strong{font-size:11.5px;letter-spacing:-.03em}
html.tc-panels :is(.army-catalog,.building-catalog,.pylon-augments) :is(small,em){letter-spacing:-.03em}
html.tc-panels #hud :is(#resourceList,#jumpTargets) button{font-size:11px;letter-spacing:-.03em}
html.tc-panels :is(#hud,.pylon-menu,#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar) p{letter-spacing:-.02em}
html.tc-panels .pylon-menu p{font-size:9.5px}
html.tc-panels .pylon-augments strong{font-size:11px}
/* Every other widget (owner 2026-10-25: "update the rest of the UI widgets"): the same glass, hairline and crop marks,
   painted as background layers so each widget keeps its own pseudo-elements. The Progenitor's amber (doom clock, round
   end), the briefing and the killcam keep their own looks; the round end and the death notice keep their dimming veil. */
html.tc-panels{--tc-marks:var(--tc-mark) left top/10px 1.5px no-repeat,var(--tc-mark) left top/1.5px 10px no-repeat,
  var(--tc-mark) right top/10px 1.5px no-repeat,var(--tc-mark) right top/1.5px 10px no-repeat,
  var(--tc-mark) left bottom/10px 1.5px no-repeat,var(--tc-mark) left bottom/1.5px 10px no-repeat,
  var(--tc-mark) right bottom/10px 1.5px no-repeat,var(--tc-mark) right bottom/1.5px 10px no-repeat}
html.tc-panels :is(#battlePanel,#radar,#planetWatch,#levelUp,#death,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end,.round-end-notice,#intro,.energy-bar.docked){
  background:var(--tc-marks),var(--tc-scan),var(--tc-void);border:1px solid var(--tc-line);border-radius:0;color:var(--tc-bone);font-family:var(--tc-mono)}
html.tc-panels :is(#battlePanel,#radar,#planetWatch,#levelUp,#toast,#flightPanel,#settingsPanel,#observerPanel,.directives,.round-end-notice,#intro,.energy-bar.docked){box-shadow:none}
html.tc-panels :is(#battlePanel,#radar,#planetWatch,#settingsPanel,#observerPanel,.directives,#intro) :is(small,th,summary){color:var(--tc-ink)}
html.tc-panels :is(#battlePanel,#radar,#planetWatch,#settingsPanel,#observerPanel,.directives,#intro,#levelUp,#death) .eyebrow{color:var(--tc-bone);font-weight:800}
/* Civilizations: ink headings, dashed rows, each civilization still in its own colour. */
html.tc-panels #battlePanel td{border-top:1px dashed var(--tc-rule)}html.tc-panels #battlePanel #battleSummary{color:var(--tc-dim)}
html.tc-panels #battlePanel th{letter-spacing:.12em;text-transform:uppercase}
/* The remote viewer's frame (its globe is the game's own drawing). */
html.tc-panels #radar small{color:var(--tc-ink)}
/* Level up: the offer in bone over the accent title, the cards keep their quality colours; no glow. */
html.tc-panels #levelUp #levelUpTitle{color:var(--accent);text-shadow:none}
html.tc-panels #levelUp::after{display:none}
html.tc-panels #levelUp h2{font-family:var(--tc-mono);font-weight:800;letter-spacing:.04em;text-transform:uppercase}
html.tc-panels :is(#hud,#levelUp) .augment-card{background:var(--tc-cell);border-radius:0;box-shadow:none;font-family:var(--tc-mono)}
html.tc-panels :is(#hud,#levelUp) button.augment-card:hover{box-shadow:none;background:var(--tc-cell-hover)}
html.tc-panels .augment-effect,html.tc-panels .augment-totals{color:var(--tc-bone)}html.tc-panels .augment-card small{color:var(--tc-ink)}
/* The run's end: a red notice. */
html.tc-panels #death .eyebrow{color:var(--tc-red)}
html.tc-panels #death h2{font-family:var(--tc-mono);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
/* The toast: one line of terminal type at the top centre. */
html.tc-panels #toast{font-size:11.5px;letter-spacing:.01em}
/* Directives: bone heading, ink steps, the done mark in the accent. */
html.tc-panels .directives{border-left:1px solid var(--tc-line)}
html.tc-panels .directives-head .eyebrow{color:var(--tc-bone)}html.tc-panels .directives li{color:var(--tc-dim);font-family:var(--tc-mono)}
html.tc-panels .directives li b{color:var(--tc-bone)}html.tc-panels .directives li i{border-color:var(--tc-ink);transform:none}
/* Settings: capitals on dashed rules, keys in square cells. */
html.tc-panels #settingsPanel h3{font-family:var(--tc-mono);color:var(--tc-ink);letter-spacing:.16em;padding-bottom:3px;border-bottom:1px dashed var(--tc-rule)}
html.tc-panels #settingsPanel h3::before{content:'+- ';color:var(--tc-line)}
html.tc-panels #settingsPanel dt{color:var(--tc-bone)}html.tc-panels #settingsPanel dd{color:var(--tc-dim)}
html.tc-panels #settingsButton{border-radius:0;background:var(--tc-void);border:1px solid var(--tc-line);color:var(--tc-dim)}
html.tc-panels #settingsButton:is(:hover,[aria-expanded=true]){background:var(--tc-void);border-color:var(--tc-bone);color:var(--tc-bone)}
/* The top bar: its buttons as cells, the connection line in ink mono (the brand stays the brand). */
html.tc-panels .topbar>button:not(.primary){background:var(--tc-void);border:1px solid var(--tc-line);border-radius:0;color:var(--tc-bone);font-family:var(--tc-mono);box-shadow:none}
html.tc-panels .topbar>button:not(.primary):hover:not(:disabled){border-color:var(--tc-bone);background:var(--tc-void)}
html.tc-panels .topbar>button kbd{border:1px solid var(--tc-line);border-radius:0;color:var(--tc-ink);font-family:var(--tc-mono)}
html.tc-panels .topbar .status{font-family:var(--tc-mono);color:var(--tc-ink);letter-spacing:.04em}
html.tc-panels #led{border-radius:0}html.tc-panels #led.live{box-shadow:none}
/* The start screen: its frame and race buttons (each keeps its race colour on top). The big line in heavy mono capitals,
   bone, tight like the dossier sheets; its last line in dim bone after an ink prompt, ending in a still cursor. */
html.tc-panels #intro{border-left:1px solid var(--tc-line)}
html.tc-panels #intro #factions button:not(.primary,.augment-card,.directives-head){border-top:2px solid var(--color)}
html.tc-panels #intro h1{font:800 33px/1.06 var(--tc-mono);letter-spacing:-.04em;text-transform:uppercase;color:var(--tc-bone);
  margin:18px 0;padding-bottom:16px;border-bottom:1px dashed var(--tc-line)}
html.tc-panels #intro h1 em{display:inline-block;padding-left:2ch;text-indent:-2ch;color:var(--tc-dim);font-family:inherit}
html.tc-panels #intro h1 em::before{content:'> ';color:var(--tc-ink)}html.tc-panels #intro h1 em::after{content:'_';color:var(--tc-bone)}
@media(max-width:700px){html.tc-panels #intro h1{font-size:27px}}
@media(max-height:700px) and (min-width:701px){html.tc-panels #intro h1{font-size:28px;margin:12px 0;padding-bottom:12px}}
/* The flight panel and the charge gauges under the commander: see-through glass so the fight shows through. */
html.tc-panels #flightPanel{border-color:var(--tc-line)}
html.tc-panels :is(#flightPanel,#jumpCharge,#volleyCharge,#novaCharge,#waveCharge) span{color:var(--tc-bone);font-family:var(--tc-mono);font-weight:700;letter-spacing:.16em}
html.tc-panels :is(#flightPanel,#jumpCharge,#volleyCharge,#novaCharge,#waveCharge) small{color:var(--tc-dim);font-family:var(--tc-mono)}
html.tc-panels .energy-bar>:is(#volleyCharge,#novaCharge,#waveCharge,#jumpCharge){background:var(--tc-marks),rgba(11,11,12,.3);border:1px solid var(--tc-line);border-radius:0;box-shadow:none}
html.tc-panels .energy-bar.docked>:is(#volleyCharge,#novaCharge,#waveCharge,#jumpCharge){background:var(--tc-marks),var(--tc-void)}
/* The commander's bars: square tracks on a hairline, flat stepped fills in their own colours (red when wounded), mono
   numbers; no skew, no glow. The full and refill pulses stay (opacity). */
html.tc-panels .energy-track{transform:none;border-radius:0;box-shadow:none;background:rgba(11,11,12,.85);border-color:rgba(255,203,61,.55)}
html.tc-panels .energy-track span{transform:none;font-family:var(--tc-mono);letter-spacing:.06em}
html.tc-panels .energy-track i{box-shadow:none;background:#ffcb3d}
html.tc-panels .energy-track i::after{background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(11,11,12,.5) 6px 7px)}
html.tc-panels .health-row .energy-track{border-color:rgba(68,224,127,.55)}html.tc-panels .health-row .energy-track i{background:#44e07f}
html.tc-panels .energy-bar.wounded .health-row .energy-track{border-color:rgba(232,50,42,.7)}html.tc-panels .energy-bar.wounded .health-row .energy-track i{box-shadow:none;background:var(--tc-red)}
html.tc-panels .base-row .energy-track{border-color:rgba(79,208,245,.55)}html.tc-panels .base-row .energy-track i{background:#4fd0f5}
html.tc-panels .energy-symbol,html.tc-panels .energy-bar.wounded .health-row .energy-symbol{text-shadow:none}
html.tc-panels :is(#energyRate,#healthRate,#baseRate){font-family:var(--tc-mono)}
html.tc-panels .metal-row{transform:none;border-radius:0;background:rgba(11,11,12,.85);border-color:var(--tc-line);font-family:var(--tc-mono)}
html.tc-panels .metal-row>*{transform:none}html.tc-panels .metal-row small{color:var(--tc-ink)}
/* Numbers over a stepped fill read through a dark outline (an outline, not a glow). */
html.tc-panels :is(.energy-track span,.xp-bar span){text-shadow:0 0 2px #0b0b0c,0 0 2px #0b0b0c,0 1px 1px #0b0b0c}
/* The host's admin controls (web/admin/, wiki/decisions/0050; only the host's page has them): the spawn and event row in
   the top bar as cells (the Null Ark, test kit and Kryion kit keep their colour as a top edge) and
   the observatory's new-world form as square fields. Resetting the world is red. */
html.tc-panels #titanSpawns button{background:var(--tc-void);border:1px solid var(--tc-line);border-radius:0;color:var(--tc-bone);font-family:var(--tc-mono);
  font-size:10.5px;letter-spacing:-.03em;padding-inline:9px;white-space:nowrap;box-shadow:none}
html.tc-panels #titanSpawns button:hover:not(:disabled){border-color:var(--tc-bone);background:var(--tc-void)}
html.tc-panels #titanSpawns #summonNullArk{border-top:2px solid #adf6ce}html.tc-panels #titanSpawns #testKit{border-top:2px solid #ffe2a0}html.tc-panels #titanSpawns #kryionKit{border-top:2px solid #ffb070}
/* Mono runs wider: with the host's row in the top bar the brand, the status line and the bar's buttons keep one line. */
html.tc-panels .topbar>:is(.brand,.status,button){flex-shrink:0;white-space:nowrap}html.tc-panels #titanSpawns{min-width:0;gap:5px;flex-wrap:wrap;justify-content:flex-end}
html.tc-panels #titanSpawns #progenitorEnding,html.tc-panels #battlePanel #newSeed{border-color:rgba(232,50,42,.6);color:var(--tc-red)}
html.tc-panels :is(#battlePanel #newSeed,#titanSpawns #progenitorEnding):hover:not(:disabled){border-color:var(--tc-red)}
html.tc-panels #battlePanel #worldSeed{font-family:var(--tc-mono);color:var(--tc-ink)}
  color:var(--tc-bone);font-family:var(--tc-mono)}
html.tc-panels #observerPanel :is(textarea,input){background:rgba(11,11,12,.85);border:1px solid var(--tc-line);border-radius:0;color:var(--tc-bone);font-family:var(--tc-mono)}
html.tc-panels #observerPanel :is(textarea,input):focus{outline:none;border-color:var(--tc-bone)}
html.tc-panels #observerPanel #hostSetupForm input:invalid{border-color:var(--tc-orange)}
html.tc-panels #observerPanel #hostSetup{border-top:1px dashed var(--tc-line)}
html.tc-panels #observerPanel #hostSetupForm label{color:var(--tc-dim);font-family:var(--tc-mono)}
html.tc-panels #observerPanel #hostStart.confirm{background:var(--tc-red);color:var(--tc-bone)}
html.tc-panels #observerPanel :is(#observerCounts,#hostStatus){color:var(--tc-ink)}
/* The Summoning (web/features/intro/; owner 2026-10-26: "the same typography and styling with the text"): every line of
   text in the terminal's mono on black glass with crop marks. Orange stays the Progenitor's (the title, the speaker, the
   scene bar), the race card keeps its race colour, the rest is bone; no glow. The scene underneath is untouched, and only
   opacity and transform animate, as before. */
html.tc-panels .briefing-title{font:800 clamp(24px,4.6vw,60px)/1 var(--tc-mono);letter-spacing:.18em;color:var(--tc-orange);text-shadow:none}
html.tc-panels .briefing-title::before{content:'-=[ ';color:var(--tc-ink)}html.tc-panels .briefing-title::after{content:' ]=-';color:var(--tc-ink)}
html.tc-panels .briefing-subs{padding:12px 18px 14px;background:var(--tc-marks),var(--tc-scan),rgba(11,11,12,.72);border:1px solid var(--tc-line)}
html.tc-panels .briefing-speaker{font:700 11.5px/1 var(--tc-mono);letter-spacing:.2em;color:var(--tc-orange);padding-bottom:7px;margin-bottom:9px;border-bottom:1px dashed var(--tc-rule)}
html.tc-panels .briefing-speaker::before{content:'-=[ ';color:var(--tc-ink)}html.tc-panels .briefing-speaker::after{content:' ]=-';color:var(--tc-ink)}
html.tc-panels .briefing-subs p{font:500 clamp(14px,1.6vw,19px)/1.45 var(--tc-mono);letter-spacing:-.02em;color:var(--tc-bone);text-shadow:0 0 2px #0b0b0c,0 1px 1px #0b0b0c}
html.tc-panels .briefing-subs p::after{content:'_';color:var(--tc-orange)}
html.tc-panels .briefing-caption{background:var(--tc-marks),rgba(11,11,12,.85);border:1px solid var(--tc-line);border-radius:0;color:var(--tc-dim);
  font:500 11px/1.3 var(--tc-mono);letter-spacing:.08em;text-transform:uppercase}
html.tc-panels .briefing-caption::before{content:'+- ';color:var(--tc-ink)}
html.tc-panels .briefing-card{background:var(--tc-scan),var(--tc-void);border:1px solid var(--tc-line);border-left:3px solid var(--race,var(--tc-orange))}
html.tc-panels .briefing-card b{font:800 clamp(17px,2.3vw,28px)/1.1 var(--tc-mono);letter-spacing:.06em}
html.tc-panels .briefing-card small{font-family:var(--tc-mono);font-size:10.5px;letter-spacing:.14em;color:var(--tc-dim);padding-top:5px;border-top:1px dashed var(--tc-rule)}
html.tc-panels .briefing-chapters button i{border-radius:0;background:var(--tc-line)}
html.tc-panels .briefing-chapters button.done i{background:rgba(255,106,61,.55)}html.tc-panels .briefing-chapters button.on i{background:var(--tc-orange)}
html.tc-panels .briefing-chapters button span{font-family:var(--tc-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tc-bone);background:var(--tc-void);
  border:1px solid var(--tc-line);border-radius:0}
html.tc-panels .briefing-hint{font-family:var(--tc-mono);letter-spacing:.08em;color:var(--tc-ink)}
html.tc-panels .briefing-skip{background:var(--tc-void);border:1px solid var(--tc-line);border-radius:0;color:var(--tc-bone);font-family:var(--tc-mono);box-shadow:none}
html.tc-panels .briefing-skip:hover:not(:disabled){background:var(--tc-void);border-color:var(--tc-bone)}
html.tc-panels .briefing-skip kbd{border:1px solid var(--tc-line);border-radius:0;color:var(--tc-ink);font-family:var(--tc-mono)}
html.tc-panels #briefing{font-family:var(--tc-mono)}