/* ── Luma World user guide — the one stylesheet ─────────────────────────────
   Every page in docs/guide/ links this file and nothing else from the repo,
   so the folder can be lifted out and hosted on its own.

   The palette is the Pixel City company site's (white paper, the mark's violet
   and coral) with the internal docs' dark set, which is the app's own dark
   tokens. Token names match the app so a colour means the same thing here.

   THEME. The OS preference applies until the reader picks; a pick is kept in
   localStorage under `pc-guide-theme` and wins after that. The head script of
   each page puts the pick on <html data-theme> before first paint. The two
   dark blocks below carry the same declarations on purpose.

   Contents
     1. tokens (light, then dark twice)
     2. base
     3. nav and theme toggle
     4. hero
     5. bands, eyebrows, cards
     6. the page grid, contents rail, prose
     7. callouts: tip, good to know, trouble
     8. tables, code, keys
     9. diagrams
    10. the explainer video, and the videos page
    11. prev / next, footer
    12. responsive
   ------------------------------------------------------------------------ */


/* ══ 1. tokens ═════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  --bg:            #ffffff;
  --bg-card:       #ffffff;
  --bg-hover:      #f2f2f7;
  --bg-deep:       #f7f7fb;
  --bg-input:      #ffffff;
  --text-bright:   #06091a;
  --text:          #0b1030;
  --text-muted:    #39406b;
  --text-dim:      #565f86;
  --border:        #e7e8f1;
  --border-subtle: #efeff5;
  --line-2:        #d9dbe9;

  --violet:        #7c4dff;   /* shape colour */
  --coral:         #ff5a6e;   /* shape colour, never text */
  --violet-ink:    #6a3cf0;   /* violet as text */
  --green:         #1f9d63;   /* the ✓ Done colour, shape */
  --green-ink:     #157a4b;
  --amber:         #d98a00;
  --amber-ink:     #8f5a00;

  --surface-2:     #f4f4f9;   /* callouts, code, the mobile contents box */
  --table-head-bg: #f4f4f9;
  --diagram-face:  #ffffff;
  --diagram-ghost: #c9cbe0;
  --nav-bg:        rgba(255, 255, 255, .86);

  --tip-edge:      var(--violet);
  --know-edge:     #3b82f6;
  --know-ink:      #2256b8;
  --trouble-edge:  var(--coral);
  --trouble-ink:   #c3283f;

  --shadow:       0 1px 2px rgba(11, 16, 48, .05), 0 14px 30px -20px rgba(11, 16, 48, .30);
  --shadow-up:    0 2px 4px rgba(11, 16, 48, .06), 0 22px 44px -22px rgba(11, 16, 48, .34);
  --shadow-sheet: 0 8px 22px rgba(11, 16, 48, .10), inset 0 1px 0 rgba(255, 255, 255, .5);

  --hero-wash:
    radial-gradient(820px 500px at 6% -16%, rgba(124, 77, 255, .13), rgba(124, 77, 255, 0) 62%),
    radial-gradient(700px 460px at 94% 2%,  rgba(255, 90, 110, .10), rgba(255, 90, 110, 0) 60%);
  --foot-wash:
    radial-gradient(820px 320px at 50% 135%, rgba(255, 90, 110, .10), rgba(255, 90, 110, 0) 66%);

  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-xl: 14px;

  --gutter: clamp(16px, 3.6vw, 40px);
  --wrap:   1080px;

  --ico-sun:  none;
  --ico-moon: block;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0a0a0c;
  --bg-card:       #0e0e11;
  --bg-hover:      #1a1a20;
  --bg-deep:       #050508;
  --bg-input:      #111114;
  --text-bright:   #eae7e0;
  --text:          #c8c5be;
  --text-muted:    #a09c95;
  --text-dim:      #8a867f;
  --border:        #1e1c22;
  --border-subtle: #181620;
  --line-2:        #2e2b38;

  --violet-ink:    #a58bff;
  --green:         #3ccf8e;
  --green-ink:     #5fe0a5;
  --amber:         #f0b429;
  --amber-ink:     #f5c860;

  --surface-2:     #131317;
  --table-head-bg: #1a1a20;
  --diagram-face:  #0e0e11;
  --diagram-ghost: #3a3646;
  --nav-bg:        rgba(10, 10, 12, .84);

  --know-edge:     #60a5fa;
  --know-ink:      #8cc0ff;
  --trouble-ink:   #ff8a99;

  --shadow:       0 1px 2px rgba(0, 0, 0, .40), 0 14px 30px -20px rgba(0, 0, 0, .75);
  --shadow-up:    0 2px 4px rgba(0, 0, 0, .45), 0 22px 44px -22px rgba(0, 0, 0, .80);
  --shadow-sheet: 0 18px 44px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .06);

  --hero-wash:
    radial-gradient(820px 500px at 6% -16%, rgba(124, 77, 255, .22), rgba(124, 77, 255, 0) 62%),
    radial-gradient(700px 460px at 94% 2%,  rgba(255, 90, 110, .14), rgba(255, 90, 110, 0) 60%);
  --foot-wash:
    radial-gradient(820px 320px at 50% 135%, rgba(255, 90, 110, .13), rgba(255, 90, 110, 0) 66%);

  --ico-sun:  block;
  --ico-moon: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            #0a0a0c;
    --bg-card:       #0e0e11;
    --bg-hover:      #1a1a20;
    --bg-deep:       #050508;
    --bg-input:      #111114;
    --text-bright:   #eae7e0;
    --text:          #c8c5be;
    --text-muted:    #a09c95;
    --text-dim:      #8a867f;
    --border:        #1e1c22;
    --border-subtle: #181620;
    --line-2:        #2e2b38;

    --violet-ink:    #a58bff;
    --green:         #3ccf8e;
    --green-ink:     #5fe0a5;
    --amber:         #f0b429;
    --amber-ink:     #f5c860;

    --surface-2:     #131317;
    --table-head-bg: #1a1a20;
    --diagram-face:  #0e0e11;
    --diagram-ghost: #3a3646;
    --nav-bg:        rgba(10, 10, 12, .84);

    --know-edge:     #60a5fa;
    --know-ink:      #8cc0ff;
    --trouble-ink:   #ff8a99;

    --shadow:       0 1px 2px rgba(0, 0, 0, .40), 0 14px 30px -20px rgba(0, 0, 0, .75);
    --shadow-up:    0 2px 4px rgba(0, 0, 0, .45), 0 22px 44px -22px rgba(0, 0, 0, .80);
    --shadow-sheet: 0 18px 44px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .06);

    --hero-wash:
      radial-gradient(820px 500px at 6% -16%, rgba(124, 77, 255, .22), rgba(124, 77, 255, 0) 62%),
      radial-gradient(700px 460px at 94% 2%,  rgba(255, 90, 110, .14), rgba(255, 90, 110, 0) 60%);
    --foot-wash:
      radial-gradient(820px 320px at 50% 135%, rgba(255, 90, 110, .13), rgba(255, 90, 110, 0) 66%);

    --ico-sun:  block;
    --ico-moon: none;
  }
}


