/* ============================================================
   KytyPS5 Learning Platform — the one stylesheet.
   Covers the app shell AND all ported content markup, so a
   chapter moved out of the old book looks native here.
   ============================================================ */

/* ---------- tokens ---------- */

:root {
  --bg: #fcfbf9;
  --surface: #ffffff;
  --surface-2: #f2f0ec;
  --line: #e0dcd4;
  --line-2: #bdb6ab;
  --ink: #14120f;
  --ink-2: #3f3b35;
  --ink-3: #6b645c;
  /* running prose — deliberately close to --ink so long reads stay comfortable */
  --prose: #26231e;

  --guest: #2b5c96;
  --kyty: #9a6b06;
  --host: #9c3352;
  --accent: #2b5c96;
  --accent-ink: #ffffff;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;

  --side-w: 280px;
  --shadow: 0 1px 2px rgba(28,26,23,.05), 0 8px 24px rgba(28,26,23,.06);
  --shadow-lg: 0 2px 8px rgba(28,26,23,.08), 0 24px 64px rgba(28,26,23,.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a; --surface: #1b1e24; --surface-2: #23272f;
    --line: #333944; --line-2: #4d5563;
    --ink: #f2f0ec; --ink-2: #c6c0b8; --ink-3: #948d84;
    --prose: #e0dbd4;
    --guest: #63a0da; --kyty: #d09b2f; --host: #dc6f8b;
    --accent: #63a0da; --accent-ink: #0d1016;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
    --shadow-lg: 0 2px 8px rgba(0,0,0,.5), 0 24px 64px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  --bg: #14161a; --surface: #1b1e24; --surface-2: #23272f;
  --line: #333944; --line-2: #4d5563;
  --ink: #f2f0ec; --ink-2: #c6c0b8; --ink-3: #948d84;
  --prose: #e0dbd4;
  --guest: #63a0da; --kyty: #d09b2f; --host: #dc6f8b;
  --accent: #63a0da; --accent-ink: #0d1016;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --shadow-lg: 0 2px 8px rgba(0,0,0,.5), 0 24px 64px rgba(0,0,0,.55);
}
:root[data-theme="light"] {
  --bg: #fcfbf9; --surface: #ffffff; --surface-2: #f2f0ec;
  --line: #e0dcd4; --line-2: #bdb6ab;
  --ink: #14120f; --ink-2: #3f3b35; --ink-3: #6b645c;
  --prose: #26231e;
  --guest: #2b5c96; --kyty: #9a6b06; --host: #9c3352;
  --accent: #2b5c96; --accent-ink: #ffffff;
}

/* ---------- aliases so content ported from the old book renders natively ---------- */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --ground: var(--bg);
  --surface-3: var(--surface-2);
  --muted: var(--ink-2);
  --faint: var(--ink-3);
  --rule: var(--line);
  --rule-2: var(--line-2);

  /* the --p-* names used by home.css / playground.css / examples.css */
  --p-bg: var(--bg);
  --p-surface: var(--surface);
  --p-surface-2: var(--surface-2);
  --p-line: var(--line);
  --p-line-strong: var(--line-2);
  --p-ink: var(--ink);
  --p-ink-2: var(--ink-2);
  --p-ink-3: var(--ink-3);
  --c-guest: var(--guest);
  --c-kyty: var(--kyty);
  --c-host: var(--host);
  --p-accent: var(--accent);
  --p-accent-ink: var(--accent-ink);
  --p-mono: var(--mono);
  --p-serif: var(--serif);
  --p-sans: var(--sans);
  --p-radius: 10px;
  --p-shadow: var(--shadow);
  --p-shadow-lg: var(--shadow-lg);
  --p-nav-h: 0px;

  /* the book's spacing scale — its figure markup is built on these */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

/* ============================================================
   SHELL
   ============================================================ */

.app { display: flex; min-height: 100vh; }

/* ---------- sidebar ---------- */

.side {
  width: var(--side-w);
  flex: none;
  position: fixed;
  inset: 0 auto 0 0;
  border-right: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  z-index: 60;
}

.side-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.icon-btn.side-close { width: 32px; height: 32px; padding: 0; }
.side-close svg { display: block; width: 16px; height: 16px; flex: none; }

.side-top {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.side-brand {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink);
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: -.01em;
}
.side-brand[aria-current="page"] { color: var(--accent); }
.side-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--guest), var(--kyty) 55%, var(--host));
  flex: none;
}
.side-sub {
  font-size: 11px; color: var(--ink-3); margin: 3px 0 0 19px;
}

