/* ---------- Tokens ---------- */
:root {
  --bg: #f6f2e8;
  --surface: #fffdf7;
  --surface-2: #efe8d8;
  --ink: #1f1c16;
  --ink-soft: #5d5647;
  --rule: #ddd3bd;
  --accent: #9a4f0a;
  --signal: #f0a020;
  --signal-ink: #1f1c16;
  --signal-glow: rgba(240, 160, 32, 0.55);
  --wire-off: #aaa08b;
  --lamp-off: #e6dfcf;
  --code-bg: #efe8d8;
  --crt-bg: #0e1a12;
  --crt-ink: #8ff0a8;
  --crt-dim: #5fae75;

  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --measure: 44rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121417;
    --surface: #1a1d22;
    --surface-2: #242830;
    --ink: #ebe6da;
    --ink-soft: #a9a394;
    --rule: #343943;
    --accent: #f3b04a;
    --signal: #ffb627;
    --signal-ink: #1a1408;
    --signal-glow: rgba(255, 182, 39, 0.6);
    --wire-off: #4f5663;
    --lamp-off: #2c3139;
    --code-bg: #1f2329;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121417;
  --surface: #1a1d22;
  --surface-2: #242830;
  --ink: #ebe6da;
  --ink-soft: #a9a394;
  --rule: #343943;
  --accent: #f3b04a;
  --signal: #ffb627;
  --signal-ink: #1a1408;
  --signal-glow: rgba(255, 182, 39, 0.6);
  --wire-off: #4f5663;
  --lamp-off: #2c3139;
  --code-bg: #1f2329;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4.5rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.65;
}
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--font-ui); line-height: 1.2; letter-spacing: -0.01em; }
h2 { font-size: 1.6rem; margin: 3.2rem 0 0.8rem; }
h3 { font-size: 1.2rem; margin: 2rem 0 0.5rem; }
p, ul, ol { margin: 0 0 1.1rem; }
code, pre, kbd { font-family: var(--font-mono); font-size: 0.9em; }
:not(pre) > code { background: var(--code-bg); padding: 0.05em 0.35em; border-radius: 4px; }
pre {
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  line-height: 1.5;
  font-size: 0.95rem;
}
pre .c { color: var(--ink-soft); }
strong { font-weight: 650; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header .inner {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0.7rem 16px;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.brand {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.brand .chip {
  width: 22px; height: 22px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  position: relative;
  background:
    linear-gradient(var(--signal), var(--signal)) center / 8px 8px no-repeat;
}
.site-header nav { margin-left: auto; display: flex; gap: 0.4rem; align-items: center; font-family: var(--font-ui); font-size: 0.95rem; }
.site-header nav a { color: var(--ink-soft); text-decoration: none; padding: 0.3rem 0.6rem; border-radius: 6px; }
.site-header nav a:hover { color: var(--ink); background: var(--surface-2); }
.icon-btn {
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  width: 36px; height: 36px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  display: grid;
  place-items: center;
}
.icon-btn:hover { background: var(--surface-2); }

/* ---------- Chapter layout ---------- */
.chapter-layout {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
}
@media (min-width: 1100px) {
  .chapter-layout { grid-template-columns: minmax(0, 1fr) 15rem; }
  .page-toc-wrap { display: block; }
}
.chapter-layout main { max-width: var(--measure); width: 100%; margin: 0 auto; padding-bottom: 4rem; }
.page-toc-wrap { display: none; }
.page-toc {
  position: sticky;
  top: 5rem;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  margin-top: 4rem;
}
.page-toc h4 { margin: 0 0 0.6rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.page-toc ol { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--rule); }
.page-toc a { display: block; padding: 0.25rem 0 0.25rem 0.9rem; color: var(--ink-soft); text-decoration: none; margin-left: -2px; border-left: 2px solid transparent; }
.page-toc a:hover { color: var(--ink); }
.page-toc a.current { color: var(--ink); border-left-color: var(--signal); }

.chapter-head { padding: 3.5rem 0 1.5rem; border-bottom: 1px solid var(--rule); margin-bottom: 2rem; }
.kicker { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.8rem; }
.chapter-head h1 { font-size: clamp(2.1rem, 6vw, 3.2rem); margin: 0 0 1rem; }
.lede { font-size: 1.25rem; color: var(--ink-soft); margin: 0; }

/* ---------- Asides ---------- */
.then-now {
  background: var(--crt-bg);
  color: var(--crt-ink);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  line-height: 1.6;
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  margin: 2rem 0;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), 0 0 0 1px #24402c;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
}
.then-now .tn-head { color: var(--crt-dim); letter-spacing: 0.15em; font-size: 0.78rem; margin-bottom: 0.5rem; }
.then-now p { margin: 0 0 0.6rem; }
.then-now p:last-child { margin-bottom: 0; }
.then-now strong { color: #c6ffd4; }
.then-now code { background: rgba(143, 240, 168, 0.1); color: inherit; }

.note {
  border-left: 4px solid var(--signal);
  background: var(--surface);
  padding: 0.9rem 1.2rem;
  border-radius: 0 8px 8px 0;
  margin: 1.8rem 0;
  font-size: 1.02rem;
}
.note .note-head { font-family: var(--font-ui); font-weight: 650; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.2rem; }
.note p:last-child { margin-bottom: 0; }

.exercises { counter-reset: ex; padding: 0; list-style: none; }
.exercises li {
  counter-increment: ex;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1rem 1.2rem 1rem 3.2rem;
  margin-bottom: 0.9rem;
  position: relative;
}
.exercises li::before {
  content: counter(ex);
  position: absolute; left: 1rem; top: 1rem;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--signal);
  color: var(--signal-ink);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  display: grid; place-items: center;
}
.exercises details { margin-top: 0.5rem; font-size: 1rem; }
.exercises summary { cursor: pointer; font-family: var(--font-ui); font-size: 0.9rem; color: var(--accent); }

.summary-list li { margin-bottom: 0.4rem; }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
}
.pager a, .pager span { display: block; padding: 0.8rem 1rem; border: 1px solid var(--rule); border-radius: 10px; text-decoration: none; color: var(--ink); background: var(--surface); max-width: 48%; }
.pager span { color: var(--ink-soft); }
.pager small { display: block; color: var(--ink-soft); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.pager .next { margin-left: auto; text-align: right; }

/* ---------- Demo frame ---------- */
.demo {
  margin: 2rem 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1rem 1.1rem 1.1rem;
  font-family: var(--font-ui);
}
.demo-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.demo-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; }
.demo-status {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--surface-2);
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  margin-top: 0.8rem;
  min-height: 2.4em;
}
.demo figcaption { font-size: 0.95rem; color: var(--ink-soft); margin-top: 0.7rem; line-height: 1.5; }
.demo-scroll { width: 100%; overflow-x: auto; }
.demo-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; align-items: center; width: 100%; }
.btn {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  border: 1px solid var(--rule);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  min-height: 36px;
}
.btn:hover { border-color: var(--accent); }
.check { font-family: var(--font-ui); font-size: 0.92rem; display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 0.5rem; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------- SVG circuits ---------- */
svg.circuit { width: 100%; height: auto; flex: 1 1 300px; overflow: visible; font-family: var(--font-mono); }
svg.circuit.wide { min-width: 540px; display: block; margin: 0 auto; }
.wire { fill: none; stroke: var(--wire-off); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; transition: stroke 0.15s; }
.wire.on { stroke: var(--signal); }
.junction { fill: var(--wire-off); }
.junction.on { fill: var(--signal); }
.svg-label { fill: var(--ink-soft); font-size: 13px; }
.io-label { fill: var(--ink); font-size: 14px; font-weight: 600; }
.small-label { font-size: 11px; }
.gate-label { font-size: 11px; letter-spacing: 0.1em; }
.port-label { font-size: 10px; }
.block-title { fill: var(--ink); font-size: 12px; font-weight: 600; }
.gate-body { fill: var(--surface); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.gate-curve { fill: none; stroke: var(--ink); stroke-width: 2; }
.block-box { fill: var(--surface); stroke: var(--ink); stroke-width: 2; transition: stroke 0.15s, fill 0.15s; }
.block.active .block-box { stroke: var(--accent); stroke-width: 3; fill: color-mix(in srgb, var(--signal) 14%, var(--surface)); }

.toggle { cursor: pointer; }
.toggle rect { fill: var(--surface-2); stroke: var(--ink-soft); stroke-width: 2; transition: fill 0.15s; }
.toggle:hover rect { stroke: var(--accent); }
.toggle .toggle-val { fill: var(--ink); font-size: 14px; font-weight: 600; pointer-events: none; }
.toggle.on rect { fill: var(--signal); stroke: var(--signal); }
.toggle.on .toggle-val { fill: var(--signal-ink); }
.toggle:focus { outline: none; }
.toggle:focus-visible rect { stroke: var(--accent); stroke-width: 3; }

.lamp .bulb { fill: var(--lamp-off); stroke: var(--ink-soft); stroke-width: 2; transition: fill 0.15s; }
.lamp .ray { stroke: var(--signal); stroke-width: 2.5; stroke-linecap: round; opacity: 0; transition: opacity 0.15s; }
.lamp .lamp-val { fill: var(--ink-soft); font-size: 13px; font-weight: 600; }
.lamp .filament { stroke: var(--ink-soft); stroke-width: 2; fill: none; }
.lamp.on .bulb { fill: var(--signal); stroke: var(--signal); filter: drop-shadow(0 0 6px var(--signal-glow)); }
.lamp.on .ray { opacity: 1; }
.lamp.on .lamp-val { fill: var(--signal-ink); }
.lamp.on .filament { stroke: var(--signal-ink); }

.battery-plate { stroke: var(--ink); stroke-width: 3; }
.battery-plate.short { stroke-width: 6; }

.knife { cursor: pointer; }
.knife:not([data-input]) { cursor: default; }
.knife .hit { fill: transparent; }
.knife .terminal { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.knife .lever { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; transform-box: view-box; transform: rotate(-30deg); transition: transform 0.18s ease; }
.knife.on .lever { transform: none; stroke: var(--signal); }
.knife:hover .lever { stroke: var(--accent); }
.knife:focus { outline: none; }
.knife:focus-visible .hit { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 3; }

@media (prefers-reduced-motion: reduce) {
  .knife .lever, .wire, .lamp .bulb, .toggle rect { transition: none; }
}

/* ---------- Truth tables ---------- */
table.truth { border-collapse: collapse; font-family: var(--font-mono); font-size: 0.95rem; flex: 0 0 auto; }
table.truth caption { font-family: var(--font-ui); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); padding-bottom: 0.3rem; }
table.truth th, table.truth td { padding: 0.25rem 0.9rem; text-align: center; border-bottom: 1px solid var(--rule); }
table.truth th { font-weight: 600; color: var(--ink-soft); }
table.truth td.out { font-weight: 700; }
table.truth tbody tr { cursor: pointer; }
table.truth tbody tr:hover td { background: var(--surface-2); }
table.truth tr.current td { background: color-mix(in srgb, var(--signal) 32%, transparent); }

/* ---------- Bit flipper ---------- */
.bitflip { width: 100%; display: flex; flex-direction: column; gap: 0.9rem; align-items: center; }
.bits { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 30rem; }
.bit {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0.5rem 0 0.4rem;
  border: 2px solid var(--rule);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
  min-width: 0;
}
.bit:hover { border-color: var(--accent); }
.bit .bit-val { font-size: 1.4rem; font-weight: 600; line-height: 1.1; }
.bit .bit-place { font-size: 0.72rem; color: var(--ink-soft); }
.bit.on { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); box-shadow: 0 0 10px var(--signal-glow); }
.bit.on .bit-place { color: var(--signal-ink); }
.bits-readout { font-family: var(--font-mono); font-size: 1rem; text-align: center; }
.bits-readout code { font-size: 1.05rem; background: none; }
.bits-readout .eq { color: var(--ink-soft); margin: 0 0.3rem; }

/* ---------- Adder readout ---------- */
.adder-readout { font-family: var(--font-mono); font-size: 1.05rem; display: grid; gap: 0.15rem; justify-content: center; }
.adder-readout > div { display: grid; grid-template-columns: 2.5rem 4.5rem 3rem; align-items: baseline; }
.adder-readout code { background: none; text-align: right; letter-spacing: 0.15em; }
.adder-readout .lbl { color: var(--ink-soft); }
.adder-readout .dec { text-align: right; color: var(--ink-soft); }
.adder-readout .total { border-top: 2px solid var(--ink); padding-top: 0.15rem; font-weight: 600; }
.adder-readout .total .dec { color: var(--ink); }
.adder-readout .cout { color: var(--ink-soft); opacity: 0.5; }
.adder-readout .cout.on { color: var(--accent); opacity: 1; }

/* ---------- Home page ---------- */
.home { max-width: 64rem; margin: 0 auto; padding: 0 16px 5rem; }
.hero { display: grid; gap: 2.5rem; padding: 4rem 0 3rem; align-items: center; }
@media (min-width: 860px) { .hero { grid-template-columns: 1.15fr 1fr; } }
.hero h1 { font-size: clamp(2.6rem, 8vw, 4.4rem); margin: 0 0 1rem; line-height: 1.02; letter-spacing: -0.025em; }
.hero .sub { font-size: 1.3rem; color: var(--ink-soft); margin-bottom: 1.6rem; }
.cta {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 600;
  background: var(--ink);
  color: var(--bg);
  padding: 0.8rem 1.3rem;
  border-radius: 10px;
  text-decoration: none;
}
.cta:hover { background: var(--accent); color: var(--bg); }

.stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--font-ui); }
.stack li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 0.98rem;
  margin: 0 calc(var(--i) * 10px);
}
.stack li span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.stack li.here { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal), 0 0 14px var(--signal-glow); }
.stack-caption { font-family: var(--font-ui); font-size: 0.85rem; color: var(--ink-soft); text-align: center; margin-top: 0.7rem; }

