/* =============================================================================
   DOWN THE STACK — shared design system
   -----------------------------------------------------------------------------
   The house style for every deep-dive guide in this repo. The core metaphor is
   a DESCENT: you start at the surface (a simple mental model) and dive through
   five depth zones to the abyss (the gory details). Everything here — palette,
   atmosphere, components — is built to reinforce that "going deeper" feeling.

   How to use it (see _template/guide-template.html for a full scaffold):
     <link rel="stylesheet" href="../assets/design-system.css">
     <script defer src="../assets/design-system.js"></script>

   Sections:
     1.  Tokens (:root)            — colors, fonts, shadows. Restyle here.
     2.  Reset & base
     3.  Atmosphere               — background, grain, floating spores
     4.  Layout                   — .wrap, section
     5.  Depth gauge & progress   — left-rail nav + top progress bar
     6.  Hero
     7.  Level headers            — the depth-zone section headers
     8.  Prose                    — body copy, inline .kw / .term
     9.  Notes / callouts         — idea / warn / danger
     10. Analogy cards            — bad vs good two-up
     11. Code blocks              — chrome + syntax-highlight token classes
     12. Tables
     13. Myth cards               — "✕ myth → ✓ truth"
     14. Deeper pods              — collapsible <details> for advanced asides
     15. Interactive widget chrome — reusable stepper/control shell (.btn, .panel,
                                     .stepper, .toggle, .seg). Per-guide widget
                                     internals stay inline in each guide.
     16. Guide cards              — home-page index grid
     17. Footer / recap
     18. Misc (selection, scrollbar)
     19. Theme toggle             — the floating reading-theme switch
     20. Selection action bar     — floats over a selection: Ask AI + marks (§22)
     21. Reading theme            — the warm paper palette + its patches
     22. Annotations              — private highlights & notes: marks, popover, drawer
   ============================================================================= */

/* ---------- 1. TOKENS ------------------------------------------------------ */
:root{
  --bg:#05080e;
  --bg-2:#070b13;
  --surface:#0f1722;
  --surface-2:#0b121c;
  --surface-3:#131e2b;
  --border:rgba(120,165,205,0.13);
  --border-strong:rgba(120,165,205,0.28);
  --text:#e9f0f8;
  --muted:#8ba1ba;
  --muted-2:#5e7d99;
  --faint:#3f5066;
  --cyan:#34e0d4;
  --cyan-dim:#1f9a93;
  --violet:#a78bfa;
  --violet-dim:#7c5fd6;
  --amber:#f6b85c;
  --coral:#ff6b6b;
  --green:#5dd39e;
  --blue:#6db3f2;
  --glow-cyan:0 0 22px rgba(52,224,212,0.45);
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --disp:'Syne',var(--sans);
  /* Per-depth accent. Use to color a level: style="--depth:var(--violet)" */
  --depth-1:var(--cyan);
  --depth-2:#5ec8e0;
  --depth-3:var(--violet);
  --depth-4:var(--amber);
  --depth-5:var(--coral);
}

