/* QOS v2.1. Two fonts: Space Grotesk (display + UI), DM Mono (labels, data). */
:root {
  --blue: #163BEF;
  --paper: #F7F6F2;
  --page: #163BEF;   /* SETUP: PAGE BACKGROUND */
  --bg: var(--page);
  --ink: #fff;
  --dim: rgba(255,255,255,.62);
  --faint: rgba(255,255,255,.4);
  --line: rgba(255,255,255,.26);
  --line-2: rgba(255,255,255,.55);
  --win: color-mix(in srgb, var(--page) 86%, #000);
  --win-head: color-mix(in srgb, var(--page) 79%, #000);
  --shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 28px 60px -12px rgba(2,8,70,.6), 0 4px 14px rgba(2,8,70,.35);
  --accent: #fff;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  /* SYSTEM FONT (SETUP / ?font=cga|all|dm). Sizes go through round(down, max(size, min), step): DM Mono keeps its sizes,
     IBM CGA snaps to 16px or integer multiples of 8 (its 8px grid), with no tracking and no smoothing. */
  --mono-min: 0px; --mono-step: 1px; --ls-mono: 1; --mono-smooth: antialiased;
  --sans-min: 0px; --sans-step: 1px; --ls-sans: 1; --sans-smooth: antialiased;
  --top: 56px;
  --rail: 184px;
  --taskbar: 34px;
  --status: 30px;
  --dock-h: 260px;
  --robot-h: 180px;
  --robot-w: 151px;
  --scan-raw: .22;
  --scan: var(--scan-raw);
}
/* the era's scanline depth (Q: "punch up the scanlines some in the new 1996 so they are deep enough"): 1996 is twice the
   SETUP value, capped; 1986 keeps the value as set. --scan is what every scanline layer reads. */
body { --scan-era: 2; --scan: min(.42, calc(var(--scan-raw) * var(--scan-era))); }
body.y1996 { --scan-era: 1; }
body.light {
  --bg: #F7F6F2; --ink: #163BEF;
  --dim: rgba(22,59,239,.7); --faint: rgba(22,59,239,.45);
  --line: rgba(22,59,239,.24); --line-2: rgba(22,59,239,.55);
  --win: #fff; --win-head: #EEEDE6;
  --shadow: 0 28px 60px -14px rgba(22,59,239,.28), 0 4px 14px rgba(22,59,239,.12);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: round(down, max(16px, var(--sans-min)), var(--sans-step)); line-height: 1.4;
  overflow: hidden; -webkit-font-smoothing: var(--sans-smooth);
  transition: background .25s, color .25s;
}
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 600; background: var(--ink); color: var(--bg); padding: 8px 12px; font: 500 round(down, max(12px, var(--mono-min)), var(--mono-step)) var(--mono); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.skip:focus { top: 8px; }
kbd { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); border: 1px solid var(--line-2); padding: 1px 5px; margin: 0 3px 0 6px; letter-spacing: calc(0 * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- shell ---------- */
#app { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: var(--top) minmax(0,1fr) var(--taskbar) var(--status); height: 100svh; position: relative; transform-origin: 50% 50%; }
.top { display: flex; align-items: center; gap: 22px; padding: 0 28px; border-bottom: 1px solid var(--line); position: relative; z-index: 60; background: var(--bg); transition: background .25s; }
.brand { font-weight: 600; font-size: round(down, max(24px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(-.06em * var(--ls-sans)); display: flex; align-items: flex-start; gap: 3px; width: calc(var(--rail) - 28px - 22px); flex: none; }
.brand-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); margin-top: 8px; }
.mode-tag { font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.1em * var(--ls-mono)); display: flex; align-items: center; gap: 10px; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.mode-tag b { font-weight: 500; display: inline-block; min-width: 9ch; }
.mdot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); transition: background .3s, box-shadow .3s; }
.spacer { flex: 1; }
.clock { font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.1em * var(--ls-mono)); color: var(--dim); font-variant-numeric: tabular-nums; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.tb-btn, .pal { font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.1em * var(--ls-mono)); padding: 8px 0 8px 18px; border-left: 1px solid var(--line); white-space: nowrap; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.tb-btn b { font-weight: 500; display: inline-block; min-width: 3ch; }
.tb-btn[aria-pressed="false"] b { opacity: .55; }
.tb-btn:hover, .pal:hover { color: var(--ink); }
.gear { display: inline-block; transition: transform .6s cubic-bezier(.2,1.4,.4,1); }
#setupBtn:hover .gear { transform: rotate(90deg); }
.pal span { opacity: .55; }
.pal:hover span { opacity: 1; }

.body { display: grid; grid-template-columns: var(--rail) minmax(0,1fr); min-height: 0; min-width: 0; }
.rail { border-right: 1px solid var(--line); padding: 30px 24px 22px 28px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; position: relative; z-index: 2; }
.rail-label { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); color: var(--faint); margin: 0 0 14px; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rail-nav, .rail-modes { list-style: none; margin: 0; padding: 0; }
.rail-item { display: flex; align-items: baseline; width: 100%; gap: 12px; font-size: round(down, max(20px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(-.02em * var(--ls-sans)); padding: 6px 0; text-align: left; transition: padding .25s cubic-bezier(.2,1.2,.4,1); }
.rail-item i { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); font-style: normal; color: var(--faint); letter-spacing: calc(.08em * var(--ls-mono)); width: 18px; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rail-item em { margin-left: auto; font-style: normal; font-size: round(down, max(13px, var(--sans-min)), var(--sans-step)); opacity: 0; transition: opacity .15s; }
.rail-item:hover { padding-left: 4px; }
.rail-item.on i { color: var(--ink); }
.rail-item.on em { opacity: .8; }
.rail-item:hover em, .rail-item:focus-visible em { opacity: .8; }
.rail-modes-label { margin-top: 34px; }
/* QTOOLS: a sublist like MODES; the heading and each tool open qtools.design in a new tab (Q) */
.rail-qtools-label { margin-top: 26px; }
.rail-qtools-label a { color: inherit; text-decoration: none; display: inline-flex; gap: 6px; }
.rail-qtools-label a:hover, .rail-qtools-label a:focus-visible { color: var(--ink); }
.rail-qtools a { text-decoration: none; }
.rail-qtools .n { font-family: var(--sans); }
.rail-modes li { border-top: 1px solid var(--line); }
.rail-modes li:last-child { border-bottom: 1px solid var(--line); }
.rail-modes :is(button, a) { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 0; font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.1em * var(--ls-mono)); text-align: left; color: var(--dim); transition: color .15s, padding .25s cubic-bezier(.2,1.2,.4,1); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rail-modes :is(button, a):hover, .rail-modes :is(button, a):focus-visible, .rail-modes button[aria-current="true"] { color: var(--ink); padding-left: 6px; }
.rail-modes .d { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--line-2); flex: none; }
.rail-modes button[aria-current="true"] .d { background: var(--accent); border-color: var(--accent); }
.rail-modes .n { margin-left: auto; color: var(--faint); }
.rail-note { margin: auto 0 0; font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step))/1.8 var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); color: var(--faint); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }

.stage { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; min-width: 0; min-height: 0; }
main { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr); position: relative; min-height: 0; }

.intro { display: flex; flex-direction: column; padding: clamp(24px, 6.5vh, 64px) 0 28px 40px; min-height: 0; transition: opacity .5s, transform .6s cubic-bezier(.2,1,.3,1); position: relative; z-index: 2; pointer-events: none; }
.eyebrow { font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.22em * var(--ls-mono)); margin: 0 0 clamp(18px, 3.5vh, 34px); display: flex; align-items: center; gap: 14px; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.eyebrow::after { content: ""; width: 56px; height: 1px; background: var(--line-2); }
h1 { margin: 0; font-weight: 500; font-size: round(down, max(clamp(46px, min(6.2vw, 12.5vh), 112px), var(--sans-min)), var(--sans-step)); line-height: .98; letter-spacing: calc(-.062em * var(--ls-sans)); }
.sub { margin: clamp(16px, 3vh, 28px) 0 0; font-size: round(down, max(clamp(18px, 1.6vw, 24px), var(--sans-min)), var(--sans-step)); letter-spacing: calc(-.02em * var(--ls-sans)); }
/* who Q is, in Q's words: real text in the page so search engines read it too */
.bio { margin: clamp(10px, 1.8vh, 16px) 0 0; max-width: 46ch; font-size: round(down, max(15px, var(--sans-min)), var(--sans-step)); line-height: 1.5; color: color-mix(in srgb, var(--ink) 88%, transparent); letter-spacing: calc(-.005em * var(--ls-sans)); }
.sub + .bio { margin-top: clamp(14px, 2.4vh, 22px); }
body.hc .bio { color: var(--ink); }
/* short screens (qos.js fitIntro): everything tightens; Q's words always stay */
.intro.fit-2 .eyebrow { margin-bottom: 12px; }
.intro.fit-2 h1 { font-size: round(down, max(clamp(40px, min(5.4vw, 10vh), 100px), var(--sans-min)), var(--sans-step)); }
.intro.fit-2 .sub { margin-top: 12px; }
.intro.fit-2 .bio { margin-top: 8px; line-height: 1.42; font-size: round(down, max(14px, var(--sans-min)), var(--sans-step)); max-width: 50ch; }
.intro.fit-3 h1 { font-size: round(down, max(clamp(32px, min(4.4vw, 8vh), 80px), var(--sans-min)), var(--sans-step)); }
.intro.fit-3 .sub { font-size: round(down, max(16px, var(--sans-min)), var(--sans-step)); margin-top: 8px; }
.intro.fit-3 .eyebrow { margin-bottom: 8px; }
.intro.fit-3 { padding-top: 16px; }
body.has-windows .intro { opacity: .14; transform: translateX(-6px); }
body.has-windows.intro-awake .intro { opacity: 1; transform: none; }   /* clicked awake (Q) */

.portrait { position: relative; min-width: 0; min-height: 0; }
.cam { position: absolute; margin: 0; font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); color: var(--faint); pointer-events: none; font-variant-numeric: tabular-nums; z-index: 26; transition: opacity .3s; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.cam-a { left: 8px; top: 20px; }
.cam-b { right: 28px; bottom: 16px; }
.cam-a::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; }
body.robot-docked .portrait .cam { opacity: 0; }