.side-search {
  width: 100%;
  margin-top: 12px;
  font: inherit; font-size: 12.5px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  outline: none;
}
.side-search:focus { border-color: var(--accent); }
.side-search::placeholder { color: var(--ink-3); }

.side-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  padding: 12px 10px 20px;
}
.side-part {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--ink-3);
  padding: 16px 8px 6px;
}
.side-part:first-child { padding-top: 2px; }

.side-link {
  display: flex; align-items: baseline; gap: 9px;
  padding: 7px 9px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.35;
  transition: background .12s, color .12s;
}
.side-link:hover { background: var(--surface-2); color: var(--ink); }
.side-link[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}
.side-n {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  flex: none;
  min-width: 16px;
}
.side-link[aria-current="page"] .side-n { color: var(--accent); }
.side-done { color: var(--kyty); flex: none; font-size: 11px; }

.side-foot {
  flex: none;
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
}
.side-prog { flex: 1 1 auto; }
.side-prog-track {
  height: 4px; border-radius: 2px; background: var(--line); overflow: hidden;
}
.side-prog-fill {
  height: 100%; background: var(--kyty); border-radius: 2px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.side-prog-l {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3); margin-top: 5px;
  display: block;
}
.icon-btn {
  font: inherit; font-size: 13px;
  width: 28px; height: 28px; flex: none;
  border-radius: 7px; border: 1px solid var(--line);
  background: transparent; color: var(--ink-3);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-2); }

/* ---------- sidebar controls ---------- */

.side-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 32px; height: 32px;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  font-size: 16px; cursor: pointer;
  box-shadow: var(--shadow);
}
.side-toggle:hover { border-color: var(--accent); color: var(--accent); }
.side-toggle:focus-visible, .side-close:focus-visible, .side-link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.side-scrim { display: none; }
html.side-hidden .side { transform: translateX(-100%); visibility: hidden; }
html.side-hidden .main { margin-left: 0; }

/* ---------- main ---------- */

.main {
  flex: 1 1 auto;
  margin-left: var(--side-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 0 26px;
  height: 48px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.crumb {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-3); letter-spacing: .04em;
  text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 7px; }

.btn {
  font: inherit; font-size: 12.5px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 11px;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  transition: border-color .12s, color .12s;
}
.btn:hover { border-color: var(--line-2); color: var(--ink); }
.btn-primary {
  background: var(--accent); color: var(--accent-ink);
  border-color: transparent; font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.08); color: var(--accent-ink); }

kbd, .kbd {
  font-family: var(--mono); font-size: 10px;
  border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 4px;
  color: var(--ink-3); background: var(--bg);
}

/* ============================================================
   TOPIC PAGE
   ============================================================ */

.topic {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 48px 34px 130px;
}

.topic-eyebrow {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 12px;
}
.topic > h1 {
  font-family: var(--mono);
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.1;
  margin: 0 0 18px;
}
.topic-deck, .topic .deck {
  font-family: var(--serif);
  font-size: 21px; line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 12px;
  max-width: 68ch;
}

/* ---------- band: read / watch / try / do ---------- */

.band { margin: 44px 0 0; }
.band-h {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 18px;
}
.band-t {
  font-family: var(--mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: .12em;
  font-weight: 600;
  color: var(--ink-3);
  flex: none;
}
.band-h::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
}
.band-read  .band-t { color: var(--ink-3); }
.band-watch .band-t { color: var(--guest); }
.band-try   .band-t { color: var(--kyty); }
.band-do    .band-t { color: var(--host); }

.band-why {
  font-family: var(--serif); font-size: 17px; line-height: 1.6;
  color: var(--ink-2); margin: -8px 0 18px; max-width: 70ch;
}

/* ============================================================
   PORTED CONTENT — matches the old book's markup
   ============================================================ */