/* ---------- 2. RESET & BASE ------------------------------------------------ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- 3. ATMOSPHERE -------------------------------------------------- */
.bg-fx{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(1200px 700px at 78% -8%, rgba(52,224,212,0.10), transparent 60%),
  radial-gradient(1000px 800px at 12% 8%, rgba(124,95,214,0.10), transparent 55%),
  linear-gradient(180deg,#081320 0%, #060a12 38%, #04060c 70%, #020308 100%);}
.grain{position:fixed;inset:0;z-index:-1;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.spore{position:fixed;border-radius:50%;background:var(--cyan);filter:blur(1px);
  box-shadow:var(--glow-cyan);opacity:.0;z-index:-1;animation:rise linear infinite;pointer-events:none;}
@keyframes rise{0%{transform:translateY(20vh) scale(.6);opacity:0}
  10%{opacity:.5}90%{opacity:.35}100%{transform:translateY(-110vh) scale(1);opacity:0}}

/* ---------- 4. LAYOUT ------------------------------------------------------ */
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
section{position:relative;padding:74px 0;border-top:1px solid var(--border)}
section:first-of-type{border-top:none}

/* ---------- 5. DEPTH GAUGE & PROGRESS -------------------------------------- */
.gauge{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:0;align-items:center}
.gauge .line{position:absolute;top:14px;bottom:14px;width:2px;left:50%;
  transform:translateX(-50%);background:linear-gradient(var(--cyan-dim),var(--violet-dim));opacity:.4}
.gauge a{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  margin:11px 0;border-radius:50%;background:var(--surface);border:1px solid var(--border-strong);
  color:var(--muted);font:600 12px/1 var(--mono);text-decoration:none;transition:.25s;z-index:1}
.gauge a:hover{color:var(--text);border-color:var(--cyan);transform:scale(1.12)}
.gauge a.on{background:var(--cyan);color:#04201e;border-color:var(--cyan);box-shadow:var(--glow-cyan)}
.gauge .lbl{position:absolute;left:42px;white-space:nowrap;font:600 11px/1 var(--mono);
  color:var(--cyan);opacity:0;transform:translateX(-6px);transition:.25s;pointer-events:none;letter-spacing:.04em}
.gauge a:hover .lbl{opacity:1;transform:translateX(0)}
@media(max-width:1180px){.gauge{display:none}}

.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:50;
  background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:var(--glow-cyan)}

/* ---------- 6. HERO -------------------------------------------------------- */
.hero{padding:86px 0 64px;text-align:left}
.eyebrow{font:600 13px/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--cyan);
  display:inline-flex;align-items:center;gap:10px;margin-bottom:26px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--cyan);opacity:.6}
h1.title{font-family:var(--disp);font-weight:800;font-size:clamp(42px,7.4vw,86px);line-height:.98;
  letter-spacing:-.02em;margin-bottom:24px}
h1.title .gl{background:linear-gradient(120deg,var(--cyan),var(--violet) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(17px,2.1vw,21px);color:var(--muted);max-width:640px;font-weight:400}
.lede b{color:var(--text);font-weight:600}
.depth-key{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}
.depth-key .chip{display:flex;align-items:center;gap:9px;padding:9px 15px;border-radius:40px;
  background:var(--surface);border:1px solid var(--border);font:500 13px/1 var(--sans);color:var(--muted)}
.depth-key .dot{width:9px;height:9px;border-radius:50%}
.scroll-hint{margin-top:46px;font:500 13px/1 var(--mono);color:var(--faint);letter-spacing:.05em;
  display:flex;align-items:center;gap:10px}
.scroll-hint .arr{animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---------- 7. LEVEL HEADERS ----------------------------------------------- */
.lvl-head{display:flex;align-items:flex-start;gap:20px;margin-bottom:30px}
.lvl-badge{flex:none;width:62px;height:62px;border-radius:16px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border-strong);
  font-family:var(--mono);position:relative;overflow:hidden}
.lvl-badge .lv{font-size:11px;color:var(--muted);letter-spacing:.1em}
.lvl-badge .num{font-size:26px;font-weight:700;color:var(--cyan);line-height:1}
.lvl-head .meta{flex:1}
.lvl-depth{font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;margin-bottom:9px}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(27px,3.6vw,40px);line-height:1.05;
  letter-spacing:-.01em}
.lvl-sub{color:var(--muted);margin-top:10px;font-size:16.5px;max-width:660px}
.stoppt{margin-top:14px;display:inline-block;font:500 12.5px/1.45 var(--sans);
  color:var(--cyan);background:rgba(52,224,212,.07);border:1px solid rgba(52,224,212,.22);
  padding:9px 15px;border-radius:14px;max-width:680px}

/* ---------- 8. PROSE ------------------------------------------------------- */
p.body{font-size:16.5px;color:#cdd9e6;margin:18px 0;max-width:720px}
p.body b{color:#fff}
.kw{font-family:var(--mono);font-size:.92em;color:var(--violet);background:rgba(167,139,250,.1);
  padding:1px 6px;border-radius:5px;border:1px solid rgba(167,139,250,.18)}
.term{color:var(--cyan);font-weight:600}

/* ---------- 9. NOTES / CALLOUTS -------------------------------------------- */
.note{border-radius:14px;padding:18px 20px;margin:22px 0;font-size:15.5px;display:flex;gap:14px;
  border:1px solid var(--border);background:var(--surface-2);max-width:760px}
.note .ic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700}
.note.idea{border-color:rgba(52,224,212,.3)}.note.idea .ic{background:rgba(52,224,212,.14);color:var(--cyan)}
.note.warn{border-color:rgba(246,184,92,.32)}.note.warn .ic{background:rgba(246,184,92,.14);color:var(--amber)}
.note.danger{border-color:rgba(255,107,107,.32)}.note.danger .ic{background:rgba(255,107,107,.14);color:var(--coral)}
.note h4{font-size:15px;margin-bottom:4px}
.note p{color:var(--muted);font-size:14.5px}
.note code{font-family:var(--mono);font-size:.88em;color:var(--cyan)}

/* ---------- 10. ANALOGY CARDS ---------------------------------------------- */
.analogy{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0;max-width:780px}
.acard{border-radius:16px;padding:22px;border:1px solid var(--border);position:relative;overflow:hidden}
.acard.bad{background:linear-gradient(180deg,rgba(255,107,107,.07),transparent)}
.acard.good{background:linear-gradient(180deg,rgba(93,211,158,.07),transparent)}
.acard .tag{font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.acard.bad .tag{color:var(--coral)}.acard.good .tag{color:var(--green)}
.acard h4{font-family:var(--disp);font-size:18px;margin-bottom:8px}
.acard p{font-size:14.5px;color:var(--muted)}
.acard .emoji{font-size:30px;margin-bottom:8px;display:block}
@media(max-width:680px){.analogy{grid-template-columns:1fr}}

/* ---------- 11. CODE BLOCKS ------------------------------------------------ */
.code{background:#070d16;border:1px solid var(--border);border-radius:13px;overflow:hidden;
  margin:22px 0;max-width:780px;font-family:var(--mono)}
.code .bar{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.015)}
.code .bar .d{width:11px;height:11px;border-radius:50%}
.code .bar .fn{margin-left:9px;font:500 12px/1 var(--mono);color:var(--muted)}
.code pre{padding:17px 18px;overflow-x:auto;font-size:13.5px;line-height:1.78}
.code-line{display:block;padding:0 8px;border-radius:5px;border-left:2px solid transparent;transition:.15s}
/* syntax-highlight token classes — apply by hand in markup */
.k{color:var(--violet)}      /* keyword */
.t{color:var(--cyan)}        /* type    */
.s{color:var(--amber)}       /* string  */
.c{color:#52677e;font-style:italic}  /* comment */
.m{color:var(--blue)}        /* method  */
.n{color:var(--green)}       /* number  */
.aw{color:var(--cyan);font-weight:700;text-shadow:0 0 9px rgba(52,224,212,.5)} /* highlight (e.g. await) */
.p{color:#9fb3c8}            /* punctuation */

/* ---------- 12. TABLES ----------------------------------------------------- */
.tbl{width:100%;border-collapse:collapse;margin:24px 0;max-width:820px;font-size:14.5px}
.tbl th,.tbl td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--border)}
.tbl th{font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);
  background:rgba(52,224,212,.04)}
.tbl td{color:#cdd9e6}.tbl td:first-child{color:#fff;font-weight:600}
.tbl tr:hover td{background:rgba(255,255,255,.015)}
.tbl code{font-family:var(--mono);font-size:.88em;color:var(--violet)}

/* ---------- 13. MYTH CARDS ------------------------------------------------- */
.myths{display:grid;grid-template-columns:1fr;gap:14px;margin:26px 0;max-width:820px}
.myth{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface-2)}
.myth .mh{display:flex;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);
  background:rgba(255,107,107,.05);font:500 15px/1.4 var(--sans);color:#ffc9c9;align-items:flex-start}
.myth .mh .x{font-weight:700;color:var(--coral)}
.myth .mb2{padding:14px 16px;font-size:14.8px;color:#cdd9e6;display:flex;gap:10px}
.myth .mb2 .ok{color:var(--green);font-weight:700;flex:none}
.myth .mb2 b{color:#fff}.myth .mb2 code{font-family:var(--mono);font-size:.88em;color:var(--cyan)}

/* ---------- 14. DEEPER PODS ------------------------------------------------ */
.deeper{border:1px solid var(--border-strong);border-radius:14px;margin:22px 0;max-width:820px;overflow:hidden;
  background:linear-gradient(180deg,rgba(124,95,214,.05),transparent)}
.deeper>summary{cursor:pointer;list-style:none;padding:17px 20px;display:flex;align-items:center;gap:12px;
  font:600 15px/1.3 var(--disp);color:#fff;user-select:none}
.deeper>summary::-webkit-details-marker{display:none}
.deeper>summary .chev{margin-left:auto;transition:.25s;color:var(--violet)}
.deeper[open]>summary .chev{transform:rotate(90deg)}
.deeper>summary .dlabel{font:600 10.5px/1 var(--mono);letter-spacing:.12em;color:var(--violet);
  background:rgba(124,95,214,.12);padding:5px 9px;border-radius:20px;text-transform:uppercase}
.deeper .dcontent{padding:4px 20px 20px}

/* ---------- 15. INTERACTIVE WIDGET CHROME ---------------------------------- */
/* Reusable shell for the "stepper" pattern: a code pane on the left, live state
   panels on the right, a narration strip, and playback controls. Each guide
   fills the panels with its own concept-specific content (keep that CSS inline). */
.btn{font:600 13px/1 var(--sans);padding:11px 17px;border-radius:9px;border:1px solid var(--border-strong);
  background:var(--surface);color:var(--text);cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:7px}
.btn:hover{border-color:var(--cyan);color:#fff;background:rgba(52,224,212,.06)}
.btn:disabled{opacity:.32;cursor:not-allowed}
.btn.primary{background:var(--cyan);color:#04201e;border-color:var(--cyan)}
.btn.primary:hover{box-shadow:var(--glow-cyan);color:#04201e}

.stepper{border:1px solid var(--border-strong);border-radius:18px;background:var(--surface-2);
  margin:32px 0;overflow:hidden;max-width:980px;box-shadow:0 26px 60px -30px rgba(0,0,0,.8)}
.stepper-top{display:flex;align-items:center;gap:13px;padding:15px 18px;border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,rgba(52,224,212,.06),transparent)}
.stepper-top .stitle{font-family:var(--disp);font-weight:700;font-size:16px}
.stepper-top .badge{margin-left:auto;font:600 11px/1 var(--mono);color:var(--cyan);
  background:rgba(52,224,212,.1);padding:6px 11px;border-radius:30px;border:1px solid rgba(52,224,212,.25)}
.stepper-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:0}
@media(max-width:840px){.stepper-grid{grid-template-columns:1fr}}
.sp-left{border-right:1px solid var(--border)}
@media(max-width:840px){.sp-left{border-right:none;border-bottom:1px solid var(--border)}}
.method-block{padding:14px 16px}
.method-block+.method-block{border-top:1px solid var(--border)}
.mb-name{font:500 11.5px/1 var(--mono);color:var(--muted-2,#5e7d99);margin-bottom:9px;letter-spacing:.03em}
.sp-code{font-family:var(--mono);font-size:12.6px;line-height:1.95}
.sp-code .cl{display:block;padding:2px 9px;border-radius:5px;border-left:2px solid transparent;color:#aebfd1;white-space:pre;transition:.18s}
.sp-code .cl.active{background:rgba(52,224,212,.12);border-left-color:var(--cyan);color:#fff}
.sp-code .cl.active.susp{background:rgba(246,184,92,.13);border-left-color:var(--amber)}
.sp-code .cl.active.res{background:rgba(93,211,158,.13);border-left-color:var(--green)}
.sp-code .cl.dim{opacity:.4}
.sp-right{padding:16px;display:flex;flex-direction:column;gap:14px;background:var(--surface-3)}
.panel{border:1px solid var(--border);border-radius:11px;background:rgba(7,13,22,.6);overflow:hidden}
.panel .ph{font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding:9px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px}
.panel .pbody{padding:11px 12px;min-height:34px}
/* shared stepper-panel bits: the pending/in-flight/done task list, used by more
   than one guide's stepper. Per-guide panel internals still stay inline. */
.tasks{display:flex;flex-direction:column;gap:6px}
.task{display:flex;align-items:center;gap:8px;font:500 11.5px/1 var(--mono);color:var(--muted)}
.task .ts{font-size:10px;padding:3px 8px;border-radius:20px;margin-left:auto}
.ts.pending{background:rgba(246,184,92,.13);color:var(--amber)}
.ts.flight{background:rgba(167,139,250,.14);color:var(--violet)}
.ts.done{background:rgba(93,211,158,.14);color:var(--green)}
.sp-narr{padding:15px 18px;border-top:1px solid var(--border);background:rgba(7,13,22,.4);
  display:flex;gap:13px;align-items:flex-start;min-height:78px}
.sp-narr .stepn{flex:none;width:30px;height:30px;border-radius:8px;background:var(--surface);
  border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;
  font:700 13px/1 var(--mono);color:var(--cyan)}
.sp-narr .ntext{font-size:14.2px;color:#d6e2ee}
.sp-narr .ntext b{color:#fff}
.sp-narr .ntext .hl{color:var(--cyan);font-weight:600}
.sp-narr .ntext .hlw{color:var(--amber);font-weight:600}
.sp-ctrl{display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid var(--border)}
.sp-ctrl .track{flex:1;height:5px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden;position:relative}
.sp-ctrl .track .fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--cyan),var(--violet));
  width:0;transition:width .3s;box-shadow:var(--glow-cyan)}
.sp-ctrl .ctr{font:600 12px/1 var(--mono);color:var(--muted);min-width:48px;text-align:right}

/* segmented control + toggle switch — generic interactive inputs */
.seg{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.seg button{font:500 13px/1 var(--sans);padding:10px 14px;background:transparent;border:none;
  color:var(--muted);cursor:pointer;transition:.18s;border-right:1px solid var(--border)}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--violet);color:#fff}
.seg button:hover:not(.on){color:#fff;background:rgba(255,255,255,.04)}
.toggle{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);cursor:pointer;font:500 13px/1 var(--mono);color:var(--muted);user-select:none}
.toggle.on{border-color:var(--cyan);color:#fff;background:rgba(52,224,212,.07)}
.toggle .sw{width:34px;height:19px;border-radius:20px;background:#26323f;position:relative;transition:.2s;flex:none}
.toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#7f93a8;transition:.2s}
.toggle.on .sw{background:var(--cyan)}.toggle.on .sw::after{left:17px;background:#04201e}

/* option card — a pickable choice button shared by the decision/classifier widgets.
   Recolor the selected state per widget by setting --opt-accent (default amber); the
   selected-description tint derives from it. Inner layout (.oc-ic/.oc-t/.oc-d) is the
   standard icon+title+desc; a widget with a different inner shape keeps its own. */
.opt-card{text-align:left;padding:13px 14px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface);color:var(--muted);cursor:pointer;transition:.18s;font-family:var(--sans)}
.opt-card:hover{border-color:var(--border-strong);color:#fff;background:rgba(255,255,255,.03)}
.opt-card.on{border-color:var(--opt-accent,var(--amber));
  background:color-mix(in srgb,var(--opt-accent,var(--amber)) 9%,transparent);color:#fff}
.opt-card .oc-ic{font-size:20px;display:block;margin-bottom:7px}
.opt-card .oc-t{font:600 13.5px/1.25 var(--sans);display:block;margin-bottom:3px}
.opt-card .oc-d{font:400 11.5px/1.35 var(--sans);color:var(--muted);display:block}
.opt-card.on .oc-d{color:color-mix(in srgb,var(--opt-accent,var(--amber)) 35%,#e9f0f8)}

/* ---------- 16. GUIDE CARDS (home-page index) ------------------------------ */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin:8px 0 0}
.guide-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:18px;
  background:var(--surface-2);overflow:hidden;text-decoration:none;color:inherit;position:relative;
  transition:.22s;min-height:228px}
.guide-card::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:.22s;
  background:radial-gradient(420px 220px at 80% -20%,rgba(52,224,212,.10),transparent 60%)}
.guide-card:hover{border-color:var(--border-strong);transform:translateY(-3px);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.85)}
.guide-card:hover::before{opacity:1}
.guide-card.soon{cursor:default;opacity:.62}
.guide-card.soon:hover{transform:none;box-shadow:none;border-color:var(--border)}
.guide-card .gc-top{position:relative;z-index:1;padding:22px 22px 0;display:flex;align-items:center;gap:10px}
.guide-card .gc-lang{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.guide-card .gc-soon{margin-left:auto;font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--violet);background:rgba(167,139,250,.12);padding:5px 9px;border-radius:20px}
.guide-card .gc-body{position:relative;z-index:1;padding:14px 22px 22px;display:flex;flex-direction:column;flex:1}
.guide-card h3{font-family:var(--disp);font-weight:700;font-size:23px;line-height:1.08;letter-spacing:-.01em}
.guide-card .gc-desc{color:var(--muted);font-size:14.5px;margin-top:10px;flex:1}
.guide-card .gc-foot{display:flex;align-items:center;gap:8px;margin-top:18px;font:500 12px/1 var(--mono);color:var(--muted-2)}
.guide-card .gc-dots{display:flex;gap:5px}
.guide-card .gc-dots i{width:8px;height:8px;border-radius:50%;display:block}
.guide-card .gc-go{margin-left:auto;color:var(--cyan);transition:.22s}
.guide-card:hover .gc-go{transform:translateX(3px)}

/* ---------- 17. FOOTER / RECAP --------------------------------------------- */
.foot{padding:60px 0 80px;text-align:center;border-top:1px solid var(--border)}
.foot .surfacing{font-family:var(--disp);font-weight:700;font-size:clamp(24px,3.4vw,34px);margin-bottom:14px}
.foot .gl{background:linear-gradient(120deg,var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.foot p{color:var(--muted);max-width:560px;margin:0 auto;font-size:15.5px}
.foot .copyright{margin-top:26px;font:500 12px/1 var(--mono);color:var(--muted-2);letter-spacing:.04em}
.recap{display:flex;flex-direction:column;gap:8px;max-width:560px;margin:30px auto 0;text-align:left}
.recap .ri{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:#cdd9e6;padding:11px 15px;
  border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.recap .ri .rn{flex:none;font:700 12px/1 var(--mono);color:var(--cyan);width:20px}

/* ---------- 18. MISC ------------------------------------------------------- */
::selection{background:rgba(52,224,212,.28);color:#fff}
::-webkit-scrollbar{height:9px;width:9px}::-webkit-scrollbar-thumb{background:#1d2a3a;border-radius:9px}

/* ---------- 19. THEME TOGGLE ----------------------------------------------- */
/* A floating reading-theme switch. The button itself is injected by
   design-system.js (initThemeToggle) so every page — present and future — gets
   it with no per-page markup. Suppress on a page with <body data-theme-toggle="off">.
   It styles itself from the tokens, so it recolors with whichever theme is active. */
.theme-toggle{position:fixed;top:16px;right:16px;z-index:60;display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:30px;border:1px solid var(--border-strong);background:var(--surface);
  color:var(--muted);font:600 12px/1 var(--mono);letter-spacing:.04em;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:.2s}
.theme-toggle:hover{color:var(--text);border-color:var(--cyan);background:rgba(52,224,212,.07)}
.theme-toggle .tt-ic{font-size:13px;line-height:1;display:inline-block}
@media(max-width:600px){.theme-toggle{padding:10px;top:12px;right:12px}.theme-toggle .tt-lbl{display:none}}

/* Smooth the swap between themes (no flash on load — see the head guard script). */
body{transition:background-color .35s ease,color .35s ease}

/* ---------- 20. SELECTION ACTION BAR ---------------------------------------- */
/* Select a passage in a guide and this bar floats over it. It hosts the Ask AI
   action — one click copies the passage wrapped in enough context (guide, depth
   level, nearest heading, deep link) to paste straight into an AI chat — and the
   annotation mark buttons (§22). Injected by design-system.js (initSelectionBar)
   on any page that has depth sections, so guides get it with no per-page markup.
   Suppress Ask AI with <body data-ask-ai="off">.

   --sb-t carries the placement offset so the entry animation can scale without
   clobbering it; .below flips the bar under the selection when there's no room
   above. Positioned in *page* coordinates, so it stays anchored while scrolling. */
.selbar{--sb-t:translate(-50%,calc(-100% - 10px));
  position:absolute;top:0;left:0;z-index:70;transform:var(--sb-t);
  display:inline-flex;align-items:stretch;gap:2px;padding:4px;border-radius:30px;
  border:1px solid var(--border-strong);background:var(--surface);
  white-space:nowrap;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 16px 34px -16px rgba(0,0,0,.9);
  transition:border-color .18s,background .18s;
  animation:sb-in .16s ease-out both}
.selbar.below{--sb-t:translate(-50%,10px)}
.selbar[hidden]{display:none}
.sb-btn{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:24px;
  border:none;background:transparent;color:var(--text);
  font:600 11.5px/1 var(--mono);letter-spacing:.05em;cursor:pointer;
  transition:color .18s,background .18s}
.sb-btn:hover{background:rgba(52,224,212,.09)}
.sb-ask .aa-ic{color:var(--cyan);font-size:12px;line-height:1}
.selbar.done{border-color:var(--green)}
.selbar.done .sb-ask{color:var(--green)}
.selbar.done .aa-ic{color:var(--green)}
.selbar.failed{border-color:var(--amber)}
.selbar.failed .sb-ask{color:var(--amber)}
.selbar.failed .aa-ic{color:var(--amber)}
@keyframes sb-in{from{opacity:0;transform:var(--sb-t) scale(.92)}to{opacity:1;transform:var(--sb-t) scale(1)}}
@media(prefers-reduced-motion:reduce){.selbar{animation:none}}

/* ---------- 21. READING THEME (data-theme="paper") ------------------------- */
/* A warm, low-glare "paper" theme for long reading sessions. The descent
   metaphor's atmosphere (deep-ocean gradient, glows, rising spores) is flattened
   here because it competes with text — readability wins in this mode. Almost
   everything recolors through the tokens below; the rules after them only patch
   the handful of places that hard-coded a dark-on-light value. */
[data-theme="paper"]{
  --bg:#f4ecdb;
  --bg-2:#efe6d2;
  --surface:#fbf6ec;
  --surface-2:#f8f1e4;
  --surface-3:#f0e7d4;
  --border:rgba(110,90,55,.20);
  --border-strong:rgba(110,90,55,.38);
  --text:#2f2820;
  --muted:#6e6048;
  --muted-2:#8a7a60;
  --faint:#aa9a80;
  --cyan:#0e7c72;
  --cyan-dim:#0b5f57;
  --violet:#6d28d9;
  --violet-dim:#5b21b6;
  --amber:#b06a12;
  --coral:#c14334;
  --green:#1f7a43;
  --blue:#1f5fd0;
  --glow-cyan:0 0 0 rgba(0,0,0,0);
  --depth-1:var(--cyan);
  --depth-2:#136b7d;
  --depth-3:var(--violet);
  --depth-4:var(--amber);
  --depth-5:var(--coral);
}
/* Atmosphere — flatten to warm paper, drop the particles */
[data-theme="paper"] .bg-fx{background:
  radial-gradient(1200px 700px at 78% -8%, rgba(190,150,90,.10), transparent 60%),
  radial-gradient(1000px 800px at 12% 8%, rgba(150,120,90,.08), transparent 55%),
  linear-gradient(180deg,#f6efe1 0%, #f2e8d6 60%, #efe3cf 100%);}
[data-theme="paper"] .grain{opacity:.035}
[data-theme="paper"] .spore{display:none}
/* Prose — bold reads as DARKER ink on light, not lighter */
[data-theme="paper"] p.body{color:#473d2c}
[data-theme="paper"] p.body b{color:#1f1810}
[data-theme="paper"] .note p{color:var(--muted)}
[data-theme="paper"] .note code{color:var(--cyan-dim)}
/* Code blocks — light parchment well + ink-readable syntax colors */
[data-theme="paper"] .code{background:#efe5d0}
[data-theme="paper"] .code .bar{background:rgba(0,0,0,.03)}
[data-theme="paper"] .code pre{color:#473d2c}
[data-theme="paper"] .k{color:#6d28d9}
[data-theme="paper"] .t{color:#0e7c72}
[data-theme="paper"] .s{color:#b06a12}
[data-theme="paper"] .c{color:#8a7d68}
[data-theme="paper"] .m{color:#1f5fd0}
[data-theme="paper"] .n{color:#1f7a43}
[data-theme="paper"] .aw{color:#0e7c72;text-shadow:none}
[data-theme="paper"] .p{color:#6b5d49}
/* Tables */
[data-theme="paper"] .tbl td{color:#473d2c}
[data-theme="paper"] .tbl td:first-child{color:#1f1810}
[data-theme="paper"] .tbl tr:hover td{background:rgba(0,0,0,.025)}
[data-theme="paper"] .tbl code{color:var(--violet)}
/* Myth cards */
[data-theme="paper"] .myth .mh{color:#8c2f27;background:rgba(193,67,52,.07)}
[data-theme="paper"] .myth .mb2{color:#473d2c}
[data-theme="paper"] .myth .mb2 b{color:#1f1810}
[data-theme="paper"] .myth .mb2 code{color:var(--cyan-dim)}
/* Stepper widget chrome */
[data-theme="paper"] .sp-code .cl{color:#473d2c}
[data-theme="paper"] .sp-code .cl.active{color:#1f1810}
[data-theme="paper"] .panel{background:rgba(0,0,0,.02)}
[data-theme="paper"] .sp-narr{background:rgba(0,0,0,.02)}
[data-theme="paper"] .sp-narr .ntext{color:#473d2c}
[data-theme="paper"] .sp-narr .ntext b{color:#1f1810}
[data-theme="paper"] .sp-ctrl .track{background:rgba(0,0,0,.07)}
[data-theme="paper"] .stepper{box-shadow:0 24px 50px -32px rgba(80,60,30,.45)}
[data-theme="paper"] .seg button:hover:not(.on){background:rgba(0,0,0,.04)}
[data-theme="paper"] .toggle .sw{background:#d9ccb4}
[data-theme="paper"] .toggle .sw::after{background:#fffaf0}
[data-theme="paper"] .toggle.on .sw::after{background:#fff}
/* option cards on paper: ink text, soft press, muted selected description */
[data-theme="paper"] .opt-card:hover{color:#1f1810;background:rgba(0,0,0,.03)}
[data-theme="paper"] .opt-card.on{color:#1f1810}
[data-theme="paper"] .opt-card.on .oc-d{color:var(--muted)}
/* Solid-fill controls need light text on their now-darker accent */
[data-theme="paper"] .btn.primary,
[data-theme="paper"] .btn.primary:hover,
[data-theme="paper"] .gauge a.on{color:#fff}
[data-theme="paper"] .stoppt{background:rgba(14,124,114,.08);border-color:rgba(14,124,114,.28)}
/* Shared chrome that hard-codes white text in its hover/active state — ink it on paper */
[data-theme="paper"] .deeper>summary{color:#1f1810}
[data-theme="paper"] .recap .ri{color:#473d2c}
[data-theme="paper"] .btn:hover{color:#1f1810}
[data-theme="paper"] .toggle.on{color:#1f1810}
[data-theme="paper"] .seg button:hover:not(.on){color:#1f1810;background:rgba(0,0,0,.04)}
/* Home-page guide cards — warm lift instead of a hard black shadow */
[data-theme="paper"] .guide-card:hover{box-shadow:0 24px 50px -34px rgba(80,60,30,.4)}
/* Toggle hover + selection + scrollbar in warm tones */
[data-theme="paper"] .theme-toggle:hover{background:rgba(14,124,114,.08)}
[data-theme="paper"] .selbar{box-shadow:0 16px 34px -18px rgba(80,60,30,.55)}
[data-theme="paper"] .sb-btn:hover{background:rgba(14,124,114,.08)}
[data-theme="paper"] ::selection{background:rgba(14,124,114,.22);color:#1f1810}
[data-theme="paper"] ::-webkit-scrollbar-thumb{background:#d3c3a4}

/* ---------- 22. ANNOTATIONS -------------------------------------------------- */
/* A private, per-reader annotation layer (design-system.js, initAnnotations):
   select a passage → mark it "important" or "revisit", or attach a note; click
   a highlight to edit it; review everything in the drawer. Stored ONLY in this
   browser's localStorage, keyed by page path — nothing is sent anywhere.
   Suppress with <body data-annotations="off">. Colors run through the theme
   tokens (color-mix), so the paper theme recolors everything but the few
   patches at the end. */

/* mark buttons in the selection bar (§20) */
.sb-marks{display:inline-flex;gap:2px}
.sb-marks[hidden]{display:none}
.sb-ask + .sb-marks{border-left:1px solid var(--border);margin-left:3px;padding-left:5px}
.sb-mark{padding:5px 9px}
.sb-sw{width:13px;height:13px;border-radius:4px;display:block}
.sb-sw.important{background:color-mix(in srgb,var(--cyan) 75%,transparent)}
.sb-sw.revisit{background:color-mix(in srgb,var(--amber) 75%,transparent)}
.sb-glyph{color:var(--violet);font-size:13px;line-height:1}

/* the highlights — reset <mark>'s yellow-on-black UA default first. Kept at
   class specificity so the kind rules below can override it. */
.dts-hl{background:transparent;color:inherit;cursor:pointer;padding:1px 0;
  border-bottom:2px solid transparent;transition:background .18s}
.dts-hl--important{background:color-mix(in srgb,var(--cyan) 16%,transparent);
  border-bottom-color:color-mix(in srgb,var(--cyan) 55%,transparent)}
.dts-hl--important:hover{background:color-mix(in srgb,var(--cyan) 28%,transparent)}
.dts-hl--revisit{background:color-mix(in srgb,var(--amber) 16%,transparent);
  border-bottom-color:color-mix(in srgb,var(--amber) 55%,transparent)}
.dts-hl--revisit:hover{background:color-mix(in srgb,var(--amber) 28%,transparent)}
.dts-hl--comment{border-bottom:2px dotted var(--violet)}
.dts-hl--comment:hover{background:color-mix(in srgb,var(--violet) 12%,transparent)}
.dts-hl[data-tail].has-note::after{content:"✎";font-size:.7em;color:var(--violet);
  vertical-align:super;margin-left:2px}
.dts-hl.flash{animation:hl-flash 1.4s ease-out 1}
@keyframes hl-flash{0%{box-shadow:0 0 0 6px color-mix(in srgb,var(--cyan) 35%,transparent)}
  100%{box-shadow:0 0 0 6px transparent}}

/* popover — change kind, edit the note, ask AI, remove */
.dts-pop{position:absolute;z-index:75;width:min(300px,calc(100vw - 24px));
  background:var(--surface);border:1px solid var(--border-strong);border-radius:14px;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.85);padding:12px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:pv-in .16s ease-out}
.dts-pop[hidden]{display:none}
@keyframes pv-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pv-kinds{display:flex;gap:6px;margin-bottom:10px}
.pv-kind{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 6px;border-radius:8px;border:1px solid var(--border);background:transparent;
  color:var(--muted);font:600 10.5px/1 var(--mono);letter-spacing:.04em;cursor:pointer;transition:.18s}
.pv-kind:hover{color:var(--text);border-color:var(--border-strong)}
.pv-kind.on{color:var(--text);border-color:var(--border-strong);background:rgba(255,255,255,.05)}
.pv-note{width:100%;resize:vertical;min-height:56px;border-radius:9px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font:400 13px/1.5 var(--sans);padding:9px 10px}
.pv-note:focus{outline:none;border-color:var(--cyan)}
.pv-note::placeholder{color:var(--faint)}
.pv-acts{display:flex;gap:8px;margin-top:10px}
.pv-act{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:8px;
  border:1px solid var(--border);background:transparent;color:var(--muted);
  font:600 11px/1 var(--mono);letter-spacing:.04em;cursor:pointer;transition:.18s}
.pv-act:hover{color:var(--text);border-color:var(--border-strong)}
.pv-del{margin-left:auto}
.pv-del:hover{color:var(--coral);border-color:rgba(255,107,107,.4)}

/* floating drawer button — appears once the page has any annotations */
.dts-fab{position:fixed;bottom:18px;right:18px;z-index:60;display:inline-flex;align-items:center;gap:7px;
  padding:10px 14px;border-radius:30px;border:1px solid var(--border-strong);background:var(--surface);
  color:var(--muted);font:600 12px/1 var(--mono);cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:.2s}
.dts-fab:hover{color:var(--text);border-color:var(--violet)}
.dts-fab .fab-ic{color:var(--violet);font-size:13px;line-height:1}
.dts-fab[hidden]{display:none}

/* the drawer itself */
.dts-drawer{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(400px,94vw);
  background:var(--bg-2);border-left:1px solid var(--border-strong);
  box-shadow:-30px 0 60px -30px rgba(0,0,0,.8);display:flex;flex-direction:column;
  animation:dw-in .22s ease-out}
.dts-drawer[hidden]{display:none}
@keyframes dw-in{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.dw-head{display:flex;align-items:center;gap:9px;padding:16px 18px;border-bottom:1px solid var(--border)}
.dw-title{font:700 14px/1 var(--disp);letter-spacing:.02em;color:var(--text)}
.dw-count{font:600 11px/1 var(--mono);color:var(--cyan);background:rgba(52,224,212,.1);
  padding:4px 8px;border-radius:20px}
.dw-headacts{margin-left:auto;display:inline-flex;gap:6px}
.dw-act{display:inline-flex;align-items:center;padding:6px 9px;border-radius:8px;
  border:1px solid var(--border);background:transparent;color:var(--muted);
  font:600 11px/1 var(--mono);letter-spacing:.04em;cursor:pointer;transition:.18s}
.dw-act:hover{color:var(--text);border-color:var(--border-strong)}
.dw-list{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.dw-item{border:1px solid var(--border);border-radius:12px;padding:11px 12px;background:var(--surface-2);
  cursor:pointer;transition:.18s}
.dw-item:hover{border-color:var(--border-strong)}
.dw-item.orphan{cursor:default;opacity:.75;border-style:dashed}
.dw-top{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.dw-top .sb-sw{width:10px;height:10px;border-radius:3px}
.dw-top .sb-glyph{font-size:12px}
.dw-sec{font:600 10px/1 var(--mono);color:var(--muted);border:1px solid var(--border);
  padding:3px 6px;border-radius:20px;letter-spacing:.08em}
.dw-flag{font:600 10px/1 var(--mono);color:var(--amber);letter-spacing:.06em}
.dw-acts{margin-left:auto;display:inline-flex;gap:5px}
.dw-quote{font:400 13px/1.5 var(--sans);color:var(--muted);display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dw-note{margin-top:6px;font:400 12.5px/1.5 var(--sans);color:var(--text);
  border-left:2px solid var(--violet);padding-left:8px;white-space:pre-wrap}
/* cross-guide index: the page/all scope switch and per-guide group headers */
.dw-scope{margin:12px 14px 0;flex:none}
.dw-scope[hidden]{display:none}
.dw-scope button{flex:1;font:600 11px/1 var(--mono);letter-spacing:.04em;padding:8px 10px}
.dw-group{font:700 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-2);margin:8px 2px 0;padding-top:8px}
.dw-list .dw-group:first-child{margin-top:0;padding-top:0}
.dw-tools{display:flex;gap:6px;padding:10px 14px 0;border-top:1px solid var(--border)}
.dw-hint{padding:8px 18px 12px;
  font:500 10.5px/1.4 var(--mono);color:var(--faint);letter-spacing:.04em}
@media(prefers-reduced-motion:reduce){.dts-pop,.dts-drawer{animation:none}}

/* paper-theme patches — the few hard-coded darks above */
[data-theme="paper"] .dts-pop{box-shadow:0 24px 50px -24px rgba(80,60,30,.5)}
[data-theme="paper"] .pv-kind.on{background:rgba(0,0,0,.05)}
[data-theme="paper"] .dts-drawer{box-shadow:-24px 0 50px -32px rgba(80,60,30,.45)}