/* ---------- Robot Q's body (fixed; sits in the portrait slot or docks bottom-right) ---------- */
.robot { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 25; pointer-events: none; transition: opacity .5s, background .25s, border-color .25s; border: 1px solid transparent; }
.robot canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.robot.docked canvas { inset: 6px 0 4px; height: calc(100% - 10px); }
body.crt .robot.docked::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 6px); opacity: calc(var(--scan) * .45); width: auto; height: auto; border: 0; }
body.crt.light .robot.docked::after { background: repeating-linear-gradient(0deg, #163BEF 0 3px, transparent 3px 6px); mix-blend-mode: multiply; opacity: calc(var(--scan) * .2); }
.robot.docked .rb-label, .robot.docked .rb-gaze { z-index: 2; background: var(--bg); padding: 1px 4px; left: 4px; }
.robot.docked .rb-label { top: 4px; }
.robot.docked .rb-gaze { bottom: 4px; right: auto; max-width: calc(100% - 8px); }
body.booting .robot { opacity: 0; }
.robot.docked { z-index: 415; background: var(--bg); border-color: var(--line-2); box-shadow: var(--shadow); }
/* the two corner marks are the dock's resize handles (they look exactly as before: 7px, 1px ink, 4px outside the frame) */
.rb-c { position: absolute; width: 7px; height: 7px; display: none; z-index: 4; transition: filter .15s; }
.rb-c::before { content: ""; position: absolute; inset: -10px; }
.rb-tl { left: -4px; top: -4px; border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); cursor: nwse-resize; }
.rb-br { right: -4px; bottom: -4px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); cursor: nwse-resize; }
.robot.docked .rb-c { display: block; }
.robot.docked .rb-c:hover, .robot.sizing .rb-c { filter: drop-shadow(0 0 3px var(--ink)) brightness(1.4); }
.robot.docked { pointer-events: auto; cursor: grab; touch-action: none; }
.robot.dragging { cursor: grabbing; }
.robot.moving { transition: none; }
body.robot-docked.robot-free .dock { min-height: 0; padding-right: 28px; display: block; }
.rb-label, .rb-gaze { position: absolute; margin: 0; font: 400 round(down, max(9px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); opacity: 0; transition: opacity .3s; white-space: nowrap; pointer-events: none; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rb-label { left: 8px; top: 7px; font-size: round(down, max(8px, var(--sans-min)), var(--sans-step)) !important; letter-spacing: calc(.1em * var(--ls-sans)) !important; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.rb-label i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: blink 1.6s steps(1) infinite; }
.rb-label span { color: var(--faint); }
.rb-gaze { left: 8px; right: 8px; bottom: 6px; font-size: round(down, max(8px, var(--sans-min)), var(--sans-step)) !important; color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.robot.docked .rb-label, .robot.docked .rb-gaze { opacity: 1; }
.perr { position: absolute; top: 40%; left: 0; right: 0; text-align: center; font: 400 round(down, max(12px, var(--mono-min)), var(--mono-step)) var(--mono); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }

/* ---------- dock: reply, prompt, chips ---------- */
.dock { border-top: 1px solid var(--line); padding: 12px 28px 14px 40px; background: var(--bg); position: relative; z-index: 60; transition: background .25s, padding .45s var(--spring-soft, ease); }
body.robot-docked .dock { padding-right: calc(var(--robot-w) + 46px); }
.reply-wrap { min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 12px; max-width: 900px; }
.reply { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 88px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px); mask-image: linear-gradient(to bottom, transparent 0, #000 26px); }
.rl { margin: 0; font-size: round(down, max(19px, var(--sans-min)), var(--sans-step)); line-height: 1.28; letter-spacing: calc(-.015em * var(--ls-sans)); transition: opacity .45s, color .45s; flex: none; }
.rl.you, .rl.sys { font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step))/1.5 var(--mono); letter-spacing: calc(.08em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rl.you { color: var(--faint); }
.rl.you::before { content: "> "; }
.rl.sys { color: var(--dim); letter-spacing: calc(.06em * var(--ls-sans)); }
.rl.sys::before { content: "› "; color: var(--faint); }
.rl.old:not(.you):not(.sys) { opacity: .42; }
.rl.older { opacity: .22 !important; }
.rl.gone { opacity: 0 !important; }
.rl .caret { display: inline-block; width: .5ch; height: 1em; background: var(--ink); vertical-align: -.12em; margin-left: 2px; animation: blink 1s steps(1) infinite; }
body.robot-docked .dock { min-height: calc(var(--robot-h) + 28px); display: flex; flex-direction: column; justify-content: flex-end; }
body.app-open .reply { height: 108px; }

.prompt { display: flex; align-items: center; height: 54px; border: 1px solid var(--ink); padding: 0 0 0 18px; gap: 14px; background: transparent; transition: box-shadow .2s, height .3s; }
.prompt:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 22%, transparent); }
.prompt-mark { font: 400 round(down, max(16px, var(--mono-min)), var(--mono-step)) var(--mono); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
#prompt { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: round(down, max(20px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(-.015em * var(--ls-sans)); height: 100%; caret-color: var(--ink); }
#prompt::placeholder { color: var(--ink); opacity: .78; }
.go { height: 100%; width: 56px; border-left: 1px solid var(--line-2); font: 400 round(down, max(16px, var(--mono-min)), var(--mono-step)) var(--mono); transition: background .15s, color .15s; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.go:hover, .go:focus-visible { background: var(--ink); color: var(--bg); outline-offset: -3px; }

.chips-row { display: flex; align-items: center; gap: 16px; margin-top: 12px; min-height: 32px; min-width: 0; }
.chips-row > .chips { flex: 1 1 auto; }
.chips { display: flex; flex-wrap: nowrap; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); padding-right: 40px; }
.chips::-webkit-scrollbar { display: none; }
.chips[hidden], .suggest[hidden] { display: none; }
.chip { font: 400 round(down, max(12px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.02em * var(--ls-mono)); height: 32px; padding: 0 13px; border: 1px solid var(--line-2); display: inline-flex; align-items: center; transition: background .15s, color .15s, border-color .15s, transform .3s cubic-bezier(.2,1.6,.4,1); white-space: nowrap; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.chip:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-2px); }
.chip:active { transform: translateY(0) scale(.97); }
.chips.clarify .chip { border-color: var(--ink); }
.chips.clarify::before { content: "PICK ONE"; font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); color: var(--faint); align-self: center; margin-right: 6px; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.suggest { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.sg-k { font: 400 round(down, max(9px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.1em * var(--ls-mono)); border: 1px solid var(--line); color: var(--faint); padding: 2px 5px; margin-right: 8px; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.sg { font: 400 round(down, max(12px, var(--mono-min)), var(--mono-step)) var(--mono); height: 32px; padding: 0 10px; color: var(--faint); white-space: nowrap; border: 1px solid transparent; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.sg b { font-weight: 400; }
.sg span { color: var(--faint); }
.sg.first { color: var(--ink); border-color: var(--line); }
.sg:hover { color: var(--ink); border-color: var(--line-2); }

/* compact dock while a full-screen app is open */
body.app-open .reply-wrap { min-height: 30px; padding-bottom: 10px; }
body.app-open .prompt { height: 46px; }
body.app-open .chips-row:not(:has(.clarify, .suggest:not([hidden]))) { display: none; }

/* ---------- taskbar ---------- */
.taskbar { display: flex; align-items: center; gap: 10px; padding: 0 28px; border-top: 1px solid var(--line); background: var(--bg); position: relative; z-index: 61; min-width: 0; transition: background .25s; }
.tb-count { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); color: var(--faint); width: calc(var(--rail) - 38px); flex: none; white-space: nowrap; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.tb-chips { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; padding: 4px 0; }
.tb-chips::-webkit-scrollbar { display: none; }
.tb-chip { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 10px 0 9px; border: 1px solid var(--line); font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.02em * var(--ls-mono)); white-space: nowrap; flex: none; transition: border-color .2s, background .2s, color .2s; position: relative; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.tb-chip i { width: 7px; height: 7px; background: var(--c); border: 1px solid var(--line-2); flex: none; }
.tb-chip:hover { border-color: var(--line-2); }
.tb-chip.on { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.tb-chip.on i { border-color: var(--bg); }
.tb-chip.min { color: var(--dim); border-style: dashed; }
.tb-chip.min i { opacity: .55; }
.tb-empty { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.08em * var(--ls-mono)); color: var(--faint); white-space: nowrap; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.taskbar:not(.empty) .tb-empty { display: none; }
.tb-tidy { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); height: 24px; padding: 0 10px; border: 1px solid var(--line); color: var(--dim); white-space: nowrap; flex: none; margin-left: auto; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.tb-tidy b { font-weight: 400; color: var(--ink); }
.tb-tidy kbd { margin: 0 0 0 6px; font-size: round(down, max(9px, var(--sans-min)), var(--sans-step)); padding: 0 4px; }
.tb-tidy[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tb-tidy[aria-pressed="true"] b { color: var(--bg); }
.tb-tidy[hidden] { display: none; }
.tb-tidy:not([hidden]) ~ .tb-all { margin-left: 0; }
.tb-all, .tb-close { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); height: 24px; padding: 0 10px; border: 1px solid var(--line); color: var(--dim); white-space: nowrap; flex: none; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.tb-all { margin-left: auto; }
.tb-close { margin-left: 0; }
.taskbar.empty .tb-close, .tb-all[hidden], .tb-close[hidden] { display: none; }
.tb-all[hidden] + .tb-close { margin-left: auto; }
.tb-all span { color: var(--ink); }
.tb-all kbd { margin: 0 0 0 6px; font-size: round(down, max(9px, var(--sans-min)), var(--sans-step)); padding: 0 4px; }
.tb-all:hover, .tb-close:hover { color: var(--ink); border-color: var(--ink); }

.status { display: flex; align-items: center; gap: 24px; padding: 0 28px; border-top: 1px solid var(--line); font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); color: var(--dim); position: relative; z-index: 61; background: var(--bg); transition: background .25s; white-space: nowrap; overflow: hidden; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.st-main { color: var(--ink); font-variant-numeric: tabular-nums; }
.st-keys { margin-left: auto; }
.st-note { opacity: .55; letter-spacing: calc(.06em * var(--ls-sans)); font-size: round(down, max(9px, var(--sans-min)), var(--sans-step)); }

/* ---------- windows ---------- */
#windows { position: fixed; inset: 0; z-index: 410; pointer-events: none; }
/* the desk: one stacking context for every window, clipped to the stage. Desk windows sit on a tall canvas:
   translate = scroll + drift + parallax (set from wm.js), rotate = the scatter's +-1.5deg */
#desk { position: fixed; inset: 0; pointer-events: none; clip-path: inset(var(--top) 0 var(--dock-h) 0); --sy: 0; }
#fly { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.win.desk { translate: calc(var(--dx, 0) * 1px) calc(var(--dy, 0) * 1px - var(--sy, 0) * 1px); rotate: var(--rot, 0deg); }
body.tidy .win.desk { rotate: 0deg; }
.win.fixedpos { translate: none !important; rotate: none !important; }
.win.measuring, .win.measuring * { transition: none !important; }
.win.desk .win-media { aspect-ratio: var(--ar, 3 / 2); cursor: zoom-in; }
.win.sized .win-body { flex: 1; min-height: 0; }
.win.sized .win-media { aspect-ratio: auto; flex: 1; min-height: 60px; }
.win.sized.note > :not(.win-bar):not(.rz), .win.sized .im { overflow: auto; min-height: 0; flex: 1; }
.desk-bar { position: fixed; right: 5px; width: 3px; background: var(--line); pointer-events: auto; z-index: 3; cursor: pointer; }
.desk-bar[hidden] { display: none; }
.desk-bar i { position: absolute; left: 0; right: 0; background: var(--ink); min-height: 18px; }
/* resize handles on every edge and corner */
.rz { position: absolute; z-index: 8; display: block; }
.rz-n, .rz-s { left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.rz-n { top: -4px; } .rz-s { bottom: -4px; }
.rz-e, .rz-w { top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.rz-e { right: -4px; } .rz-w { left: -4px; }
.rz-ne, .rz-nw, .rz-se, .rz-sw { width: 14px; height: 14px; }
.rz-ne { right: -5px; top: -5px; cursor: nesw-resize; } .rz-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.rz-nw { left: -5px; top: -5px; cursor: nwse-resize; } .rz-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.win.max .rz, body.overview .rz { display: none; }
/* apps clip their content, so their handles sit just inside the edge */
.win.app .rz-n { top: 0; } .win.app .rz-s { bottom: 0; } .win.app .rz-e { right: 0; } .win.app .rz-w { left: 0; }
.win.app .rz-ne { right: 0; top: 0; } .win.app .rz-nw { left: 0; top: 0; } .win.app .rz-se { right: 0; bottom: 0; } .win.app .rz-sw { left: 0; bottom: 0; }
body.grabbing, body.grabbing * { user-select: none !important; -webkit-user-select: none !important; }
.win.resizing { transition: none; box-shadow: var(--shadow), 0 0 0 1px var(--ink); }
.win { position: absolute; display: flex; flex-direction: column; background: var(--win); color: var(--ink); border: 1px solid var(--line-2); box-shadow: var(--shadow); pointer-events: auto; min-width: 0; will-change: transform, opacity; transition: border-color .2s, box-shadow .2s, opacity .2s; }
.win:not(.active) { border-color: var(--line); }
.win:not(.active) .win-title { opacity: .7; }
.win:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.win.dragging { transition: none; box-shadow: var(--shadow), 0 0 0 1px var(--ink); }
.win.dragging .win-bar { cursor: grabbing; }
.win-bar { position: relative; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 0 0 12px; border-bottom: 1px solid var(--line); background: var(--win-head); cursor: grab; user-select: none; touch-action: none; flex: none; }
.win.app .win-bar { cursor: default; }
/* brand-color flood: a 2px rule floods across the bar from where the cursor came in */
.win-bar::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--c, var(--ink)); clip-path: inset(0 calc(100% - var(--fx, 50%)) 0 var(--fx, 50%)); transition: clip-path .5s cubic-bezier(.2,.9,.25,1); pointer-events: none; }
.win.flood .win-bar::before, .win:focus-visible .win-bar::before, .win.active.app .win-bar::before { clip-path: inset(0 0 0 0); }
.win-sw { width: 8px; height: 8px; flex: none; background: var(--c, var(--ink)); border: 1px solid var(--line-2); }
.win-title { font: 500 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.06em * var(--ls-mono)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .2s; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.win-year { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.06em * var(--ls-mono)); color: var(--dim); white-space: nowrap; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.win-min, .win-x { width: 34px; height: 33px; font: 400 round(down, max(15px, var(--mono-min)), var(--mono-step))/1 var(--mono); border-left: 1px solid var(--line); flex: none; transition: background .15s, color .15s; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.win-min { margin-left: auto; }
.win-max { width: 34px; height: 33px; font: 400 round(down, max(14px, var(--mono-min)), var(--mono-step))/1 var(--mono); border-left: 1px solid var(--line); flex: none; transition: background .15s, color .15s; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.win-bar:not(:has(.win-min)) .win-max { margin-left: auto; }
.win-max:hover, .win-max:focus-visible { background: var(--ink); color: var(--bg); outline-offset: -3px; }
.win-x:hover, .win-x:focus-visible, .win-min:hover, .win-min:focus-visible { background: var(--ink); color: var(--bg); outline-offset: -3px; }
.win-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.win-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: color-mix(in srgb, var(--c, #000) 30%, #0b0b0c); flex: none; }
.win-media img, .win-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.win-media video, .tl-media video, .wa-media video { opacity: 0; transition: opacity .4s; }
.win-media video.on, .tl-media video.on, .wa-media video.on { opacity: 1; }
.win-info { display: none; }

/* the Field mini card, as an info strip */
.win-strip { border-top: 1px solid var(--line); padding: 9px 12px 10px; display: grid; gap: 8px; flex: none; container-type: inline-size; background: var(--win); }
@container (max-width: 300px) { .ws-sw { display: none; } }
.ws-ctx { margin: 0; font-size: round(down, max(14px, var(--sans-min)), var(--sans-step)); line-height: 1.25; letter-spacing: calc(-.01em * var(--ls-sans)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-meta { display: flex; align-items: center; gap: 10px; font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.1em * var(--ls-mono)); color: var(--dim); min-width: 0; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.ws-mode { border: 1px solid var(--line-2); padding: 2px 6px; color: var(--ink); }
.ws-sw { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ws-sw i { width: 9px; height: 9px; background: var(--c); border: 1px solid var(--line-2); }
.ws-go { margin-left: auto; font: 500 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.1em * var(--ls-mono)); text-transform: uppercase; height: 24px; padding: 0 9px; border: 1px solid var(--line-2); white-space: nowrap; transition: background .15s, color .15s, border-color .15s; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.ws-go:hover, .ws-go:focus-visible { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ws-go.case { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ws-go.case:hover, .ws-go.case:focus-visible { background: transparent; color: var(--ink); }

#scrim { position: fixed; inset: var(--top) 0 calc(var(--taskbar) + var(--status)) 0; z-index: 397; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
#scrim.on { opacity: 1; }
.win.max { z-index: 9999 !important; transition: left .6s var(--spring, ease), top .6s var(--spring, ease), width .6s var(--spring, ease), height .6s var(--spring, ease), border-color .2s; }
.win.settling { transition: left .6s var(--spring, ease), top .6s var(--spring, ease), width .6s var(--spring, ease), height .6s var(--spring, ease); }
.win.max .win-media { aspect-ratio: auto; flex: 1; border-right: 1px solid var(--line); cursor: default; }
.win.max .win-media img, .win.max .win-media video { object-fit: contain; object-position: center; }
.win.max .win-strip { display: none; }
.win.max .win-body { flex-direction: row; }
.win.max .win-info { display: flex; flex-direction: column; width: min(340px, 36%); flex: none; padding: 26px 26px 22px; overflow: auto; animation: infoin .5s .15s backwards cubic-bezier(.2,1,.3,1); }
@keyframes infoin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.info-k { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.16em * var(--ls-mono)); color: var(--dim); margin: 0 0 18px; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.info-t { margin: 0 0 10px; font-weight: 500; font-size: round(down, max(clamp(28px, 3.2vw, 46px), var(--sans-min)), var(--sans-step)); line-height: 1; letter-spacing: calc(-.055em * var(--ls-sans)); }
.info-c { margin: 0 0 28px; font-size: round(down, max(17px, var(--sans-min)), var(--sans-step)); line-height: 1.35; letter-spacing: calc(-.01em * var(--ls-sans)); }
.info-dl { margin: 0; border-top: 1px solid var(--line); }
.info-dl div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.08em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.info-dl dt { color: var(--dim); }
.info-dl dd { margin: 0; display: flex; align-items: center; gap: 8px; }
.info-dl i { width: 10px; height: 10px; background: var(--c); border: 1px solid var(--line-2); }
.info-go { margin-top: 20px; height: 40px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); font: 500 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); text-transform: uppercase; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.info-foot { margin: auto 0 0; padding-top: 22px; font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step))/1.8 var(--mono); letter-spacing: calc(.1em * var(--ls-mono)); color: var(--faint); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }

/* tiled note windows scroll inside their cell */
.win.clip { overflow: hidden; }
.win.clip > :not(.win-bar) { overflow: auto; min-height: 0; flex: 1; }

/* app windows fill the stage */
.win.app { overflow: hidden; }
.win.app > :not(.win-bar) { flex: 1; min-height: 0; }

/* ---------- overview (Exposé) ---------- */
body.overview .win { cursor: pointer; box-shadow: var(--shadow); }
body.overview .win * { pointer-events: none; }
body.overview .win:hover { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 4px; }
.win.ov-min { opacity: .8; }
.ov-labels { position: fixed; inset: 0; pointer-events: none; z-index: 415; }
.ov-label { position: absolute; pointer-events: auto; display: flex; align-items: center; justify-content: center; gap: 8px; height: 22px; font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.04em * var(--ls-mono)); white-space: nowrap; overflow: hidden; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.ov-label i { width: 7px; height: 7px; background: var(--c); border: 1px solid var(--line-2); flex: none; }
.ov-label span { overflow: hidden; text-overflow: ellipsis; }
.ov-label em { font-style: normal; font-size: round(down, max(9px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(.12em * var(--ls-sans)); color: var(--faint); border: 1px dashed var(--line-2); padding: 1px 5px; }
.ov-label:hover span, .ov-label:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Reader ---------- */
.rd { display: grid; grid-template-columns: 216px minmax(0,1fr); min-height: 0; }
.rd-prog { flex: 1; height: 2px; background: var(--line); margin: 0 6px 0 18px; position: relative; overflow: hidden; min-width: 40px; }
.rd-prog i { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.rd-pct { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.1em * var(--ls-mono)); color: var(--dim); width: 34px; text-align: right; font-variant-numeric: tabular-nums; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rd-index { border-right: 1px solid var(--line); padding: 26px 20px 20px 22px; overflow: auto; display: flex; flex-direction: column; }
.rd-k { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.16em * var(--ls-mono)); color: var(--faint); margin: 0 0 14px; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rd-index ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rd-index li button { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: round(down, max(15px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(-.01em * var(--ls-sans)); color: var(--dim); text-align: left; transition: color .2s, padding .3s cubic-bezier(.2,1.3,.4,1); position: relative; }
.rd-index li button i { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); font-style: normal; color: var(--faint); letter-spacing: calc(.08em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rd-index li button:hover { color: var(--ink); }
.rd-index li button.on { color: var(--ink); padding-left: 10px; }
.rd-index li button.on::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin-top: -1px; background: var(--ink); }
.rd-index li button.on i { color: var(--ink); }
.rd-meta { margin: auto 0 0; padding-top: 22px; }
.rd-meta div { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.1em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rd-meta div:last-child { border-bottom: 1px solid var(--line); }
.rd-meta dt { color: var(--faint); }
.rd-meta dd { margin: 0; display: flex; align-items: center; gap: 6px; }
.rd-meta i { width: 9px; height: 9px; border: 1px solid var(--line-2); }
.rd-scroll { overflow-y: auto; position: relative; overscroll-behavior: contain; outline-offset: -3px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.rd-doc { max-width: 980px; margin: 0 auto; padding: 54px 64px 120px; }
.rd-head { padding-bottom: 40px; }
.rd-eyebrow { font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.2em * var(--ls-mono)); margin: 0; display: flex; align-items: center; gap: 10px; color: var(--dim); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rd-eyebrow span { color: var(--faint); }
.rd-head h1 { font-size: round(down, max(clamp(56px, 7.4vw, 112px), var(--sans-min)), var(--sans-step)); margin: 22px 0 22px; }
.rd-sub { margin: 0; font-size: round(down, max(clamp(18px, 1.7vw, 22px), var(--sans-min)), var(--sans-step)); line-height: 1.3; letter-spacing: calc(-.02em * var(--ls-sans)); max-width: 36ch; color: var(--dim); }
.rd-sec { padding-top: 64px; }
.rd-sh { display: flex; align-items: baseline; gap: 16px; font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.18em * var(--ls-mono)); text-transform: uppercase; border-top: 1px solid var(--line-2); padding-top: 12px; margin: 0 0 30px; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rd-sh i { font-style: normal; color: var(--faint); }
.rd-lede { font-size: round(down, max(clamp(26px, 2.5vw, 36px), var(--sans-min)), var(--sans-step)); line-height: 1.14; letter-spacing: calc(-.035em * var(--ls-sans)); max-width: 26ch; margin: 0 0 34px; }
.rd-p { font-size: round(down, max(17px, var(--sans-min)), var(--sans-step)); line-height: 1.6; max-width: 68ch; margin: 0 0 22px; letter-spacing: calc(-.003em * var(--ls-sans)); }
.rd-label { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step))/1.6 var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); text-transform: uppercase; color: var(--dim); margin: -8px 0 28px; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rd-col > .rd-label:first-child { margin: 0 0 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.rd-h { font-size: round(down, max(30px, var(--sans-min)), var(--sans-step)); font-weight: 500; line-height: 1.1; letter-spacing: calc(-.04em * var(--ls-sans)); margin: 48px 0 14px; }
.rd-col .rd-h { font-size: round(down, max(24px, var(--sans-min)), var(--sans-step)); margin: 6px 0 12px; }
.rd-q { margin: 0 0 26px; padding: 22px 0 0; border-top: 1px solid var(--line-2); }
.rd-q p { font-size: round(down, max(clamp(22px, 2vw, 27px), var(--sans-min)), var(--sans-step)); line-height: 1.2; letter-spacing: calc(-.028em * var(--ls-sans)); margin: 0 0 16px; }
.rd-q cite { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step))/1.6 var(--mono); font-style: normal; letter-spacing: calc(.12em * var(--ls-mono)); text-transform: uppercase; color: var(--dim); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rd-fig { margin: 6px 0 36px; }
.rd-img { background: #fff; border: 1px solid var(--line); overflow: hidden; }
.rd-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-img[style*="auto"] img { height: auto; }
.rd-fig figcaption, .rd-reveal figcaption { display: flex; gap: 14px; font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step))/1.6 var(--mono); letter-spacing: calc(.05em * var(--ls-mono)); color: var(--dim); padding-top: 10px; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rd-fig figcaption b, .rd-reveal figcaption b { color: var(--ink); font-weight: 500; white-space: nowrap; letter-spacing: calc(.1em * var(--ls-sans)); }
.rd-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0,1fr)); gap: 22px; margin: 0 0 8px; }
.rd-cols .rd-fig { margin-bottom: 22px; }
.rd-cols .rd-p { margin-bottom: 8px; }
.rd-col > .rd-p:last-child { margin-bottom: 26px; }
.rd-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--line-2); margin: 0 0 40px; }
.rd-m { border-bottom: 1px solid var(--line); padding: 18px 16px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.rd-m + .rd-m { border-left: 1px solid var(--line); padding-left: 16px; }
.rd-m b { font: 400 round(down, max(clamp(40px, 4.4vw, 60px), var(--mono-min)), var(--mono-step))/1 var(--mono); letter-spacing: calc(-.05em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rd-m span { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); text-transform: uppercase; color: var(--dim); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rd-table { margin: 0 0 40px; overflow-x: auto; }
.rd-table table { width: 100%; border-collapse: collapse; font: 400 round(down, max(12px, var(--mono-min)), var(--mono-step))/1.5 var(--mono); letter-spacing: calc(.02em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rd-table thead th { text-align: left; font-weight: 400; font-size: round(down, max(10px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(.14em * var(--ls-sans)); text-transform: uppercase; color: var(--dim); padding: 0 16px 8px 0; border-bottom: 1px solid var(--line-2); }
.rd-table tbody th, .rd-table td { text-align: left; vertical-align: top; padding: 11px 16px 11px 0; border-bottom: 1px solid var(--line); }
.rd-table tbody th { font-weight: 500; white-space: nowrap; color: var(--ink); width: 1%; }
.rd-table td { color: var(--ink); }
.rd-table td + td, .rd-table th + td { padding-left: 16px; border-left: 1px solid var(--line); }
.rd-chip { display: inline-block; width: 9px; height: 9px; border: 1px solid var(--line-2); margin-right: 6px; vertical-align: -1px; }
.rd-inert { border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.rd-end { display: flex; justify-content: space-between; margin-top: 80px; padding-top: 12px; border-top: 1px solid var(--line-2); font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); color: var(--faint); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rise { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .9s var(--spring-soft, ease); }
.rise.in { opacity: 1; transform: none; }
/* what Robot Q is watching: a hairline bracket in the margin */
.rd-g { position: relative; }
.rd-g.watched::before { content: ""; position: absolute; left: -24px; top: 2px; bottom: 2px; width: 1px; background: var(--ink); animation: watchin .35s ease backwards; }
.rd-g.watched::after { content: ""; position: absolute; left: -27px; top: 2px; width: 7px; height: 1px; background: var(--ink); }
@keyframes watchin { from { transform: scaleY(0); } }
/* reveal slider */
.rd-reveal { margin: 6px 0 14px; }
.rd-reveal + .rd-label { margin-top: 0; }
.rv { position: relative; overflow: hidden; border: 1px solid var(--line); background: #fff; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.rv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; }
.rv-b { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.rv-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; outline: none; }
.rv-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--blue); }
.rv-handle span { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); background: var(--blue); color: #fff; font: 400 round(down, max(9px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.1em * var(--ls-mono)); padding: 6px 8px; white-space: nowrap; transition: transform .3s cubic-bezier(.2,1.6,.4,1); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rv:hover .rv-handle span, .rv.drag .rv-handle span { transform: translate(-50%, -50%) scale(1.08); }
.rv-handle:focus-visible span { outline: 2px solid #FFC429; outline-offset: 2px; }
.rv-tag { position: absolute; top: 10px; font: 400 round(down, max(9px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); padding: 4px 7px; background: rgba(11,11,12,.82); color: #fff; pointer-events: none; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rv-tl { left: 10px; } .rv-tr { right: 10px; }

/* ---------- Timeline ---------- */
.win.app .tl { flex: 1; }
.tl { position: relative; overflow: hidden; cursor: grab; touch-action: pan-y; }
.tl:focus { outline: none; }
.tl:focus-visible { box-shadow: inset 0 0 0 1px var(--line-2); }
.rd-scroll:focus { outline: none; }
.tl.drag { cursor: grabbing; }
.tl-world { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 46%; }
.tl-track { position: absolute; left: 0; top: 0; height: 100%; transform-style: preserve-3d; will-change: transform; }
.tl-axis { position: absolute; left: 0; height: 1px; background: var(--line-2); }
.tl-tick { position: absolute; left: 0; top: 0; width: 1px; height: 8px; margin-top: -4px; background: var(--line-2); }
.tl-tick.has { height: 15px; margin-top: -7px; background: var(--ink); }
.tl-tick span { position: absolute; left: 7px; top: 12px; font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.1em * var(--ls-mono)); color: var(--faint); white-space: nowrap; transition: color .2s; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.tl-tick.has span { font-size: round(down, max(12px, var(--sans-min)), var(--sans-step)); color: var(--dim); }
.tl-tick.on span { color: var(--bg); background: var(--ink); padding: 1px 5px; left: 4px; }
.tl-bay { background: var(--ink); }
.tl-bay::before { content: ""; position: absolute; right: 30px; top: 3px; width: 40px; height: 1px; background: repeating-linear-gradient(90deg, var(--bg) 0 3px, transparent 3px 6px); }
.tl-item { position: absolute; left: 0; top: 0; width: var(--iw); display: flex; flex-direction: column; background: var(--win); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: left; transform-origin: 50% 50%; transition: border-color .2s; padding: 0; backface-visibility: hidden; }
.tl-item:hover, .tl-item:focus-visible, .tl-item.near { border-color: var(--line-2); }
.tl-item:hover { border-color: var(--ink); }
.tl-bar { height: 24px; display: flex; align-items: center; gap: 7px; padding: 0 8px; border-bottom: 1px solid var(--line); background: var(--win-head); font: 500 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.04em * var(--ls-mono)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: none; position: relative; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.tl-bar i { width: 6px; height: 6px; background: var(--c); border: 1px solid var(--line-2); flex: none; }
.tl-item:hover .tl-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--c); }
.tl-media { aspect-ratio: 3 / 2; position: relative; overflow: hidden; background: color-mix(in srgb, var(--c) 30%, #0b0b0c); flex: none; }
.tl-media img, .tl-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.tl-meta { height: 21px; font: 400 round(down, max(9px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.1em * var(--ls-mono)); color: var(--dim); padding: 0 8px; display: flex; align-items: center; border-top: 1px solid var(--line); flex: none; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.tl-stem { position: absolute; left: 50%; width: 1px; height: var(--stem); background: linear-gradient(var(--line-2), var(--line)); pointer-events: none; }
.tl-item.up .tl-stem { top: 100%; }
.tl-item:not(.up) .tl-stem { bottom: 100%; }
.tl-center { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, var(--line) 20%, var(--line) 80%, transparent); pointer-events: none; }
.tl-hint { position: absolute; left: 18px; bottom: 10px; margin: 0; font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); color: var(--faint); pointer-events: none; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.tl-now { flex: 1; margin-left: 18px; display: flex; align-items: baseline; gap: 8px; font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.tl-now b { font: 500 round(down, max(13px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.06em * var(--ls-mono)); min-width: 7ch; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.tl-now span { color: var(--faint); }
.win.app .tl-scrub { flex: none; }
.tl-scrub { height: 40px; border-top: 1px solid var(--line); position: relative; cursor: pointer; touch-action: none; outline-offset: -3px; }
.tl-scrub-rail { position: absolute; left: 18px; right: 18px; top: 0; bottom: 0; transition: right .45s var(--spring-soft, ease); }
body.robot-docked .tl-scrub-rail { right: calc(var(--robot-w) + 26px); }
.tl-st { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); font: 400 round(down, max(9px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.06em * var(--ls-mono)); color: var(--faint); padding: 7px 0 0 4px; overflow: hidden; white-space: nowrap; transition: background .2s, color .2s; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.tl-st.has { color: var(--dim); }
.tl-st.has::after { content: ""; position: absolute; left: 4px; bottom: 15px; width: 3px; height: 3px; background: var(--dim); }
.tl-st.on { color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); }
.tl-thumb { position: absolute; bottom: 7px; height: 3px; background: var(--ink); left: 0; pointer-events: none; }

/* ---------- Work app ---------- */
.wa { display: flex; flex-direction: column; min-height: 0; }
.wa-filters { display: flex; align-items: stretch; height: 40px; border-bottom: 1px solid var(--line); padding: 0 0 0 4px; flex: none; overflow-x: auto; scrollbar-width: none; }
.wa-filters button { font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.1em * var(--ls-mono)); padding: 0 14px; color: var(--dim); border-right: 1px solid var(--line); white-space: nowrap; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.wa-filters button i { font-style: normal; color: var(--faint); margin-left: 4px; }
.wa-filters button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.wa-note { margin-left: auto; align-self: center; font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); color: var(--faint); padding: 0 16px; white-space: nowrap; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.wa-scroll { overflow: auto; flex: 1; padding: 18px; overscroll-behavior: contain; }
.wa-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.wa-grid li[hidden] { display: none; }
.wa-card { display: flex; flex-direction: column; width: 100%; border: 1px solid var(--line); background: var(--win-head); text-align: left; transition: transform .4s cubic-bezier(.2,1.5,.4,1), border-color .2s; position: relative; }
.wa-card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--c); transform: scaleX(0); transition: transform .4s cubic-bezier(.2,.9,.25,1); z-index: 1; }
.wa-card:hover, .wa-card:focus-visible { transform: translateY(-3px); border-color: var(--line-2); }
.wa-card:hover::before, .wa-card:focus-visible::before { transform: scaleX(1); }
.wa-media { aspect-ratio: 3 / 2; position: relative; overflow: hidden; background: color-mix(in srgb, var(--c) 30%, #0b0b0c); }
.wa-media img, .wa-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wa-cap { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.04em * var(--ls-mono)); border-top: 1px solid var(--line); min-width: 0; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.wa-cap i { width: 7px; height: 7px; background: var(--c); border: 1px solid var(--line-2); flex: none; }
.wa-cap b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-cap em { margin-left: auto; font-style: normal; color: var(--faint); white-space: nowrap; }

/* ---------- Labs / Writing / About ---------- */
.lw { padding: 18px 18px 14px; }
.lw-intro { margin: 0 0 14px; font-size: round(down, max(18px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(-.02em * var(--ls-sans)); }
.lw ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lw li button { display: grid; grid-template-columns: 22px minmax(0,auto) minmax(0,1fr) auto 14px; align-items: baseline; gap: 10px; width: 100%; padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; transition: padding .3s cubic-bezier(.2,1.3,.4,1); }
.lw li button:hover, .lw li button:focus-visible { padding-left: 6px; }
.lw i { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); font-style: normal; color: var(--faint); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.lw-t { font-size: round(down, max(17px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(-.02em * var(--ls-sans)); white-space: nowrap; }
.lw-c { font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.lw-y { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); color: var(--faint); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.lw-a { font-size: round(down, max(12px, var(--sans-min)), var(--sans-step)); opacity: .45; }
.lw li button:hover .lw-a { opacity: 1; color: var(--c); }
.lw-foot { margin: 12px 0 0; font: 400 round(down, max(9px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); color: var(--faint); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.ab { padding: 22px 22px 18px; }
.ab-k { margin: 0 0 12px; font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.16em * var(--ls-mono)); color: var(--dim); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.ab-k span { color: var(--faint); }
.ab-lede { margin: 0 0 18px; font-size: round(down, max(30px, var(--sans-min)), var(--sans-step)); line-height: 1.05; letter-spacing: calc(-.045em * var(--ls-sans)); font-weight: 500; }
.ab-list { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--line); }
.ab-list li { display: grid; grid-template-columns: 26px 1fr; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: round(down, max(14px, var(--sans-min)), var(--sans-step)); line-height: 1.4; }
.ab-list i { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); font-style: normal; color: var(--faint); padding-top: 3px; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.ab-robot { border: 1px solid var(--line-2); padding: 14px 14px 12px; }
.ab-robot p { margin: 0 0 10px; font-size: round(down, max(14px, var(--sans-min)), var(--sans-step)); line-height: 1.45; }
.ab-robot .ab-k { margin-bottom: 8px; }
.ab-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 400 round(down, max(9px, var(--mono-min)), var(--mono-step)) var(--mono) !important; letter-spacing: calc(.14em * var(--ls-mono)); color: var(--faint); margin: 0 !important; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.ab-try button { font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.02em * var(--ls-mono)); height: 26px; padding: 0 10px; border: 1px solid var(--line-2); color: var(--ink); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.ab-try button:hover { background: var(--ink); color: var(--bg); }

/* ---------- BIOS ---------- */
#boot { position: fixed; inset: 0; z-index: 200; background: var(--blue); color: #fff; transform-origin: 50% 50%; }
#boot.gone { display: none; }
.bios { position: absolute; inset: 0; padding: clamp(12px, 2.4vw, 32px); display: flex; }
.bios-frame { position: relative; flex: 1; border: 3px double rgba(255,255,255,.88); padding: clamp(18px, 3.2vw, 46px) clamp(18px, 3.4vw, 50px) clamp(14px, 2vw, 26px); display: flex; flex-direction: column; font: 400 round(down, max(clamp(12px, min(1.3vw, 2.15vh), 19px), var(--mono-min)), var(--mono-step))/1.8 var(--mono); letter-spacing: calc(.02em * var(--ls-mono)); overflow: hidden; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.bios-head { position: absolute; right: clamp(18px, 3.4vw, 50px); top: clamp(16px, 2.8vw, 40px); display: flex; flex-direction: column; align-items: center; }
.bios-q { margin: 0; font: 400 round(down, max(clamp(6px, .62vw, 9px), var(--mono-min)), var(--mono-step))/1.2 var(--mono); letter-spacing: calc(0 * var(--ls-mono)); color: #fff; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.bios-q-cap { margin: 8px 0 0; font: 500 round(down, max(clamp(8px, .7vw, 10px), var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.34em * var(--ls-mono)); padding: 2px 0 2px 6px; border-top: 1px solid rgba(255,255,255,.6); border-bottom: 1px solid rgba(255,255,255,.6); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.bios-lines p { margin: 0; white-space: pre-wrap; min-height: 1.8em; }
.bios-lines .dim { opacity: .6; }
.bios-lines .awake { background: #fff; color: var(--blue); padding: 0 .4em; font-weight: 500; }
.bios-caret { display: inline-block; width: .6em; height: 1.05em; background: #fff; vertical-align: -.2em; margin-left: 1px; animation: blink .9s steps(1) infinite; }
.bios-sum { margin: 1.4em 0 0; max-width: 62em; border: 1px solid rgba(255,255,255,.75); visibility: hidden; }
.bios-sum.on { visibility: visible; }
.bios-sum p { margin: 0; visibility: hidden; }
.bios-sum p.on { visibility: visible; }
.bs-h { display: flex; justify-content: space-between; padding: .15em .8em; background: #fff; color: var(--blue); font-weight: 500; letter-spacing: calc(.14em * var(--ls-sans)); font-size: round(down, max(.8em, var(--sans-min)), var(--sans-step)); }
.bs-grid { display: grid; grid-template-columns: 1fr 1fr; }
.bs-grid p { display: flex; gap: 1em; padding: .25em .8em; border-top: 1px solid rgba(255,255,255,.4); font-size: round(down, max(.86em, var(--sans-min)), var(--sans-step)); }
.bs-grid p.wide { grid-column: 1 / -1; }
.bs-grid p:nth-child(even) { border-right: 1px solid rgba(255,255,255,.4); }
.bs-grid i { font-style: normal; opacity: .62; width: 6.5em; flex: none; }
.bs-grid b { font-weight: 400; }
.bios-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; border-top: 1px solid rgba(255,255,255,.5); padding-top: 14px; opacity: 0; }
.bios-foot.on { opacity: 1; }
.bios-setup { font: inherit; text-align: left; }
.bios-setup b { background: #fff; color: var(--blue); padding: 0 .35em; font-weight: 500; }
.bios-setup u { text-underline-offset: 4px; text-decoration-thickness: 1px; }
.bios-setup:hover u { text-decoration-thickness: 2px; }
.bios-any { animation: blink 1.1s steps(1) infinite; }
.bios-id { margin: 8px 0 0; font-size: round(down, max(.7em, var(--sans-min)), var(--sans-step)); letter-spacing: calc(.1em * var(--ls-sans)); opacity: .55; }
.powerline { position: fixed; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #fff; box-shadow: 0 0 22px 6px rgba(255,255,255,.75), 0 0 2px #fff; z-index: 250; pointer-events: none; }

/* ---------- SETUP (always BIOS blue) ---------- */
.setup { position: fixed; z-index: 420; left: 0; top: 0; width: min(700px, calc(100vw - 16px)); color: #fff; font: 400 round(down, max(12px, var(--mono-min)), var(--mono-step))/1.5 var(--mono); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.setup[hidden] { display: none; }
.set-frame { position: relative; isolation: isolate; background: #163BEF; border: 3px double rgba(255,255,255,.92); box-shadow: 0 30px 80px rgba(0,0,30,.55), 0 0 0 1px #163BEF; }
.set-bar { display: flex; justify-content: space-between; align-items: center; background: #fff; color: #163BEF; padding: 5px 6px 5px 12px; font-weight: 500; letter-spacing: calc(.18em * var(--ls-sans)); cursor: move; user-select: none; touch-action: none; }
.setup.dragging .set-bar { cursor: grabbing; }
.set-x { font: 500 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.1em * var(--ls-mono)); border: 1px solid #163BEF; padding: 1px 7px; color: #163BEF; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.set-x:hover { background: #163BEF; color: #fff; }
.set-body { padding: 6px 18px 12px; overflow: auto; max-height: calc(100svh - 170px); display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.set-group h3 { font: 500 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.2em * var(--ls-mono)); color: #FFC429; margin: 12px 0 4px; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.set-group:nth-child(1) { grid-column: 1 / -1; }
.set-group:nth-child(2) { grid-row: span 2; }
.set-row { display: grid; grid-template-columns: auto minmax(8px,1fr) auto; align-items: center; gap: 8px; min-height: 27px; }
.set-row label { white-space: nowrap; font-size: round(down, max(11px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(.06em * var(--ls-sans)); }
.set-dots { border-bottom: 1px dotted rgba(255,255,255,.45); height: 1px; align-self: center; }
.set-ctl { display: flex; align-items: center; gap: 8px; }
.set-ctl output { min-width: 56px; text-align: right; color: #FFC429; font-variant-numeric: tabular-nums; font-size: round(down, max(11px, var(--sans-min)), var(--sans-step)); }
.setup input[type=range] { -webkit-appearance: none; appearance: none; width: 104px; height: 16px; background: transparent; margin: 0; cursor: pointer; }
.setup input[type=range]::-webkit-slider-runnable-track { height: 1px; background: rgba(255,255,255,.6); }
.setup input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 14px; margin-top: -7px; background: #fff; border: 0; }
.setup input[type=range]::-moz-range-track { height: 1px; background: rgba(255,255,255,.6); }
.setup input[type=range]::-moz-range-thumb { width: 8px; height: 14px; background: #fff; border: 0; border-radius: 0; }
.setup select { background: #163BEF; color: #fff; border: 1px solid rgba(255,255,255,.65); font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); padding: 2px 4px; border-radius: 0; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.set-tog { display: flex; border: 1px solid rgba(255,255,255,.65); }
.set-tog span { padding: 1px 7px; font-size: round(down, max(10px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(.1em * var(--ls-sans)); opacity: .6; }
.set-tog.on span:first-child, .set-tog:not(.on) span:last-child { background: #fff; color: #163BEF; opacity: 1; }
.set-color { display: inline-flex; align-items: center; gap: 0; border: 1px solid rgba(255,255,255,.75); }
.setup input[type=color] { width: 26px; height: 20px; border: 0; border-right: 1px solid rgba(255,255,255,.75); background: none; padding: 2px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.setup input[type=color]::-moz-color-swatch { border: 1px solid rgba(255,255,255,.5); }
.set-hex { width: 74px; height: 20px; background: transparent; border: 0; color: #FFC429; font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.06em * var(--ls-mono)); padding: 0 6px; text-transform: uppercase; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.set-hex:focus { outline: none; background: rgba(255,255,255,.1); }
.setup input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.setup input[type=color]::-webkit-color-swatch { border: 1px solid rgba(255,255,255,.5); }
.set-ramp { grid-template-columns: auto minmax(8px,1fr) auto; }
.set-txt { width: 96px; background: transparent; border: 1px solid rgba(255,255,255,.65); color: #fff; font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); padding: 1px 5px; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.set-txt[hidden] { display: none; }
.set-help { margin: 0; padding: 7px 18px; border-top: 1px solid rgba(255,255,255,.3); font-size: round(down, max(9px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(.16em * var(--ls-sans)); opacity: .72; }
.set-foot { display: flex; gap: 8px; padding: 10px 18px 14px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.3); }
.set-foot button { border: 1px solid #fff; padding: 6px 11px; font: 500 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.set-foot button:hover, .set-foot button:focus-visible { background: #fff; color: #163BEF; }
.set-msg { position: absolute; right: 18px; bottom: 20px; color: #FFC429; font-size: round(down, max(10px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(.12em * var(--ls-sans)); margin: 0; }
.setup :focus-visible { outline: 1px solid #FFC429; outline-offset: 2px; }

/* ---------- CRT (after the How to Speak Robot kit) ---------- */
#crt { position: fixed; inset: 0; pointer-events: none; z-index: 400; display: none; }
body.crt #crt { display: block; }
#crt i { position: absolute; inset: 0; display: block; }
.crt-scan { background: repeating-linear-gradient(0deg, rgba(0,0,0,1) 0 3px, transparent 3px 6px); opacity: var(--scan); }
.crt-vig { background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%); }
@keyframes roll { to { transform: translateY(130vh); } }
.crt-flick { background: #000; opacity: 0; display: none !important; }
body.crt-flicker #crt .crt-flick { display: block !important; animation: flick 4.2s steps(1) infinite; }
@keyframes flick { 0% { opacity: 0; } 7% { opacity: .016; } 8% { opacity: 0; } 31% { opacity: .02; } 32% { opacity: .008; } 33% { opacity: 0; } 62% { opacity: .012; } 63% { opacity: 0; } 88% { opacity: .018; } 89% { opacity: 0; } }
body.crt:not(.light) :is(.intro h1, .sub, .reply, .rd-head h1, .rd-lede, .rd-h, .info-t, .rd-m b, .tl-now b, .ab-lede, .lw-intro, .bios-lines, .bios-q, .bios-foot) { text-shadow: 0 0 18px rgba(255,255,255,.35), 0 0 2px rgba(255,255,255,.9); }
body.crt:not(.light) .brand { text-shadow: 0 0 14px rgba(255,255,255,.35); }
body.light .crt-scan { background: repeating-linear-gradient(0deg, rgba(22,59,239,1) 0 3px, transparent 3px 6px); mix-blend-mode: multiply; opacity: calc(var(--scan) * .32); }
body.light .crt-vig { background: radial-gradient(ellipse at center, transparent 60%, rgba(10,24,110,.16) 100%); mix-blend-mode: multiply; }

/* windows sit above the global scan layer and carry their own: full strength on chrome + type, MEDIA SCANLINES on images */
body.crt .win::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 6px); opacity: var(--scan); }
body.crt .set-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 6px); opacity: var(--scan); }
body.crt.light .win::after { background: repeating-linear-gradient(0deg, #163BEF 0 3px, transparent 3px 6px); mix-blend-mode: multiply; opacity: calc(var(--scan) * .32); }
.win-media, .rd-fig, .rd-reveal, .tl-world, .im-stage, .jb-media { position: relative; z-index: 6; }
.tl-world { position: absolute; }
body.crt :is(.win-media, .rd-img, .rv, .tl-media, .im-stage, .jb-media)::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 6px); opacity: var(--scan-media, .05); }
.rd-img, .tl-media, .wa-media { position: relative; }
.rv-handle, .rv-tag { z-index: 4; }
/* timeline cards: strong lines on their chrome, gentle over the picture */
body.crt .tl-item::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 6px); opacity: var(--scan); }
.tl-media { z-index: 4; }

/* ---------- laptop height ---------- */
@media (max-height: 800px) and (min-width: 700px) {
  :root { --top: 50px; --taskbar: 32px; --status: 28px; }
  .reply-wrap { min-height: 60px; padding-bottom: 8px; }
  .rl { font-size: round(down, max(17px, var(--sans-min)), var(--sans-step)); }
  .reply { height: 74px; }
  .prompt { height: 46px; }
  .chip { height: 28px; }
  .chips-row { margin-top: 10px; }
  .rail-modes-label { margin-top: 22px; }
  .rail-item { font-size: round(down, max(18px, var(--sans-min)), var(--sans-step)); padding: 4px 0; }
}

/* ---------- tablet ---------- */
@media (max-width: 1000px) and (min-width: 700px) {
  :root { --rail: 0px; }
  .rail { display: none; }
  .body { grid-template-columns: minmax(0,1fr); }   /* the hidden rail left a 0px column the stage fell into, crushing the page (Q saw it at ~1000px) */
  .brand { width: auto; }
  .intro { padding-left: 28px; }
  .dock { padding-left: 28px; }
  .st-keys, .clock { display: none; }
  .tb-count { width: auto; }
  .rd { grid-template-columns: 170px minmax(0,1fr); }
  .rd-doc { padding: 40px 36px 100px; }
  .set-body { grid-template-columns: 1fr; }
}

/* ---------- phone ---------- */
@media (max-width: 699px) {
  :root { --top: 48px; --status: 26px; --taskbar: 34px; }
  .top { padding: 0 12px 0 16px; gap: 12px; }
  .brand { width: auto; font-size: round(down, max(21px, var(--sans-min)), var(--sans-step)); }
  .mode-tag { display: none; }
  .clock { display: none; }
  .tb-btn, .pal { padding-left: 11px; font-size: round(down, max(10px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(.06em * var(--ls-sans)); }
  .gear { display: none; }
  .pal span { display: none; }
  .body { grid-template-columns: minmax(0,1fr); }
  .rail { display: none; }
  main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .portrait { order: 1; grid-row: 1; min-height: 0; margin-bottom: -10px; }
  .cam-a { left: 16px; top: 12px; } .cam-b { right: 16px; bottom: 22px; }
  .intro { order: 2; grid-row: 2; padding: 4px 16px 14px; }
  .intro .eyebrow { margin-bottom: 8px; font-size: round(down, max(10px, var(--sans-min)), var(--sans-step)); }
  h1 { font-size: round(down, max(clamp(40px, 12.4vw, 56px), var(--sans-min)), var(--sans-step)); }
  .sub { margin-top: 8px; font-size: round(down, max(17px, var(--sans-min)), var(--sans-step)); }
  .bio { display: none; }   /* phone is on hold (Game Boy + Newton idea); the text stays in the page */
  .dock { display: flex; flex-direction: column; padding: 8px 16px 10px; }
  body.robot-docked .dock { padding-right: 16px; }
  body.robot-docked .reply-wrap { padding-right: calc(var(--robot-w) + 10px); min-height: 64px; }
  .reply-wrap { min-height: 0; padding-bottom: 8px; order: 1; }
  .rl { font-size: round(down, max(15px, var(--sans-min)), var(--sans-step)); }
  .rl.you { display: none; }
  .reply { height: 62px; }
  body.robot-docked .dock { min-height: 0; }
  .chips-row { order: 2; margin: 0 -16px 10px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; min-height: 34px; }
  .chips-row::-webkit-scrollbar { display: none; }
  .chips { flex-wrap: nowrap; flex: none; }
  .chips.clarify::before { display: none; }
  .prompt { order: 3; height: 48px; padding-left: 14px; gap: 10px; }
  body.app-open .prompt { height: 44px; }
  #prompt { font-size: round(down, max(16px, var(--sans-min)), var(--sans-step)); }
  .go { width: 48px; }
  .taskbar { padding: 0 12px 0 16px; gap: 8px; }
  .tb-count { display: none; }
  .tb-all kbd { display: none; }
  .tb-empty { overflow: hidden; text-overflow: ellipsis; }
  .status { padding: 0 16px calc(env(safe-area-inset-bottom)); gap: 12px; }
  .st-keys, .st-note { display: none; }
  .st-main { font-size: round(down, max(9px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(.1em * var(--ls-sans)); }
  body.has-windows .intro { opacity: 1; transform: none; }

  .robot.docked .rb-label, .robot.docked .rb-gaze { display: none; }
  .robot.docked canvas { inset: 0; height: 100%; }
  .robot.docked { z-index: 415; }
  .tb-close { display: none !important; }
  .tb-chips { flex: 1 1 auto; }

  #desk { display: contents; clip-path: none; }
  #fly { display: none; }
  .rz, .desk-bar, .rb-c { display: none !important; }
  .win.desk { translate: none; rotate: none; }
  .robot.docked { pointer-events: none; }
  #windows { position: fixed; inset: var(--top) 0 var(--dock-h) 0; overflow-y: auto; padding: 12px 16px 104px; display: none; flex-direction: column; gap: 14px; background: var(--bg); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; z-index: 410; }
  body.has-windows #windows { display: flex; pointer-events: auto; }
  .win { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; flex: none; z-index: auto !important; }
  .win.app { position: fixed !important; left: 0 !important; right: 0 !important; top: var(--top) !important; bottom: var(--dock-h) !important; width: auto !important; height: auto !important; z-index: 45 !important; border-width: 0 0 1px; box-shadow: none; }
  .win-bar { cursor: default; }
  #scrim { display: none; }
  .win-media, .win.max .win-media { aspect-ratio: var(--ar, 3 / 2); flex: none; }
  .win.max .win-info { display: none; }
  .win.max .win-strip { display: grid; }
  .win.max .win-body { flex-direction: column; }
  body.overview #windows { display: grid !important; grid-template-columns: 1fr 1fr; align-content: start; }
  body.overview .win.app { position: relative !important; inset: auto !important; height: 220px !important; z-index: auto !important; border-width: 1px; }
  body.overview .win-strip { display: none; }

  .rd { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); }
  .rd-index { border-right: 0; border-bottom: 1px solid var(--line); padding: 0; overflow-x: auto; scrollbar-width: none; flex-direction: row; }
  .rd-index .rd-k, .rd-meta { display: none; }
  .rd-live { flex: none; height: auto; margin: 0; padding: 0 12px; white-space: nowrap; gap: 6px; font-size: round(down, max(10px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(.1em * var(--ls-sans)); }
  .rd-index ol { display: flex; border: 0; }
  .rd-index li button { border: 0; border-right: 1px solid var(--line); padding: 9px 12px; font-size: round(down, max(13px, var(--sans-min)), var(--sans-step)); white-space: nowrap; }
  .rd-index li button.on { padding-left: 12px; box-shadow: inset 0 -2px 0 var(--ink); }
  .rd-index li button.on::before { display: none; }
  .rd-prog { margin-left: 10px; }
  .rd-pct { display: none; }
  .rd-doc { padding: 26px 18px 110px 22px; }
  .rd-head h1 { font-size: round(down, max(52px, var(--sans-min)), var(--sans-step)); }
  .rd-sec { padding-top: 44px; }
  .rd-cols { grid-template-columns: minmax(0,1fr); gap: 0; }
  .rd-metrics { grid-template-columns: 1fr 1fr; }
  .rd-m:nth-child(3) { border-left: 0; padding-left: 0; }
  .rd-g.watched::before { left: -12px; }
  .rd-g.watched::after { left: -15px; }
  .rd-fig figcaption { flex-direction: column; gap: 2px; }
  .rd-table tbody th { white-space: normal; }
  .rd-table table { font-size: round(down, max(11px, var(--sans-min)), var(--sans-step)); }

  .tl-hint { display: none; }
  .tl-now span { display: none; }
  .wa-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .wa-note { display: none; }
  .wa-scroll { padding: 12px 12px 100px; }
  .lw li button { grid-template-columns: 20px minmax(0,1fr) auto 12px; }
  .lw-c { display: none; }

  .bios-frame { font-size: round(down, max(11px, var(--sans-min)), var(--sans-step)); line-height: 1.7; }
  .bios-head { position: static; align-self: flex-end; margin-bottom: 12px; }
  .bios-q { font-size: round(down, max(5px, var(--sans-min)), var(--sans-step)); }
  .bios-foot { flex-direction: column; gap: 6px; }
  .bs-grid { grid-template-columns: 1fr; }
  .bs-grid p:nth-child(even) { border-right: 0; }
  .bs-grid i { width: 5.5em; }
  .set-body { grid-template-columns: 1fr; max-height: calc(100svh - 190px); }
  .setup input[type=range] { width: 90px; }
}

/* ---------- reduced motion: calm and still, still works ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rl .caret, .bios-caret, .bios-any, .rb-label i { animation: none !important; }
  .win { transition: opacity .15s !important; }
  #crt .crt-flick { display: none !important; }
  .rise { opacity: 1; transform: none; }
}

/* ---------- Reader: LAUNCH LIVE SITE, per-case colour, figures that open as windows ---------- */
.rd-live { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 12px; margin: 0 0 22px; background: var(--ink); color: var(--case, var(--bg)); font: 500 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); border: 1px solid var(--ink); transition: background .15s, color .15s; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rd-live:hover, .rd-live:focus-visible { background: transparent; color: var(--ink); }
.win.themed { --win: var(--case); --win-head: color-mix(in srgb, var(--case) 80%, #000); --bg: var(--case); background: var(--case); }
.win.themed-light { --win-head: color-mix(in srgb, var(--case) 92%, #000); }
.rd-img[data-fig] { cursor: zoom-in; }
.rd-img[data-fig]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.rd-img[data-fig]:hover { outline: 1px solid var(--line-2); outline-offset: 3px; }
button.rv-tag { cursor: zoom-in; pointer-events: auto; font: 400 round(down, max(9px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); border: 0; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
button.rv-tag:hover, button.rv-tag:focus-visible { background: #0B0B0C; outline: 1px solid #fff; }

/* ---------- Image window ---------- */
.imgwin .im { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.im-stage { flex: 1; min-height: 0; overflow: hidden; background: var(--win); display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
.im-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.im-stage.one { overflow: auto; cursor: zoom-out; display: block; }
.im-stage.one img { max-width: none; max-height: none; }
.im-foot { display: flex; align-items: center; gap: 10px; height: 46px; border-top: 1px solid var(--line); padding: 0 8px; background: var(--win-head); flex: none; position: relative; z-index: 6; }
.im-cap { flex: 1; min-width: 0; margin: 0; font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step))/1.4 var(--mono); letter-spacing: calc(.04em * var(--ls-mono)); display: flex; gap: 10px; overflow: hidden; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.im-cap b { white-space: nowrap; font-weight: 500; letter-spacing: calc(.1em * var(--ls-sans)); }
.im-cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.im-btn { height: 30px; padding: 0 10px; border: 1px solid var(--line-2); font: 500 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.1em * var(--ls-mono)); white-space: nowrap; flex: none; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.im-btn:hover, .im-btn:focus-visible { background: var(--ink); color: var(--bg); }

/* ---------- Job window ---------- */
.jb { padding: 20px 22px 18px; }
.jb-k { margin: 0 0 10px; font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); color: var(--dim); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.jb-k span { color: var(--faint); }
.jb-role { margin: 0; font-size: round(down, max(28px, var(--sans-min)), var(--sans-step)); line-height: 1.05; letter-spacing: calc(-.04em * var(--ls-sans)); font-weight: 500; }
.jb-co { margin: 6px 0 16px; font-size: round(down, max(17px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(-.01em * var(--ls-sans)); }
.jb-dl { margin: 0 0 14px; border-top: 1px solid var(--line); }
.jb-dl div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.06em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.jb-dl dt { color: var(--dim); } .jb-dl dd { margin: 0; }
.jb-list { margin: 0 0 20px; padding: 0 0 0 16px; font-size: round(down, max(14px, var(--sans-min)), var(--sans-step)); line-height: 1.5; }
.jb-list li { margin: 0 0 6px; }
.jb-list li::marker { content: "› "; color: var(--faint); font-family: var(--mono); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.jb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.jb-grid button { display: flex; flex-direction: column; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--win-head); transition: border-color .2s, transform .35s cubic-bezier(.2,1.5,.4,1); }
.jb-grid button:hover, .jb-grid button:focus-visible { border-color: var(--ink); transform: translateY(-2px); }
.jb-media { aspect-ratio: 3 / 2; overflow: hidden; background: color-mix(in srgb, var(--c) 30%, #0b0b0c); }
.jb-media img, .jb-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.jb-media video { opacity: 0; transition: opacity .4s; } .jb-media video.on { opacity: 1; }
.jb-cap { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); border-top: 1px solid var(--line); min-width: 0; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.jb-cap i { width: 6px; height: 6px; background: var(--c); flex: none; }
.jb-cap b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-cap em { margin-left: auto; font-style: normal; color: var(--faint); }

/* ---------- Timeline: the jobs lane ---------- */
.tl-job { position: absolute; left: 0; top: 0; height: 19px; width: max(var(--sw), min(var(--lw, 120px), 160px)); padding: 0; text-align: left; color: var(--dim); }
.tl-span { position: absolute; left: 0; top: 14px; width: var(--sw); height: 1px; background: var(--line-2); }
.tl-span::before, .tl-span::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: currentColor; }
.tl-span::before { left: 0; } .tl-span::after { right: 0; }
.tl-jl { position: absolute; left: 0; top: 0; font: 400 round(down, max(9.5px, var(--mono-min)), var(--mono-step))/12px var(--mono); letter-spacing: calc(.04em * var(--ls-mono)); white-space: nowrap; max-width: var(--lw, 420px); overflow: hidden; text-overflow: ellipsis; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.tl-jl i { font-style: normal; color: var(--faint); }
.tl-job:hover, .tl-job:focus-visible, .tl-job.now { color: var(--ink); }
.tl-job:hover .tl-span, .tl-job:focus-visible .tl-span, .tl-job.now .tl-span { background: var(--ink); height: 2px; top: 13px; }
.tl-job:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.tl-tip { position: absolute; z-index: 20; max-width: 360px; background: var(--win-head); border: 1px solid var(--line-2); box-shadow: var(--shadow); padding: 10px 12px 8px; font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step))/1.45 var(--mono); pointer-events: none; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.tl-tip[hidden] { display: none; }
.tl-tip b { display: block; font: 500 14px/1.2 var(--sans); letter-spacing: calc(-.01em * var(--ls-sans)); margin-bottom: 4px; }
.tl-tip span { color: var(--dim); }
.tl-tip ul { margin: 6px 0 0; padding-left: 14px; }

/* ---------- HIGH CONTRAST (WCAG 2.2 AAA: 7:1 text, 3:1 UI). Same layout; no scanlines, glow or drift ---------- */
body.hc {
  --bg: #0A1F8F; --ink: #ffffff; --dim: #ffffff; --faint: #E4E8FF; --line: #A9B5F2; --line-2: #ffffff;
  --win: #0A1F8F; --win-head: #061367; --accent: #ffffff;
  --shadow: 0 0 0 1px #ffffff;
}
body.hc.light {
  --bg: #ffffff; --ink: #0A1F8F; --dim: #0A1F8F; --faint: #13237F; --line: #4A57A8; --line-2: #0A1F8F;
  --win: #ffffff; --win-head: #EEF0FA; --accent: #0A1F8F; --shadow: 0 0 0 1px #0A1F8F;
}
body.hc .win.themed-dark { --dim: #ffffff !important; --faint: #E8F4F4 !important; --line: #9FC3C6 !important; --line-2: #ffffff !important; --ink: #ffffff !important; }
body.hc .win.themed { --case: #062A2E !important; }
body.hc :focus-visible { outline: 3px solid var(--ink) !important; outline-offset: 3px !important; }
body.hc *, body.hc *::before, body.hc *::after { text-shadow: none !important; }
body.hc :is(.rl.old, .rl.older, .win:not(.active) .win-title, .pal span, .tb-btn b, .st-note, .tb-chip.min i, .bios-lines .dim, .bios-id, .set-help, .ov-label, .win.ov-min, .tl-item, .rise, .robot.docked .rb-label, .robot.docked .rb-gaze, .cam, .intro, .sg span) { opacity: 1 !important; }
body.hc .rise { transform: none !important; }
body.hc #prompt::placeholder { opacity: 1; color: var(--ink); }
body.hc .rl.older, body.hc .rl.old { color: var(--dim); }
body.hc .reply { -webkit-mask-image: none; mask-image: none; }
body.hc .rv-tag, body.hc button.rv-tag { background: #000; color: #fff; }
body.hc .tb-chip.min { border-style: dashed; color: var(--ink); }
body.hc .win-sw, body.hc .tb-chip i, body.hc .ws-sw i, body.hc .jb-cap i { outline: 1px solid var(--ink); }
body.hc .tl-span { background: var(--ink); }
body.hc .rd-inert { border-bottom-color: var(--ink); }
body.hc .chips.clarify::before { color: var(--ink); }
body.hc .bios-lines .dim { opacity: 1; }
body.hc .set-frame { background: #0A1F8F; box-shadow: 0 0 0 2px #fff; }
body.hc .set-tog span { opacity: 1; }
body.hc .set-tog:not(.on) span:first-child, body.hc .set-tog.on span:last-child { text-decoration: line-through; }
body.hc .setup select { background: #0A1F8F; }
body.hc .set-hex, body.hc .set-ctl output { color: #fff; }
body.hc .set-help { opacity: 1; }

/* v2.1 polish (main session): tags never wrap; reader meta values wrap under their label instead of squeezing it */
.ws-mode, .ws-sw, .ws-go { white-space: nowrap; flex: none; }
.ws-meta { flex-wrap: nowrap; overflow: hidden; }
.ws-sw { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rd-meta div { gap: 12px; }
.rd-meta dt { flex: none; }
.rd-meta dd { text-align: right; justify-content: flex-end; flex-wrap: wrap; min-width: 0; }
.info-dl dd { text-align: right; }

/* v2.1 polish (main session): the QBOT dock = finer glyphs (see bust.js dockGlyph) on the darker title-bar colour */
.robot.docked { background: var(--win-head); }
.robot.docked .rb-label, .robot.docked .rb-gaze { background: var(--win-head); font-size: round(down, max(8px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(.12em * var(--ls-sans)); }
/* scrollable conversation: read back through earlier prompts and replies */
.reply { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; justify-content: flex-start; scroll-padding-bottom: 4px; }
.reply > .rl:first-child { margin-top: auto; }
.reply.browsing { -webkit-mask-image: none; mask-image: none; }
.reply.browsing .rl.old, .reply.browsing .rl.older { opacity: 1 !important; filter: none; }
.reply.browsing .rl.you { cursor: pointer; }
.reply.browsing .rl.you:hover { text-decoration: underline; text-underline-offset: 3px; }
.reply-latest { position: absolute; right: 0; bottom: 14px; font: 500 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); padding: 3px 8px; border: 1px solid var(--line-2); background: var(--win-head); color: var(--ink); opacity: 0; pointer-events: none; transition: opacity .2s; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.reply-wrap:has(.reply.browsing) .reply-latest { opacity: 1; pointer-events: auto; }
.reply.has-new + .reply-latest, .reply-wrap:has(.reply.has-new) .reply-latest { border-color: var(--ink); }
.reply:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
/* rail modes: labels never wrap (AI DIRECTOR broke to two lines when active) */
.rail-modes button { gap: 8px; white-space: nowrap; }
.rail-modes .l { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rail-modes .n { flex: none; }
.rail-modes button:hover, .rail-modes button[aria-current="true"] { padding-left: 4px; }

/* back to top of the desk */
.desk-top { position: fixed; right: 22px; z-index: 3; pointer-events: auto; font: 500 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); padding: 6px 10px; border: 1px solid var(--line-2); background: var(--win-head); color: var(--ink); box-shadow: var(--shadow); transition: border-color .2s, transform .25s cubic-bezier(.2,1.4,.4,1); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.desk-top:hover { border-color: var(--ink); transform: translateY(-2px); }
.desk-top:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.desk-top[hidden] { display: none; }

/* ---------- v2.1 round 13: floating desk controls (TOP / TIDY UP / SORT), above the scan layer ---------- */
.desk-ctl { position: fixed; right: 22px; z-index: 4; display: flex; flex-direction: column; align-items: stretch; gap: 6px; pointer-events: auto; }
.desk-ctl[hidden] { display: none; }
.desk-ctl .desk-top { position: static; }
.dc-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 118px; height: 28px; padding: 0 6px 0 10px; font: 500 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); border: 1px solid var(--line-2); background: var(--win-head); color: var(--ink); box-shadow: var(--shadow); transition: border-color .2s, background .2s, color .2s, transform .25s cubic-bezier(.2,1.4,.4,1); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.dc-btn b { font-weight: 500; }
.dc-btn kbd { margin: 0; font-size: round(down, max(9px, var(--sans-min)), var(--sans-step)); padding: 0 4px; }
.dc-btn:hover { border-color: var(--ink); transform: translateY(-2px); }
.dc-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.dc-btn[aria-pressed="true"] kbd { border-color: var(--bg); }
.dc-btn[hidden] { display: none; }
.dc-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* AUTO-SORT: a strict grid. No rotation, no drift; media fills its cell (cover) */
body.grid .win.desk { rotate: 0deg; }
.win.cell .win-media { aspect-ratio: auto; flex: 1; min-height: 0; }
.win.cell .win-body { flex: 1; min-height: 0; }
.win.cell.note > :not(.win-bar):not(.rz), .win.cell .im { overflow: auto; min-height: 0; flex: 1; }
.win.gliding { transition: none; }

/* ---------- the Infospector colour picker, in QOS chrome: square corners, title-bar colour, hairline, DM Mono ---------- */
.pt-cpick {
  --pt-text: var(--ink); --pt-text-dim: var(--dim); --pt-text-faint: var(--faint);
  --pt-glass: var(--win-head); --pt-glass-2: var(--win); --pt-glass-brd: var(--line); --pt-glass-brd-strong: var(--line-2);
  --pt-accent: var(--ink); --pt-accent-soft: color-mix(in srgb, var(--ink) 14%, transparent); --pt-done: #46c17b;
  --pt-shadow: var(--shadow); --pt-font:  var(--mono); --pt-check: rgba(0,0,0,.28); --glass-radius: 0; --glass-inner-r: 0; --glass-pad: 12px;
  z-index: 500 !important; width: 284px; padding: 12px !important; font-family: var(--mono);
  background: var(--win-head) !important; background-image: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 1px solid var(--line-2) !important; box-shadow: var(--shadow) !important; color: var(--ink);
  filter: none !important; transform: translateY(-4px); transition: opacity 120ms steps(3), transform 160ms cubic-bezier(.2,1.2,.4,1); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.pt-cpick, .pt-cpick *, .pt-cpick *::before, .pt-cpick *::after { border-radius: 0 !important; corner-shape: initial !important; }
.pt-cpick input[type="range"]::-webkit-slider-thumb { border-radius: 0 !important; width: 8px !important; height: 16px !important; background: #fff !important; border: 1px solid #0B0B0C !important; box-shadow: 0 0 0 1px #fff !important; }
.pt-cpick input[type="range"]::-moz-range-thumb { border-radius: 0 !important; width: 8px !important; height: 16px !important; background: #fff !important; border: 1px solid #0B0B0C !important; }
.pt-cpick .pt-cp-sv { border: 1px solid var(--line-2); }
.pt-cpick .pt-cp-sv-thumb { width: 12px; height: 12px; border: 1px solid #fff; box-shadow: 0 0 0 1px #0B0B0C; }
.pt-cpick .pt-cp-sliders input[type="range"] { height: 10px; box-shadow: inset 0 0 0 1px var(--line-2); }
.pt-cpick .pt-cp-eyedrop, .pt-cpick .pt-cp-copy, .pt-cpick .pt-cp-f input, .pt-cpick .pt-cp-fields .pt-cp-fmt { border: 1px solid var(--line-2); background-color: transparent; color: var(--ink); }
.pt-cpick .pt-cp-eyedrop:hover, .pt-cpick .pt-cp-copy:hover, .pt-cpick .pt-cp-fields .pt-cp-fmt:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pt-cpick .pt-cp-f input { font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.pt-cpick .pt-cp-f input:focus, .pt-cpick :focus-visible { border-color: var(--ink); outline: 1px solid var(--ink); outline-offset: 1px; }
.pt-cpick .pt-cp-fields .pt-cp-fmt { font: 500 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.1em * var(--ls-mono)); padding-left: 7px; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.pt-cpick .pt-cp-fmt option { background: var(--win-head); color: var(--ink); }
.pt-cpick .pt-cp-f > span, .pt-cpick .pt-cp-recent-title { font: 400 round(down, max(9px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); color: var(--dim); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.pt-cpick .pt-cp-recent-title::after { content: ""; display: block; height: 1px; margin-top: 6px; background: var(--line); }
.pt-cpick .pt-cp-sw { border: 1px solid var(--line-2); box-shadow: none; }
.pt-cpick .pt-cp-sw:hover { transform: none; outline: 1px solid var(--ink); outline-offset: 1px; }
.pt-cpick svg { width: 14px; height: 14px; }
body.light .pt-cpick { --pt-check: rgba(0,0,0,.18); }
body.hc .pt-cpick { --pt-text-dim: var(--ink); --pt-text-faint: var(--ink); }
body.hc .pt-cpick .pt-cp-f > span, body.hc .pt-cpick .pt-cp-recent-title { color: var(--ink); }
body.crt .pt-cpick::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 6px); opacity: calc(var(--scan) * .6); }

/* ---------- v2.1 round 14: QBOT JR background, the QOS wordmark, the printed boot ---------- */
.robot.docked, .robot.docked .rb-label, .robot.docked .rb-gaze { background: var(--dock-bg, var(--win-head)); }
.brand { align-items: center; gap: 4px; font-size: round(down, max(0, var(--sans-min)), var(--sans-step)); letter-spacing: calc(0 * var(--ls-sans)); color: var(--ink); }
.brand .wm { height: 22px; width: auto; display: block; flex: none; }
.brand .brand-dot { margin-top: -12px; flex: none; }
.bios-wm { display: inline-block; vertical-align: -.16em; }
.bios-wm .wm { height: 1.05em; width: auto; display: block; color: #fff; }
body.crt:not(.light) .bios-wm .wm { filter: drop-shadow(0 0 6px rgba(255,255,255,.4)); }
@media (max-width: 699px) { .brand .wm { height: 19px; } .brand .brand-dot { margin-top: -10px; } }
/* the print-in: rows wait hidden, then scan in left to right; the BIOS layer rides up above them */
#boot { transition: transform 60ms linear; will-change: transform; }
body.printing [data-pr]:not(.pr) { visibility: hidden; }
body.printing .pr { animation: prin 52ms steps(6) both; }
@keyframes prin { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { #boot { transition: none; } body.printing .pr { animation: none; } }
body.crt:not(.light):not(.hc) .brand .wm { filter: drop-shadow(0 0 5px rgba(255,255,255,.45)); }
/* the logo stays crisp: it sits above the CRT layer (vignette + scanlines would grey it in the corner).
   .top drops its own stacking context so the brand can rise past #crt (z 400); the bar keeps its place via
   the desk's clip-path. */
.top { z-index: auto; }
.top > .brand { position: relative; z-index: 401; }
/* ...but it is still on the same tube (Q, 2026-10-07: "this logo and text should match the rest of the page"): the
   wordmark gets the page's scanlines drawn on its own letters (a masked overlay, fixed to the screen so its lines land
   exactly on the global ones), and the intro's glow, not a brighter one. Still above the vignette, so it never greys. */
body.crt:not(.hc):not(.booting):not(.drawing) .top > .brand::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 6px) fixed; opacity: var(--scan); -webkit-mask: url(../assets/brand/qos-wordmark.svg) left center / auto 22px no-repeat; mask: url(../assets/brand/qos-wordmark.svg) left center / auto 22px no-repeat; }
body.crt.light:not(.hc) .top > .brand::after { background: repeating-linear-gradient(180deg, #163BEF 0 3px, transparent 3px 6px) fixed; opacity: calc(var(--scan) * .32); }
@media (max-width: 699px) { body.crt:not(.hc) .top > .brand::after { -webkit-mask-size: auto 19px; mask-size: auto 19px; } }
body.crt:not(.light):not(.hc) .top > .brand .wm { filter: drop-shadow(0 0 9px rgba(255,255,255,.35)) drop-shadow(0 0 1px rgba(255,255,255,.8)); }

/* ---------- v2.1 round 15: the project Index (topic windows + the full app) ---------- */
.ix { display: flex; flex-direction: column; min-height: 0; padding: 14px 16px 12px; }
.win.sized .ix { overflow: auto; flex: 1; }
.ix-tools { display: grid; gap: 10px; margin-bottom: 10px; }
.ix-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.ix-filters button { font: 400 round(down, max(9.5px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.08em * var(--ls-mono)); padding: 4px 7px; border: 1px solid var(--line); color: var(--dim); white-space: nowrap; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.ix-filters button i { font-style: normal; color: var(--faint); margin-left: 3px; }
.ix-filters button:hover { border-color: var(--line-2); color: var(--ink); }
.ix-filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ix-filters button[aria-pressed="true"] i { color: var(--bg); }
.ix-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-2); height: 32px; padding: 0 10px; }
.ix-search span { font: 400 round(down, max(9.5px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); color: var(--dim); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.ix-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font: 400 round(down, max(13px, var(--mono-min)), var(--mono-step)) var(--mono); color: var(--ink); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.ix-search input::placeholder { color: var(--faint); }
.ix-search:focus-within { border-color: var(--ink); }
.ix-count { margin: 0 0 8px; font: 400 round(down, max(9.5px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); color: var(--dim); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.ix-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.ix-row { display: grid; grid-template-columns: minmax(0, 1.3fr) 76px minmax(0, 1.7fr) auto; align-items: baseline; gap: 12px; width: 100%; padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step))/1.4 var(--mono); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
button.ix-row { transition: padding .3s cubic-bezier(.2,1.3,.4,1), background .15s; }
button.ix-row:hover, button.ix-row:focus-visible { padding-left: 6px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ix-n { font: 500 13px/1.25 var(--sans); letter-spacing: calc(-.01em * var(--ls-sans)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-off .ix-n { font-weight: 400; color: var(--dim); }
.ix-e { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-s { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-tag { justify-self: end; font: 500 round(down, max(8.5px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); padding: 2px 5px; border: 1px solid var(--line-2); white-space: nowrap; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.ix-case { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ix-desk { color: var(--ink); }
.ix-archive { color: var(--dim); border-style: dashed; border-color: var(--line); }
.ix-none { padding: 14px 0; font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); color: var(--dim); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.ix-note { margin: 10px 0 0; font: 400 round(down, max(9.5px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.06em * var(--ls-mono)); color: var(--dim); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.ix-note b { font-weight: 500; letter-spacing: calc(.12em * var(--ls-sans)); margin-right: 6px; }
.ix-note[hidden] { display: none; }
body.hc .ix-archive { color: var(--ink); border-color: var(--ink); }
body.hc .ix-off .ix-n, body.hc .ix-e, body.hc .ix-s { color: var(--ink); }
@container (max-width: 520px) { .ix-s { display: none; } .ix-row { grid-template-columns: minmax(0, 1fr) 86px auto; } }
.win .ix { container-type: inline-size; }
@media (max-width: 699px) { .ix-row { grid-template-columns: minmax(0, 1fr) auto; } .ix-e, .ix-s { display: none; } }

/* ---------- v2.1 round 16: CMS case blocks. Images are plain <img>: drawn in by the browser, nothing on top ---------- */
.rd-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 14px; margin: 6px 0 30px; }
.rd-gi { margin: 0; }
.rd-gi figcaption { display: flex; gap: 10px; font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step))/1.5 var(--mono); color: var(--dim); padding-top: 6px; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rd-gi figcaption b { color: var(--ink); font-weight: 500; letter-spacing: calc(.1em * var(--ls-sans)); }
.rd-img { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.rd-img img { object-fit: contain; }
.rd-list { margin: 0 0 24px; padding-left: 20px; font-size: round(down, max(16px, var(--sans-min)), var(--sans-step)); line-height: 1.55; max-width: 68ch; }
.rd-list li { margin: 0 0 6px; }
.rd-list li::marker { content: "› "; color: var(--faint); font-family: var(--mono); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rd-notes { margin: 0 0 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 400 round(down, max(10.5px, var(--mono-min)), var(--mono-step))/1.55 var(--mono); color: var(--dim); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rd-notes summary { cursor: pointer; padding: 8px 0; letter-spacing: calc(.14em * var(--ls-sans)); color: var(--dim); list-style: none; }
.rd-notes summary::before { content: "+ "; } .rd-notes[open] summary::before { content: "− "; }
.rd-notes summary span { color: var(--faint); margin-left: 6px; }
.rd-notes ol { margin: 0 0 10px; padding-left: 22px; }
.rd-notes li { margin: 0 0 4px; }
.rd-vid video { width: 100%; display: block; background: #000; border: 1px solid var(--line); aspect-ratio: 16 / 9; }
.rd-cta-wrap { margin: 4px 0 28px; }
.rd-cta { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; background: var(--ink); color: var(--case, var(--bg)); border: 1px solid var(--ink); font: 500 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); text-transform: uppercase; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.rd-cta:hover, .rd-cta:focus-visible { background: transparent; color: var(--ink); }
@media (max-width: 699px) { .rd-grid { grid-template-columns: 1fr 1fr; } }
body.hc .rd-notes, body.hc .rd-notes summary, body.hc .rd-gi figcaption { color: var(--ink); }

/* ---------- v2.1 round 17: the window cap. Pager in the desk controls, and the QOS system dialog ---------- */
.dc-pager { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.dc-pager[hidden] { display: none; }
.dc-pg { margin: 0; text-align: center; font: 400 round(down, max(9.5px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); color: var(--dim); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.qd-back { position: fixed; z-index: 418; inset: var(--top) 0 var(--dock-h) 0; background: color-mix(in srgb, var(--bg) 55%, transparent); display: grid; place-items: center; }
.qd-back[hidden] { display: none; }
.qd { width: min(520px, calc(100vw - 32px)); background: #163BEF; color: #fff; border: 3px double rgba(255,255,255,.92); box-shadow: 0 30px 80px rgba(0,0,30,.55); font: 400 round(down, max(12px, var(--mono-min)), var(--mono-step))/1.5 var(--mono); position: relative; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.qd-bar { display: flex; justify-content: space-between; background: #fff; color: #163BEF; padding: 5px 12px; font-weight: 500; letter-spacing: calc(.16em * var(--ls-sans)); }
.qd-body { padding: 16px 18px 6px; }
.qd-body p { margin: 0 0 14px; letter-spacing: calc(.04em * var(--ls-sans)); }
.qd-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; }
.qd-acts button { border: 1px solid #fff; padding: 7px 11px; font: 500 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.14em * var(--ls-mono)); color: #fff; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.qd-acts button:hover, .qd-acts button:focus-visible { background: #fff; color: #163BEF; outline: 1px solid #FFC429; outline-offset: 2px; }
.qd-acts .qd-main { background: #fff; color: #163BEF; }
.qd-always { display: flex; align-items: center; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid rgba(255,255,255,.35); font-size: round(down, max(11px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(.06em * var(--ls-sans)); cursor: pointer; }
.qd-always input { accent-color: #FFC429; width: 14px; height: 14px; margin: 0; }
body.crt .qd::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 6px); opacity: var(--scan); }
body.light .qd-back { background: color-mix(in srgb, var(--bg) 60%, transparent); }
body.hc .qd { background: #0A1F8F; box-shadow: 0 0 0 2px #fff; }
body.hc .qd-bar { color: #0A1F8F; }
body.hc .qd-acts .qd-main { color: #0A1F8F; }
body.hc .qd-acts button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- v2.1 round 18: the PCjr-style boot ----------
   Font: "IBM CGA" + "IBM CGA-2y" from The Ultimate Oldschool PC Font Pack by VileR (int10h.org), CC BY-SA 4.0.
   See ../assets/fonts/ibm-cga/CREDIT.md. Used for the boot only. */
@font-face { font-family: 'IBM CGA 2y'; src: url(../assets/fonts/ibm-cga/Web437_IBM_CGA-2y.woff) format('woff'); font-display: block; }
@font-face { font-family: 'IBM CGA'; src: url(../assets/fonts/ibm-cga/Web437_IBM_CGA.woff) format('woff'); font-display: block; }
#boot { z-index: 399; background: #163BEF; transition: none; transform: none !important; }
body.booting .top > .brand, body.drawing .top > .brand { position: static; z-index: auto; }   /* the lifted logo waits under the boot */
#boot .pj-logo, #boot .pj-black, #boot .pj-bios { position: absolute; inset: 0; }
#boot [hidden] { display: none !important; }
.pj-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(28px, 6vh, 64px); background: #163BEF; }
.pj-mark { color: #fff; }
.pj-mark .wm { display: block; height: clamp(110px, 30vh, 290px); width: auto;
  /* IBM's 8-bar treatment: the wordmark seen through 9 horizontal bars */
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 64%, transparent 64% 100%) 0 0 / 100% 11.111%;
  mask: repeating-linear-gradient(180deg, #000 0 64%, transparent 64% 100%) 0 0 / 100% 11.111%; }
.pj-logo.solid .pj-mark .wm path { stroke: currentColor; stroke-width: 3.2; stroke-linejoin: round; paint-order: stroke; }
.pj-bar { display: flex; align-items: center; gap: 0; }
.pj-bar i { width: clamp(16px, 2.4vw, 40px); height: clamp(14px, 2.4vh, 26px); display: block; }
.pj-bar i:first-child { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.pj-count { margin-left: clamp(16px, 2vw, 32px); font: 400 32px/1 'IBM CGA 2y', monospace; color: #fff; letter-spacing: 0; font-weight: 400; white-space: nowrap; }
.pj-black { background: #000; }
.pj-cur { position: absolute; left: clamp(24px, 4vw, 64px); top: clamp(24px, 6vh, 64px); width: 16px; height: 4px; margin-top: 26px; background: #fff; }
.pj-bios { background: #000; padding: clamp(24px, 6vh, 64px) clamp(24px, 4vw, 64px); color: #fff; font: 400 32px/1.25 'IBM CGA 2y', monospace; letter-spacing: 0; }
#boot, #boot * { -webkit-font-smoothing: none; font-smooth: never; text-rendering: optimizeSpeed; }
.pj-l { position: relative; margin: 0 0 .25em; white-space: pre; }
.pj-l .pj-h { position: absolute; left: 0; top: 0; }
.pj-foot { margin-top: 1.2em; }
.pj-setup { font: inherit; color: inherit; text-align: left; }
.pj-setup b { background: #fff; color: #000; font-weight: 400; padding: 0 .25em; }
.pj-edge { position: absolute; left: 0; top: 0; width: 8px; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.8); pointer-events: none; }
@media (max-width: 1279px) { .pj-bios, .pj-count { font-size: round(down, max(16px, var(--sans-min)), var(--sans-step)); } .pj-bios { line-height: 1.4; } }
@media (max-width: 699px) { .pj-l { white-space: pre-wrap; } .pj-count { font-size: round(down, max(16px, var(--sans-min)), var(--sans-step)); } .pj-bar i { width: 14px; } }
.ab-credit { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step))/1.5 var(--mono) !important; letter-spacing: calc(.04em * var(--ls-mono)); color: var(--dim); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
body.hc .ab-credit { color: var(--ink); }

/* ---------- v2.1 round 19: the terminal-scroll boot ----------
   IBM CGA font by VileR (CC BY-SA 4.0), boot only. All motion is in whole 24px rows on one clock; the scanline
   overlay is anchored to the top of the screen so row tops (24n) sit exactly on its 6px grid. */
.crt-scan { background: repeating-linear-gradient(180deg, rgba(0,0,0,1) 0 3px, transparent 3px 6px) !important; }
body.light .crt-scan { background: repeating-linear-gradient(180deg, rgba(22,59,239,1) 0 3px, transparent 3px 6px) !important; }
#app { transition: none; }
#boot { background: #000; }
#boot[data-phase="flash"] { background: #9DB4FF; }
#boot[data-phase="cursor"], #boot[data-phase="bios"] { background: #163BEF; }
#boot[data-phase="scroll"] { background: transparent; }
#boot .tm-logo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; }
#boot:not([data-phase="logo"]) .tm-logo, #boot[data-phase="logo"] .tm-term, #boot[data-phase="flash"] .tm-term { display: none; }
.tm-mark { width: 60vw; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.tm-bar { display: flex; align-items: center; }
.tm-bar i { width: 32px; height: 24px; display: block; }
.tm-bar i:first-child { box-shadow: inset 0 0 0 2px #555555; }
.tm-count { margin-left: 32px; font: 400 32px/1 'IBM CGA', monospace; color: #fff; font-weight: 400; white-space: nowrap; }
.tm-term { position: absolute; inset: 0; overflow: hidden; color: #fff; }
.tm-col { position: absolute; left: 48px; right: 24px; top: 48px; }
.tm-l { margin: 0; height: 24px; font: 400 16px/24px 'IBM CGA', monospace; white-space: pre; overflow: hidden; }
.tm-setup { font: inherit; color: inherit; padding: 0; }
.tm-setup b { background: #fff; color: #163BEF; font-weight: 400; }
.tm-cur { position: absolute; left: 48px; top: 0; font: 400 16px/24px 'IBM CGA', monospace; font-style: normal; color: #fff; }
@media (max-width: 1279px) { .tm-count { font-size: round(down, max(16px, var(--sans-min)), var(--sans-step)); } .tm-bar i { width: 16px; height: 12px; } }
@media (max-width: 699px) { .tm-col, .tm-cur { left: 12px; } .tm-l { font-size: round(down, max(8px, var(--sans-min)), var(--sans-step)); } .tm-cur { font-size: round(down, max(8px, var(--sans-min)), var(--sans-step)); } }

/* ---------- v2.1 round 20: SYSTEM FONT. IBM CGA by VileR (The Ultimate Oldschool PC Font Pack, CC BY-SA 4.0) ----------
   font-cga (default): the OS + the chat in IBM CGA; Space Grotesk only for the headline, the Reader and window info titles.
   font-all: IBM CGA for everything (2y variant on large type).   font-dm: the old DM Mono look. */
body.font-cga, body.font-all {
  --mono: 'IBM CGA', monospace; --mono-min: 16px; --mono-step: 8px; --ls-mono: 0; --mono-smooth: none;
}
body.font-all { --sans: 'IBM CGA', monospace; --sans-min: 16px; --sans-step: 8px; --ls-sans: 0; --sans-smooth: none; font-synthesis: none; }
/* the chat is the BIOS font too: replies, asks, the prompt, autocomplete, chips */
body:is(.font-cga, .font-all) :is(.rl, .rl.you, .rl.sys, #prompt, #prompt::placeholder, .sg, .chip, .prompt-mark, .go) {
  font-family: 'IBM CGA', monospace; font-size: 16px; line-height: 24px; letter-spacing: 0; -webkit-font-smoothing: none; font-synthesis: none; font-weight: 400;
}
body:is(.font-cga, .font-all) .reply { height: 96px; gap: 0; }
body:is(.font-cga, .font-all).app-open .reply { height: 120px; }
body:is(.font-cga, .font-all) .rl { min-height: 24px; }
body:is(.font-cga, .font-all) .rl .caret { width: 16px; height: 16px; vertical-align: -2px; }
body:is(.font-cga, .font-all) .chip { height: 32px; padding: 0 12px; }
/* rebalance: 16px labels need room; long titles truncate, the rail and chips wrap */
body:is(.font-cga, .font-all) .top { gap: 16px; }
body:is(.font-cga, .font-all) .tb-btn, body:is(.font-cga, .font-all) .pal { padding-left: 12px; }
body:is(.font-cga, .font-all) .clock { display: none; }
body:is(.font-cga, .font-all) .mode-tag b { min-width: 0; }
body:is(.font-cga, .font-all) .rail-modes button { gap: 8px; }
body:is(.font-cga, .font-all) .rail-modes .l { flex: 1; }
body:is(.font-cga, .font-all) .rail-modes .n { min-width: 2ch; text-align: right; }
body:is(.font-cga, .font-all) .win-bar { height: 34px; }
body:is(.font-cga, .font-all) .win-year { display: none; }
body:is(.font-cga, .font-all) .ws-sw { display: none; }
body:is(.font-cga, .font-all) .ws-go { height: 26px; padding: 0 8px; }
body:is(.font-cga, .font-all) .ws-mode { padding: 1px 6px; }
body:is(.font-cga, .font-all) .tb-chip { height: 26px; }
body:is(.font-cga, .font-all) .tb-count { width: auto; }
body:is(.font-cga, .font-all) .tb-all kbd, body:is(.font-cga, .font-all) .tb-tidy kbd, body:is(.font-cga, .font-all) .dc-btn kbd { display: none; }
body:is(.font-cga, .font-all) .tb-all, body:is(.font-cga, .font-all) .tb-close { height: 26px; }
body:is(.font-cga, .font-all) .st-note { display: none; }
body:is(.font-cga, .font-all) .st-keys kbd { padding: 0 4px; }
body:is(.font-cga, .font-all) .dc-btn { min-width: 128px; height: 32px; }
body:is(.font-cga, .font-all) .setup { width: min(1040px, calc(100vw - 16px)); }
body:is(.font-cga, .font-all) .set-row { min-height: 32px; }
body:is(.font-cga, .font-all) .set-row label { overflow: hidden; text-overflow: ellipsis; }
body:is(.font-cga, .font-all) .set-ctl output { min-width: 112px; }
body:is(.font-cga, .font-all) .set-hex { width: 120px; height: 24px; }
body:is(.font-cga, .font-all) .set-tog span { padding: 2px 8px; }
body:is(.font-cga, .font-all) .set-body { max-height: calc(100svh - 190px); }
body:is(.font-cga, .font-all) .ix-row { grid-template-columns: minmax(0, 1.2fr) 112px minmax(0, 1.4fr) auto; }
body:is(.font-cga, .font-all) .ix-n { font-family: 'IBM CGA', monospace; font-size: 16px; font-weight: 400; -webkit-font-smoothing: none; }
body:is(.font-cga, .font-all) .ix-tag { padding: 2px 6px; }
body:is(.font-cga, .font-all) .rb-label, body:is(.font-cga, .font-all) .rb-gaze { font-size: 8px !important; font-family: 'IBM CGA', monospace; -webkit-font-smoothing: none; }
body:is(.font-cga, .font-all) .robot.docked .rb-label span { display: none; }
body:is(.font-cga, .font-all) .cam-b { right: 16px; }
body:is(.font-cga, .font-all) .eyebrow { margin-bottom: 24px; }
/* EVERYWHERE: display type in the aspect-corrected 2y variant, at integer multiples of 16; reading lines on the 8px grid */
body.font-all :is(h1, .rd-head h1, .info-t, .ab-lede, .jb-role) { font-family: 'IBM CGA 2y', monospace; font-weight: 400; line-height: 1; }
body.font-all h1 { font-size: 64px; line-height: 80px; }
body.font-all .rd-head h1 { font-size: 64px; line-height: 80px; }
body.font-all .info-t, body.font-all .ab-lede, body.font-all .jb-role { font-size: 32px; line-height: 40px; }
body.font-all :is(.sub, .rd-sub, .rd-lede, .rd-h, .rd-q p, .lw-intro) { font-family: 'IBM CGA 2y', monospace; font-size: 32px; line-height: 40px; font-weight: 400; }
body.font-all .sub, body.font-all .rd-sub { font-size: 16px; line-height: 24px; font-family: 'IBM CGA', monospace; }
body.font-all :is(.rd-p, .rd-list, .rd-table td, .ab-list li, .jb-list, .ws-ctx, .info-c, .rd-col .rd-p) { font-size: 16px; line-height: 24px; }
body.font-all .rd-m b { font-family: 'IBM CGA 2y', monospace; font-size: 48px; }
body.font-all .rd-lede { max-width: 32ch; }
body.font-all .rd-p { max-width: 64ch; }
body.font-all .ws-ctx { line-height: 24px; }

/* results: the snippet's matched words, highlighted */
.rs-s mark { background: var(--ink); color: var(--bg); padding: 0 2px; }
.rs .ix-row { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1.8fr) auto; }
body.hc .rs-s mark { outline: 1px solid var(--ink); }

/* ---------- v2.1 round 22: the live filter. A floating RESULTS panel above the prompt; the desk fades non-matches ---------- */
.live { position: fixed; z-index: 412; background: var(--win-head); border: 1px solid var(--line-2); box-shadow: var(--shadow); max-height: min(60vh, 440px); overflow: auto; }
.live[hidden] { display: none; }
.lv-h { display: flex; gap: 16px; margin: 0; padding: 6px 12px; border-bottom: 1px solid var(--line-2); font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); color: var(--dim); -webkit-font-smoothing: var(--mono-smooth); }
.lv-h span:first-child { color: var(--ink); }
.lv-k { margin-left: auto; }
.lv-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr) auto auto; align-items: baseline; gap: 12px; width: 100%; padding: 6px 12px; border-bottom: 1px solid var(--line); text-align: left; font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step))/1.5 var(--mono); -webkit-font-smoothing: var(--mono-smooth); }
.lv-row:hover, .lv-row.on { background: var(--ink); color: var(--bg); }
.lv-row.on .ix-tag, .lv-row:hover .ix-tag { border-color: var(--bg); color: var(--bg); background: transparent; }
.lv-row.on mark, .lv-row:hover mark { background: var(--bg); color: var(--ink); }
.lv-row[disabled] { cursor: default; color: var(--dim); }
.lv-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; opacity: .85; }
.lv-s mark { background: var(--ink); color: var(--bg); padding: 0 2px; }
.lv-jev { border: 1px solid currentColor; padding: 0 4px; font-size: inherit; }
.lv-none { margin: 0; padding: 10px 12px; font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); color: var(--dim); }
.win.desk.nomatch { opacity: .4; transition: opacity .25s, border-color .2s; }
.win.desk.match { translate: calc(var(--dx, 0) * 1px) calc(var(--dy, 0) * 1px - var(--sy, 0) * 1px - 6px); transition: opacity .25s, translate .25s cubic-bezier(.2,1.3,.4,1); }
body.hc .lv-s { opacity: 1; }
body.hc .win.desk.nomatch { opacity: .55; }

/* round 20 rebalance, second pass: the 16px CGA labels need a wider rail and two-line list rows */
body:is(.font-cga, .font-all) { --rail: 248px; }
body:is(.font-cga, .font-all) .rail { padding: 24px 16px 16px 24px; }
body:is(.font-cga, .font-all) .rail-item { gap: 8px; }
body:is(.font-cga, .font-all) .rail-item i { width: auto; flex: none; }
body:is(.font-cga, .font-all) .rail-modes .l { overflow: visible; text-overflow: clip; }
body:is(.font-cga, .font-all) .rail-note { display: none; }
body:is(.font-cga, .font-all) .tb-count { display: none; }
body:is(.font-cga, .font-all) .ix-row, body:is(.font-cga, .font-all) .rs .ix-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "n e t" "s s s"; row-gap: 4px; }
body:is(.font-cga, .font-all) .ix-n { grid-area: n; } body:is(.font-cga, .font-all) .ix-e { grid-area: e; }
body:is(.font-cga, .font-all) .ix-s { grid-area: s; display: block !important; }
body:is(.font-cga, .font-all) .ix-tag { grid-area: t; }
body:is(.font-cga, .font-all) .lv-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "n j t" "s s s"; row-gap: 2px; }
body:is(.font-cga, .font-all) .lv-n { grid-area: n; } body:is(.font-cga, .font-all) .lv-s { grid-area: s; } body:is(.font-cga, .font-all) .lv-jev { grid-area: j; } body:is(.font-cga, .font-all) .lv-row .ix-tag { grid-area: t; }
body:is(.font-cga, .font-all) .lv-k { display: none; }
body:is(.font-cga, .font-all) .ix-filters button { padding: 4px 8px; }
/* CGA crispness, last pass: SETUP, keys, notes and the dock label stay on the 8px grid with no tracking */
body:is(.font-cga, .font-all) :is(.setup, .setup *, kbd, .st-note, .set-help, .set-tog span, .set-ctl output, .set-row label, .set-bar, .set-bar *, .qd, .qd *, .ix-n, .rb-label, .rb-label *, .rb-gaze) { letter-spacing: 0 !important; -webkit-font-smoothing: none; font-synthesis: none; }
body:is(.font-cga, .font-all) :is(.setup, .setup *:not(.rb-label), kbd, .st-note, .set-help) { font-size: 16px !important; line-height: 24px; }
body:is(.font-cga, .font-all) .set-tog span { padding: 0 6px; }
body:is(.font-cga, .font-all) kbd { padding: 0 4px; }

/* ---------- v2.1 round 23: why it matched, JOB MATCH ---------- */
.rs-why { font-style: normal; color: var(--ink); border-bottom: 1px dotted var(--line-2); margin-right: 6px; }
.lv-why { font-style: normal; color: inherit; border-bottom: 1px dotted currentColor; margin-right: 6px; }
.jm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n t" "p p"; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.jm-row .ix-n { grid-area: n; } .jm-row .jm-tag { grid-area: t; justify-self: end; } .jm-p { grid-area: p; display: flex; flex-wrap: wrap; gap: 6px; }
.jm-done .jm-tag { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.jm-not .jm-tag { border-style: dashed; color: var(--dim); }
.jm-not .ix-n { color: var(--dim); }
.jm-chip { font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); padding: 2px 8px; border: 1px solid var(--line-2); -webkit-font-smoothing: var(--mono-smooth); }
.jm-chip:hover, .jm-chip:focus-visible { background: var(--ink); color: var(--bg); }
.jm-t { font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); color: var(--dim); }
body.hc .jm-not .ix-n, body.hc .jm-not .jm-tag, body.hc .jm-t { color: var(--ink); }
body:is(.font-cga, .font-all) { --rail: 296px; }
body:is(.font-cga, .font-all) .rail-modes button { gap: 10px; }
body:is(.font-cga, .font-all) .rail-modes .n { margin-left: auto; padding-left: 12px; }

/* ---------- review fix: IBM CGA chrome at its narrow size ----------
   Chrome labels (top bar, rail, taskbar, status, tags, counts, chips, desk controls) use the aspect-corrected 2y cut
   at 16px: native 8x16 cells, so half the width of the 16px chat font, still 16px tall and pixel-exact. The chat,
   prompt, results and window titles keep IBM CGA at 16px. */
body:is(.font-cga, .font-all) { --rail: 216px; }
body:is(.font-cga, .font-all) :is(
  .top .mode-tag, .top .mode-tag *, .top .clock, .top .tb-btn, .top .tb-btn *, .top .pal, .top .pal *,
  .rail-label, .rail-item i, .rail-modes button, .rail-modes button *, .rail-note,
  .taskbar, .taskbar *, .status, .status *,
  .ix-tag, .jm-tag, .ws-mode, .ws-sw, .ws-go, .win-year, .ix-count, .dc-pg, .dc-btn, .dc-btn *, .desk-top,
  .chip, .sg, .sg *, .sg-k, .cam, .lv-h, .lv-h *, .rb-label, .rb-label *, .rb-gaze
) { font-family: 'IBM CGA 2y', monospace !important; font-size: 16px !important; line-height: 16px; letter-spacing: 0 !important; font-weight: 400 !important; -webkit-font-smoothing: none; font-synthesis: none; }
body:is(.font-cga, .font-all) .clock { display: inline; }
body:is(.font-cga, .font-all) .tb-count { display: inline; width: calc(var(--rail) - 38px); }
body:is(.font-cga, .font-all) .st-note { display: inline; }
body:is(.font-cga, .font-all) .win-year { display: inline; }
body:is(.font-cga, .font-all) .ws-sw { display: flex; }
body:is(.font-cga, .font-all) .rail-note { display: block; line-height: 24px; }
body:is(.font-cga, .font-all) .tb-all kbd, body:is(.font-cga, .font-all) .dc-btn kbd { display: inline; }
body:is(.font-cga, .font-all) .rail-modes .l { flex: 1; }
body:is(.font-cga, .font-all) .rail-modes .n { padding-left: 8px; }
body:is(.font-cga, .font-all) .chip { height: 32px; padding: 0 12px; }
body:is(.font-cga, .font-all) .chips { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-right: 0; }
body:is(.font-cga, .font-all) .dc-btn { min-width: 120px; height: 28px; }
body:is(.font-cga, .font-all) .rb-label, body:is(.font-cga, .font-all) .rb-gaze { font-size: 8px !important; line-height: 8px; font-family: 'IBM CGA', monospace !important; }
body:is(.font-cga, .font-all) .robot.docked .rb-label span { display: inline; }
@media (max-width: 699px) { body:is(.font-cga, .font-all) .chips { flex-wrap: nowrap; } body:is(.font-cga, .font-all) .tb-count, body:is(.font-cga, .font-all) .clock, body:is(.font-cga, .font-all) .st-note { display: none; } }
body.hc .ws-ctx { font-size: 16px; }
body.hc :is(.rs-why, .lv-why, .rail-item em, .ix-filters i) { font-size: 16px !important; }

/* ---------- Q's correction: IBM CGA only in the typing box (default SYSTEM FONT: INPUT ONLY) ---------- */
body.font-input #prompt { font-family: 'IBM CGA', monospace; font-size: 16px; letter-spacing: 0; -webkit-font-smoothing: none; font-synthesis: none; font-weight: 400; }
body.font-input #prompt::placeholder { font-family: 'IBM CGA', monospace; letter-spacing: 0; }
body.font-input .prompt-mark { font-family: 'IBM CGA', monospace; font-size: 16px; -webkit-font-smoothing: none; }
/* ALIASED TEXT: antialiased edges snapped to hard pixels (alpha < 50% drops, the rest goes solid). Text stays real */
body:is(.aliased, .aliased-filter) :is(h1, .win-title, .rl:not(.you):not(.sys), .rd-head h1) { -webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; font-smooth: never; text-rendering: optimizeSpeed; }
body.aliased-filter :is(h1, .win-title, .rl:not(.you):not(.sys), .rd-head h1) { filter: url(#qos-alias); text-shadow: none !important; }
/* the Index rail item lights when a search found archive-only matches */
.rail-item.hint { padding-left: 4px; }
.rail-item.hint::after { content: "●"; font-size: 10px; margin-left: 6px; color: var(--accent); align-self: center; }

/* ---------- ROLL WARP: the rolling line bulges the real page (crt.js); the band is driven on the shared clock ---------- */
html.crt-warp { filter: url(#crtwarp); }

/* ---------- the loader line (section 25): IBM CGA like the prompt, the How to Speak Robot meter, a real X ---------- */
.rl.load { display: flex; flex-wrap: wrap; align-items: center; column-gap: .5em; font: 400 16px/1.5 'IBM CGA', monospace; letter-spacing: 0; -webkit-font-smoothing: none; font-synthesis: none; color: var(--ink); }
.rl.load .ld-t, .rl.load .ld-m { white-space: nowrap; }
.rl.load .ld-x { font: inherit; letter-spacing: 0; color: var(--ink); background: none; border: 1px solid var(--line-2); padding: 0 .4em; line-height: 1.25; cursor: pointer; -webkit-font-smoothing: none; }
.rl.load .ld-x:hover, .rl.load .ld-x:focus-visible { background: var(--ink); color: var(--bg); border-color: var(--ink); }
body.hc .rl.load :is(.ld-x, .ld-y, .ld-n) { border-color: var(--ink); }
.rl.load .ld-yn { white-space: nowrap; }
.rl.load :is(.ld-y, .ld-n) { font: inherit; letter-spacing: 0; color: var(--ink); background: none; border: 1px solid transparent; padding: 0 .25em; line-height: 1.25; cursor: pointer; -webkit-font-smoothing: none; }
.rl.load :is(.ld-y, .ld-n):hover, .rl.load :is(.ld-y, .ld-n):focus-visible { background: var(--ink); color: var(--bg); }

/* ---------- section backgrounds (Q, 2026-10-07): each left-nav item gives the page its own colour; the new colour draws
   in top-down behind what's there (a view transition, qos.js setSection). Modes share one; home is QOS blue. HC: unchanged. ---------- */
body:not(.light):not(.hc)[data-section="work"] { --bg: #3B1FD6; }
body:not(.light):not(.hc)[data-section="labs"] { --bg: #055C4E; }
body:not(.light):not(.hc)[data-section="writing"] { --bg: #A3153F; }
body:not(.light):not(.hc)[data-section="about"] { --bg: #2B2B36; }
body:not(.light):not(.hc)[data-section="timeline"] { --bg: #8F3D00; }
body:not(.light):not(.hc)[data-section="index"] { --bg: #0A1F8F; }
body:not(.light):not(.hc)[data-section="modes"] { --bg: #1530CC; }
body.light:not(.hc)[data-section="work"] { --bg: #F2EFFE; }
body.light:not(.hc)[data-section="labs"] { --bg: #EAF5F2; }
body.light:not(.hc)[data-section="writing"] { --bg: #FCEDF1; }
body.light:not(.hc)[data-section="about"] { --bg: #F1F1F4; }
body.light:not(.hc)[data-section="timeline"] { --bg: #FBF1E8; }
body.light:not(.hc)[data-section="index"] { --bg: #EDF0FB; }
body.light:not(.hc)[data-section="modes"] { --bg: #EEF1FD; }
:root.bgdraw :is(body, .top, .dock, .taskbar, .status, .rail) { transition: none !important; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: qos-bg-draw .42s steps(28, end) both; }
@keyframes qos-bg-draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- QBOT VOICE (section 26): the phone layout is on hold, so the switch waits for the desktop ---------- */
@media (max-width: 699px) { #voiceBtn { display: none; } }

/* ---------- section 27: the palette is a pixel icon (sun on blue = switch to light, moon on light = switch to dark) ---------- */
.pal { display: inline-flex; align-items: center; line-height: 0; }
.pal .pix { width: 18px; height: 18px; fill: currentColor; display: block; image-rendering: pixelated; }
.pal { color: var(--ink); opacity: .9; }
.pal:hover, .pal:focus-visible { opacity: 1; }
body.hc .pal { opacity: 1; }
body.hc .pal { color: var(--ink); }
@media (max-width: 699px) { #y96Btn { display: none; } }   /* phone is on hold: the toggle waits for the desktop */
@media (max-width: 699px) { .win-max { display: none; } }   /* phone is on hold; windows are full width there already */
body:has(.win.max) .desk-ctl { display: none; }   /* a window filling the desk: TIDY UP / SORT would sit on its buttons */

/* ---------- section 29: the VOICE switch is a pixel speaker; it borrows the palette icon's look ---------- */
#voiceBtn.pal { padding-left: 18px; }
#voiceBtn.muted .pix { opacity: .75; }
/* replay (section 29): QBOT's lines that can be heard again */
.rl.replay { cursor: pointer; }
.rl.replay:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--faint); }

/* ---------- Q.T.R.S. in a window (section 29) ---------- */
.qt { display: flex; gap: 16px; padding: 14px; background: var(--bg); }
.qt-board { display: block; border: 1px solid var(--line-2); image-rendering: pixelated; outline: none; }
.qt-board:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 40%, transparent); }
.qt-side { min-width: 120px; font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step))/1.5 var(--mono); letter-spacing: calc(.08em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.qt-k { margin: 0 0 6px; color: var(--dim); }
.qt-next { display: block; margin: 0 0 14px; }
.qt-dl { margin: 0 0 14px; border-top: 1px solid var(--line); }
.qt-dl div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); }
.qt-dl dt { color: var(--dim); } .qt-dl dd { margin: 0; font-variant-numeric: tabular-nums; }
.qt-msg { min-height: 3em; margin: 0 0 10px; color: var(--ink); }
.qt-help { margin: 0; color: var(--dim); }
body.hc :is(.qt-k, .qt-dl dt, .qt-help) { color: var(--ink); }

/* 2026-10-07: the desk is a desktop (Q: no scroll). In a grid cell the colour code steps aside so the tag and
   OPEN CASE STUDY always fit uncut; a free window is at least as wide as its whole row ("hug"). */
.win.cell .ws-sw, body:is(.font-cga, .font-all) .win.cell .ws-sw { display: none; }
.win.cell .ws-meta { overflow: visible; }
.desk-bar, .desk-top { display: none !important; }

/* 2026-10-07 folding (Q). The dock folds to just the search box (the chevron, or double-click the dock); the rail
   folds to "01 WK" (its button, or double-click the rail); filling a window with ↗ folds both until it's back. */
.dock-fold { position: absolute; top: 8px; right: 10px; width: 30px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--bg); color: var(--dim); font: 400 15px/1 var(--mono); z-index: 3; transition: color .15s, border-color .15s; }
.dock-fold:hover, .dock-fold:focus-visible { color: var(--ink); border-color: var(--ink); }
.dock-fold span { display: block; transform: translateY(-2px); transition: transform .25s var(--spring-soft, ease); }
body.dock-mini .dock-fold span { transform: translateY(1px) rotate(180deg); }
body.dock-mini .dock .reply-wrap, body.dock-mini .dock .chips-row { display: none; }
body.dock-mini .dock { padding-top: 10px; padding-bottom: 10px; padding-right: 50px; }
body.dock-mini .dock-fold { top: 50%; margin-top: -12px; }
/* a filled window keeps the prompt usable: the dock sits over the scrim (Q: "I should still be able to") */
body:has(.win.max) .dock { z-index: 400; }

.rail-fold { margin: auto 0 0; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 8px; border: 1px solid var(--line); color: var(--dim); font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; transition: color .15s, border-color .15s; }
.rail-fold b { font-weight: 400; }
.rail-fold:hover, .rail-fold:focus-visible { color: var(--ink); border-color: var(--ink); }
.rl-s { display: none; }
@media (min-width: 1001px) {
  body.rail-mini { --rail: 104px; }
  body.rail-mini .rail { padding: 30px 12px 22px 16px; }
  body.rail-mini .rail-item { gap: 8px; }
  body.rail-mini .rail-item .rl-l, body.rail-mini .rail-item em,
  body.rail-mini .rail-modes .l, body.rail-mini .rail-modes .n, body.rail-mini .rail-fold b { display: none; }
  body.rail-mini .rl-s { display: inline; font: 400 round(down, max(15px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.06em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
  body.rail-mini .rail-modes .rl-s { font-size: round(down, max(11px, var(--mono-min)), var(--mono-step)); }
  body.rail-mini .rail-label { overflow: hidden; white-space: nowrap; text-overflow: clip; max-width: 100%; }
  body.rail-mini .rail-qtools-label a span { display: none; }
}
body.dock-mini.robot-docked .dock { min-height: 0; padding-right: calc(var(--robot-w) + 66px); }

/* 2026-10-07 round 3 (Q's notes) */
/* 4: the fold chevron, a pixel SVG, dead centre */
.dock-fold svg { display: block; transition: transform .25s var(--spring-soft, ease); }
body.dock-mini .dock-fold svg { transform: rotate(180deg); }
/* 9: minimize, a centred pixel bar (the en dash sat left in some fonts) */
.win-min { font-size: 0 !important; display: grid; place-items: center; padding: 0; }
.win-min::before { content: ""; width: 10px; height: 2px; background: currentColor; }
/* 5: the folded rail only as wide as it has to be */
@media (min-width: 1001px) {
  body.rail-mini { --rail: 74px; }
  body.rail-mini .rail { padding: 26px 8px 18px 12px; }
  body.rail-mini .rail-item { gap: 6px; }
  body.rail-mini .rail-item i { width: auto; }
  body.rail-mini .rail-modes :is(button, a) { gap: 6px; }
  body.rail-mini .rail-fold { padding: 5px 7px; }
}
/* 11: the desktop a little darker than the rest of the UI */
main { background: var(--desk-shade, rgb(0 0 0 / .13)); }
body.light main { --desk-shade: rgb(0 0 0 / .045); }
body.hc main { background: none; }
/* 7, 8: hover tips */
.qtip { position: fixed; z-index: 2000; pointer-events: none; max-width: 300px; padding: 5px 8px 6px; background: var(--ink); color: var(--bg); border: 1px solid var(--bg); box-shadow: 2px 2px 0 rgb(0 0 0 / .35); font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step))/1.45 var(--mono); letter-spacing: calc(.04em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.qtip[hidden] { display: none; }
.win-sw { cursor: help; }
/* 10: the pixel Q in the prompt */
.prompt-mark { display: inline-flex; align-items: center; gap: 8px; }
.pq { display: block; width: var(--pq-s, 26px); height: var(--pq-s, 26px); flex: none; background: currentColor; -webkit-mask: var(--pq) center / var(--pq-s, 26px) var(--pq-s, 26px) no-repeat; mask: var(--pq) center / var(--pq-s, 26px) var(--pq-s, 26px) no-repeat; }
/* Q: the Timeline and About windows wear a variant of their own section's colour (timeline: burnt orange, about: graphite),
   whatever section you're in */
body:not(.hc) .win[data-key="app:timeline"] { --page: #8F3D00; }
body:not(.hc) .win[data-key="app:about"] { --page: #2B2B36; }
body.light:not(.hc) .win[data-key="app:timeline"] { --page: #FBF1E8; }
body.light:not(.hc) .win[data-key="app:about"] { --page: #F1F1F4; }
/* the OS's own window recipe (:root --win / --win-head), on the section's colour */
body:not(.light):not(.hc) .win:is([data-key="app:timeline"], [data-key="app:about"]) { --win: color-mix(in srgb, var(--page) 86%, #000); --win-head: color-mix(in srgb, var(--page) 79%, #000); --bg: var(--win); background: var(--win); }
body.light:not(.hc) .win:is([data-key="app:timeline"], [data-key="app:about"]) { --win: color-mix(in srgb, var(--page) 70%, #fff); --win-head: color-mix(in srgb, var(--page) 92%, #000); --bg: var(--win); background: var(--win); }
/* 13: the list view of open windows */
body.desk-listed #desk .win { visibility: hidden; }
.desk-list { position: fixed; z-index: 405; pointer-events: auto; overflow: auto; background: var(--win); border: 1px solid var(--line-2); box-shadow: 0 18px 40px rgb(0 0 0 / .3); }
.dl-head, .dl-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) 64px 132px; gap: 12px; align-items: center; padding: 0 14px; }
.dl-head { margin: 0; height: 30px; border-bottom: 1px solid var(--line-2); background: var(--win-head); font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); color: var(--faint); -webkit-font-smoothing: var(--mono-smooth); }
.dl-head span:first-child { grid-column: 1 / 3; }
.dl-row { width: 100%; height: 40px; text-align: left; border-bottom: 1px solid var(--line); color: var(--ink); }
.dl-row:hover, .dl-row:focus-visible { background: var(--ink); color: var(--bg); outline: none; }
.dl-row i { width: 9px; height: 9px; background: var(--c); border: 1px solid var(--line-2); }
.dl-t { font-size: round(down, max(16px, var(--sans-min)), var(--sans-step)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-y, .dl-k { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.1em * var(--ls-mono)); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-font-smoothing: var(--mono-smooth); }
.dl-prev { position: fixed; z-index: 406; width: 320px; pointer-events: none; background: var(--win); border: 1px solid var(--line-2); box-shadow: 0 18px 40px rgb(0 0 0 / .35); }
.dl-pbar { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; background: var(--win-head); border-bottom: 1px solid var(--line); font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); -webkit-font-smoothing: var(--mono-smooth); white-space: nowrap; overflow: hidden; }
.dl-pbar i { width: 8px; height: 8px; flex: none; background: var(--c); border: 1px solid var(--line-2); }
.dl-pimg { aspect-ratio: 3 / 2; overflow: hidden; background: #000; }
.dl-pimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-prev p { margin: 0; padding: 10px 12px 12px; font-size: round(down, max(14px, var(--sans-min)), var(--sans-step)); line-height: 1.3; }
/* QBOT JR beside the folded prompt is too small for his labels */
body.dock-mini .robot.docked .rb-label, body.dock-mini .robot.docked .rb-gaze { display: none; }
/* Résumé / CV window (Q) */
.cv { padding: 22px 24px 24px; display: grid; gap: 14px; }
.cv .ab-k { margin: 0; }
.cv-q { margin: 0; font-size: round(down, max(24px, var(--sans-min)), var(--sans-step)); letter-spacing: calc(-.02em * var(--ls-sans)); }
.cv-opts { display: grid; gap: 8px; }
.cv-opt { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; transition: background .15s, color .15s; }
.cv-opt b { font: 500 round(down, max(13px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); }
.cv-opt span { color: var(--dim); font-size: round(down, max(14px, var(--sans-min)), var(--sans-step)); }
.cv-opt:hover, .cv-opt:focus-visible { background: var(--ink); color: var(--bg); outline: none; }
.cv-opt:hover span, .cv-opt:focus-visible span { color: inherit; }
.cv-opt.off { opacity: .45; pointer-events: none; }
.rail-item[data-go="resume"] .rl-l { white-space: nowrap; letter-spacing: calc(-.035em * var(--ls-sans)); }
/* Q.T.R.S. title screen (first start after an update) */
.qt-title { display: none; }
.win.attract .qt { display: none; }
.win.attract .qt-title { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 18px 16px 20px; background: var(--bg); color: var(--ink); text-align: center; }
.qt-spin { width: 96px; height: 96px; image-rendering: pixelated; }
.qt-ask { font-size: round(down, max(20px, var(--sans-min)), var(--sans-step)); line-height: 1.2; letter-spacing: calc(-.015em * var(--ls-sans)); max-width: 16ch; }
.qt-go { font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); color: var(--dim); animation: blink 1.2s steps(1) infinite; -webkit-font-smoothing: var(--mono-smooth); }
.win.attract { display: flex; flex-direction: column; }
.rl.cut { visibility: hidden; }
/* title-bar buttons, dead centre (Q: "padding to the right ... not centered"): no inherited letter-spacing (it adds a
   trailing gap), flex centring, and the minimize bar no longer shares a grid row with the hidden dash */
.win-min, .win-max, .win-x { display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; letter-spacing: 0 !important; text-indent: 0; line-height: 1; }
.win-min::before { flex: none; }
/* the sound coachmark (Q) */
.coach { position: fixed; z-index: 1500; width: 300px; padding: 14px 14px 12px; background: var(--ink); color: var(--bg); border: 1px solid var(--bg); box-shadow: 3px 3px 0 rgb(0 0 0 / .35); }
.coach::before { content: ""; position: absolute; top: -7px; left: calc(var(--ax, 150px) - 7px); width: 12px; height: 12px; background: var(--ink); transform: rotate(45deg); }
.coach-t { margin: 0 0 12px; font-size: round(down, max(16px, var(--sans-min)), var(--sans-step)); line-height: 1.3; }
.coach-b { display: flex; gap: 8px; }
.coach-on { flex: 1; height: 32px; background: var(--bg); color: var(--ink); font: 500 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); }
.coach-on:hover, .coach-on:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; }
.coach-x { width: 32px; height: 32px; border: 1px solid var(--bg); color: var(--bg); font: 400 16px/1 var(--mono); letter-spacing: 0; }
/* Q's notes: the logo never shares space with MODE when the rail is folded */
.brand { width: max(calc(var(--rail) - 50px), 84px); }
/* the folded dock: the prompt box full width, the same padding all round; the chevron lives inside the box, left of ↵ */
body.dock-mini .dock, body.dock-mini.robot-docked .dock { padding: 10px !important; min-height: 0 !important; }
body.dock-mini.jr-in-dock.robot-docked .dock { padding-right: calc(var(--robot-w) + 30px) !important; }
body.dock-mini .dock-fold { right: 17px; top: 50%; margin-top: -12px; border-color: transparent; background: transparent; }
body.dock-mini.jr-in-dock.robot-docked .dock-fold { right: calc(var(--robot-w) + 37px); }
body.dock-mini .prompt .go { margin-right: 38px; }
/* Q's note: the case meta rows never overlap (the CGA font is wide): label and value wrap instead, the value right */
.rd-meta div { flex-wrap: wrap; gap: 2px 12px; }
.rd-meta dt { flex: none; white-space: nowrap; }
.rd-meta dd { margin-left: auto; text-align: right; justify-content: flex-end; min-width: 0; overflow-wrap: anywhere; }
/* Q: the era switch, "selected is white with knockout text: 2026 | 1996" */
.tb-btn.era-sw { display: inline-flex; align-items: stretch; gap: 0; padding: 0; height: 28px; border: 1px solid var(--line-2); align-self: center; }
.era-sw .es { display: grid; place-items: center; padding: 0 10px; letter-spacing: calc(.1em * var(--ls-mono)); color: var(--dim); transition: background .15s, color .15s; }
.era-sw .es + .es { border-left: 1px solid var(--line); }
.era-sw .es.on { background: var(--ink); color: var(--bg); }
.era-sw .es:not(.on):not(.soon):hover, .era-sw .es:not(.on):not(.soon):focus-visible { color: var(--ink); }
/* 2026: in the works. Struck through faintly, with a small "SOON" dot; it still takes a click (QBOT explains) */
.era-sw .es.soon { position: relative; color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.era-sw .es.soon::after { content: ""; position: absolute; top: 4px; right: 3px; width: 4px; height: 4px; background: #FFC429; }
.era-sw .es.soon:hover, .era-sw .es.soon:focus-visible { color: var(--dim); }
body.hc .era-sw .es.soon { color: var(--ink); opacity: 1; }
/* clean on hover (Q): no scanlines over the hovered picture or its window */
body.crt :is(.win-media, .rd-img, .rv, .tl-media, .im-stage, .jb-media).clean::after, body.crt .win.clean-win::after { opacity: 0 !important; transition: opacity .2s; }
/* Q's note: "can we try this as the IBM PCjr font?" The PCjr's text modes used the IBM CGA thick 8x8 ROM font (int10h.org,
   VileR), so QBOT's own lines are set in it, 16px = 2x the 8px cell, on the 24px row. You and system lines stay mono. */
.rl:not(.you):not(.sys) { font-family: 'IBM CGA', var(--mono) !important; font-size: 16px !important; line-height: 24px !important; letter-spacing: 0 !important; -webkit-font-smoothing: none; font-synthesis: none; }
/* the taskbar count never runs into the first window tab when the rail is folded */
.tb-count { min-width: 84px; flex: none; }
/* Q's note on the reply area: full width; as short as possible (it grows with the newest message, plus up to 3 earlier
   lines, then scrolls); no space at all while empty; the fold still hides it */
.reply-wrap { max-width: none !important; padding-bottom: 10px; }
.reply-wrap:has(.reply:empty) { padding-bottom: 0; }
.reply, body:is(.font-cga, .font-all) .reply, body.app-open .reply, body:is(.font-cga, .font-all).app-open .reply { height: auto !important; min-height: 0; }
.reply:not(.over) { -webkit-mask-image: none !important; mask-image: none !important; }
/* the Q.T.R.S. title screen fits a case-sized window (Q: all three the same size) */
.win.attract .qt-title { gap: 8px; padding: 12px 14px 14px; }
.win.attract .qt-spin { width: 80px; height: 80px; }
.win.attract .qt-ask { font-size: round(down, max(18px, var(--sans-min)), var(--sans-step)); }
/* "contact Q" (Q): the first chip, white with knockout text */
.chip.chip-hot { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip.chip-hot:hover, .chip.chip-hot:focus-visible { background: transparent; color: var(--ink); }
.cv-sk { margin-top: 6px !important; }
.cv-social { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-social a { padding: 6px 10px; border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font: 400 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.08em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); }
.cv-social a:hover, .cv-social a:focus-visible { background: var(--ink); color: var(--bg); outline: none; }
/* the socials window (Q): the links glide up in a loop; hover or focus pauses; reduced motion holds still */
.so-view { height: 216px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.so-track { display: grid; gap: 8px; animation: so-up 18s linear infinite; }
.so-track > div { display: grid; gap: 8px; }
.so-view:hover .so-track, .so-view:focus-within .so-track { animation-play-state: paused; }
@keyframes so-up { to { transform: translateY(calc(-50% - 4px)); } }
@media (prefers-reduced-motion: reduce) { .so-track { animation: none; } .so-view { overflow: auto; } }
.so-row { display: grid; grid-template-columns: 104px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; }
.so-row b { font: 500 round(down, max(12px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.08em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); }
.so-row span { color: var(--dim); font-size: round(down, max(13px, var(--sans-min)), var(--sans-step)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-row:hover, .so-row:focus-visible { background: var(--ink); color: var(--bg); outline: none; }
.so-row:hover span, .so-row:focus-visible span { color: inherit; }
.so-mail { margin: 0; color: var(--dim); font-size: round(down, max(13px, var(--sans-min)), var(--sans-step)); }
.so-mail a { color: var(--ink); }
/* Q.T.R.S. fills its window (Q: "should fill the size of its window"): the board keeps its 1:2 shape and its pixels crisp,
   scaling with the window; the side panel keeps its width */
.win[data-key="qtrs"]:not(.attract) { display: flex; flex-direction: column; }
.win[data-key="qtrs"]:not(.attract) .qt { flex: 1; min-height: 0; align-items: stretch; }
.win[data-key="qtrs"]:not(.attract) .qt-board { height: 100%; width: auto; max-width: calc(100% - 136px); aspect-ratio: 1 / 2; object-fit: contain; flex: none; }
.win[data-key="qtrs"]:not(.attract) .qt-side { flex: 1; min-width: 120px; }

/* Q 2026-10-07: Index is a small link at the foot of the rail, above COLLAPSE (Videos took its place in the list) */
.rail-item.rail-index { width: auto; align-self: flex-start; margin: auto 0 8px; padding: 6px 8px; gap: 8px; border: 1px solid var(--line); color: var(--dim); font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; transition: color .15s, border-color .15s; }
.rail-item.rail-index:hover, .rail-item.rail-index:focus-visible, .rail-item.rail-index.on { color: var(--ink); border-color: var(--ink); padding-left: 8px; }
.rail-item.rail-index em { font-size: inherit; margin-left: 0; }
.rail-index + .rail-fold { margin-top: 0; }
body.rail-mini .rail-item.rail-index .rl-s { font-size: round(down, max(10px, var(--mono-min)), var(--mono-step)); }

/* the About page's Timeline window (Q): a preview of the jobs on the years; it launches the Timeline */
.tlp { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.tlp .ab-k { margin: 0; }
.tlp-view { position: relative; display: block; width: 100%; height: 64px; padding: 0; border: 1px solid var(--line); text-align: left; cursor: pointer; transition: border-color .15s; }
.tlp-view:hover, .tlp-view:focus-visible { border-color: var(--ink); }
.tlp-bars { position: absolute; left: 8px; right: 8px; top: 8px; height: 34px; }
.tlp-bar { position: absolute; height: 8px; background: var(--ink); opacity: .85; }
.tlp-ticks { position: absolute; left: 8px; right: 8px; bottom: 4px; height: 12px; border-top: 1px solid var(--line); font: 400 round(down, max(9px, var(--mono-min)), var(--mono-step)) var(--mono); color: var(--dim); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.tlp-ticks span { position: absolute; top: 1px; transform: translateX(-50%); }
.tlp-sub { margin: 0; color: var(--dim); }
.tlp-go { align-self: flex-start; height: 30px; padding: 0 12px; border: 1px solid var(--ink); font: 400 round(down, max(10px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; white-space: nowrap; }
.tlp-go:hover, .tlp-go:focus-visible { background: var(--ink); color: var(--bg); }
.so-short .so-view { height: 96px; }

/* the welcome windows' tighter fits (qos.js cellFit; Q: "this container should fit the buttons?"):
   foot-wrap puts "Open case study" on its own line under the mode tag; tight also drops the year and narrows the buttons */
.win.cell.foot-wrap .ws-meta { flex-wrap: wrap; row-gap: 8px; }
.win.cell.foot-wrap .ws-go { margin-left: 0; flex: 1 0 100%; }
.win.tight .win-year { display: none !important; }
.win.tight :is(.win-min, .win-max, .win-x) { width: 28px; }
.win.tight .win-bar { gap: 8px; }

/* narrow phones: the top bar's five items needed 433 px, so the page scrolled sideways at 390 (xbrowser report, issue 5):
   closer gaps and padding bring it inside the window, from 440 px down to 360 px and under */
@media (max-width: 440px) {
  .top { gap: 6px; padding: 0 10px 0 12px; }
  .tb-btn, .pal { padding-left: 7px; }
}
@media (max-width: 380px) {
  .top { gap: 4px; padding: 0 8px 0 10px; }
  .tb-btn, .pal { padding-left: 5px; letter-spacing: 0; }
  .tb-btn { font-size: 9px; }
}
@media (max-width: 440px) {
  body:is(.font-cga, .font-all) .top { gap: 6px; }
  body:is(.font-cga, .font-all) .tb-btn, body:is(.font-cga, .font-all) .pal { padding-left: 7px; }
}