.prose { }
.prose h2 {
  font-family: var(--mono); font-size: 20px; line-height: 1.35;
  color: var(--ink); margin: 32px 0 14px; scroll-margin-top: 72px;
}
.prose details {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 18px; margin: 0 0 20px;
}
.prose summary {
  cursor: pointer; font-family: var(--sans); color: var(--ink);
  font-weight: 600; line-height: 1.5;
}
.prose details[open] > summary { margin-bottom: 12px; }
.prose h3 {
  font-family: var(--mono);
  font-size: 24px; font-weight: 600; letter-spacing: -.02em;
  margin: 40px 0 14px; color: var(--ink);
}
.prose h4 {
  font-family: var(--sans);
  font-size: 18px; font-weight: 650; letter-spacing: -.005em;
  margin: 34px 0 11px; color: var(--ink);
}
.prose h5 {
  font-family: var(--mono); font-size: 13px;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); margin: 26px 0 9px;
}
.prose p, .prose li {
  font-family: var(--serif);
  font-size: 18.5px; line-height: 1.72;
  color: var(--prose);
}
/* keep running text at a comfortable measure even though the column is wide */
.prose > p, .prose > ul, .prose > ol { max-width: 72ch; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 1.4em; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--ink-3); }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; }
.prose a { color: var(--accent); text-underline-offset: 2px; }

/* Stage overview: parallel columns on desktop, one stage at a time on mobile. */
.prose .route-stages { list-style: none; padding: 0; max-width: none; }
.prose .route-stages > li {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) minmax(0, 2fr);
  gap: 18px; padding: 18px 0; margin: 0;
  border-bottom: 1px solid var(--line);
}
.route-stages h3 { margin: 0; font-size: 16px; line-height: 1.6; }
.route-stages p { margin: 0; font-size: 17px; line-height: 1.6; }
.source-snapshot { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .prose .route-stages > li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

.prose code, .topic code {
  font-family: var(--mono);
  font-size: .855em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .5px 4px;
  color: var(--ink);
  word-break: break-word;
}
.prose pre, .topic pre {
  font-family: var(--mono);
  font-size: 14px; line-height: 1.62;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 13px 15px;
  overflow-x: auto;
  margin: 0 0 16px;
  color: var(--ink);
}
.prose pre code, .topic pre code {
  background: none; border: 0; padding: 0; font-size: inherit;
}
.prose pre b, .topic pre b {
  color: var(--kyty); font-weight: 600;
  background: color-mix(in srgb, var(--kyty) 14%, transparent);
  border-radius: 3px; padding: 0 2px;
}

/* callouts — .k kyty, .g guest, .h host */
.callout {
  border-left: 2px solid var(--line-2);
  background: var(--surface-2);
  border-radius: 0 9px 9px 0;
  padding: 13px 16px;
  margin: 0 0 18px;
}
.callout .lbl {
  display: block;
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-3); margin-bottom: 6px;
}
.callout p {
  font-family: var(--serif); font-size: 17.5px; line-height: 1.65;
  color: var(--prose); margin: 0 0 9px; max-width: 68ch;
}
.callout p:last-child { margin-bottom: 0; }
.callout.k { border-left-color: var(--kyty); background: color-mix(in srgb, var(--kyty) 8%, transparent); }
.callout.k .lbl { color: var(--kyty); }
.callout.g { border-left-color: var(--guest); background: color-mix(in srgb, var(--guest) 8%, transparent); }
.callout.g .lbl { color: var(--guest); }
.callout.h { border-left-color: var(--host); background: color-mix(in srgb, var(--host) 8%, transparent); }
.callout.h .lbl { color: var(--host); }

/* tables */
.tw { overflow-x: auto; margin: 0 0 18px; }
.tw table, .topic table {
  width: 100%; border-collapse: collapse; font-size: 16px;
}
.tw th, .topic th {
  text-align: left;
  font-family: var(--mono); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 500;
  padding: 7px 12px 7px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tw td, .topic td {
  font-family: var(--serif); font-size: 16.5px; line-height: 1.58;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--prose);
}
.tw td:first-child { min-width: 15ch; }
.tw td:first-child { color: var(--ink); }

/* chips */
.chip {
  font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 1.5px 6px; border-radius: 999px;
  border: 1px solid currentColor;
  margin-right: 6px; white-space: nowrap;
  display: inline-block; vertical-align: 1px;
}
.chip.guest { color: var(--guest); }
.chip.kyty  { color: var(--kyty); }
.chip.host  { color: var(--host); }

/* figure / viz mount spacing */
.topic [data-viz] { margin: 0 0 18px; }