/* ══ 2. base ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(var(--wrap), 100% - (var(--gutter) * 2)); margin-inline: auto; }

a { color: var(--violet-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  color: var(--text-bright);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.12; margin: 0;
  text-wrap: balance;
}
p { text-wrap: pretty; }
b, strong { color: var(--text-bright); font-weight: 600; }

:where(a, button, summary):focus-visible { outline: 2px solid var(--violet-ink); outline-offset: 3px; border-radius: var(--r-md); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  padding: 8px 14px; border-radius: var(--r-md);
  background: var(--bg-card); border: 1px solid var(--line-2); color: var(--text-bright);
}
.skip:focus { top: 12px; }


/* ══ 3. nav and theme toggle ═══════════════════════════════════════════════ */

.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; gap: 18px; min-height: 62px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; flex: none; }
.brand img { width: 23px; height: 23px; }
.brand b { font-size: 1rem; letter-spacing: -.02em; }
.brand span { color: var(--text-dim); font-size: .86rem; font-weight: 500; }

.nav-links { display: flex; gap: clamp(12px, 2vw, 22px); min-width: 0; }
.nav-links a {
  text-decoration: none; color: var(--text-dim); font-size: .88rem; font-weight: 500;
  white-space: nowrap; transition: color .16s ease;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--text-bright); }