.about { max-width: var(--measure); }
.toc-title { font-size: 2rem; margin: 3.5rem 0 1.5rem; }
.parts { display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .parts { grid-template-columns: 1fr 1fr; } }
.part { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 1.1rem 1.3rem 0.8rem; }
.part h3 { margin: 0 0 0.6rem; font-size: 1.1rem; }
.part h3 small { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.2rem; }
.part ol { list-style: none; padding: 0; margin: 0; font-family: var(--font-ui); font-size: 0.98rem; }
.part li { display: flex; gap: 0.7rem; padding: 0.35rem 0; border-top: 1px solid var(--rule); align-items: baseline; }
.part li .num { font-family: var(--font-mono); color: var(--ink-soft); font-size: 0.85rem; min-width: 1.6rem; }
.part li.soon { color: var(--ink-soft); }
.part li .badge { margin-left: auto; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.part li .badge.ready { background: var(--signal); color: var(--signal-ink); }
.part li .badge.later { border: 1px solid var(--rule); }

.site-footer { border-top: 1px solid var(--rule); padding: 2rem 16px; text-align: center; font-family: var(--font-ui); font-size: 0.88rem; color: var(--ink-soft); }

/* ---------- Hex nibbles ---------- */
.nibbles { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 0.9rem 1.2rem; }
@media (min-width: 760px) { .nibbles { grid-template-columns: repeat(4, auto); } }
.nibble { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.nibble-bits { display: grid; grid-template-columns: repeat(4, 2.1rem); gap: 4px; }
.bit.sm { padding: 0.3rem 0 0.25rem; }
.bit.sm .bit-val { font-size: 1.1rem; }
.bit.sm .bit-place { font-size: 0.65rem; }
.nibble-hex {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  border-top: 2px solid var(--rule);
  width: 100%;
  text-align: center;
  padding-top: 0.35rem;
}
.nibble-hex small { display: block; font-size: 0.7rem; font-weight: 400; color: var(--ink-soft); margin-top: 0.2rem; }

.hex-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: 6px; margin: 1.2rem 0 1.6rem; font-family: var(--font-mono); font-size: 0.9rem; }
.hex-table div { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 0.3rem 0.5rem; display: flex; justify-content: space-between; gap: 0.4rem; }
.hex-table b { color: var(--accent); }
.hex-table span { color: var(--ink-soft); }

/* ---------- Number wheel ---------- */
.wheel-wrap { width: 100%; display: flex; justify-content: center; }
svg.circuit.wheel { max-width: 380px; flex: 0 1 380px; }
.wheel-ring { fill: none; stroke: var(--rule); stroke-width: 3; }
.wheel-hit { fill: transparent; }
.wheel-spot { cursor: pointer; }
.wheel-spot:focus { outline: none; }
.wheel-spot:focus-visible .wheel-hit { stroke: var(--accent); stroke-width: 2; }
.wheel-dot { fill: var(--surface); stroke: var(--wire-off); stroke-width: 2; transition: fill 0.15s; }
.wheel-spot:hover .wheel-dot { stroke: var(--accent); }
.wheel-spot.current .wheel-dot { fill: var(--signal); stroke: var(--signal); filter: drop-shadow(0 0 6px var(--signal-glow)); }
.wheel-bits { font-size: 11px; fill: var(--ink-soft); }
.wheel-spot.current .wheel-bits { fill: var(--ink); font-weight: 600; }
.wheel-val { font-size: 15px; font-weight: 600; fill: var(--ink); }
.wheel-val.neg, .wheel-big.neg { fill: var(--accent); }
.wheel-hand { fill: none; stroke: var(--signal); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transform-box: view-box; transform-origin: 190px 190px; transition: transform 0.3s ease; }
.wheel-big { font-size: 34px; font-weight: 600; fill: var(--ink); }
.wheel-big-bits { font-size: 15px; fill: var(--ink-soft); letter-spacing: 0.15em; }
.wheel-seam line { stroke: #d0452f; stroke-width: 3; stroke-dasharray: 5 3; }
.seam-label { fill: #d0452f; font-size: 11px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .wheel-hand { transition: none; } }

.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.seg button { font-family: var(--font-ui); font-size: 0.88rem; border: 0; background: var(--surface-2); color: var(--ink-soft); padding: 0.45rem 0.8rem; cursor: pointer; min-height: 36px; }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* ---------- Negate stepper ---------- */
.negate { display: grid; gap: 0.8rem; width: 100%; max-width: 32rem; }
.neg-row { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.8rem; align-items: center; }
.neg-label { grid-column: 1 / -1; font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink-soft); }
.neg-bits { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.neg-bits .cell {
  font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600;
  text-align: center; padding: 0.35rem 0; border-radius: 6px;
  border: 2px solid var(--rule); background: var(--surface-2); color: var(--ink);
}
.neg-bits button.cell { cursor: pointer; }
.neg-bits button.cell:hover { border-color: var(--accent); }
.neg-bits .cell.on { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.neg-val { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; min-width: 4.5rem; text-align: right; }

/* ---------- Adder-subtractor readout ---------- */
.flag-readout { width: 100%; display: flex; justify-content: center; }
table.flags { border-collapse: collapse; font-family: var(--font-mono); font-size: 0.95rem; }
table.flags th, table.flags td { padding: 0.2rem 0.8rem; text-align: right; }
table.flags thead th { font-family: var(--font-ui); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 600; }
table.flags tbody th { color: var(--ink-soft); font-weight: 400; }
table.flags code { background: none; letter-spacing: 0.15em; }
table.flags tr.res td, table.flags tr.res th { border-top: 2px solid var(--ink); font-weight: 600; }
table.flags td.good { color: var(--ink); }
table.flags td.bad { color: #d0452f; text-decoration: line-through; }
.flag { display: inline-block; font-size: 0.8rem; padding: 0.05rem 0.45rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-soft); }
.flag.on { background: #d0452f; border-color: #d0452f; color: #fff; }

/* ---------- Logic analyzer ---------- */
svg.circuit.scope { max-width: 640px; flex: 1 1 100%; margin-top: 0.4rem; }
.scope-row { fill: var(--surface-2); }
.scope-trace { fill: none; stroke: var(--signal); stroke-width: 2.5; stroke-linejoin: round; }
.scope-now { fill: var(--ink-soft); }

/* ---------- Latches ---------- */
.latch-frame { fill: none; stroke: var(--wire-off); stroke-width: 1.5; stroke-dasharray: 6 4; }
.latch-box.on .block-box { stroke: var(--signal); stroke-width: 3; fill: color-mix(in srgb, var(--signal) 14%, var(--surface)); }
.clock-mark { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.node-val { fill: var(--ink); font-size: 12px; font-weight: 600; }

/* ---------- Clock speed ---------- */
.clock-speed { width: 100%; display: grid; gap: 0.9rem; }
.clock-top { display: flex; align-items: center; justify-content: center; gap: 0.9rem; }
.clock-led { width: 22px; height: 22px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px var(--signal-glow); }
.clock-led.blinking { animation: clock-blink 1s step-end infinite; }
@keyframes clock-blink { 0% { opacity: 1; } 50% { opacity: 0.12; box-shadow: none; } }
.clock-freq { font-family: var(--font-mono); font-size: 2rem; font-weight: 600; }
.clock-speed input[type="range"] { width: 100%; accent-color: var(--accent); }
.clock-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.6rem; margin: 0; }
.clock-facts div { background: var(--surface-2); border-radius: 8px; padding: 0.5rem 0.8rem; }
.clock-facts dt { font-size: 0.78rem; color: var(--ink-soft); }
.clock-facts dd { margin: 0; font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; }
.path-bars { display: grid; gap: 0.45rem; }
.path-row { display: grid; grid-template-columns: minmax(7rem, 13rem) 1fr 5.5rem; gap: 0.6rem; align-items: center; font-size: 0.85rem; }
.path-track { background: var(--surface-2); border-radius: 4px; height: 14px; overflow: hidden; }
.path-bar { height: 100%; background: var(--wire-off); border-radius: 4px; transition: width 0.2s; }
.path-bar.tick { background: var(--signal); }
.path-bar.bad { background: #d0452f; }
.path-verdict { font-family: var(--font-mono); text-align: right; }
.path-verdict.bad { color: #d0452f; font-weight: 600; }
@media (max-width: 560px) { .path-row { grid-template-columns: 1fr 5.5rem; } .path-track { grid-column: 1 / -1; grid-row: 2; } }
@media (prefers-reduced-motion: reduce) { .clock-led.blinking { animation: none; } }

/* ---------- Registers, counters ---------- */
.mux-body { fill: var(--surface); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.bus { fill: none; stroke: var(--ink-soft); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; opacity: 0.75; }
.bus-val { fill: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; }
.reg-val { fill: var(--ink); font-size: 15px; font-weight: 600; }
.count-display { font-family: var(--font-mono); font-size: 1.3rem; text-align: center; width: 100%; }
.count-display code { background: none; letter-spacing: 0.2em; }
.count-display .eq { color: var(--ink-soft); margin: 0 0.4rem; }

/* ---------- Tiny-8 simulator ---------- */
.t8 { width: 100%; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .t8 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } }
.t8-mem { overflow-x: auto; }
.t8-table { border-collapse: collapse; font-family: var(--font-mono); font-size: 0.82rem; width: 100%; }
.t8-table caption { font-family: var(--font-ui); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); text-align: left; padding-bottom: 0.3rem; }
.t8-table th { font-family: var(--font-ui); font-size: 0.68rem; font-weight: 600; color: var(--ink-soft); text-align: left; padding: 0 0.35rem 0.2rem; white-space: nowrap; }
.t8-table td { padding: 0.08rem 0.35rem; border-top: 1px solid var(--rule); white-space: nowrap; }
.t8-table .t8-mark { width: 1rem; color: var(--accent); padding-right: 0; }
.t8-table .t8-addr small, .t8-table .t8-dec { color: var(--ink-soft); }
.t8-table .t8-bin { color: var(--ink-soft); letter-spacing: 0.04em; }
.t8-table .t8-dis { font-weight: 600; }
.t8-table tr.pc td { background: color-mix(in srgb, var(--signal) 28%, transparent); }
.t8-table tr.read td { box-shadow: inset 0 0 0 9999px color-mix(in srgb, #3b82c4 18%, transparent); }
.t8-table tr.write td { box-shadow: inset 0 0 0 9999px color-mix(in srgb, #d0452f 18%, transparent); }
.t8-hex {
  width: 2.6rem; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); color: var(--ink); padding: 0.05rem 0.3rem;
}
.t8-hex:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.t8-side { display: grid; gap: 0.7rem; }
.t8-regs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.t8-reg { background: var(--surface-2); border-radius: 8px; padding: 0.4rem 0.7rem; display: flex; flex-direction: column; }
.t8-name { font-size: 0.72rem; color: var(--ink-soft); font-weight: 600; letter-spacing: 0.08em; }
.t8-val { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.t8-val small { display: block; font-size: 0.68rem; font-weight: 400; color: var(--ink-soft); }
.t8-flags { grid-column: 1 / -1; display: flex; gap: 0.5rem; }
.t8-flags .flag { font-family: var(--font-mono); font-size: 0.85rem; padding: 0.1rem 0.6rem; }
.t8-out { background: var(--crt-bg); color: var(--signal); border-radius: 8px; padding: 0.5rem 0.9rem; display: flex; align-items: baseline; justify-content: space-between; box-shadow: inset 0 0 20px rgba(0,0,0,0.6); }
.t8-out-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.15em; color: var(--crt-dim); }
.t8-out-val { font-family: var(--font-mono); font-size: 2.2rem; font-weight: 600; text-shadow: 0 0 10px var(--signal-glow); }
.t8-next { font-size: 0.88rem; line-height: 1.45; }
.t8-log { font-size: 0.82rem; color: var(--ink-soft); }
.t8-log code { color: var(--ink); background: none; overflow-wrap: anywhere; white-space: normal; }
select.btn { font-family: var(--font-ui); }
.check input[type="range"] { width: 7rem; }

/* ---------- Static diagrams and reference tables ---------- */
.demo.diagram svg.circuit { display: block; margin: 0 auto; }
.isa-table { border-collapse: collapse; width: 100%; font-size: 0.92rem; margin: 1.2rem 0 1.6rem; font-family: var(--font-ui); }
.isa-table th, .isa-table td { text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.isa-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.isa-table td:first-child, .isa-table td:nth-child(2) { font-family: var(--font-mono); white-space: nowrap; }
.isa-table td:nth-child(2) { font-weight: 600; }
.table-scroll { overflow-x: auto; }
.mem-grid rect { fill: var(--surface-2); stroke: var(--wire-off); stroke-width: 1; }

/* ---------- Tiny-8 datapath (clock-tick view) ---------- */
.dp-val { fill: var(--ink); font-size: 13px; font-weight: 600; }
.dp-title { fill: var(--ink-soft); }
.dp-box.drive .block-box { stroke: #3b82c4; stroke-width: 3; fill: color-mix(in srgb, #3b82c4 12%, var(--surface)); }
.dp-box.load .block-box { stroke: var(--signal); stroke-width: 3; fill: color-mix(in srgb, var(--signal) 14%, var(--surface)); }
.dp-stub.drive { stroke: #3b82c4; }
.dp-stub.load { stroke: var(--signal); }
.dp-bus { stroke-width: 8; }
.dp-bus.active { stroke: #3b82c4; opacity: 0.9; }
.ram-cell { fill: var(--surface-2); stroke: var(--rule); stroke-width: 1; }
.ram-cell.mar { stroke: var(--accent); stroke-width: 2.5; fill: color-mix(in srgb, var(--signal) 22%, var(--surface)); }
.ram-val { fill: var(--ink); font-size: 10px; }
.sig-led { fill: var(--lamp-off); stroke: var(--ink-soft); stroke-width: 1.5; }
.sigrow.on .sig-led { fill: var(--signal); stroke: var(--signal); filter: drop-shadow(0 0 4px var(--signal-glow)); }
.sig-name { fill: var(--ink-soft); font-size: 11px; }
.sigrow.on .sig-name { fill: var(--ink); font-weight: 700; }
.micro-panel { width: 100%; display: grid; gap: 0.35rem; font-size: 0.92rem; }
.micro-phase { font-family: var(--font-mono); font-size: 0.88rem; }
.phase-tag { display: inline-block; font-weight: 700; letter-spacing: 0.1em; padding: 0.05rem 0.5rem; border-radius: 4px; margin-right: 0.4rem; color: #fff; }
.phase-tag.fetch { background: #3b82c4; }
.phase-tag.exec { background: var(--accent); }
.phase-tag.halted { background: var(--ink-soft); }
.sig-pill { display: inline-block; font-family: var(--font-mono); font-size: 0.78rem; background: var(--signal); color: var(--signal-ink); border-radius: 999px; padding: 0 0.5rem; margin: 0.1rem 0; }
.micro-out code { background: none; }
.micro-rom { width: 100%; margin-top: 0.4rem; }
.micro-rom summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; color: var(--accent); }
.rom-table { border-collapse: collapse; font-size: 0.75rem; margin-top: 0.5rem; width: 100%; }
.rom-table th, .rom-table td { border: 1px solid var(--rule); padding: 0.2rem 0.35rem; text-align: left; vertical-align: top; }
.rom-table thead th { font-size: 0.7rem; color: var(--ink-soft); }
.rom-table tbody th { font-family: var(--font-mono); white-space: nowrap; }
.rom-table td { font-family: var(--font-mono); min-width: 6rem; }
.rom-table td small { font-family: var(--font-ui); color: var(--ink-soft); }
.rom-table .rom-end { color: var(--ink-soft); }
.rom-table tr.current th { background: color-mix(in srgb, var(--signal) 18%, transparent); }
.rom-table td.current { background: var(--signal); color: var(--signal-ink); font-weight: 600; }

/* ---------- Register nesting ---------- */
.regnest { width: 100%; max-width: 36rem; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; font-family: var(--font-mono); }
.regnest-bytes { display: contents; }
.regnest-byte { text-align: center; font-size: 1.05rem; font-weight: 600; padding: 0.35rem 0; border-radius: 6px; background: var(--surface-2); border: 2px solid var(--rule); transition: background 0.2s; }
.regnest-byte.changed { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.regnest-layer { border: 2px solid var(--wire-off); border-top: none; border-radius: 0 0 8px 8px; padding: 0.15rem 0.4rem; font-size: 0.78rem; display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: baseline; justify-content: center; text-align: center; }
.regnest-name { font-weight: 700; }
.regnest-bits { color: var(--ink-soft); font-size: 0.7rem; }
.regnest-val { color: var(--accent); }
@media (max-width: 520px) { .regnest-bits { display: none; } .regnest-val { font-size: 0.68rem; } }

/* ---------- RISC-V encoder ---------- */
.rvenc { width: 100%; display: grid; gap: 0.7rem; }
.rvenc-inputs { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.rvenc-input { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.78rem; color: var(--ink-soft); }
.rvenc-input[hidden] { display: none; }
.rvenc-imm { width: 7rem; }
.rvenc-asm { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 600; text-align: center; min-height: 1.6em; }
.rvenc-format { text-align: center; font-size: 0.85rem; color: var(--ink-soft); }
.rvenc-fields { display: flex; gap: 2px; width: 100%; overflow-x: auto; }
.rv-field { display: flex; flex-direction: column; align-items: center; min-width: 0; border-radius: 4px; padding: 0.3rem 0.15rem; color: #1a1408; }
.rv-bits { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; overflow-wrap: anywhere; text-align: center; }
.rv-label { font-size: 0.65rem; text-align: center; }
.rvenc-hex { text-align: center; font-size: 0.88rem; }
.rvenc-legend, .x86b-legend { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; font-size: 0.72rem; }
.rvenc-legend span, .x86b-legend span { padding: 0.05rem 0.5rem; border-radius: 999px; color: #1a1408; }
.rv-opcode { background: #c9c2b2; }
.rv-funct { background: #c7b4e8; }
.rv-rd { background: #f5c26b; }
.rv-rs1 { background: #8fc1ec; }
.rv-rs2 { background: #9fdcb3; }
.rv-imm { background: #f2a196; }
@media (max-width: 600px) { .rv-bits { font-size: 0.62rem; letter-spacing: 0; } .rv-label { font-size: 0.55rem; } }

/* ---------- x86 byte explorer ---------- */
.x86b { width: 100%; display: grid; gap: 0.7rem; justify-items: center; }
.x86b-picker { max-width: 100%; font-family: var(--font-mono); }
.x86b-asm { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 600; text-align: center; }
.x86b-asm code { background: none; }
.x86b-asm span { font-family: var(--font-ui); font-size: 0.8rem; font-weight: 400; color: var(--ink-soft); margin-left: 0.4rem; }
.x86b-bytes { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.x86b-byte { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; border: 2px solid transparent; border-radius: 6px; padding: 0.3rem 0.5rem 0.2rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; color: #1a1408; min-width: 3rem; }
.x86b-byte small { font-family: var(--font-ui); font-size: 0.6rem; font-weight: 400; }
.x86b-byte.selected { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.x86b-detail { width: 100%; background: var(--surface-2); border-radius: 8px; padding: 0.7rem 0.9rem; font-size: 0.92rem; }
.x86b-detail p { margin: 0.4rem 0 0; }
.x86b-bits { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.x86b-bits span { display: flex; flex-direction: column; align-items: center; }
.x86b-bits code { font-size: 1rem; background: var(--surface); }
.x86b-bits small { font-size: 0.7rem; color: var(--ink-soft); }
.xb-prefix { background: #c7b4e8; }
.xb-rex { background: #f0a8c8; }
.xb-opcode { background: #f5c26b; }
.xb-modrm { background: #8fc1ec; }
.xb-sib { background: #8fd7d0; }
.xb-disp { background: #9fdcb3; }
.xb-imm { background: #f2a196; }

/* ---------- Address decoder ---------- */
.adec { width: 100%; display: grid; gap: 0.7rem; justify-items: center; }
.adec-addr, .adec-data { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }
.adec-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.adec-bits { display: grid; grid-template-columns: repeat(3, 2.6rem); gap: 4px; }
.adec-dec { font-family: var(--font-mono); }
.adec-table { border-collapse: collapse; font-size: 0.85rem; }
.adec-table th { font-size: 0.7rem; color: var(--ink-soft); text-align: left; padding: 0.2rem 0.5rem; font-weight: 600; }
.adec-table td { padding: 0.18rem 0.5rem; border-top: 1px solid var(--rule); font-family: var(--font-mono); white-space: nowrap; }
.adec-gate { font-size: 0.72rem; color: var(--ink-soft); }
.adec-not { text-decoration: overline; text-decoration-thickness: 1px; }
.adec-led { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--lamp-off); border: 1.5px solid var(--ink-soft); vertical-align: middle; }
.adec-table tr.selected td { background: color-mix(in srgb, var(--signal) 22%, transparent); }
.adec-table tr.selected .adec-led { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 6px var(--signal-glow); }
.adec-table tr.selected .adec-gate { color: var(--ink); font-weight: 600; }
.adec-bus { font-size: 1.2rem; font-weight: 700; background: var(--crt-bg); color: var(--signal); padding: 0.2rem 0.6rem; border-radius: 6px; }
.adec-write { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; justify-content: center; font-size: 0.88rem; }
.adec-in { width: 3.4rem; text-transform: uppercase; }
@media (max-width: 520px) { .adec-gate { font-size: 0.6rem; white-space: normal; } }

/* ---------- Address space ---------- */
.aspace { width: 100%; display: grid; gap: 0.8rem; }
.aspace-top { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.aspace-n { font-weight: 600; }
.aspace-size { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; color: var(--accent); }
.aspace input[type="range"] { width: 100%; accent-color: var(--accent); }
.aspace-count { font-size: 0.88rem; color: var(--ink-soft); text-align: center; overflow-wrap: anywhere; }
.aspace-count code { color: var(--ink); background: none; }

/* ---------- Endianness ---------- */
.endian { width: 100%; display: grid; gap: 0.8rem; }
.endian-in { text-align: center; font-size: 0.95rem; }
.endian-in input { width: 7rem; font-family: var(--font-mono); text-transform: uppercase; }
.endian-rows { display: grid; gap: 0.6rem; }
.endian-row { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; gap: 0.8rem; align-items: center; }
@media (max-width: 560px) { .endian-row { grid-template-columns: 1fr; } }
.endian-name small { display: block; font-size: 0.72rem; color: var(--ink-soft); }
.endian-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 4.2rem)); gap: 4px; }
.endian-cell { display: flex; flex-direction: column; align-items: center; background: var(--surface-2); border: 2px solid var(--rule); border-radius: 6px; padding: 0.2rem 0; }
.endian-cell small { font-size: 0.65rem; color: var(--ink-soft); }
.endian-cell code { font-size: 1.15rem; font-weight: 700; background: none; }
.endian-cell.first { border-color: var(--signal); }

/* ---------- Leaky DRAM ---------- */
.dram { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.dram-grid { display: grid; gap: 4px; }
.dram-row { display: grid; grid-template-columns: repeat(8, 1.6rem) 4.2rem; gap: 3px; align-items: center; padding: 2px 4px; border-radius: 6px; }
.dram-row.refreshing { background: color-mix(in srgb, #3b82c4 18%, transparent); }
.dram-cell { position: relative; height: 1.6rem; border: 1.5px solid var(--wire-off); border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.dram-fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--wire-off); }
.dram-cell.one .dram-fill { background: var(--signal); }
.dram-thresh { position: absolute; left: 0; right: 0; bottom: 50%; border-top: 1.5px dashed #d0452f; opacity: 0.8; }
.dram-read { font-family: var(--font-mono); font-size: 0.85rem; padding-left: 0.4rem; }
.dram-read code { background: none; font-weight: 600; }
.dram-text { font-family: var(--font-mono); font-size: 1.1rem; }
.dram-text strong { letter-spacing: 0.15em; color: var(--accent); }

/* ---------- DRAM rows ---------- */
.drows { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.drows-grid { display: grid; gap: 3px; }
.drows-row { display: grid; grid-template-columns: 3.4rem repeat(8, 2.1rem); gap: 3px; align-items: center; padding: 2px 4px; border-radius: 6px; }
.drows-row.open { background: color-mix(in srgb, var(--signal) 22%, transparent); }
.drows-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); }
.drows-cell { font-family: var(--font-mono); font-size: 0.75rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface-2); color: var(--ink); padding: 0.25rem 0; cursor: pointer; }
.drows-cell:hover { border-color: var(--accent); }
.drows-cell.last { background: #3b82c4; color: #fff; border-color: #3b82c4; }
.drows-buffer { font-size: 0.9rem; }
.drows-stats { font-size: 0.88rem; text-align: center; }
@media (max-width: 480px) { .drows-row { grid-template-columns: 2.6rem repeat(8, 1.7rem); } }

/* ---------- Memory map ---------- */
.memmap-seg { stroke: var(--surface); stroke-width: 2; }
.mm-ram { fill: color-mix(in srgb, var(--signal) 55%, var(--surface)); }
.mm-video { fill: #8fc1ec; }
.mm-rom { fill: #c7b4e8; }
.mm-bios { fill: #f2a196; }
.mm-label { fill: #1a1408; font-size: 12px; font-weight: 600; }
.mm-addr { fill: var(--ink-soft); font-size: 10px; }

/* ---------- Latency ladder ---------- */
.ladder { width: 100%; display: grid; gap: 0.4rem; }
.ladder-row { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr minmax(7rem, 11rem); gap: 0.6rem; align-items: center; font-size: 0.88rem; }
.ladder-track { background: var(--surface-2); border-radius: 4px; height: 14px; overflow: hidden; }
.ladder-bar { height: 100%; background: var(--signal); border-radius: 4px; }
.ladder-time { font-family: var(--font-mono); font-size: 0.85rem; text-align: right; }
.ladder-time small { display: block; color: var(--ink-soft); font-size: 0.7rem; }
@media (max-width: 560px) { .ladder-row { grid-template-columns: 1fr auto; } .ladder-track { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Cache simulator ---------- */
.csim { width: 100%; display: grid; gap: 0.7rem; }
.csim-addr { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center; justify-content: center; font-size: 0.92rem; }
.csim-bits { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.08em; }
.csim-bits span { padding: 0.05rem 0.2rem; border-radius: 3px; }
.csim-parts { font-size: 0.82rem; display: flex; gap: 0.3rem; flex-wrap: wrap; }
.csim-parts span { padding: 0.05rem 0.45rem; border-radius: 999px; }
.cb-tag { background: #f2a196; color: #1a1408; }
.cb-index { background: #8fc1ec; color: #1a1408; }
.cb-off { background: #c9c2b2; color: #1a1408; }
.csim-mem-label { font-size: 0.72rem; color: var(--ink-soft); text-align: center; margin-bottom: 0.2rem; }
.csim-mem-row { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px; }
.csim-line { font-family: var(--font-mono); font-size: 0.68rem; text-align: center; padding: 0.3rem 0; border-radius: 3px; background: var(--surface-2); border: 1.5px solid var(--rule); color: var(--ink-soft); }
.csim-line.cached { background: color-mix(in srgb, var(--signal) 30%, var(--surface)); color: var(--ink); }
.csim-line.hit { border-color: #2f9e5b; border-width: 2.5px; }
.csim-line.miss { border-color: #d0452f; border-width: 2.5px; }
.csim-table { border-collapse: collapse; margin: 0 auto; font-family: var(--font-mono); font-size: 0.85rem; }
.csim-table th { font-family: var(--font-ui); font-size: 0.7rem; color: var(--ink-soft); padding: 0.15rem 0.6rem; font-weight: 600; }
.csim-table td { padding: 0.15rem 0.6rem; border-top: 1px solid var(--rule); text-align: center; }
.csim-table tr.hit td { background: color-mix(in srgb, #2f9e5b 25%, transparent); }
.csim-table tr.miss td { background: color-mix(in srgb, #d0452f 22%, transparent); }
.csim-empty { color: var(--ink-soft); font-style: italic; font-size: 0.8em; }
.csim-stats { text-align: center; font-size: 0.88rem; }
.csim-stats .h, .mwalk-count .h { color: #2f9e5b; }
.csim-stats .m, .mwalk-count .m { color: #d0452f; }
.csim-log { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; min-height: 1.4rem; }
.csim-chip { font-family: var(--font-mono); font-size: 0.7rem; padding: 0.05rem 0.35rem; border-radius: 4px; color: #fff; }
.csim-chip.h { background: #2f9e5b; }
.csim-chip.m { background: #d0452f; }
.check .csim-in { width: 4.5rem; height: auto; }

/* ---------- Matrix walk ---------- */
.mwalk { width: 100%; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; justify-content: center; align-items: flex-start; }
.mwalk-grid { display: grid; grid-template-columns: repeat(8, 2.3rem); gap: 3px; }
.mwalk-cell { font-family: var(--font-mono); font-size: 0.62rem; text-align: center; padding: 0.55rem 0; border-radius: 4px; background: var(--surface-2); color: var(--ink-soft); border: 2px solid transparent; }
.mwalk-cell.cached { border-color: color-mix(in srgb, var(--signal) 70%, transparent); }
.mwalk-cell.hit { background: color-mix(in srgb, #2f9e5b 45%, var(--surface)); color: var(--ink); }
.mwalk-cell.miss { background: color-mix(in srgb, #d0452f 45%, var(--surface)); color: var(--ink); }
.mwalk-cell.current { outline: 3px solid var(--ink); outline-offset: 1px; }
.mwalk-side { display: grid; gap: 0.6rem; min-width: 12rem; font-size: 0.88rem; }
.mwalk-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 0.2rem; }
.mwalk-cache { display: grid; gap: 3px; }
.mwalk-slot { font-family: var(--font-mono); background: color-mix(in srgb, var(--signal) 22%, var(--surface)); border-radius: 4px; padding: 0.2rem 0.5rem; }
.mwalk-results { margin: 0; padding-left: 1.1rem; }
@media (max-width: 480px) { .mwalk-grid { grid-template-columns: repeat(8, 1.9rem); } }

/* ---------- Page translation ---------- */
.ptr { width: 100%; display: grid; gap: 0.7rem; }
.ptr-top { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; justify-content: center; align-items: center; }
.ptr-in { font-family: var(--font-mono); font-size: 0.95rem; }
.ptr-in input { width: 5rem; text-transform: uppercase; font-family: var(--font-mono); }
.ptr-in input.pwalk-in { width: 10rem; }
.ptr-split { text-align: center; font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; }
.ptr-split > span { padding: 0.05rem 0.25rem; border-radius: 4px; }
.ptr-legend { display: block; font-size: 0.78rem; font-weight: 400; margin-top: 0.2rem; }
.ptr-legend span { padding: 0.05rem 0.45rem; border-radius: 999px; }
.ptr-vpn { background: #f5c26b; color: #1a1408; }
.ptr-off { background: #c9c2b2; color: #1a1408; }
.ptr-cols { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .ptr-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.ptr-table { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
.ptr-table caption { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); text-align: left; padding-bottom: 0.2rem; }
.ptr-table th { font-size: 0.68rem; color: var(--ink-soft); font-weight: 600; text-align: left; padding: 0.15rem 0.4rem; }
.ptr-table td { padding: 0.18rem 0.4rem; border-top: 1px solid var(--rule); font-family: var(--font-mono); }
.ptr-table .ptr-note { font-family: var(--font-ui); color: var(--ink-soft); font-size: 0.78rem; }
.ptr-table tr.ptr-gap td { font-family: var(--font-ui); font-size: 0.75rem; color: var(--ink-soft); font-style: italic; }
.ptr-table tr.sel td { background: color-mix(in srgb, var(--signal) 28%, transparent); color: var(--ink); }
.ptr-phys-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 0.2rem; }
.ptr-frames { display: grid; gap: 3px; }
.ptr-frame { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: 0.4rem; align-items: center; font-size: 0.8rem; padding: 0.2rem 0.5rem; border-radius: 4px; border: 2px solid transparent; color: #1a1408; }
.ptr-frame small { font-family: var(--font-mono); font-size: 0.68rem; opacity: 0.75; }
.ptr-fnum { font-family: var(--font-mono); font-weight: 700; }
.ptr-frame.own-os { background: #c9c2b2; }
.ptr-frame.own-a { background: #f5c26b; }
.ptr-frame.own-b { background: #8fc1ec; }
.ptr-frame.own-shared { background: #9fdcb3; }
.ptr-frame.sel { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.ptr-result { background: var(--surface-2); border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.92rem; }
.ptr-result .good { color: #2f9e5b; }
.ptr-result .warn { color: var(--accent); }
.ptr-result .bad { color: #d0452f; }

/* ---------- Page walk ---------- */
.pwalk { width: 100%; display: grid; gap: 0.7rem; justify-items: center; }
.pwalk-bits { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.pw-part { display: flex; flex-direction: column; align-items: center; border-radius: 6px; padding: 0.25rem 0.4rem; color: #1a1408; }
.pw-part code { background: none; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; }
.pw-part small { font-size: 0.68rem; }
.pw-0 { background: #f2a196; }
.pw-1 { background: #f5c26b; }
.pw-2 { background: #9fdcb3; }
.pw-3 { background: #8fc1ec; }
.pw-4 { background: #c9c2b2; }
.pwalk-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; width: 100%; max-width: 34rem; counter-reset: none; }
.pwalk-chain li { border-radius: 6px; padding: 0.3rem 0.7rem; font-size: 0.86rem; color: #1a1408; position: relative; }
.pwalk-chain li.pw-root { background: var(--surface-2); color: var(--ink); }
.pwalk-chain li + li::before { content: '↓'; position: absolute; left: -1.1rem; top: -0.55rem; color: var(--ink-soft); }

/* ---------- Page faults ---------- */
.pfs { width: 100%; display: grid; gap: 0.7rem; }
.pfs-refs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; }
.pfs-label { font-size: 0.82rem; color: var(--ink-soft); margin-right: 0.3rem; }
.pfs-ref { font-family: var(--font-mono); font-size: 0.85rem; padding: 0.1rem 0.45rem; border-radius: 4px; background: var(--surface-2); border: 1.5px solid var(--rule); }
.pfs-ref.done { opacity: 0.55; }
.pfs-ref.cur { opacity: 1; border-color: var(--ink); background: var(--signal); color: var(--signal-ink); }
.pfs-cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.pfs-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 0.25rem; }
.pfs-frame { font-family: var(--font-mono); font-size: 0.88rem; padding: 0.25rem 0.6rem; border-radius: 4px; background: var(--surface-2); margin-bottom: 3px; border: 2px solid transparent; }
.pfs-frame.hit { border-color: #2f9e5b; background: color-mix(in srgb, #2f9e5b 20%, var(--surface)); }
.pfs-frame.miss { border-color: #d0452f; background: color-mix(in srgb, #d0452f 18%, var(--surface)); }
.pfs-diskpages { display: flex; flex-wrap: wrap; gap: 4px; }
.pfs-dpage { font-family: var(--font-mono); font-size: 0.82rem; padding: 0.15rem 0.5rem; border-radius: 4px; background: #c9c2b2; color: #1a1408; }
.pfs-stats { text-align: center; font-size: 0.9rem; }
.pfs-stats .m { color: #d0452f; }

/* ---------- I/O address spaces ---------- */
.iosp { width: 100%; display: grid; gap: 0.7rem; justify-items: center; }
.iosp-instrs { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.iosp-instrs .btn { font-size: 0.8rem; white-space: pre; }
.iosp-instrs .btn.sel { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.iosp-bus { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; justify-content: center; font-size: 0.9rem; background: var(--surface-2); border-radius: 8px; padding: 0.4rem 0.9rem; }
.iosp-spaces { width: 100%; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.iosp-space { border: 2px dashed var(--rule); border-radius: 10px; padding: 0.6rem; display: grid; gap: 4px; align-content: start; opacity: 0.6; transition: opacity 0.2s; }
.iosp-space.active { opacity: 1; border-style: solid; border-color: var(--accent); }
.iosp-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 0.2rem; }
.iosp-title small { text-transform: none; letter-spacing: 0; display: block; font-family: var(--font-mono); }
.iosp-region { display: flex; justify-content: space-between; gap: 0.6rem; align-items: center; font-size: 0.85rem; padding: 0.3rem 0.6rem; border-radius: 6px; background: var(--surface-2); border: 2px solid transparent; }
.iosp-region code { font-size: 0.75rem; background: none; color: var(--ink-soft); white-space: nowrap; }
.iosp-region.sel { background: var(--signal); color: var(--signal-ink); border-color: var(--ink); font-weight: 600; }
.iosp-region.sel code { color: var(--signal-ink); }

/* ---------- Scan codes ---------- */
.scan { width: 100%; display: grid; gap: 0.7rem; justify-items: center; }
.scan-pad { width: 100%; max-width: 30rem; text-align: center; padding: 1rem; border: 2px dashed var(--rule); border-radius: 10px; color: var(--ink-soft); cursor: text; font-size: 0.95rem; }
.scan-pad:focus { border-style: solid; border-color: var(--accent); color: var(--ink); outline: none; background: color-mix(in srgb, var(--signal) 8%, var(--surface)); }
.scan-keys { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.scan-key { touch-action: none; user-select: none; -webkit-user-select: none; min-width: 3rem; }
.scan-key.down { background: var(--signal); color: var(--signal-ink); transform: translateY(1px); }
.scan-port { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: center; justify-content: center; }
.scan-hex { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; background: var(--crt-bg); color: var(--signal); border-radius: 8px; padding: 0.2rem 0.9rem; text-align: center; min-width: 7rem; text-shadow: 0 0 10px var(--signal-glow); }
.scan-hex small { display: block; font-size: 0.65rem; font-weight: 400; color: var(--crt-dim); letter-spacing: 0.12em; text-shadow: none; }
.scan-bits { display: grid; grid-template-columns: repeat(8, 2.3rem); gap: 3px; }
.scan-bits span { display: flex; flex-direction: column; align-items: center; font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; background: var(--surface-2); border: 2px solid var(--rule); border-radius: 6px; padding: 0.15rem 0; }
.scan-bits span.on { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.scan-bits span.b7 { border-color: #d0452f; }
.scan-bits small { font-family: var(--font-ui); font-size: 0.55rem; font-weight: 400; text-align: center; line-height: 1.1; }
.scan-log { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-height: 9rem; overflow-y: auto; width: 100%; }
.scan-chip { display: flex; flex-direction: column; align-items: center; border-radius: 5px; padding: 0.15rem 0.45rem; font-size: 0.68rem; color: #1a1408; }
.scan-chip code { background: none; font-size: 0.9rem; font-weight: 700; }
.scan-chip.make { background: #9fdcb3; }
.scan-chip.break { background: #f2a196; }
.scan-chip.ext { background: #c7b4e8; }
@media (max-width: 480px) { .scan-bits { grid-template-columns: repeat(8, 1.9rem); } }

/* ---------- Serial port polling ---------- */
.uart { width: 100%; display: grid; gap: 0.8rem; }
.uart-cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.uart-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 0.3rem; }
.uart-prog { margin: 0; padding-left: 1.6rem; font-family: var(--font-mono); font-size: 0.82rem; }
.uart-prog li { padding: 0.1rem 0.4rem; border-radius: 4px; }
.uart-prog li.cur { background: var(--signal); color: var(--signal-ink); }
.uart-prog li.uart-halt { color: var(--ink-soft); }
.uart-prog li.uart-halt.cur { color: var(--signal-ink); }
.uart-dev { display: grid; gap: 0.5rem; align-content: start; }
.uart-regs { display: grid; gap: 4px; }
.uart-reg { background: var(--surface-2); border-radius: 6px; padding: 0.3rem 0.6rem; display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.uart-reg small { font-size: 0.72rem; color: var(--ink-soft); }
.uart-reg strong { font-family: var(--font-mono); font-size: 0.95rem; white-space: nowrap; }
.uart-reg .ok { color: #2f9e5b; }
.uart-reg .busy { color: #d0452f; }
.uart-wire small { font-size: 0.72rem; color: var(--ink-soft); }
.uart-bits { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; margin-top: 0.2rem; }
.uart-bits span { font-family: var(--font-mono); font-size: 0.8rem; text-align: center; border-radius: 3px; background: var(--surface-2); padding: 0.1rem 0; }
.uart-bits span.sent { opacity: 0.35; }
.uart-bits span.now { background: var(--signal); color: var(--signal-ink); font-weight: 700; }
.uart-term { background: var(--crt-bg); color: var(--crt-ink); font-family: var(--font-mono); border-radius: 8px; padding: 0.5rem 0.9rem; min-height: 3.6rem; box-shadow: inset 0 0 20px rgba(0,0,0,0.6); }
.uart-term-label { display: block; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crt-dim); }
.uart-text { font-size: 1.3rem; white-space: pre; }
.uart-text::after { content: '▌'; animation: clock-blink 1s step-end infinite; }
.uart-stats { text-align: center; font-size: 0.88rem; }
.uart-stats .m { color: #d0452f; }
@media (prefers-reduced-motion: reduce) { .uart-text::after { animation: none; } }

/* ---------- Interrupt simulator ---------- */
.irq { width: 100%; display: grid; gap: 0.8rem; }
.irq-progs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.irq-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 0.25rem; }
.irq-code { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.irq-code li { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; padding: 0.12rem 0.5rem; border-radius: 4px; background: var(--surface-2); }
.irq-code code { background: none; font-size: 0.82rem; white-space: pre; }
.irq-code small { font-size: 0.7rem; color: var(--ink-soft); text-align: right; }
.irq-code li.cur { background: var(--signal); color: var(--signal-ink); }
.irq-code li.cur small { color: var(--signal-ink); }
.irq-code li.gone { opacity: 0.3; text-decoration: line-through; }
.irq-state { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.irq-box { background: var(--surface-2); border-radius: 6px; padding: 0.3rem 0.6rem; display: flex; flex-direction: column; border: 2px solid transparent; }
.irq-box small { font-size: 0.68rem; color: var(--ink-soft); }
.irq-box strong { font-family: var(--font-mono); font-size: 1.05rem; display: flex; align-items: center; gap: 0.4rem; }
.irq-box strong span { font-size: 0.75rem; font-weight: 400; color: var(--ink-soft); }
.irq-box.bad { border-color: #d0452f; }
.irq-led { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--lamp-off); border: 1.5px solid var(--ink-soft); flex: none; }
.irq-led.on { background: #d0452f; border-color: #d0452f; box-shadow: 0 0 8px rgba(208, 69, 47, 0.7); }
.irq-stack { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 0.8rem; }
.irq-stack .irq-title { margin: 0 0.3rem 0 0; }
.irq-slot { font-family: var(--font-mono); background: #c7b4e8; color: #1a1408; border-radius: 4px; padding: 0.1rem 0.5rem; }
.irq-keybtn { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); font-weight: 600; }

/* ---------- Interrupt controller ---------- */
.pic { width: 100%; display: grid; gap: 0.7rem; }
.pic-table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.pic-table th { font-size: 0.68rem; color: var(--ink-soft); font-weight: 600; text-align: left; padding: 0.15rem 0.4rem; }
.pic-table td { padding: 0.15rem 0.4rem; border-top: 1px solid var(--rule); white-space: nowrap; }
.pic-table td:first-child { font-family: var(--font-mono); font-weight: 700; }
.pic-table .btn { min-height: 28px; padding: 0.1rem 0.5rem; font-size: 0.75rem; min-width: 5rem; }
.pic-raise.on { background: #d0452f; border-color: #d0452f; color: #fff; }
.pic-mask.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pic-table tr.cand td { background: color-mix(in srgb, #d0452f 14%, transparent); }
.pic-table tr.svc td { background: color-mix(in srgb, var(--signal) 28%, transparent); }
.pic-regs { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; justify-content: center; }
.pic-regs div { display: flex; flex-direction: column; align-items: center; }
.pic-regs small { font-size: 0.68rem; color: var(--ink-soft); }
.pic-regs code { background: none; display: flex; gap: 2px; }
.pic-regs code span { width: 1.3rem; text-align: center; border-radius: 3px; background: var(--surface-2); font-weight: 600; }
.pic-regs code span.on { background: var(--signal); color: var(--signal-ink); }
.pic-out { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.92rem; }

/* ---------- Time slices ---------- */
.ts { width: 100%; display: grid; gap: 0.7rem; justify-items: center; }
.ts .seg button { white-space: normal; }
.ts-line { width: 100%; display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); gap: 1px; height: 2rem; }
.ts-line span { border-radius: 2px; position: relative; }
.ts-a { background: #9fdcb3; }
.ts-b { background: #f2a196; }
.ts-c { background: #8fc1ec; }
.ts-os { background: var(--ink-soft); }
.ts-empty { background: var(--surface-2); }
.ts-line .ts-tickmark::after { content: ''; position: absolute; left: 50%; top: -0.45rem; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #d0452f; transform: translateX(-50%); }
.ts-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; justify-content: center; font-size: 0.75rem; }
.ts-legend span { padding: 0 0.4rem; border-radius: 3px; color: #1a1408; }
.ts-legend .ts-os { color: var(--bg); }
.ts-legend .ts-tick { color: #d0452f; }
.ts-legend .ts-tick::before { content: '▼ '; }
.ts-progs { width: 100%; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.ts-prog { border: 2px solid var(--rule); border-radius: 8px; padding: 0.4rem 0.7rem; display: flex; flex-direction: column; font-size: 0.85rem; border-left-width: 8px; }
.ts-prog small { color: var(--ink-soft); font-size: 0.72rem; }
.ts-prog .ok { color: #2f9e5b; font-weight: 600; }
.ts-prog .bad { color: #d0452f; font-weight: 600; }
.ts-a-b { border-left-color: #9fdcb3; }
.ts-b-b { border-left-color: #f2a196; }
.ts-c-b { border-left-color: #8fc1ec; }
.ts-prog.running { border-color: var(--ink); border-left-color: var(--ink); }
.ts-stats { font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- DMA race ---------- */
.dma { width: 100%; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.dma-lane { border: 1px solid var(--rule); border-radius: 10px; padding: 0.6rem; display: grid; gap: 0.5rem; align-content: start; }
.dma-head small { display: block; font-size: 0.75rem; color: var(--ink-soft); }
.dma-mem { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.dma-mem span { font-family: var(--font-mono); font-size: 0.8rem; text-align: center; height: 1.5rem; line-height: 1.5rem; border-radius: 3px; background: var(--surface-2); }
.dma-mem span.full { background: var(--signal); color: var(--signal-ink); font-weight: 600; }
.dma-cpu { font-size: 0.85rem; }
.dma-cpu .busy { color: #d0452f; }
.dma-cpu .free { color: #2f9e5b; }
.dma-strip { display: flex; flex-wrap: wrap; gap: 1px; min-height: 0.6rem; }
.dma-strip span { width: 4px; height: 0.6rem; border-radius: 1px; }
.dma-copy { background: #d0452f; }
.dma-own { background: #2f9e5b; }
.dma-stats { font-size: 0.85rem; }
.dma-legend { display: flex; gap: 1rem; justify-content: center; font-size: 0.75rem; }
.dma-legend span { padding: 0 0.4rem; border-radius: 3px; color: #fff; }

/* ---------- Descriptor ring ---------- */
.ring { width: 100%; display: grid; gap: 0.8rem; }
.ring-top { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; justify-content: center; align-items: center; }
.ring-top input[type="range"] { width: 7rem; accent-color: var(--accent); }
.ring-rate { font-family: var(--font-mono); font-size: 0.82rem; min-width: 6.5rem; }
.ring-main { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center; align-items: center; }
.ring-circle { position: relative; width: 14rem; height: 14rem; flex: none; }
.ring-slot { position: absolute; transform: translate(-50%, -50%); width: 3.2rem; height: 3.2rem; border-radius: 8px; background: var(--surface-2); border: 3px solid var(--rule); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; }
.ring-slot small { font-size: 0.6rem; font-weight: 400; color: var(--ink-soft); }
.ring-slot.full { background: #9fdcb3; color: #1a1408; }
.ring-slot.full small { color: #1a1408; }
.ring-slot.head { border-color: #3b82c4; }
.ring-slot.tail { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--signal); }
.ring-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 0.8rem; color: var(--ink-soft); }
.ring-center.drop { color: #d0452f; font-weight: 700; }
.ring-side { display: grid; gap: 0.6rem; font-size: 0.88rem; }
.ring-key { display: flex; flex-direction: column; gap: 3px; font-size: 0.75rem; }
.ring-key span::before { content: ''; display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; margin-right: 0.4rem; vertical-align: -0.1rem; }
.k-head::before { border: 3px solid #3b82c4; }
.k-tail::before { border: 3px solid var(--signal); }
.k-full::before { background: #9fdcb3; }
.ring-stats .m { color: #d0452f; }
.ring-strip-wrap small { font-size: 0.72rem; color: var(--ink-soft); }
.ring-strip-wrap small span { padding: 0 0.35rem; border-radius: 3px; color: #1a1408; }
.ring-strip { display: grid; grid-template-columns: repeat(40, minmax(0, 1fr)); gap: 1px; height: 0.9rem; margin-top: 0.2rem; }
.ring-strip span { border-radius: 1px; }
.k-ovh { background: #f2a196; }
.k-work { background: #9fdcb3; }
.k-idle { background: var(--surface-2); }
.ring-strip-wrap small .k-idle { color: var(--ink); }
.k-none { background: transparent; }

/* ---------- PCIe bandwidth ---------- */
.pcie { width: 100%; display: grid; gap: 0.7rem; justify-items: center; }
.pcie-pick { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: center; font-size: 0.85rem; color: var(--ink-soft); }
.pcie-pick span { min-width: 5.5rem; text-align: right; }
.pcie-lanepic { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; max-width: 100%; }
.pcie-lanepic span { display: flex; flex-direction: column; gap: 2px; }
.pcie-lanepic i { display: block; width: 1.1rem; height: 4px; border-radius: 2px; background: var(--signal); }
.pcie-lanepic i + i { background: #3b82c4; }
.pcie-result { text-align: center; }
.pcie-big { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 700; color: var(--accent); }
.pcie-big small { display: block; font-family: var(--font-ui); font-size: 0.75rem; font-weight: 400; color: var(--ink-soft); }
.pcie-math { font-size: 0.8rem; color: var(--ink-soft); }
.pcie-math strong { color: var(--ink); }
.pcie-needs { width: 100%; display: grid; gap: 4px; }
.pcie-scale { display: flex; justify-content: space-between; font-size: 0.65rem; color: var(--ink-soft); margin-left: calc(min(40%, 15rem) + 0.5rem); margin-right: 5.5rem; }
.pcie-need { display: grid; grid-template-columns: min(40%, 15rem) 1fr 5rem; gap: 0.5rem; align-items: center; font-size: 0.8rem; }
.pcie-track { position: relative; height: 12px; background: var(--surface-2); border-radius: 3px; }
.pcie-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #f2a196; }
.pcie-need.ok .pcie-bar { background: #9fdcb3; }
.pcie-mark { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; background: var(--ink); }
.pcie-need-val { font-family: var(--font-mono); font-size: 0.72rem; text-align: right; white-space: nowrap; }
@media (max-width: 520px) { .pcie-scale { display: none; } .pcie-need { grid-template-columns: 1fr 4.5rem; } .pcie-track { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Disk platter ---------- */
.disk { width: 100%; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; justify-content: center; align-items: flex-start; }
svg.circuit.disk-svg { flex: 0 1 330px; max-width: 330px; }
.disk-sector { fill: var(--surface-2); stroke: none; }
.disk-sector.want { fill: var(--signal); }
.disk-sector.cur { fill: #d0452f; }
.disk-sector.got { fill: #9fdcb3; }
.disk-slabel { fill: var(--ink-soft); font-size: 9px; }
.disk-hub { fill: var(--wire-off); }
.disk-armline { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.disk-head { fill: var(--ink); }
.disk-side { flex: 1 1 15rem; display: grid; gap: 0.5rem; font-size: 0.85rem; }
.disk-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.disk-title small { text-transform: none; letter-spacing: 0; }
.disk-queue { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.disk-queue li { display: grid; grid-template-columns: auto 1fr; gap: 0 0.5rem; padding: 0.2rem 0.5rem; border-radius: 5px; background: var(--surface-2); font-family: var(--font-mono); font-size: 0.78rem; }
.disk-queue li small { color: var(--ink-soft); }
.disk-queue li span { grid-column: 1 / -1; font-family: var(--font-ui); font-size: 0.72rem; color: var(--ink-soft); }
.disk-queue li.wait { border-left: 4px solid var(--signal); }
.disk-queue li.cur { border-left: 4px solid #d0452f; background: color-mix(in srgb, #d0452f 14%, var(--surface)); }
.disk-queue li.done { border-left: 4px solid #9fdcb3; }
.disk-total { color: var(--accent); font-size: 1.05rem; }

/* ---------- Flash cell ---------- */
.fcell { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.fcell .seg { flex-wrap: wrap; }
.fcell-axis { width: 100%; position: relative; }
.fcell-bands { display: flex; height: 2.4rem; border-radius: 6px; overflow: hidden; border: 1px solid var(--rule); }
.fcell-band { border: 0; border-right: 1px solid var(--rule); background: var(--surface-2); color: var(--ink); font-family: var(--font-mono); font-size: 0.78rem; cursor: pointer; padding: 0; min-width: 0; overflow: hidden; }
.fcell-band:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.fcell-band small { font-size: 0.5rem; writing-mode: vertical-rl; }
.fcell-band.sel { background: var(--signal); color: var(--signal-ink); font-weight: 700; }
.fcell-band:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.fcell-dots { position: relative; height: 2.6rem; margin-top: 4px; }
.fcell-dots span { position: absolute; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #2f9e5b; }
.fcell-dots span.bad { background: #d0452f; width: 8px; height: 8px; margin-left: -4px; }
.fcell-scale { width: 100%; display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--ink-soft); }
.fcell input[type="range"] { width: 9rem; }
.fcell-info { font-size: 0.88rem; text-align: center; max-width: 36rem; }
.fcell-info .m { color: #d0452f; }
.fcell-info .ok { color: #2f9e5b; }

/* ---------- Flash translation layer ---------- */
.ftl { width: 100%; display: grid; gap: 0.5rem; }
.ftl-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.ftl-blocks { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.ftl-block { border: 2px solid var(--rule); border-radius: 8px; padding: 0.35rem; display: grid; gap: 0.25rem; }
.ftl-block.open { border-color: #3b82c4; }
.ftl-block > small { font-size: 0.68rem; color: var(--ink-soft); text-align: center; }
.ftl-pages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.ftl-page { display: flex; flex-direction: column; align-items: center; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; padding: 0.15rem 0; border-radius: 4px; min-height: 2.3rem; border: 2px solid transparent; }
.ftl-page small { font-size: 0.55rem; font-weight: 400; opacity: 0.8; }
.ftl-page.free, .k-free { background: var(--surface-2); color: var(--ink-soft); }
.ftl-page.valid, .k-valid { background: #9fdcb3; color: #1a1408; }
.ftl-page.stale, .k-stale { background: #c9c2b2; color: #1a1408; text-decoration: line-through; opacity: 0.75; }
.ftl-page.new { border-color: var(--ink); }
.ftl-key { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; font-size: 0.72rem; }
.ftl-key span { padding: 0 0.4rem; border-radius: 3px; }
.ftl-key .k-new { border: 2px solid var(--ink); }
.ftl-map { display: flex; flex-wrap: wrap; gap: 3px; }
.ftl-map span { font-family: var(--font-mono); font-size: 0.75rem; background: var(--surface-2); border-radius: 4px; padding: 0.1rem 0.4rem; }
.ftl-map b { margin-right: 0.3rem; }
.ftl-stats { font-size: 0.85rem; }
.ftl-writes { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; width: 100%; margin-top: 0.6rem; font-size: 0.85rem; }
.ftl-writes span { margin-right: 0.3rem; }
.ftl-writes .btn { min-width: 2.2rem; padding: 0.3rem 0.5rem; }
.ftl-controls { margin-top: 0.5rem; }