/* filename label above a code block */
.filename, .prose .filename {
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  text-transform: none; letter-spacing: normal;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 6px 12px;
  margin: 0; display: block; max-width: none;
  white-space: normal; overflow-wrap: anywhere;
}
.filename + pre {
  border-radius: 0 0 9px 9px;
  margin-top: 0;
}

/* inline comment inside a code block */
.prose pre i, .topic pre i {
  color: var(--ink-3); font-style: italic;
}

/* boxed figure */
.fig {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  margin: 0 0 20px;
  overflow: hidden;
}
.fig-head {
  display: flex; justify-content: space-between; gap: 12px;
  align-items: baseline; flex-wrap: wrap;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3);
}
.fig-body { padding: 14px; overflow-x: auto; }
/* Nothing inside a figure may push the page sideways: the figure scrolls
   internally instead. Flex/grid children need min-width:0 or they refuse
   to shrink below their content and overflow anyway. */
.fig, .fig-body, .topic figure { max-width: 100%; }
.fig-body > * { max-width: 100%; min-width: 0; }
.topic svg, .topic img { max-width: 100%; height: auto; }
.main, .topic, .band { min-width: 0; }
.fig-note {
  font-family: var(--sans); font-size: 12px; line-height: 1.55;
  color: var(--ink-3);
  padding: 0 14px 12px;
  margin: 0;
}
.chart { min-width: 0; }

/* decoder widget internals are defined in full further down */

/* ============================================================
   HOME — a dashboard, not a directory.
   The sidebar already lists everything; this answers
   "what do I do right now?"
   ============================================================ */

.home { max-width: 1000px; margin: 0 auto; padding: 56px 34px 120px; }

.home-h1 {
  font-family: var(--mono);
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 600; letter-spacing: -.035em; line-height: 1.08;
  margin: 0 0 20px; max-width: 16ch;
}
.home-lede {
  font-family: var(--serif);
  font-size: 21px; line-height: 1.62;
  color: var(--prose); margin: 0 0 40px; max-width: 62ch;
}
.home-lede em { font-style: italic; color: var(--ink); }

/* --- resume / start --- */