.nav-links a[aria-current="page"] { color: var(--text-bright); }
.nav-links a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; margin-top: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--violet), var(--coral));
}

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--bg-card); color: var(--text-dim);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.theme-toggle:hover, .theme-toggle:focus-visible { color: var(--text-bright); background: var(--bg-hover); border-color: var(--violet); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .ico-sun  { display: var(--ico-sun); }
.theme-toggle .ico-moon { display: var(--ico-moon); }


/* ══ 4. hero ═══════════════════════════════════════════════════════════════ */

.hero {
  padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
  background-image: var(--hero-wash);
  background-repeat: no-repeat;
}
.pill {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .38em .9em; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--bg-card);
  font-size: .78rem; font-weight: 500; color: var(--text-dim);
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 2px;
  background: linear-gradient(135deg, var(--violet), var(--coral));
}
.hero h1 {
  margin: 20px 0 0;
  font-size: clamp(2rem, 5.6vw, 3.4rem);
  letter-spacing: -.038em; line-height: 1.05;
  max-width: 18ch;
}
.lead { margin: 20px 0 0; max-width: 58ch; color: var(--text); font-size: clamp(1rem, 1.7vw, 1.1rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.btn {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .62em 1.15em; border-radius: 999px;
  font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-solid { background: linear-gradient(110deg, var(--violet), var(--coral)); color: #fff; }
.btn-ghost { background: var(--bg-input); border-color: var(--line-2); color: var(--text-bright); }
.btn-ghost:hover { background: var(--bg-hover); border-color: var(--violet); }


/* ══ 5. bands, eyebrows, cards ═════════════════════════════════════════════ */

.band { padding: clamp(48px, 7vw, 88px) 0; }
.tint { background: var(--bg-deep); border-block: 1px solid var(--border); }

.eyebrow {
  display: block; margin: 0 0 12px;
  font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--violet-ink);
}
.band > .wrap > h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); max-width: 24ch; }
.intro { margin: 16px 0 0; max-width: 60ch; color: var(--text-muted); }

.cards { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; }
.card {
  display: block; position: relative;
  padding: 26px 24px 26px;
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--bg-card); box-shadow: var(--shadow);
  color: inherit; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); background: var(--bg-hover); border-color: var(--line-2); }
.card h3 { font-size: 1.12rem; margin: 16px 0 8px; letter-spacing: -.02em; }
.card p { margin: 0; color: var(--text-muted); font-size: .95rem; }
.card .go { display: inline-block; margin-top: 14px; color: var(--violet-ink); font-size: .86rem; font-weight: 600; }
.card .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line-2);
  color: var(--violet-ink); font-weight: 600; font-size: .9rem;
}

/* The start-here path: numbered steps down the page. */
.path { list-style: none; margin: 32px 0 0; padding: 0; counter-reset: step; max-width: 72ch; }
.path li {
  position: relative; counter-increment: step;
  padding: 0 0 22px 52px; color: var(--text-muted);
}
.path li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--violet), var(--coral)); color: #fff;
  font-weight: 600; font-size: .9rem;
}
.path li::after {
  content: ""; position: absolute; left: 16px; top: 38px; bottom: 4px; width: 2px;
  background: var(--border);
}
.path li:last-child::after { display: none; }
.path li b { display: block; font-size: 1.02rem; margin-bottom: 2px; }

/* Glossary */
.glossary { margin: 30px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; }
.glossary div { padding: 16px 0; border-top: 1px solid var(--border); }
.glossary dt { color: var(--text-bright); font-weight: 600; }
.glossary dd { margin: 4px 0 0; color: var(--text-muted); font-size: .95rem; }


/* ══ 6. the page grid, contents rail, prose ════════════════════════════════ */

.doc-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(26px, 5vw, 60px); align-items: start; }

.toc { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
.toc .eyebrow { margin-bottom: 10px; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc a {
  display: block; padding: 6px 0 6px 13px;
  border-left: 2px solid var(--border);
  color: var(--text-dim); font-size: .86rem; text-decoration: none;
  transition: color .16s ease, border-color .16s ease;
}
.toc a:hover, .toc a:focus-visible { color: var(--text-bright); border-left-color: var(--violet); }
.toc a.is-active { color: var(--text-bright); border-left-color: var(--violet); }
.toc .sub a { padding-left: 24px; font-size: .8rem; }

.doc { min-width: 0; }
.doc > section + section { margin-top: 54px; padding-top: 46px; border-top: 1px solid var(--border); }
.doc h2 { font-size: clamp(1.45rem, 3vw, 1.95rem); max-width: 26ch; }
.doc h3 { font-size: 1.1rem; margin: 34px 0 0; letter-spacing: -.02em; }
.doc p { margin: 14px 0 0; max-width: 68ch; color: var(--text-muted); }
.doc p.lede { color: var(--text); font-size: 1.04rem; }
.doc ul, .doc ol { margin: 14px 0 0; padding-left: 22px; max-width: 68ch; color: var(--text-muted); }
.doc li { margin-top: 8px; }
.doc li::marker { color: var(--violet-ink); }

/* Numbered how-to steps inside a section */
.steps { counter-reset: s; list-style: none; padding-left: 0 !important; }
.steps > li { counter-increment: s; position: relative; padding-left: 38px; }
.steps > li::before {
  content: counter(s);
  position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--violet-ink); font-size: .78rem; font-weight: 600;
}

/* A little "what you see" chip used in running text for on-screen labels */
.ui {
  display: inline; padding: .08em .45em; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--bg-card);
  color: var(--text-bright); font-size: .9em; font-weight: 500; white-space: normal;
}
.ok { color: var(--green-ink); font-weight: 600; }


