/* Layout concept: a lab bench. Top rail of worlds, a wide stage holding the live view, and a "why" panel that always answers what / why / change / break / fix. */
:root {
  --bg: #14171C; --bg2: #181C22; --panel: #1C2027; --panel2: #242932; --line: #363D49; --line2: #2A303A;
  --fg: #E9ECF1; --muted: #A9B1BE; --faint: #7E8797;
  --hot: #F29A4B; --accent: #4F6BE8; --accent-t: #7C93FF; --accent-d: #3A53C9;
  --ok: #4CC38A; --warn: #E3B04B; --bad: #EF6B6B; --info: #5CB8E6;
  --t0: #5CB8E6; --t1: #4CC38A; --t2: #A58BE8; --t3: #E3B04B; --t4: #E08AB0; --t5: #7C93FF; --t6: #8FD3A8; --t7: #E8C48A;
  --f-display: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font: 400 16px/1.55 var(--f-body); padding-inline: 0; -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; margin: 0; line-height: 1.1; text-wrap: balance; letter-spacing: .01em; }
h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
p { margin: 0; }
code, .mono { font-family: var(--f-mono); font-size: .95em; }
code { background: var(--bg); border: 1px solid var(--line2); border-radius: 4px; padding: 1px 6px; color: var(--info); }
a { color: var(--accent-t); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.bad { color: var(--bad); font-weight: 600; } .good { color: var(--ok); } .warnc { color: var(--warn); }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.tab-num { font-variant-numeric: tabular-nums; }

/* top rail */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line2); }
.top-in { max-width: 1440px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.logo { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; letter-spacing: .06em; text-decoration: none; color: var(--fg); display: flex; align-items: center; gap: 10px; white-space: nowrap; background: none; border: 0; cursor: pointer; padding: 0; }
.logo b { color: #FF4308; font-weight: 700; }
.logo svg { width: 30px; height: 30px; flex: none; }
.logo .logoimg { height: 46px; width: auto; flex: none; display: block; }
.nav { display: flex; gap: 4px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav button { background: none; border: 0; color: var(--muted); font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; letter-spacing: .03em; padding: 8px 10px; flex: none; border-radius: 6px; cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; }
.nav button:hover { color: var(--fg); background: var(--panel); }
.nav button[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }
.lv { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 2px; }
.lv button { background: none; border: 0; padding: 5px 11px; border-radius: 6px; cursor: pointer; font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--muted); }
.lv button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.lv-label { display: none; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }

main { max-width: 1440px; margin: 0 auto; padding: 24px 16px 80px; }
.page > * + * { margin-top: 24px; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 70ch; }
.eyebrow { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .14em; font-size: .95rem; color: var(--accent-t); font-weight: 600; }
.pagehead { display: flex; flex-direction: column; gap: 8px; }

/* surfaces */
.panel { background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; padding: 18px; min-width: 0; }
.panel.flat { background: var(--bg2); }
.panel > h3 + *, .panel > h4 + * { margin-top: 10px; }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start; }
.split-r { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: start; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.sp { justify-content: space-between; }

/* controls */
.btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 16px; cursor: pointer; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .03em; color: var(--fg); }
.btn:hover { border-color: var(--info); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.pri:hover { background: var(--accent-d); }
.btn.sm { padding: 5px 11px; font-size: .95rem; }
.btn.ghost { background: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.chip { background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; cursor: pointer; font-size: .92rem; color: var(--muted); }
.chip:hover { color: var(--fg); border-color: var(--info); }
.chip[aria-pressed="true"], .chip.on { background: var(--info); color: #06212c; border-color: var(--info); font-weight: 600; }
.pill { display: inline-block; font-family: var(--f-mono); font-size: .85rem; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.pill.run { background: var(--ok); color: #06241a; border-color: var(--ok); }
.pill.rdy { color: var(--warn); border-color: var(--warn); }
.pill.blk { color: var(--bad); border-color: var(--bad); }
.pill.rst { background: var(--bad); color: #2b0c0c; border-color: var(--bad); }
.pill.ok { color: var(--ok); border-color: var(--ok); } .pill.crit { color: var(--bad); border-color: var(--bad); } .pill.warn { color: var(--warn); border-color: var(--warn); }
label.f { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; min-width: 0; }
input[type=text], input[type=number], select, textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; width: 100%; min-width: 0; font-family: var(--f-mono); font-size: 1rem; color: var(--fg); text-transform: none; letter-spacing: 0; }
textarea { resize: vertical; line-height: 1.5; }
input[type=range] { width: 100%; accent-color: var(--accent); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 18px; height: 18px; }
.chk { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.err { color: var(--bad); font-size: .9rem; }
details > summary { cursor: pointer; font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line2); overflow-x: auto; scrollbar-width: thin; }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 9px 14px; cursor: pointer; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--muted); white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }

.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th { text-align: left; font-family: var(--f-display); font-size: .95rem; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 7px 10px; border-bottom: 1px solid var(--line2); vertical-align: top; }
td.n { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.sel td { background: color-mix(in srgb, var(--info) 10%, transparent); }
tr.clk { cursor: pointer; } tr.clk:hover td { background: color-mix(in srgb, var(--info) 7%, transparent); }

.callout { border-left: 4px solid var(--info); background: var(--bg2); padding: 12px 16px; border-radius: 0 8px 8px 0; }
.callout.crit { border-color: var(--bad); } .callout.ok { border-color: var(--ok); } .callout.warn { border-color: var(--warn); } .callout.acc { border-color: var(--accent); }
.qa { display: grid; gap: 12px; }
.qa dt { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; color: var(--accent-t); font-weight: 700; }
.qa dd { margin: 2px 0 0; }
.qa > div { padding-bottom: 10px; border-bottom: 1px dashed var(--line2); }
.qa > div:last-child { border: 0; padding: 0; }

.bar { height: 10px; background: var(--bg); border: 1px solid var(--line2); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--info); transition: width .25s; }
.bar.warn > i { background: var(--warn); } .bar.bad > i { background: var(--bad); } .bar.ok > i { background: var(--ok); }

/* timeline */
.tl { display: flex; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg); overflow: hidden; }
.tl-labels { flex: none; width: 152px; border-right: 1px solid var(--line2); background: var(--bg2); }
.tl-labels div { display: flex; align-items: center; gap: 8px; padding: 0 10px; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; border-bottom: 1px solid var(--line2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.tl-labels div small { font-family: var(--f-mono); font-size: .78rem; color: var(--faint); font-weight: 400; }
.tl-labels div.axis { cursor: default; color: var(--faint); font-size: .85rem; }
.tl-labels i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.tl-scroll { overflow-x: auto; flex: 1; min-width: 0; }
.tl canvas { display: block; cursor: crosshair; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .9rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 22px; height: 12px; border-radius: 3px; }
.sw-run { background: var(--t0); } .sw-rdy { border: 2px dashed var(--t0); } .sw-blk { height: 3px !important; background: var(--faint); } .sw-isr { background: var(--accent); } .sw-rst { background: repeating-linear-gradient(45deg, var(--bad) 0 3px, transparent 3px 6px); border: 1px solid var(--bad); }
.transport select { width: auto; }
.transport { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tnow { font-family: var(--f-mono); font-size: 1.15rem; padding: 0 6px; color: var(--info); }
.ev { font-size: .95rem; padding: 5px 0; border-bottom: 1px dashed var(--line2); display: flex; gap: 10px; }
.ev time { font-family: var(--f-mono); color: var(--faint); flex: none; width: 54px; }
.ev.crit { color: var(--bad); } .ev.warn { color: var(--warn); }
.ev.clk { cursor: pointer; } .ev.clk:hover { background: color-mix(in srgb, var(--info) 8%, transparent); }
.logbox { max-height: 360px; overflow-y: auto; }
.big { font-family: var(--f-display); font-weight: 700; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.kpi { background: var(--bg2); border: 1px solid var(--line2); border-radius: 10px; padding: 12px 14px; }
.kpi small { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }

/* editors */
.tcard { background: var(--bg2); border: 1px solid var(--line2); border-radius: 10px; padding: 12px; display: grid; gap: 8px; }
.tcard .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; }
.tcard .hdr { display: flex; gap: 8px; align-items: center; }
.tcard .hdr i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.tcard .hdr input { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; }
.x { background: none; border: 0; color: var(--faint); font-size: 1.3rem; cursor: pointer; padding: 0 6px; }
.x:hover { color: var(--bad); }
.prog-help { font-size: .85rem; color: var(--faint); }
body[data-level="beginner"] .adv { display: none !important; }
body:not([data-level="expert"]) .xp { display: none !important; }
body[data-level="expert"] .bgn-only, body[data-level="engineer"] .bgn-only { display: none !important; }
.code { background: var(--bg); border: 1px solid var(--line2); border-radius: 8px; padding: 12px 14px; font-family: var(--f-mono); font-size: .95rem; line-height: 1.5; overflow-x: auto; white-space: pre; color: #D6DCE8; }
.code .cm { color: var(--faint); } .code .kw { color: var(--accent-t); } .code .ln.hl { background: color-mix(in srgb, var(--accent) 35%, transparent); display: block; }

/* hero + map */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: center; padding-block: 12px; }
.hero h1 em { font-style: normal; color: inherit; }
.loop { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-family: var(--f-body); font-weight: 500; letter-spacing: 0; }
.loop span { background: var(--panel); border: 1px solid var(--line); padding: 4px 10px; border-radius: 6px; font-size: 1rem; }
.loop span.hot { background: var(--accent); border-color: var(--accent); }
.loop i { color: var(--faint); font-style: normal; }
.map { width: 100%; height: auto; display: block; }
.map .node { cursor: pointer; }
.map .node rect { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; transition: .15s; }
.map .node:hover rect, .map .node:focus rect { stroke: var(--accent-t); fill: var(--panel2); }
.map .node text { fill: var(--fg); font-family: var(--f-display); font-weight: 700; }
.map .node .sub { fill: var(--muted); font-family: var(--f-body); font-weight: 400; }
.map .done rect { stroke: var(--ok); }
.map line { stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 5; }
.road { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.road div { border: 1px dashed var(--line); border-radius: 10px; padding: 12px; color: var(--faint); font-size: .95rem; }
.road b { color: var(--muted); font-family: var(--f-display); font-size: 1.05rem; display: block; }

/* diagrams */
.diagram { width: 100%; height: auto; display: block; background: var(--bg); border: 1px solid var(--line2); border-radius: 10px; }
.blk { cursor: pointer; }
.blk rect { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; transition: .15s; }
.blk:hover rect { stroke: var(--info); }
.blk.sel rect { fill: var(--panel2); stroke: var(--accent-t); stroke-width: 3; }
.blk text { fill: var(--fg); font-family: var(--f-display); font-weight: 700; font-size: 20px; text-anchor: middle; }
.blk text.s { fill: var(--muted); font-family: var(--f-body); font-weight: 400; font-size: 13px; }
.diagram line { stroke: var(--line); stroke-width: 2.5; }
.pipe { display: flex; gap: 6px; flex-wrap: wrap; }
.pipe button { flex: 1 1 120px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 8px; cursor: pointer; font-family: var(--f-display); font-weight: 700; font-size: 1rem; letter-spacing: .03em; text-align: center; color: var(--muted); position: relative; }
.pipe button.seen { color: var(--fg); border-color: var(--ok); }
.pipe button.cur { background: var(--accent); border-color: var(--accent); color: #fff; }
.pipe button small { display: block; font-family: var(--f-body); font-weight: 400; font-size: .78rem; margin-top: 2px; opacity: .85; }
.regs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.regs div { background: var(--bg); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 12px; }
.regs small { display: block; color: var(--faint); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.regs b { font-family: var(--f-mono); font-weight: 400; font-size: 1.15rem; color: var(--info); }

/* chains */
.chain { display: flex; gap: 0; flex-wrap: wrap; align-items: stretch; row-gap: 10px; }
.cn { background: var(--bg2); border: 2px solid var(--line); border-radius: 10px; padding: 8px 12px; flex: 1 1 140px; min-width: 120px; position: relative; margin-right: 22px; }
.cn:last-child { margin-right: 0; }
.cn b { display: block; font-family: var(--f-display); font-size: 1.05rem; }
.cn span { font-size: .85rem; color: var(--muted); display: block; line-height: 1.35; }
.cn::after { content: '▶'; position: absolute; right: -19px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: .8rem; }
.cn:last-child::after { display: none; }
.cn.ok { border-color: var(--ok); } .cn.stop { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--bg2)); } .cn.off { opacity: .45; }
.cn.ok::after { color: var(--ok); }
.bits { display: flex; gap: 2px; font-family: var(--f-mono); font-size: .8rem; flex-wrap: wrap; }
.bits i { font-style: normal; width: 17px; text-align: center; background: var(--bg); border: 1px solid var(--line2); border-radius: 3px; color: var(--faint); }
.bits i.on { color: var(--ok); border-color: var(--ok); } .bits i.hl { outline: 2px solid var(--accent-t); }
.rline { display: grid; grid-template-columns: minmax(130px, 170px) 100px 1fr; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line2); font-size: .92rem; }
.rline.chg { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.slog { font-family: var(--f-mono); font-size: .95rem; }
.slog div { padding: 4px 8px; border-left: 3px solid var(--ok); margin-top: 4px; background: var(--bg); border-radius: 0 6px 6px 0; }
.slog div.ign { border-color: var(--warn); } .slog div.er { border-color: var(--bad); }
.slog small { display: block; font-family: var(--f-body); color: var(--muted); font-size: .88rem; }
.slog div.cur { outline: 2px solid var(--accent-t); }
.mission-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: color-mix(in srgb, var(--accent) 12%, var(--bg2)); border: 1px solid var(--accent-d); border-radius: 10px; padding: 12px 16px; }
.mission-bar.done { background: color-mix(in srgb, var(--ok) 14%, var(--bg2)); border-color: var(--ok); }

/* incidents */
.inc-card { text-align: left; background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; padding: 16px; cursor: pointer; display: grid; gap: 6px; color: var(--fg); }
.inc-card:hover { border-color: var(--accent-t); }
.inc-card .no { font-family: var(--f-mono); color: var(--accent-t); }
.stars { color: var(--warn); letter-spacing: 2px; }
.choice { display: flex; gap: 12px; align-items: flex-start; background: var(--bg2); border: 2px solid var(--line2); border-radius: 10px; padding: 12px 14px; cursor: pointer; }
.choice:hover { border-color: var(--info); }
.choice.sel { border-color: var(--accent-t); }
.choice.wrong { border-color: var(--bad); opacity: .6; } .choice.right { border-color: var(--ok); }
.choice b { font-family: var(--f-display); font-size: 1.1rem; display: block; }
.score { display: grid; gap: 6px; }
.score div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line2); padding: 4px 0; }
.total { font-family: var(--f-display); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--accent-t); }
.check { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.check i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex: none; }
.check.ok i { background: var(--ok); color: #06241a; } .check.no i { background: var(--bad); color: #2b0c0c; }
.vehicle { display: flex; gap: 10px; align-items: center; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); font-family: var(--f-mono); }
.vehicle.bad { border-color: var(--bad); color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); } .vehicle.good { border-color: var(--ok); color: var(--ok); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.badge { border: 1px solid var(--line2); border-radius: 10px; padding: 12px 14px; background: var(--bg2); opacity: .55; }
.badge.got { opacity: 1; border-color: var(--warn); }
.badge b { font-family: var(--f-display); letter-spacing: .06em; font-size: 1.1rem; display: block; }
.mrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line2); }
.mrow .no { font-family: var(--f-mono); color: var(--faint); font-size: 1.1rem; }
.mrow.done .no { color: var(--ok); }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--ok); color: #06241a; font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; padding: 12px 22px; border-radius: 10px; z-index: 50; box-shadow: 0 8px 30px #0008; max-width: calc(100% - 32px); text-align: center; }
.cop-log { max-height: 340px; overflow-y: auto; display: grid; gap: 10px; }
.cop-log .q { justify-self: end; background: var(--accent); color: #fff; padding: 6px 12px; border-radius: 12px 12px 2px 12px; max-width: 90%; }
.cop-log .a { background: var(--bg); border: 1px solid var(--line2); border-radius: 2px 12px 12px 12px; padding: 10px 14px; }
.cop-log .a p + p { margin-top: 6px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.spark { width: 100%; height: 70px; display: block; background: var(--bg); border: 1px solid var(--line2); border-radius: 8px; }

@media (max-width: 1000px) {
  .split, .split-r, .hero, .g2, .g3 { grid-template-columns: minmax(0, 1fr); }
  .tl-labels { width: 104px; } .order1 { order: -1; }
  .rline { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 760px) {
  .nav { order: 3; flex: 1 0 100%; padding-bottom: 2px; }
  .nav button { font-size: 1.05rem; padding: 8px 12px; }
}
@media (max-width: 560px) {
  .top-in { gap: 8px; } .lv-label { display: none; }
  .mrow { grid-template-columns: 34px minmax(0, 1fr); } .mrow > :last-child { grid-column: 2; }
  .cn { margin-right: 0; flex-basis: 100%; } .cn::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* world map cards */
.worlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.worlds .node { text-align: left; background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; padding: 14px 16px; cursor: pointer; display: grid; gap: 4px; align-content: start; color: var(--fg); }
.worlds .node:hover, .worlds .node:focus-visible { border-color: var(--accent-t); background: var(--panel2); }
.worlds .node b { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: .03em; }
.worlds .node span { color: var(--muted); font-size: .95rem; line-height: 1.4; }
.worlds .node small { color: var(--faint); font-family: var(--f-mono); font-size: .8rem; margin-top: 4px; }
.worlds .node.done { border-color: var(--ok); }

/* extra labs */
.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; align-items: end; }
.formgrid .wide, .formgrid h4 { grid-column: 1 / -1; }
.formgrid h4 { margin-top: 8px; }
.formgrid h4:first-child { margin-top: 0; }
.wavewrap { overflow-x: auto; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg); }
.wavecv, .plotcv { display: block; }
.plotcv { border: 1px solid var(--line2); border-radius: 10px; max-width: 100%; }
.big.good { color: var(--ok); } .big.bad { color: var(--bad); } .big.warnc { color: var(--warn); }
.mono { font-family: var(--f-mono); }

.medit { display: grid; grid-template-columns: 18px minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,.7fr) minmax(0,.8fr) minmax(0,1.1fr) 22px; gap: 5px; align-items: center; }
.medit input { padding: 5px 6px; font-size: .9rem; }
.medit.hd { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.medit.n4 { grid-template-columns: minmax(0,1.4fr) minmax(0,.7fr) minmax(0,1fr) minmax(0,.9fr) 22px; }
.panel.hl { border-color: var(--accent-t); }

.formgrid label.f, .medit.hd { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.heapmap { display: flex; height: 64px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); }
.heapmap .hb { min-width: 2px; font-size: .72rem; color: #fff; display: grid; place-items: center; overflow: hidden; border-right: 1px solid var(--bg); font-family: var(--f-mono); }
.heapmap .hb.free { background: repeating-linear-gradient(45deg, var(--bg2) 0 6px, var(--bg) 6px 12px); color: var(--faint); }
.bytegrid { display: grid; grid-template-columns: repeat(auto-fill, 26px); gap: 3px; }
.bytegrid i { font-style: normal; height: 26px; border-radius: 4px; display: grid; place-items: center; font-size: .65rem; color: #fff; font-family: var(--f-mono); }
.bytegrid i.pad { background: repeating-linear-gradient(45deg, var(--bg2) 0 4px, var(--line2) 4px 8px); }
.stackbar { display: flex; height: 58px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); }
.stackbar .ss { font-size: .78rem; color: #fff; display: grid; place-items: center; min-width: 2px; overflow: hidden; border-right: 1px solid var(--bg); font-family: var(--f-mono); }
.medit.f4 { grid-template-columns: minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,.6fr) auto; }
.medit.f3 { grid-template-columns: minmax(0,1fr) minmax(0,.7fr) minmax(0,2fr) 22px; }
.medit select { padding: 5px 6px; font-size: .9rem; }

/* two-row header on every width: brand + level, then the worlds */
.nav { order: 3; flex: 1 0 100%; }
.lv { margin-left: auto; }
.top-in { gap: 6px 18px; padding-block: 8px 4px; }
.nav button { padding: 6px 10px; font-size: 1.05rem; }
.segbar, .cyclebar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.segbar .seg { font-size: .75rem; color: #fff; display: grid; place-items: center; min-width: 0; font-family: var(--f-mono); }
.cyclebar { height: 34px; } .cyclebar .cs { min-width: 3px; border-right: 1px solid var(--bg); }
.cov{display:grid;gap:8px}.covrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--line)}.covrow .pill{min-width:150px;text-align:center}.covrow .btn{margin-left:auto}.covrow.N{opacity:.75}
@media (max-width:700px){ .panel table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch} .panel{min-width:0;max-width:100%} }
.ckrow{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.ckrow .ck{font:700 1.5rem/1 var(--f-mono);width:1.6rem;text-align:center;flex:none}
.ckrow.ok{border-color:var(--ok)} .ckrow.ok .ck{color:var(--ok)} .ckrow.no .ck{color:var(--bad)}
.ckrow .btn{flex:none;margin-left:auto}
.ckcode{font:.9rem var(--f-mono);color:var(--accent-t,var(--accent));overflow-wrap:anywhere}
@media (max-width:560px){.ckrow{flex-wrap:wrap}.ckrow .btn{margin-left:2.6rem}}
.bpbox{gap:8px;padding:10px 12px;border:1px dashed var(--line);border-radius:8px}.bphead{font-size:.95rem;line-height:1.45}
.bpc{font:.8rem var(--f-mono);color:var(--faint)} .chk.bp0{opacity:.55}
.howto{border:1px solid var(--line);border-radius:8px;padding:8px 14px;background:var(--panel)} .howto summary{cursor:pointer;font-weight:600} .howto ul{margin:8px 0 2px;padding-left:1.2em;color:var(--muted);line-height:1.55}.howto li{margin:3px 0}.howto b{color:var(--fg)}
.storylist{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow:auto} .storylist .ev{opacity:.5} .storylist .ev.past{opacity:1}
.rrtable{padding:4px 0}.rrhead{font-family:var(--f-mono);font-size:1.2rem;color:var(--t0)}.rrcap{min-height:2.6em;font-size:1.05rem;color:var(--t1)}
.rrscrub{width:100%}.rrsl{display:grid;gap:6px}.rrval{font-family:var(--f-mono);font-size:1.3rem;color:var(--accent)}
.rrwork{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}.rrwork label{display:flex;align-items:center;gap:6px}.rrwork input{width:64px}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:middle}.dot.bad{background:repeating-linear-gradient(45deg,var(--bad) 0 3px,#0000 3px 6px);border:1px solid var(--bad)}
.rrtl{position:relative;height:46px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);overflow:hidden}
.rrtl .seg{position:absolute;top:0;bottom:0;border-right:1px solid var(--panel);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:#14171C;overflow:hidden}
.rrtl .seg.switch{background:repeating-linear-gradient(45deg,var(--bad) 0 3px,#0000 3px 6px);min-width:2px}.rrtl .seg.idle{background:transparent}
.rrtl .ph{position:absolute;top:0;bottom:0;width:2px;background:var(--t0)}.rrkey{display:flex;gap:18px;flex-wrap:wrap;color:var(--t1)}
.rrrow{display:grid;grid-template-columns:1.2fr 1fr 1.6fr 1fr;gap:8px;padding:8px 6px;border-bottom:1px solid var(--line);font-size:1rem}.rrrow.hd{color:var(--muted)}.rrrow.on{background:var(--panel2);border-left:3px solid var(--accent)}
@media(max-width:620px){.rrrow{grid-template-columns:1fr 1fr;}}
.rrwhy{background:var(--panel2);border-left:3px solid var(--accent);padding:10px 12px;border-radius:6px;display:grid;gap:6px;font-size:1.05rem;min-height:4.6em}.rrline{color:var(--t1)}.chipn{margin-right:6px;font-family:var(--f-mono)}
.rrcmp{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:8px;padding:7px 6px;border-bottom:1px solid var(--line)}.rrcmp.hd{color:var(--muted);font-weight:700}.rrcmp.ft{font-weight:700;color:var(--t0)}
@media(max-width:620px){.rrcmp{grid-template-columns:1fr 1fr 1fr;font-size:.9rem}.rrcmp span:nth-child(n+4){display:none}}

.rtlog{display:grid;gap:6px}.rtlog .ev{display:flex;gap:10px;padding:6px 8px;border-radius:6px;background:var(--panel2);font-size:1rem}.rtlog .ev time{font-family:var(--f-mono);color:var(--muted);min-width:56px}
.rtlog .ev.warn{border-left:3px solid var(--warn)}.rtlog .ev.crit{border-left:3px solid var(--bad)}
.rtgrid{display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:16px}@media(max-width:900px){.rtgrid{grid-template-columns:1fr}}

.rtbars{display:flex;gap:8px;align-items:flex-end;height:120px}.rtbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:2px;padding:4px;border-radius:6px}.rtbar.on{background:var(--panel2);outline:2px solid var(--accent)}
.rtbar i{display:block;width:100%;border-radius:4px 4px 0 0}.rtbar i.bad{background:var(--bad)}.rtbar i.good{background:var(--ok)}.rtbar b{font-size:.8rem;color:var(--t0)}.rtbar small{color:var(--muted);font-size:.75rem}
.rtmiss{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed var(--bad);color:var(--bad);font-weight:700;font-size:.9rem}.rtmiss{padding-left:2px}
.rtgauge{position:relative;height:22px;border-radius:11px;background:var(--panel2);border:1px solid var(--line);overflow:visible;margin-bottom:22px}.rtgauge i{display:block;height:100%;border-radius:11px}.rtgauge i.good{background:var(--ok)}.rtgauge i.warn{background:var(--warn)}.rtgauge i.bad{background:var(--bad)}.rtgauge b{position:absolute;top:-2px;height:26px;border-left:3px solid var(--t0);font-size:.8rem;padding-left:4px;white-space:nowrap;margin-top:24px;color:var(--t1)}
.rtbar-steps{display:flex;gap:4px}.rtbar-steps i{flex:1;height:8px;border-radius:4px;background:var(--line)}.rtbar-steps i.on{background:var(--accent)}
.rtgrid>*{min-width:0}.rrsl select,.rrsl input[type=range]{width:100%;max-width:100%}.rtbars{overflow:hidden}.rtbar{min-width:0}.rtbar b,.rtbar small{white-space:nowrap}
.rtgauge b{transform:translateX(-100%);border-left:0;border-right:3px solid var(--t0);padding:0 6px 0 0}
.rtcode { max-height: 420px; overflow: auto; font-size: .85rem; user-select: text; }
.rtfiles { display: flex; gap: 6px; flex-wrap: wrap; }
.rtrun { margin: 8px 0; padding-left: 22px; line-height: 1.55; }
.sitefoot { border-top: 1px solid var(--line); margin-top: 48px; padding: 24px 16px 40px; font-size: .9rem; color: var(--muted); }
.sitefoot-in { max-width: 1180px; margin: 0 auto; display: grid; gap: 6px; }
.sitefoot a, .linkbtn { color: var(--accent-t, var(--accent)); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
.creditlist { margin: 0; padding-left: 20px; line-height: 1.6; display: grid; gap: 8px; }

.guide { padding: 12px 16px; }
.guide > summary { font-size: 1.15rem; }
.guide p { margin: 10px 0 6px; line-height: 1.55; }
.guide ol { margin: 6px 0 10px; padding-left: 22px; line-height: 1.55; }
.guide li { margin: 6px 0; }
.guide .guide-h { font-family: var(--f-display); font-weight: 700; letter-spacing: .03em; color: var(--accent); margin-bottom: 0; }
.guide .guide-m { padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--panel2); border-radius: 0 8px 8px 0; }
.guide-walk { margin-top: 8px; }
.guide-walk > summary { font-size: 1rem; color: var(--muted); }
.cc-list { margin: 0; padding-left: 20px; line-height: 1.55; }
.ccode-panel h4 { margin: 0 0 4px; }

/* ---- Watch it happen (animations) ---- */
.play-stage { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.play-svg { width: 100%; height: auto; display: block; max-height: 520px; }
.play-say { font-size: 1.05rem; line-height: 1.5; min-height: 3.2em; color: var(--fg); }
.play-tech { font-size: .9rem; min-height: 1.2em; }
.play-ctl { flex-wrap: wrap; gap: 8px; }
.play-hint { font-size: .85rem; margin: 0; }
.play-panel .rrscrub { flex: 1 1 200px; }

.bigbtn{width:100%;padding:14px 16px;font-size:1.05rem;touch-action:none;user-select:none}
.bigbtn.held{filter:brightness(.8);transform:translateY(2px)}
.bul{margin:0;padding-left:1.2rem;display:grid;gap:4px}
.gl{margin:0;display:grid;gap:8px}.gl dt{font-weight:700}.gl dd{margin:0}
.tblwrap{overflow-x:auto}

/* challenge goal checklist */
.goalbox{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.goalrow{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.goalrow .goalic{width:1.2em;font-weight:700}
.goalrow.good .goalic{color:var(--ok)}.goalrow.bad .goalic{color:var(--bad)}

/* The Book (Start page) */
.bk { display: grid; grid-template-columns: minmax(250px, 310px) minmax(0, 1fr); gap: 18px; align-items: start; }
.bk-bar { display: none; grid-column: 1 / -1; }
.bk-nav { position: sticky; top: 116px; max-height: calc(100vh - 132px); overflow-y: auto; display: grid; gap: 10px; align-content: start; padding: 14px; }
.bk-search { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; min-height: 42px; }
.bk-search:focus { border-color: var(--info); outline: none; }
.bk-prog { font-size: .9rem; }
.bk-list { display: grid; gap: 2px; }
.bk-sec { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line2); padding: 10px 4px; cursor: pointer; font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; color: var(--fg); min-height: 44px; }
.bk-sec:hover, .bk-sec.cur { color: var(--accent-t); }
.bk-sec-t { flex: 1; min-width: 0; }
.bk-caret { width: 14px; color: var(--muted); flex: none; }
.bk-t { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 7px 8px 7px 22px; cursor: pointer; color: var(--muted); font-size: .96rem; line-height: 1.3; min-height: 36px; }
.bk-t:hover { background: var(--bg2); color: var(--fg); }
.bk-t.cur { background: var(--bg2); color: var(--fg); box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
.bk-t.read .bk-tick { color: var(--ok); }
.bk-tick { width: 12px; flex: none; text-align: center; color: var(--faint); }
.bk-hit { display: grid; } .bk-hit small { padding: 0 8px 6px 42px; margin-top: -4px; }
.bk-count { padding: 2px 4px 6px; font-size: .9rem; }
.bk-main { min-width: 0; display: grid; gap: 16px; align-content: start; }
.bk-art { padding: clamp(16px, 3vw, 28px); }
.bk-body { display: grid; gap: 12px; font-size: 1.04rem; line-height: 1.65; max-width: 74ch; }
.bk-body ul, .bk-body ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.bk-more { background: var(--bg2); border: 1px solid var(--line2); border-radius: 10px; padding: 12px 16px; }
.bk-more > summary { font-size: 1.1rem; }
.bk-more .bk-body { margin-top: 12px; }
.bk-code { margin: 0; background: var(--bg); border: 1px solid var(--line2); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-family: var(--f-mono); font-size: .92rem; line-height: 1.5; }
.bk-code code { background: none; border: 0; padding: 0; color: var(--fg); }
.bk-pn { gap: 10px; flex-wrap: wrap; } .bk-pn .btn { text-align: left; white-space: normal; }
.bk-fix { font-size: .9rem; }
.bk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.bk-card { text-align: left; cursor: pointer; display: grid; gap: 8px; align-content: start; color: var(--fg); }
.bk-card:hover { border-color: var(--info); }
.bk-card h3 { font-size: 1.25rem; } .bk-card p { font-size: .96rem; line-height: 1.45; }
.bk-gl { margin: 6px 0 0; display: grid; gap: 4px; max-width: 80ch; }
.bk-gl dt { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; color: var(--accent-t); margin-top: 10px; }
.bk-gl dd { margin: 0; color: var(--fg); line-height: 1.55; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) {
  .bk { grid-template-columns: minmax(0, 1fr); }
  .bk-bar { display: block; }
  .bk-nav { display: none; position: static; max-height: 60vh; }
  .bk.nav-open .bk-nav { display: grid; }
}

.bk-body, .bk-card p, .bk-gl dd, .bk-art .callout { overflow-wrap: anywhere; }
.bk-body code, .bk-art .callout code { overflow-wrap: anywhere; }
.bk-art { overflow: hidden; }

/* Book diagrams */
.bk-fig { margin: 4px 0; background: var(--bg2); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 10px 6px; }
.bk-fig .figbox { overflow-x: auto; }
.bk-fig svg { display: block; width: 100%; height: auto; font-family: var(--f-body); font-size: 13px; }
.bk-fig svg text { fill: var(--fg); }
.bk-fig svg text.t-m { fill: var(--muted); } .bk-fig svg text.t-bad { fill: var(--bad); font-weight: 600; } .bk-fig svg text.t-y { fill: var(--warn); } .bk-fig svg text.t-g { fill: var(--ok); }
.bk-fig figcaption { font-size: .85rem; color: var(--faint); text-align: center; padding: 4px 0 2px; }
.f-n { fill: var(--panel2); stroke: var(--line); stroke-width: 1.3; }
.f-a { fill: color-mix(in srgb, var(--accent) 38%, var(--panel)); stroke: var(--accent-t); stroke-width: 1.3; }
.f-g { fill: color-mix(in srgb, var(--ok) 28%, var(--panel)); stroke: var(--ok); stroke-width: 1.3; }
.f-b { fill: color-mix(in srgb, var(--info) 28%, var(--panel)); stroke: var(--info); stroke-width: 1.3; }
.f-p { fill: color-mix(in srgb, var(--t2) 30%, var(--panel)); stroke: var(--t2); stroke-width: 1.3; }
.f-y { fill: color-mix(in srgb, var(--warn) 30%, var(--panel)); stroke: var(--warn); stroke-width: 1.3; }
.f-r { fill: color-mix(in srgb, var(--bad) 32%, var(--panel)); stroke: var(--bad); stroke-width: 1.3; }
.f-l { stroke: var(--muted); stroke-width: 1.6; fill: none; }
.f-l.s-a { stroke: var(--accent-t); } .f-l.s-g { stroke: var(--ok); } .f-l.s-b { stroke: var(--info); } .f-l.s-y { stroke: var(--warn); } .f-l.s-r { stroke: var(--bad); } .f-l.s-m { stroke: var(--faint); } .f-l.s-p { stroke: var(--t2); } .f-l.s-n { stroke: var(--muted); }
.f-ar { fill: var(--muted); fill: context-stroke; }
.tabs button.tab-hl { color: #fff; background: var(--accent); border-radius: 8px 8px 0 0; border-bottom-color: var(--accent-t); position: relative; }
.tabs button.tab-hl[aria-selected="true"] { background: var(--accent-d); }
.tabs button.tab-hl::after { content: 'NEW'; font: 700 .62rem var(--f-body); background: #fff; color: var(--accent-d); border-radius: 8px; padding: 1px 6px; margin-left: 8px; vertical-align: middle; letter-spacing: .05em; }
.bk-promo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px solid var(--accent-t); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); border-radius: 10px; padding: 12px 16px; }
.bk-art { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.bk-art > *, .bk-body, .bk-fig { min-width: 0; max-width: 100%; }
.bk-fig .figbox { max-width: 100%; }
@media (max-width: 700px) { .bk-fig figcaption::after { content: ' · swipe sideways to see it all'; } }

/* Calmer typography (redesign): sentence-case labels, no tracked caps, tighter headings. */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.005em; }
.logo { letter-spacing: .03em; font-size: 1.35rem; }
.nav button { letter-spacing: 0; font-size: 1rem; }
.eyebrow { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--muted); font-weight: 500; }

:where(h4, th, label.f, .kpi small, .regs small, .medit.hd, .qa dt, .eyebrow, .lv-label, .loop span, .worlds .node b, .tabs button) { text-transform: none !important; letter-spacing: 0 !important; }
.worlds .node { border-radius: 8px; }

/* Multi-core and virtualization lab: timeline strips, message chips */
.mcl { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px 10px; align-items: center; min-width: 520px; }
.mcl > b { font-size: .92rem; font-weight: 600; color: var(--muted); }
.mcl .cells { display: grid; gap: 1px; }
.mcl .cells i { height: 24px; background: var(--line2); border-radius: 2px; display: block; }
.mcl .cells.ruler span { font: 400 .68rem var(--f-mono); color: var(--faint); height: auto; overflow: visible; white-space: nowrap; }
.mcleg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .86rem; color: var(--muted); }
.mcleg span { display: inline-flex; align-items: center; gap: 6px; }
.mcleg i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; background: var(--line2); }
.mcl .cells i.v-ncs, .mcl .cells i.v-L, .mcleg i.v-ncs, .mcleg i.v-L { background: var(--info); }
.mcl .cells i.v-cs, .mcl .cells i.v-S, .mcleg i.v-cs, .mcleg i.v-S { background: var(--ok); }
.mcl .cells i.v-sw, .mcl .cells i.v-pend, .mcleg i.v-sw, .mcleg i.v-pend { background: var(--warn); }
.mcl .cells i.v-other, .mcleg i.v-other { background: var(--t2); }
.mcl .cells i.v-isr, .mcleg i.v-isr { background: var(--t4); }
.mcl .cells i.v-spin, .mcl .cells i.v-late, .mcleg i.v-spin, .mcleg i.v-late { background: repeating-linear-gradient(45deg, var(--bad) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--bad); }
.mcl .cells i.v-dead, .mcl .cells i.v-reset, .mcleg i.v-dead, .mcleg i.v-reset { background: var(--bad); }
.mcl .cells i.v-idle, .mcl .cells i.v-ok, .mcleg i.v-idle, .mcleg i.v-ok { background: var(--line2); }
.mcform .chk { grid-column: 1 / -1; }
.mcchips { gap: 6px; }
.mcchips .chip { cursor: default; font-family: var(--f-mono); font-size: .85rem; }
.mcchips .mc-ok { border-color: var(--ok); color: var(--ok); } .mcchips .mc-stale { border-color: var(--warn); color: var(--warn); } .mcchips .mc-lost, .mcchips .mc-pending, .mcchips .mc-sent { border-color: var(--bad); color: var(--bad); text-decoration: line-through; }

.mesi{display:inline-block;min-width:22px;text-align:center;border-radius:4px;font-weight:700;padding:0 6px;color:#0F1216;font-family:var(--mono)}
.mesi.M{background:var(--hot)}.mesi.E{background:var(--ok)}.mesi.S{background:var(--info)}.mesi.I{background:var(--line2);color:var(--muted)}

.logo-wm { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.logo-sub { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: .72rem; letter-spacing: 0; color: #FF4308; margin-top: 3px; }
@media (max-width: 520px) { .logo-sub { display: none; } }

/* aircraft-system sliders: drag, nudge or type, with plain hints */
.knob{display:flex;flex-direction:column;gap:6px;padding:8px 0 10px;border-bottom:1px solid var(--line,#2a303a)}
.knobname{font-weight:600}.knobval{font-size:1.05rem;color:var(--accent-t,#7C93FF)}
.knobrow{display:flex;align-items:center;gap:8px}.knobrow input[type=range]{flex:1;min-width:0;height:32px;accent-color:var(--accent-t,#7C93FF);cursor:pointer}
.knobrow input[type=number]{width:84px;flex:none}.knobstep{min-width:34px;padding:4px 0;font-size:1.1rem;line-height:1}
.knobhint{display:flex;flex-direction:column;gap:2px;font-size:.82rem;color:var(--muted,#9AA3B2);line-height:1.35}
.knobhint b{color:var(--fg,#E6E9EE);font-weight:600}small.knobhint{display:block;margin-top:2px}
.chk .knobtxt{display:flex;flex-direction:column}

.btn{text-decoration:none}