.resume {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 0 0 48px;
}
.resume-l { flex: 1 1 300px; min-width: 0; }
.resume-k {
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3); margin: 0 0 6px;
}
.resume-t {
  font-family: var(--mono); font-size: 21px; font-weight: 600;
  letter-spacing: -.02em; color: var(--ink); margin: 0 0 5px;
}
.resume-d {
  font-family: var(--serif); font-size: 16px; line-height: 1.5;
  color: var(--ink-2); margin: 0; max-width: 54ch;
}
.resume-btn {
  flex: none;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 9px;
  padding: 12px 22px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.resume-btn:hover { filter: brightness(1.08); }

/* --- section --- */

.home-sec { margin: 0 0 48px; }
.home-sec > h2 {
  font-family: var(--mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3); font-weight: 600;
  margin: 0 0 18px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

/* --- guest / kyty / host flow --- */

.flow { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.flow-step {
  flex: 1 1 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line);
  border-radius: 10px;
  padding: 15px 17px;
}
.flow-step.f-guest { border-top-color: var(--guest); }
.flow-step.f-kyty  { border-top-color: var(--kyty); }
.flow-step.f-host  { border-top-color: var(--host); }
.flow-k {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  display: block; margin-bottom: 8px;
}
.f-guest .flow-k { color: var(--guest); }
.f-kyty  .flow-k { color: var(--kyty); }
.f-host  .flow-k { color: var(--host); }
.flow-step p {
  font-family: var(--serif); font-size: 16px; line-height: 1.58;
  color: var(--prose); margin: 0;
}
.flow-step b { color: var(--ink); font-weight: 600; }

.home-body {
  font-family: var(--serif); font-size: 18px; line-height: 1.7;
  color: var(--prose); margin: 0 0 14px; max-width: 72ch;
}
.home-body b { color: var(--ink); font-weight: 600; }
.home-body a { color: var(--accent); }

/* --- outcomes --- */

.outcomes { list-style: none; margin: 0; padding: 0; }
.outcomes li {
  display: flex; gap: 13px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: 17.5px; line-height: 1.55;
  color: var(--prose);
}
.outcomes li:last-child { border-bottom: 0; }
.outcomes .oc-n {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  flex: none; min-width: 2.5ch;
}
.outcomes b { color: var(--ink); font-weight: 600; }

/* --- progress grid --- */

.pgrid { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 14px; }
.pcell {
  width: 34px; height: 34px; border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: border-color .12s, color .12s;
}
.pcell.ready { color: var(--ink-2); border-color: var(--line-2); }
.pcell.ready:hover { border-color: var(--accent); color: var(--ink); }
.pcell.done {
  background: color-mix(in srgb, var(--kyty) 20%, transparent);
  border-color: var(--kyty); color: var(--ink);
}
.pcell.here { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
.pcell.soon { opacity: .4; }
.pgrid-l {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
}
.pgrid-l a { color: var(--accent); }

/* --- legacy strip --- */

.legacy {
  border-top: 1px solid var(--line);
  padding-top: 18px; margin-top: 8px;
}
.legacy p {
  font-family: var(--sans); font-size: 13px; line-height: 1.6;
  color: var(--ink-3); margin: 0 0 10px;
}
.legacy-links { display: flex; flex-wrap: wrap; gap: 7px; }
.legacy-links a {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-2); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px;
}
.legacy-links a:hover { border-color: var(--accent); color: var(--ink); }

@media (max-width: 700px) {
  .home { padding: 36px 18px 90px; }
  .resume { padding: 16px 18px; }
}

/* ============================================================
   PORTED FIGURE MARKUP
   The book's chapters carry inline SVG diagrams, decoders and
   card lists that rely on its own classes. Without these rules
   SVG falls back to a black fill and inputs render unstyled.
   ============================================================ */

/* ---------- inline SVG diagrams ---------- */

.svgfig { width: 100%; height: auto; display: block; overflow: visible; }
.svgfig text { font-family: var(--mono); fill: var(--ink); }
.svgfig .lbl { font-size: 11px; fill: var(--ink-2); }
.svgfig .ttl { font-size: 12px; font-weight: 600; fill: var(--ink); }
.svgfig .box { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1; }
.svgfig .box.g { stroke: var(--guest); fill: color-mix(in srgb, var(--guest) 14%, var(--surface)); }
.svgfig .box.k { stroke: var(--kyty);  fill: color-mix(in srgb, var(--kyty) 14%, var(--surface)); }
.svgfig .box.h { stroke: var(--host);  fill: color-mix(in srgb, var(--host) 14%, var(--surface)); }
.svgfig .arr { stroke: var(--ink-3); stroke-width: 1.4; fill: none; }
.svgfig .arrhead { fill: var(--ink-3); }

/* ---------- inline decoders (editable dwords) ---------- */

.dec-input {
  display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--s4);
}
.dec-input label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
/* Inputs inside ported content inherit nothing — without this they render
   as white boxes with near-invisible text on the dark theme.
   box-sizing is reset to content-box because the book sizes these with
   `width: 12ch` / `width: 14ch`, which our global border-box would eat
   into padding and clip the value. */
.topic input[type="text"],
.topic input:not([type]),
.topic input[type="number"],
.dec-input input {
  box-sizing: content-box;
  font-family: var(--mono); font-size: 14px;
  padding: 7px var(--s3);
  border: 1px solid var(--line-2); border-radius: 6px;
  background: var(--surface); color: var(--ink);
  outline: none; min-width: 0; max-width: 100%;
}
.topic input:focus, .dec-input input:focus { border-color: var(--accent); }
.topic input::placeholder { color: var(--ink-3); opacity: 1; }
.dec-input input.dw { width: 12ch; }

/* ---------- preset / kind buttons ---------- */

.presets { display: flex; flex-wrap: wrap; gap: 4px; }
.presets button {
  font-family: var(--mono); font-size: 11.5px;
  padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface-2); color: var(--ink-2);
  cursor: pointer; line-height: 1.35;
}
.presets button:hover { color: var(--ink); border-color: var(--line-2); }
.presets button[aria-selected="true"] {
  background: var(--ink); color: var(--bg);
  border-color: var(--ink); font-weight: 600;
}

/* ---------- 32-bit strip ---------- */