/* ══ 7. callouts ═══════════════════════════════════════════════════════════ */

.callout {
  margin: 24px 0 0; padding: 14px 18px 15px;
  max-width: 72ch;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--tip-edge);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.callout .label {
  display: block; margin-bottom: 4px;
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--violet-ink);
}
.doc .callout p, .callout p { margin: 0; font-size: .94rem; color: var(--text-muted); }
.doc .callout p + p { margin-top: 8px; }
.doc .callout ul { margin: 6px 0 0; font-size: .94rem; }
.callout.tip     { border-left-color: var(--tip-edge); }
.callout.know    { border-left-color: var(--know-edge); }
.callout.know .label { color: var(--know-ink); }
.callout.trouble { border-left-color: var(--trouble-edge); }
.callout.trouble .label { color: var(--trouble-ink); }
.callout.soon    { border-left-color: var(--amber); }
.callout.soon .label { color: var(--amber-ink); }

/* Troubleshooting: a question you can open */
.faq { margin: 22px 0 0; max-width: 72ch; }
.faq details {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-card);
}
.faq details + details { margin-top: 10px; }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 13px 44px 13px 16px; position: relative;
  color: var(--text-bright); font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--violet-ink); font-size: 1.2rem; font-weight: 400;
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 16px 14px; }
.faq details > div p:first-child { margin-top: 0; }


/* ══ 8. tables, code, keys ═════════════════════════════════════════════════ */

.tbl-wrap { margin: 22px 0 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); max-width: 100%; }
table { border-collapse: collapse; width: 100%; min-width: 440px; font-size: .9rem; }
th {
  background: var(--table-head-bg); color: var(--text-bright);
  text-align: left; font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 11px 13px; border-bottom: 1px solid var(--border);
}
td { padding: 11px 13px; color: var(--text-muted); vertical-align: top; border-top: 1px solid var(--border); }
tbody tr:first-child td { border-top: 0; }
td b { white-space: nowrap; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em;
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  border-radius: var(--r-xs); padding: .08em .36em; color: var(--text-bright);
  overflow-wrap: anywhere; word-break: break-word;
}
pre {
  margin: 18px 0 0; padding: 14px 16px; overflow-x: auto;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg);
  max-width: 100%;
}
pre code { background: none; border: 0; padding: 0; font-size: .82rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }

kbd {
  display: inline-block; min-width: 1.6em; padding: .05em .45em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82em; text-align: center;
  color: var(--text-bright); background: var(--bg-card);
  border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: var(--r-sm);
}


/* ══ 9. diagrams ═══════════════════════════════════════════════════════════
   An SVG presentation attribute cannot read a var(), so every stroke and
   fill in a figure comes from a class here and follows the theme. */

.fig { margin: 28px 0 0; max-width: 520px; }
.fig.wide { max-width: 640px; }
.fig svg { width: 100%; height: auto; }
.fig figcaption { margin-top: 10px; color: var(--text-dim); font-size: .82rem; max-width: 60ch; }