.bits {
  display: flex; gap: 2px; overflow-x: auto;
  padding-bottom: var(--s2); margin-bottom: var(--s3);
}
.bit {
  width: 15px; height: 28px; flex: none;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px;
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--surface-2); color: var(--ink-3);
}
.bit.f0 { background: color-mix(in srgb, var(--host) 26%, var(--surface));  border-color: color-mix(in srgb, var(--host) 50%, transparent);  color: var(--ink); }
.bit.f1 { background: color-mix(in srgb, var(--kyty) 26%, var(--surface));  border-color: color-mix(in srgb, var(--kyty) 50%, transparent);  color: var(--ink); }
.bit.f2 { background: color-mix(in srgb, var(--guest) 26%, var(--surface)); border-color: color-mix(in srgb, var(--guest) 50%, transparent); color: var(--ink); }
.bit.f3 { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); }

/* ---------- decoded field grid ---------- */

.dec-out {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.dec-out > div { background: var(--surface); padding: var(--s3) var(--s4); }
.dec-out .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.dec-out .v {
  font-family: var(--mono); font-size: 14px; color: var(--ink);
  margin-top: 3px; overflow-wrap: anywhere;
}

/* ---------- memory-map band picker ----------
   The book calls these ".band" too, which collides with this file's
   Read/Watch/Try/Do sections. Everything here is scoped under .bands. */

.bands .band {
  text-align: left; padding: var(--s3);
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface-2); cursor: pointer;
  font: inherit; color: inherit; display: block; width: 100%;
  margin: 0;
}
.bands .band:hover { border-color: var(--line-2); }
.bands .band[aria-selected="true"] { border-color: var(--accent); background: var(--surface); }
.bands .band .addr { font-family: var(--mono); font-size: 11px; color: var(--ink-2); display: block; }
.bands .band .ttl  { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 2px; display: block; }
.bands .band .sz   { font-family: var(--mono); font-size: 11px; color: var(--ink-3); display: block; }
.bands .band.g { border-left: 3px solid var(--guest); }
.bands .band.k { border-left: 3px solid var(--kyty); }
.bands .band.h { border-left: 3px solid var(--host); }

/* ---------- stacked layer cards ---------- */

.stack { display: flex; flex-direction: column; gap: var(--s1); margin: 0 0 var(--s4); }
.layer {
  border: 1px solid var(--line); border-radius: 8px;
  padding: var(--s3) var(--s4); background: var(--surface-2);
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: var(--s3); align-items: center;
}
.layer .nm { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.layer .ds {
  font-family: var(--serif); font-size: 15.5px; color: var(--prose);
  grid-column: 1/-1; line-height: 1.55;
}
.layer.g { border-left: 3px solid var(--guest); }
.layer.k { border-left: 3px solid var(--kyty); }
.layer.h { border-left: 3px solid var(--host); }
.arrow {
  text-align: center; color: var(--ink-3);
  font-family: var(--mono); font-size: 13px; line-height: 1; padding: 2px 0;
}

/* ---------- primer box ---------- */

.primer {
  border: 1px solid var(--line); border-left: 3px solid var(--kyty);
  border-radius: 0 9px 9px 0; background: var(--surface);
  margin: var(--s5) 0; padding: var(--s4) var(--s5);
}
.primer .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--kyty); display: block;
  margin-bottom: var(--s2);
}
.primer h5 { margin-top: var(--s4); }

/* ---------- source chips ---------- */

.src {
  display: inline-block; font-family: var(--mono); font-size: 11.5px;
  line-height: 1.5; padding: 2px 7px;
  border: 1px solid var(--line); border-radius: 5px;
  background: var(--surface-2); color: var(--ink-2); white-space: nowrap;
}
.srcs { display: flex; flex-wrap: wrap; gap: 5px; margin: var(--s3) 0 var(--s5); }
.num { font-variant-numeric: tabular-nums; text-align: right; font-family: var(--mono); }

/* ---------- step tabs ---------- */

.steps { display: flex; flex-wrap: wrap; gap: var(--s1); }
.steps button {
  font-family: var(--mono); font-size: 12px; padding: 6px 11px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-2); border-radius: 6px; line-height: 1.3;
}
.steps button:hover { color: var(--ink); border-color: var(--line-2); }
.steps button[aria-selected="true"] {
  background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600;
}
.step-panel { margin-top: var(--s5); }
.step-panel h5 {
  margin: 0 0 var(--s2); font-size: 15px; text-transform: none;
  letter-spacing: -.01em; color: var(--ink); font-family: var(--mono);
}
.step-panel .why {
  font-family: var(--serif); font-size: 15.5px; color: var(--ink-2);
  border-top: 1px dashed var(--line); padding-top: var(--s3); margin-top: var(--s3);
}