.d-box  { fill: var(--diagram-face); stroke: var(--violet); stroke-width: 1.5; }
.d-box.hi   { stroke: var(--coral); stroke-width: 2; }
.d-box.ghost { stroke: var(--diagram-ghost); stroke-dasharray: 5 4; }
.d-box.ok   { stroke: var(--green); stroke-width: 2; }
.d-fill     { fill: var(--violet); }
.d-fill.coral { fill: var(--coral); }
.d-fill.green { fill: var(--green); }
.d-fill.soft  { fill: var(--surface-2); }
.d-line     { stroke: var(--violet); stroke-width: 1.5; fill: none; }
.d-line.soft { stroke: var(--diagram-ghost); stroke-dasharray: 4 4; }
.d-orbit    { stroke: var(--diagram-ghost); stroke-width: 1.2; fill: none; stroke-dasharray: 3 5; }
.d-t { fill: var(--text-bright); font-family: Poppins, system-ui, sans-serif; font-size: 15px; font-weight: 600; text-anchor: middle; }
.d-s { fill: var(--text-dim); font-family: Poppins, system-ui, sans-serif; font-size: 12px; text-anchor: middle; }
.d-s.left, .d-t.left { text-anchor: start; }
.d-ok { fill: var(--green-ink); font-family: Poppins, system-ui, sans-serif; font-size: 13px; font-weight: 600; text-anchor: middle; }
.d-a { stroke: var(--violet); stroke-width: 1.5; fill: none; marker-end: url(#arrow); }
.d-a.soft { stroke: var(--diagram-ghost); stroke-dasharray: 4 4; marker-end: url(#arrow-soft); }
.d-arrow-head      { fill: var(--violet); }
.d-arrow-head-soft { fill: var(--diagram-ghost); }


/* ══ 10. the explainer video, and the videos page ═════════════════════════
   The frame owns the 16:9; the deck scales itself to whatever box it gets.
   The deck reads `pc-guide-theme` itself and follows the toggle through a
   storage event, so nothing is posted into the frame. */

.explainer { padding: 0 0 clamp(8px, 2vw, 16px); }
.explainer-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--bg-deep); box-shadow: var(--shadow-sheet);
}
.explainer-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.explainer-bar {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px;
  margin: 13px 0 0; font-size: .86rem;
}
.explainer-bar b { color: var(--text-bright); font-weight: 600; }
.explainer-bar .meta { color: var(--text-dim); }
.explainer-bar .links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.explainer-bar .links a { text-decoration: none; border-bottom: 1px solid transparent; }
.explainer-bar .links a:hover, .explainer-bar .links a:focus-visible { border-bottom-color: currentColor; }

.video-jump { display: flex; flex-wrap: wrap; gap: 9px 10px; margin: 0 0 clamp(32px, 5vw, 52px); padding: 0; list-style: none; }
.video-jump a {
  display: inline-block; padding: .4em .9em; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--bg-card);
  color: var(--text-dim); font-size: .84rem; text-decoration: none;
}
.video-jump a:hover, .video-jump a:focus-visible { color: var(--text-bright); border-color: var(--violet); }
.video-item + .video-item { margin-top: clamp(44px, 7vw, 72px); padding-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--border); }
.video-item h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.video-item .video-desc { margin: 10px 0 22px; max-width: 66ch; color: var(--text-muted); }
.video-item .video-read { display: inline-block; margin-top: 14px; font-size: .9rem; font-weight: 600; text-decoration: none; }


/* ══ 11. prev / next, footer ═══════════════════════════════════════════════ */

.pager {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin-top: 64px; padding-top: 30px; border-top: 1px solid var(--border);
}
.pager a {
  display: block; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-card); text-decoration: none;
  transition: border-color .16s ease, background .16s ease;
}
.pager a:hover, .pager a:focus-visible { border-color: var(--violet); background: var(--bg-hover); }
.pager small { display: block; color: var(--text-dim); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.pager span { display: block; margin-top: 2px; color: var(--text-bright); font-weight: 600; }
.pager .next { text-align: right; grid-column: 2; }

.foot {
  border-top: 1px solid var(--border);
  padding: 40px 0 48px;
  background: var(--foot-wash), var(--bg-deep);
}
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }
.foot .copy { margin: 0 auto 0 0; color: var(--text-dim); font-size: .86rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.foot-links a { color: var(--text-dim); text-decoration: none; font-size: .88rem; font-weight: 500; }
.foot-links a:hover, .foot-links a:focus-visible { color: var(--text-bright); }


/* ══ 12. responsive ════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .toc {
    position: static; max-height: none; overflow: visible;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg);
    background: var(--surface-2);
  }
  .toc ul { display: flex; flex-wrap: wrap; gap: 2px 4px; }
  .toc li.sub { display: none; }
  .toc a { padding: 4px 10px; border-left: 0; border-radius: var(--r-md); }
  .glossary { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* The page links drop to their own row and scroll sideways inside the nav,
     never the page. */
  .nav-inner { flex-wrap: wrap; gap: 0 14px; min-height: 56px; padding-top: 10px; }
  .nav-links {
    order: 3; flex: 1 0 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 8px 0 10px; gap: 18px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .brand span { display: none; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .explainer-bar .links { margin-left: 0; width: 100%; }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager .next { grid-column: 1; }
  .foot .copy { flex-basis: 100%; }
}