/* ---------- pipeline picker ---------- */

.pipe { display: flex; flex-wrap: wrap; gap: 4px; }
.pipe button {
  flex: 1 1 92px; min-width: 92px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2);
  border-radius: 7px; padding: var(--s3); font: inherit; color: var(--ink-2);
}
.pipe button:hover { border-color: var(--line-2); color: var(--ink); }
.pipe button[aria-selected="true"] {
  background: var(--surface); border-color: var(--accent); color: var(--ink);
}
.pipe .i {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.pipe .t { font-family: var(--mono); font-size: 12px; font-weight: 600; line-height: 1.25; margin-top: 3px; }

/* ---------- address-space bar ---------- */

.mmap { display: grid; grid-template-columns: 1fr; gap: var(--s5); align-items: start; }
.bands { display: flex; flex-direction: column; gap: 3px; }
.spacebar {
  display: flex; height: 34px; border: 1px solid var(--line);
  border-radius: 6px; overflow: hidden; margin: var(--s4) 0 var(--s2);
}
.spacebar div {
  display: grid; place-items: center; font-family: var(--mono); font-size: 10px;
  letter-spacing: .06em; color: #fff; text-align: center; padding: 0 4px;
  overflow: hidden; white-space: nowrap;
}
.spacebar .sm { background: color-mix(in srgb, var(--host) 78%, #101216); }
.spacebar .sr { background: color-mix(in srgb, var(--kyty) 80%, #101216); }
.spacebar .ua { background: color-mix(in srgb, var(--guest) 82%, #101216); }
.spacebar .hh { background: var(--ink-3); }
.spacescale {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  display: flex; justify-content: space-between;
}

/* ---------- ABI comparison ---------- */

.abi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: 0 0 var(--s4); }
.abi-col { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.abi-col h5 {
  margin: 0; padding: var(--s3) var(--s4);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.abi-row {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s3);
  padding: 6px var(--s4); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12.5px; align-items: baseline;
}
.abi-row:last-child { border-bottom: 0; }
.abi-row .r { color: var(--ink); font-weight: 600; min-width: 6ch; }
.abi-row .a { color: var(--ink-2); }
.abi-row.stack { background: var(--surface-2); display: grid; }
.abi-row.stack .r { color: var(--host); }

/* ---------- "learn more" lists ---------- */

.learn {
  margin: var(--s6) 0; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); overflow: hidden;
}
.learn > .lh {
  padding: var(--s2) var(--s4); background: var(--surface-2);
  border-bottom: 1px solid var(--line); font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.learn ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.learn li {
  margin: 0; border-bottom: 1px solid var(--line);
  padding: var(--s3) var(--s4);
  display: grid; grid-template-columns: 5.4em minmax(0,1fr);
  gap: var(--s3); align-items: baseline;
}
.learn li:last-child { border-bottom: 0; }
.learn a { font-family: var(--mono); font-size: 13.5px; color: var(--accent); }
.learn .d {
  font-size: 15px; color: var(--ink-2); line-height: 1.5;
  display: block; margin-top: 3px; font-family: var(--serif);
}
.kind {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--line-2); color: var(--ink-2);
  text-align: center; justify-self: start; white-space: nowrap;
}
.kind.vid  { color: var(--host);  border-color: color-mix(in srgb, var(--host) 45%, transparent);  background: color-mix(in srgb, var(--host) 10%, transparent); }
.kind.spec { color: var(--guest); border-color: color-mix(in srgb, var(--guest) 45%, transparent); background: color-mix(in srgb, var(--guest) 10%, transparent); }
.kind.code { color: var(--kyty);  border-color: color-mix(in srgb, var(--kyty) 45%, transparent);  background: color-mix(in srgb, var(--kyty) 10%, transparent); }

@media (max-width: 680px) {
  .abi { grid-template-columns: 1fr; }
  .learn li { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   LINKS — one accent colour everywhere in page content.
   Without this, anything outside .prose (callouts, checkpoints,
   band copy, tables) falls back to the browser's blue/purple.
   ============================================================ */

/* Cover every content wrapper, including tools and generated return links.
   Zero specificity lets navigation, cards and buttons keep their own styles.
   The default also applies to visited links instead of the browser's purple. */
:where([data-app-content] a[href]) {
  color: var(--accent);
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
:where([data-app-content] a[href]:hover) { text-decoration-color: currentColor; }
:where([data-app-content] a[href]:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.topic a, .home a, .band-why a, .callout a, .check-item label a,
.topic td a, .topic th a, .ex a {
  color: var(--accent);
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.topic a:hover, .home a:hover, .band-why a:hover, .callout a:hover,
.check-item label a:hover, .ex a:hover {
  text-decoration-color: currentColor;
}
.topic a:visited, .home a:visited, .callout a:visited,
.check-item label a:visited { color: var(--accent); }
/* the solid "Begin/Resume" button is not a text link: keep its label on the
   accent fill, overriding the generic .home a / a:visited link colours above */
a.resume-btn, a.resume-btn:visited, a.resume-btn:hover { color: var(--accent-ink); }

/* Skip the shell's own controls */
.side a, .pager a, .topbar a, .pal-item { text-decoration: none; }
.pager a, .pager a:visited { color: inherit; }

/* ============================================================
   TABLE CODE — never break an identifier mid-word.
   The wrapper scrolls, so a long token widens the column
   instead of hyphenating into nonsense.
   ============================================================ */

.tw td code, .topic td code, .tw th code, .topic th code,
.tw td .src, .topic td .src {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}
.tw td, .topic td { overflow-wrap: break-word; }
.tw { -webkit-overflow-scrolling: touch; }
/* keep the first column from collapsing under a long code token */
.tw td:first-child, .topic td:first-child { min-width: 12ch; }

/* Syntax token colours live in highlight.css — shared with the original
   long-form documents, which use a different stylesheet. */

/* ============================================================
   CHECKPOINT
   ============================================================ */

.check {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 18px;
}
.check-h {
  font-family: var(--sans); font-size: 16px; font-weight: 650;
  margin: 0 0 12px; color: var(--ink);
}
.check-list { list-style: none; margin: 0; padding: 0; }
.check-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.check-item:last-child { border-bottom: 0; }
.check-item input {
  margin: 3px 0 0; flex: none;
  width: 16px; height: 16px;
  accent-color: var(--kyty); cursor: pointer;
}
.check-item label {
  font-family: var(--serif); font-size: 17.5px; line-height: 1.58;
  color: var(--prose); cursor: pointer;
}
.check-item input:checked + label { color: var(--ink-3); text-decoration: line-through; }

/* ============================================================
   PREV / NEXT
   ============================================================ */

.pager {
  display: flex; gap: 10px; margin-top: 56px;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.pager a {
  flex: 1 1 0; min-width: 0;
  display: block; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: border-color .12s;
}
.pager a:hover { border-color: var(--accent); }
.pager .dir {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); display: block; margin-bottom: 4px;
}
.pager .ttl {
  font-size: 14px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block;
}
.pager .next { text-align: right; }

/* ============================================================
   COMMAND PALETTE
   ============================================================ */

.pal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: color-mix(in srgb, var(--ink) 32%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh 16px 16px;
}
.pal {
  width: min(640px, 100%);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden; display: flex; flex-direction: column;
  max-height: 70vh;
}
.pal-in {
  font: inherit; font-size: 16px; color: var(--ink);
  background: transparent; border: 0;
  border-bottom: 1px solid var(--line);
  padding: 15px 18px; width: 100%; outline: none;
}
.pal-res { overflow-y: auto; padding: 6px; }
.pal-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  cursor: pointer; text-decoration: none; color: inherit;
}
.pal-item[data-active="1"] { background: var(--surface-2); }
.pal-t {
  font-size: 13.5px; color: var(--ink);
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pal-item mark {
  background: color-mix(in srgb, var(--kyty) 32%, transparent);
  color: inherit; border-radius: 2px; padding: 0 1px;
}
.pal-s {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .05em; flex: none;
}
.pal-empty { padding: 26px; text-align: center; color: var(--ink-3); font-size: 13px; }
.pal-foot {
  border-top: 1px solid var(--line); padding: 8px 14px;
  display: flex; gap: 14px; font-size: 11px; color: var(--ink-3); flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 940px) {
  .side {
    width: min(var(--side-w), calc(100vw - 24px));
    box-shadow: var(--shadow-lg);
  }
  html:not(.side-hidden) .side-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: color-mix(in srgb, var(--ink) 30%, transparent);
  }
  .main { margin-left: 0; }
  .topbar { padding: 0 12px; }
  .topic { padding: 32px 18px 90px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}