/* ═══════════ The Ascent — lesson decks (learn/<slug>.html) ═══════════
   GENERATED: learn/deck.css is concatenated from tools/deck/css/*.css by
   tools/build-curriculum.mjs. Edit the modules, never learn/deck.css.

   Grammar (borrowed from a well-made training deck): one idea per screen;
   every screen keeps the same frame — crumb, kicker, a title whose *one*
   accent phrase carries the level hue, a body that is mostly an interface
   or a diagram, a quiet footer with the page count. All sizes inside a slide
   are em-based off --fs, so a screen scales as one picture. */

@font-face{font-family:'Aboreto';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/aboreto-normal-400.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-normal-400.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-italic-400.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url(/fonts/dm-sans-variable.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-normal-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-normal-500.woff2) format('woff2')}

:root{
  --topH:48px;
  /* one size drives a whole slide; everything inside is em. Like the deck's 16:9 stage:
     the design fits a 16:9 box, so the size is bounded by width AND height. */
  /* …and the stage never grows past an A4 landscape page (297×210mm ≈ 1123×794 CSS px):
     on big screens the slide is a centred A4 page, not a billboard */
  --page-w:1123px; --page-h:794px;
  --fs:clamp(14px, min(1.4vw, 2.45vh), 16px);
  --serif:'Instrument Serif',Georgia,serif; --sans:'DM Sans',-apple-system,system-ui,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace; --brand:'Aboreto','Copperplate',serif;

  /* surfaces — warm cream paper, espresso ink */
  --page:#ece3d9; --slide:#fbf8f4; --card:#f4ede5; --card-2:#ece2d7; --card-line:#e2d4c6;
  --ink:#2a1a12; --ink-2:#5a4136; --ink-3:#86695c; --rule:#e5d9ce;
  --good:#2b7a45; --warn:#975600; --bad:#b0331a;
  --glow-1:rgba(230,74,25,.075); --glow-2:rgba(194,138,44,.09);
  --shadow:0 1px 2px rgba(43,20,8,.08); --shadow-md:0 3px 10px rgba(43,20,8,.09),0 1px 2px rgba(43,20,8,.06);
  --pane-shadow:0 1.1em 2.4em -1.1em rgba(43,20,8,.48),0 .12em .45em rgba(43,20,8,.08);

  /* dark panes stay dark in both themes — they depict apps, editors, terminals */
  --code-bg:#1a0f08; --code-bar:#24160d; --code-line:#3b2717; --code-text:#ecdccf; --code-muted:#ab8f7d; --code-ln:#634633;
  --syn-h:#ffb38f; --syn-k:#9ad8a0; --syn-s:#f4c98e; --syn-a:#8fd0ff; --syn-c:#927665; --syn-n:#f7b26a; --syn-p:#d6a8ff;
  --claude:#d97757;

  /* the level hue: --lv decorative fill · --lv-ink text-safe on the slide · --lv-on text on a --lv fill
     --btn/--btn-on: filled buttons (AA for small text in both themes) */
  --lv:#e64a19; --lv-ink:#b5360c; --lv-on:#fff; --btn:#b5360c; --btn-on:#fff;

  /* hero / closing bookends — identical in both themes (night over the tower) */
  --hero-ink:#fff; --hero-ink-2:rgba(255,238,226,.84); --hero-ink-3:rgba(255,238,226,.6);
  --hero-gold:#ffcf96;
}
html[data-lv="foundations"]{--lv:#c28a2c;--lv-ink:#835409;--lv-on:#1f1300;--btn:#835409}
html[data-lv="ask"]{--lv:#e64a19;--lv-ink:#b5360c;--lv-on:#fff;--btn:#b5360c}
html[data-lv="connect"]{--lv:#d0436e;--lv-ink:#a3284f;--lv-on:#fff;--btn:#a3284f}
html[data-lv="delegate"]{--lv:#9a4fc9;--lv-ink:#7533a3;--lv-on:#fff;--btn:#7533a3}
html[data-lv="ide"]{--lv:#159a8a;--lv-ink:#0a6a5f;--lv-on:#fff;--btn:#0a6a5f}
html[data-lv="orchestrate"]{--lv:#5258d6;--lv-ink:#3c42b4;--lv-on:#fff;--btn:#3c42b4}

html[data-theme="dark"]{
  --page:#080503; --slide:#140d09; --card:#1e1510; --card-2:#271c15; --card-line:#3a2a1f;
  --ink:#f5ece5; --ink-2:#d6c4b7; --ink-3:#a88f80; --rule:#30231a;
  --good:#71d39b; --warn:#f0b35c; --bad:#ff9d86;
  --glow-1:rgba(230,74,25,.11); --glow-2:rgba(194,138,44,.06);
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 3px 10px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3);
  --pane-shadow:0 1.1em 2.4em -1.1em rgba(0,0,0,.8),0 .12em .45em rgba(0,0,0,.35);
  --code-bg:#0f0905; --code-bar:#1a100a;
  --btn-on:#170c06;
}
html[data-theme="dark"][data-lv="foundations"]{--lv:#d69d3a;--lv-ink:#ecbc68;--btn:#ecbc68}
html[data-theme="dark"][data-lv="ask"]{--lv:#f0602e;--lv-ink:#ff9468;--lv-on:#fff;--btn:#ff9468}
html[data-theme="dark"][data-lv="connect"]{--lv:#e05a85;--lv-ink:#f589ab;--lv-on:#fff;--btn:#f589ab}
html[data-theme="dark"][data-lv="delegate"]{--lv:#a865d8;--lv-ink:#cfa2f2;--lv-on:#fff;--btn:#cfa2f2}
html[data-theme="dark"][data-lv="ide"]{--lv:#1fb3a0;--lv-ink:#5fdcca;--lv-on:#04201c;--btn:#5fdcca}
html[data-theme="dark"][data-lv="orchestrate"]{--lv:#6a70e8;--lv-ink:#a9adff;--lv-on:#fff;--btn:#a9adff}

/* status tints derived from the tokens (work in both themes) */
:root{
  --lv-soft:color-mix(in srgb,var(--lv) 11%,var(--slide));
  --lv-line:color-mix(in srgb,var(--lv) 32%,transparent);
  --lv-hover:color-mix(in srgb,var(--lv) 19%,var(--slide));
  --good-bg:color-mix(in srgb,var(--good) 13%,var(--slide)); --good-line:color-mix(in srgb,var(--good) 45%,transparent);
  --bad-bg:color-mix(in srgb,var(--bad) 12%,var(--slide));   --bad-line:color-mix(in srgb,var(--bad) 45%,transparent);
  --warn-bg:color-mix(in srgb,var(--warn) 12%,var(--slide)); --warn-line:color-mix(in srgb,var(--warn) 40%,transparent);
}

/* legacy names the ported demo styles still use — mapped onto the deck tokens */
:root{
  --paper:var(--card); --bg:var(--slide); --ink-mid:var(--ink-2); --ink-light:var(--ink-3);
  --ink-faint:color-mix(in srgb,var(--ink-3) 60%,transparent); --rule-soft:var(--card-2);
  --accent:var(--lv); --accent-light:color-mix(in srgb,var(--lv) 70%,#fff); --accent-bg:var(--lv-soft);
  --accent-text:var(--lv-ink); --cta:var(--btn); --dark:#160c07; --dark-2:var(--code-bar);
}

/* categorical hues for diagrams (the six level hues): --cN fill · --cN-ink text-safe on the slide.
   Annotation hues --annN are for marks drawn ON dark panes (same order). */
:root{
  --c1:#c28a2c;--c1-ink:#835409; --c2:#e64a19;--c2-ink:#b5360c; --c3:#d0436e;--c3-ink:#a3284f;
  --c4:#9a4fc9;--c4-ink:#7533a3; --c5:#159a8a;--c5-ink:#0a6a5f; --c6:#5258d6;--c6-ink:#3c42b4;
  --ann1:#ffc27a;--ann2:#ff9e7a;--ann3:#ff9ec7;--ann4:#d6a8ff;--ann5:#7fe0dc;--ann6:#a9adff;
}
html[data-theme="dark"]{--c1-ink:#ecbc68;--c2-ink:#ff9468;--c3-ink:#f589ab;--c4-ink:#cfa2f2;--c5-ink:#5fdcca;--c6-ink:#a9adff}

/* ═══════════ Shell: page, top bar, progress, dot nav, the slide frame ═══════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--page);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
/* scroll-snap: one screen per stop on desktop; none on mobile (free scrolling), proximity on short desktop screens */
html.snap{scroll-snap-type:y mandatory}
@media (max-height:619px){html.snap{scroll-snap-type:y proximity}}
@media (max-width:899px){html.snap{scroll-snap-type:none}}
body{font-size:16px;line-height:1.5;font-variant-ligatures:none}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lv);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:60;background:var(--btn);color:var(--btn-on);padding:8px 14px;border-radius:8px;font-family:var(--mono);font-size:13px;text-decoration:none}
.skip:focus{top:60px}

/* ── top bar (dark in both themes) ── */
.cur-top{position:fixed;inset:0 0 auto 0;z-index:40;height:var(--topH);display:flex;align-items:center;gap:clamp(8px,1.6vw,18px);
  padding:0 clamp(10px,2.2vw,26px);background:rgba(20,11,6,.94);border-bottom:1px solid #2e1c11;color:#f3e6dc;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cur-home{display:flex;align-items:baseline;gap:7px;text-decoration:none;white-space:nowrap;flex:none}
.cur-home .brand{font-family:var(--brand);letter-spacing:.06em;font-size:15px;color:#fff}
.cur-home .sep{color:#7a5a48}
.cur-home .here{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#ffa27c}
.cur-ladder{display:flex;gap:3px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;justify-content:center}
.cur-ladder::-webkit-scrollbar{display:none}
.cur-ladder a{flex:none;display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-family:var(--mono);font-size:11px;white-space:nowrap;
  color:#cbae9f;border:1px solid transparent;border-radius:14px;padding:4px 10px;transition:background .15s,color .15s}
.cur-ladder a .dot{width:7px;height:7px;border-radius:50%;background:var(--c,#7a5a48);opacity:.55}
.cur-ladder a b{color:#ecdbd0;font-weight:500}
.cur-ladder a:hover{color:#fff;background:rgba(255,255,255,.07)}
.cur-ladder a.on{color:#fff;border-color:color-mix(in srgb,var(--c) 70%,transparent);background:color-mix(in srgb,var(--c) 22%,transparent)}
.cur-ladder a.on .dot,.cur-ladder a.done .dot{opacity:1;box-shadow:0 0 8px color-mix(in srgb,var(--c) 80%,transparent)}
.cur-ladder a.done::after{content:"✓";font-size:10px;color:var(--c)}
.top-acts{display:flex;align-items:center;gap:8px;flex:none}
.tbtn{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;cursor:pointer;color:#f3e6dc;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.tbtn:hover{background:rgba(255,255,255,.12)}
.tbtn .ic{width:17px;height:17px}
html[data-theme="dark"] .tbtn .i-moon,html:not([data-theme="dark"]) .tbtn .i-sun{display:none}

/* the climb, compact, inside the top bar (filled by lesson.js) */
.climb{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;white-space:nowrap}
.climb:empty{display:none}
.climb .as-rank{color:#170c06;background:var(--hero-gold);border-radius:10px;padding:3px 8px;letter-spacing:.06em;text-transform:uppercase;font-size:9.5px}
.climb .as-bar{width:70px;height:5px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden}
.climb .as-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--hero-gold),var(--lv));transition:width .5s ease}
.climb .as-floors{color:#d9c2b4}
.climb .as-next{color:#ffd2b8;text-decoration:none;border:1px solid rgba(255,210,184,.35);border-radius:10px;padding:3px 8px;text-transform:uppercase;letter-spacing:.05em}
.climb .as-next:hover{background:rgba(255,255,255,.08)}
.climb .as-next.summit{color:#9ad8a0;border-color:rgba(154,216,160,.4)}
@media (max-width:1180px){.climb .as-bar,.climb .as-floors{display:none}}
@media (max-width:760px){.cur-ladder{justify-content:flex-start}.cur-ladder a:not(.on){padding:4px 7px}.cur-ladder a:not(.on) .v{display:none}.climb .as-next{display:none}}
@media (max-width:520px){.cur-home .brand{font-size:13px}.cur-home .sep,.cur-home .here{display:none}.climb{display:none}}

/* page progress (under the top bar) */
.prog{position:fixed;left:0;top:var(--topH);height:3px;z-index:41;width:calc(var(--p,0) * 100%);
  background:linear-gradient(90deg,var(--lv),color-mix(in srgb,var(--lv) 35%,var(--hero-gold)));transition:width .4s ease;pointer-events:none}

/* vertical dot nav (right edge) */
.dnav{position:fixed;right:clamp(8px,1.2vw,18px);top:50%;transform:translateY(-50%);z-index:35;display:flex;flex-direction:column;align-items:center;gap:7px}
.dnav a{position:relative;display:block;width:8px;height:8px;border-radius:99px;background:var(--ink-3);opacity:.38;transition:height .3s ease,opacity .3s ease,background .3s ease}
.dnav a::before{content:"";position:absolute;inset:-5px -8px}
.dnav a:hover,.dnav a:focus-visible{opacity:.85}
.dnav a.on{height:24px;opacity:1;background:var(--lv)}
.dnav a.hero-on{background:#fff}
.dnav.on-hero a{background:#fff;opacity:.45}.dnav.on-hero a.on{background:var(--hero-gold);opacity:1}
.dnav a span{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--mono);font-size:11px;
  color:var(--ink);background:var(--slide);border:1px solid var(--card-line);border-radius:8px;padding:4px 9px;box-shadow:var(--shadow-md);
  opacity:0;pointer-events:none;transition:opacity .15s}
.dnav a:hover span,.dnav a:focus-visible span{opacity:1}
@media (max-width:760px){.dnav{display:none}}

/* ── the slide ── */
.deck{display:block}
.slide{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;scroll-snap-align:start;scroll-snap-stop:normal;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;font-size:var(--fs);line-height:1.45;
  padding:calc(var(--topH) + 1.05em) clamp(1.1em,5vw,3.6em) 1em;background:var(--slide);color:var(--ink);overflow:clip}
.slide::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(48em 32em at 104% -6%,var(--glow-1),transparent 62%),radial-gradient(42em 30em at -6% 108%,var(--glow-2),transparent 62%)}
.slide+.slide{border-top:1px solid var(--rule)}
.slide-head{display:flex;align-items:center;justify-content:space-between;gap:1em;font-size:.62em;color:var(--ink-3);padding-bottom:1em}
.crumb{display:flex;align-items:center;gap:.8em;font-family:var(--mono);min-width:0}
.crumb-deck{color:var(--ink-2);white-space:nowrap}
.crumb-tab{display:inline-flex;align-items:center;gap:.6em;padding:.34em .85em .34em .7em;border-radius:.55em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:color-mix(in srgb,var(--lv) 11%,transparent);color:var(--lv-ink);font-weight:500;border:1px solid color-mix(in srgb,var(--lv) 26%,transparent)}
.crumb-tab i{width:.62em;height:.62em;border-radius:50%;background:var(--lv);display:block;flex:none}
.slide-foot{display:flex;justify-content:space-between;align-items:center;gap:1em;font-size:.58em;color:var(--ink-3);padding-top:.9em;font-family:var(--mono)}
.slide-foot .pg{font-weight:500;letter-spacing:.04em}
.slide-foot .nextcue{display:inline-flex;align-items:center;gap:.45em;text-decoration:none;color:var(--ink-3);border:1px solid var(--card-line);border-radius:99px;padding:.3em .85em;transition:.15s}
.slide-foot .nextcue:hover{color:var(--lv-ink);border-color:var(--lv-line)}
.slide-foot .nextcue .ic{width:1.1em;height:1.1em}
.slide-body{min-height:0;display:flex;flex-direction:column;justify-content:flex-start;gap:1.05em;padding-top:.3em;max-width:88em;width:100%;margin:0 auto}
.slide.hero .slide-body,.slide.close .slide-body{justify-content:center;padding-top:0}

/* reveal-on-arrival (only hides when JS runs and motion is allowed) */
html.js .rv{opacity:0;transform:translateY(.75em);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(min(var(--i,0),12) * 70ms + 90ms)}
html.js .slide.in .rv{opacity:1;transform:none}
html.static *,html.static *::before,html.static *::after{transition:none!important;animation:none!important}
html.static .rv{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.prog,.climb .as-bar i{transition:none}}

/* level-up toast */
.levelup-banner{position:fixed;left:50%;top:calc(var(--topH) + 14px);transform:translateX(-50%);z-index:45;max-width:min(92vw,620px);
  padding:12px 18px;background:#160c07;color:var(--hero-gold);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  border-radius:12px;border:1px solid var(--lv);box-shadow:0 12px 32px rgba(0,0,0,.35);animation:lvlin .5s ease;transition:opacity .8s ease}
.levelup-banner.out{opacity:0}
@keyframes lvlin{from{transform:translate(-50%,-8px);opacity:0}to{transform:translateX(-50%);opacity:1}}
@media (prefers-reduced-motion:reduce){.levelup-banner{animation:none;transition:none}}

/* ── small screens: slides flow naturally, sizes stay readable ── */
@media (max-width:640px){
  :root{--fs:16px}
  .slide{padding:calc(var(--topH) + .9em) 1em .9em}
  .slide-head{font-size:.7em}
  .slide-foot{font-size:.68em}
}
/* phones: every rung shows just its number, so all six fit beside the brand */
@media (max-width:480px){.cur-ladder{gap:1px}.cur-ladder a,.cur-ladder a.on{padding:4px 6px;gap:4px}.cur-ladder a .v{display:none}}
/* the slide's one column may shrink below its content's min width (a long step strip or chip row
   must wrap or scroll inside its own box, never widen — and get clipped by — the slide) */
.slide{grid-template-columns:minmax(0,1fr)}
.slide-body>*{min-width:0}
/* the A4 page: head, body and foot share one centred column no wider than an A4 landscape page */
.slide-head,.slide-body,.slide-foot{width:100%;max-width:var(--page-w);margin-left:auto;margin-right:auto}
/* big screens: the slide becomes a literal A4 sheet on the desk — head at its top edge, page count at
   its foot. Bookends (hero/close) stay full-bleed night with the same centred page frame. */
@media (min-width:1200px) and (min-height:880px){
  .slide{--gap-y:calc((100svh - var(--topH) - var(--page-h)) / 2);--pad-in:2.4em;
    padding:calc(var(--topH) + var(--gap-y) + 1.4em) 0 calc(var(--gap-y) + 1.1em);background:var(--page)}
  .slide-head,.slide-body,.slide-foot{max-width:calc(var(--page-w) - 2 * var(--pad-in))}
  .slide::after{content:"";position:absolute;z-index:-1;left:50%;top:calc(var(--topH) + var(--gap-y));width:var(--page-w);height:var(--page-h);
    transform:translateX(-50%);background:var(--slide);border-radius:14px;border:1px solid var(--card-line);
    box-shadow:0 30px 70px -30px rgba(43,20,8,.35),0 2px 6px rgba(43,20,8,.06);pointer-events:none}
  html[data-theme="dark"] .slide::after{box-shadow:0 30px 70px -30px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.4)}
  .slide.hero::after,.slide.close::after{content:none}
  .slide.hero,.slide.close{padding-top:calc(var(--topH) + var(--gap-y) + 1.4em)}
  .slide+.slide{border-top:0}
}

/* ═══════════ Components: type, helpers, cards, tiles, chips, keys, callouts, panes ═══════════ */

/* ── type ── */
.kicker{display:inline-flex;align-items:center;gap:.7em;font-family:var(--mono);font-size:.66em;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--lv-ink)}
.kicker b{display:inline-grid;place-items:center;min-width:2.3em;height:1.75em;padding:0 .5em;border-radius:.5em;background:var(--lv);color:var(--lv-on);letter-spacing:.04em;font-weight:500}
.title{font-size:2.15em;font-weight:780;letter-spacing:-.028em;line-height:1.06;color:var(--ink);text-wrap:balance;max-width:24em}
.title em,.title i{font-style:normal;color:var(--lv-ink)}
.lead{font-size:1.06em;line-height:1.5;color:var(--ink-2);max-width:36em;text-wrap:pretty}
.lead b,.lead strong{color:var(--ink)}
.lead em{font-style:normal;color:var(--lv-ink);font-weight:600}
.serif{font-family:var(--serif);font-weight:400}
.muted{color:var(--ink-3)} .small{font-size:.84em} .micro{font-size:.7em} .mono{font-family:var(--mono)}
b,strong{font-weight:650}
.hl{color:var(--lv-ink);font-weight:650}
.slide code,.code-inline{font-family:var(--mono);font-size:.86em;padding:.06em .36em;border-radius:.35em;white-space:nowrap;
  background:color-mix(in srgb,var(--lv) 12%,transparent);color:var(--ink);border:1px solid color-mix(in srgb,var(--lv) 22%,transparent)}
.title-block{display:flex;flex-direction:column;gap:.55em}
.note{font-size:.7em;color:var(--ink-3);display:flex;align-items:center;gap:.5em;margin-top:.6em}
.note .ic{width:1.1em;height:1.1em}

/* ── layout helpers ── */
.split{display:grid;grid-template-columns:var(--l,1fr) var(--r,1.15fr);gap:var(--gap,2.6em);align-items:center;min-height:0}
.split.top{align-items:start}
.grid{display:grid;gap:var(--gap,.95em)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:var(--gap,.9em);min-width:0}
.row{display:flex;align-items:center;gap:var(--gap,.7em);flex-wrap:wrap}
.grow{flex:1 1 auto;min-width:0}
.sec-h{display:flex;align-items:center;gap:.9em;font-family:var(--mono);font-size:.62em;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sec-h::after{content:"";flex:1;height:1px;background:var(--rule)}
.sec-h .ic{width:1.3em;height:1.3em;color:var(--lv-ink)}

/* ── icon ── */
.ic{width:1.2em;height:1.2em;flex:none;display:inline-block;vertical-align:-.2em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic.claude{color:var(--claude);stroke-width:2.4}

/* ── cards ── */
.card{position:relative;background:var(--card);border:1px solid var(--card-line);border-radius:1em;padding:1em 1.15em;min-width:0}
.card h3,.h3{font-size:1em;font-weight:690;letter-spacing:-.012em;line-height:1.25;color:var(--ink)}
.card p,.card li{font-size:.84em;color:var(--ink-2);line-height:1.45;text-wrap:pretty}
.card h3+p{margin-top:.3em}
.card.tonal{background:var(--lv-soft);border-color:var(--lv-line)}
.card.filled{background:var(--btn);border-color:transparent;color:var(--btn-on)}
.card.filled h3{color:var(--btn-on)} .card.filled p{color:color-mix(in srgb,var(--btn-on) 84%,transparent)}
.card.ghost{background:transparent}
.card.lift{box-shadow:var(--pane-shadow)}
.card .tag{position:absolute;top:.9em;right:1em;font-family:var(--mono);font-size:.6em;letter-spacing:.06em;color:var(--lv-ink)}

/* icon tile + numbered dot */
.tile{display:grid;place-items:center;width:2.35em;height:2.35em;border-radius:.75em;flex:none;background:color-mix(in srgb,var(--lv) 15%,transparent);color:var(--lv-ink)}
.tile .ic{width:1.25em;height:1.25em}
.tile.solid{background:var(--lv);color:var(--lv-on)}
.num{display:inline-grid;place-items:center;flex:none;width:1.85em;height:1.85em;border-radius:50%;background:var(--lv);color:var(--lv-on);font-weight:600;font-size:.8em;font-family:var(--mono)}
.num.ring{background:transparent;color:var(--lv-ink);box-shadow:inset 0 0 0 .14em var(--lv)}

/* point list: tile/num + title + one line (the deck's left-column pattern) */
.points{display:flex;flex-direction:column;gap:1.05em;list-style:none}
.point{display:flex;gap:.9em;align-items:flex-start;min-width:0}
.point .num{margin-top:.12em}
.point h3{font-size:1em;font-weight:690;line-height:1.25;letter-spacing:-.01em}
.point p{font-size:.84em;color:var(--ink-2);line-height:1.42;margin-top:.15em;text-wrap:pretty}
.point p b{color:var(--ink)}
/* legend items light up their pin (and vice versa) — see [data-hl]/[data-hk] in lesson.js */
.point[data-hl]{border-radius:.7em;padding:.35em .5em;margin:-.35em -.5em;transition:background .15s;cursor:default}
.point[data-hl].hot{background:var(--lv-soft)}

/* chips */
.chip{display:inline-flex;align-items:center;gap:.4em;font-family:var(--mono);font-size:.66em;font-weight:400;line-height:1.2;
  padding:.32em .75em;border-radius:999px;white-space:nowrap;background:var(--card-2);color:var(--ink-2);border:1px solid var(--card-line);text-decoration:none}
.chip.lv{background:color-mix(in srgb,var(--lv) 13%,transparent);color:var(--lv-ink);border-color:color-mix(in srgb,var(--lv) 30%,transparent)}
.chip .ic{width:1.1em;height:1.1em}
a.chip:hover{border-color:var(--lv-line);color:var(--lv-ink)}

/* keycaps */
:root{--key-hi:#fff;--key-lo:#f3ece4;--key-edge:#d8c8ba;--key-skirt:#c4b2a2;--key-ink:#2a1a12;--key-drop:rgba(60,30,10,.16)}
html[data-theme="dark"]{--key-hi:#3a2c23;--key-lo:#2c211a;--key-edge:#4d3b2f;--key-skirt:#120b07;--key-ink:#f5ece5;--key-drop:rgba(0,0,0,.5)}
.keys{display:inline-flex;align-items:center;gap:.28em;white-space:nowrap}
.kbd{display:inline-block;min-width:1.9em;text-align:center;font-family:var(--sans);font-size:.78em;font-weight:650;line-height:1.2;
  padding:.28em .58em .3em;margin-bottom:.16em;border-radius:.45em;color:var(--key-ink);border:1px solid var(--key-edge);
  background:linear-gradient(180deg,var(--key-hi) 0%,var(--key-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 .16em 0 var(--key-skirt),0 .26em .42em -.1em var(--key-drop)}
.keys .then{font-size:.7em;color:var(--ink-3)}

/* bullet + tick lists */
.list{list-style:none;display:flex;flex-direction:column;gap:.55em}
.list>li{position:relative;padding-left:1.25em;line-height:1.42}
.list>li::before{content:"";position:absolute;left:.1em;top:.52em;width:.46em;height:.46em;border-radius:.14em;background:var(--lv)}
.list.ticks>li::before{width:.8em;height:.8em;top:.3em;left:0;border-radius:50%;background:var(--lv);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm5.2 7.9-6.1 6.6a1 1 0 0 1-1.5 0l-2.8-3a1 1 0 1 1 1.5-1.4l2 2.2 5.4-5.8a1 1 0 0 1 1.5 1.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm5.2 7.9-6.1 6.6a1 1 0 0 1-1.5 0l-2.8-3a1 1 0 1 1 1.5-1.4l2 2.2 5.4-5.8a1 1 0 0 1 1.5 1.4Z'/%3E%3C/svg%3E") center/contain no-repeat}

/* callouts (left accent bar) */
.callout{display:flex;gap:.75em;align-items:flex-start;padding:.8em 1.05em;border-radius:.85em;font-size:.84em;line-height:1.45;color:var(--ink-2);
  background:var(--lv-soft);border:1px solid color-mix(in srgb,var(--lv) 24%,transparent);border-left:.28em solid var(--lv)}
.callout b,.callout strong{color:var(--ink)}
.callout .ic{width:1.25em;height:1.25em;color:var(--lv-ink);margin-top:.08em}
.callout.warn{background:var(--warn-bg);border-color:var(--warn-line);border-left-color:var(--warn)}
.callout.warn .ic{color:var(--warn)}
.callout.good{background:var(--good-bg);border-color:var(--good-line);border-left-color:var(--good)}
.callout.good .ic{color:var(--good)}

/* buttons: copy / open-Claude / generic (deck pills) */
.tcopy,.topen,.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.66em;letter-spacing:.05em;text-transform:uppercase;
  border-radius:99px;padding:.75em 1.25em;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.tcopy,.btn.ghost{color:var(--lv-ink);background:var(--lv-soft);border:1px solid var(--lv-line)}
.tcopy:hover,.btn.ghost:hover{background:var(--lv-hover)}
.tcopy.done{color:var(--btn-on);background:var(--good);border-color:var(--good)}
.topen,.btn{color:var(--btn-on);background:var(--btn);border:1px solid var(--btn)}
.topen:hover,.btn:hover{filter:brightness(1.08)}
.tcopy .ic,.topen .ic,.btn .ic{width:1.25em;height:1.25em}
.tcopy.mini,.topen.mini{font-size:.58em;padding:.6em 1em}
.ctas{display:flex;gap:.6em;flex-wrap:wrap;align-items:center}

/* ── dark panes: app windows, editors, terminals (dark in both themes) ── */
.pane{position:relative;background:var(--code-bg);color:var(--code-text);border:1px solid var(--code-line);border-radius:.85em;overflow:hidden;box-shadow:var(--pane-shadow);min-width:0}
.pane-bar{display:flex;align-items:center;gap:.5em;height:2.4em;padding:0 .8em;font-size:.64em;background:var(--code-bar);border-bottom:1px solid var(--code-line);
  color:var(--code-muted);font-family:var(--mono);white-space:nowrap}
.pane-bar .tab{display:inline-flex;align-items:center;gap:.5em;height:100%;padding:0 1em;color:var(--code-muted)}
.pane-bar .tab.on{background:var(--code-bg);color:var(--code-text);box-shadow:inset 0 2px 0 var(--lv)}
.pane-bar .sp{flex:1}
.pane-bar .ic{width:1.15em;height:1.15em}
.dots3{display:inline-flex;gap:.45em;flex:none}.dots3 i{width:.8em;height:.8em;border-radius:50%;background:#4a3324;display:block}
.pane pre{font-family:var(--mono);font-size:.7em;line-height:1.62;padding:.95em 1.2em 1.05em;white-space:pre-wrap;word-break:break-word;tab-size:2;margin:0}
.pane pre.ln{padding-left:0;counter-reset:ln}
.pane pre.ln .l{display:block;padding-left:3.9em;position:relative;min-height:1lh}
.pane pre.ln .l::before{counter-increment:ln;content:counter(ln);position:absolute;left:0;width:2.7em;text-align:right;color:var(--code-ln)}
.pane pre .l.mark{background:linear-gradient(90deg,color-mix(in srgb,var(--lv) 24%,transparent),transparent 85%)}
/* syntax inside dark panes: .h heading · .k key · .s string · .n number · .a accent · .c comment · .w bright · .p prompt-symbol */
.pane .h{color:var(--syn-h);font-weight:700}.pane .k{color:var(--syn-k)}.pane .s{color:var(--syn-s)}.pane .n{color:var(--syn-n)}
.pane .a{color:var(--syn-a)}.pane .c{color:var(--syn-c);font-style:italic}.pane .w{color:#fff;font-weight:600}.pane .p{color:var(--syn-k)}
.pane .out{color:var(--code-muted)}
.pane .copy-btn{display:inline-flex;align-items:center;gap:.45em;font:inherit;color:var(--code-text);background:#2c1b10;border:1px solid #4a3021;border-radius:.5em;padding:.3em .8em;cursor:pointer}
.pane .copy-btn:hover{background:#3a2416}.pane .copy-btn.done{color:var(--syn-k);border-color:var(--syn-k)}
.caret{display:inline-block;width:.55em;height:1.1em;vertical-align:-.18em;background:var(--syn-k);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.caret{animation:none}}
.pane-foot{display:flex;align-items:center;gap:.6em;flex-wrap:wrap;padding:.7em .9em;border-top:1px solid var(--code-line);background:var(--code-bar)}
.pane .tcopy{color:#ffd9c2;background:#2c1b10;border-color:#4a3021}
.pane .tcopy:hover{background:#3a2416}
.pane .tcopy.done{color:#0d2a14;background:var(--syn-k);border-color:var(--syn-k)}
.pane .topen{color:#1a0f08;background:#ffb38f;border-color:#ffb38f}

/* pins — numbered markers placed over an interface (pair with a numbered legend) */
.pinwrap{position:relative}
.pin{position:absolute;z-index:3;transform:translate(-50%,-50%);display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;
  font-family:var(--mono);font-size:.78em;font-weight:500;background:var(--lv);color:var(--lv-on);
  box-shadow:0 0 0 .22em color-mix(in srgb,#fff 85%,transparent),0 .25em .8em rgba(0,0,0,.35);transition:transform .15s}
.pin.hot{transform:translate(-50%,-50%) scale(1.22)}
html[data-theme="dark"] .pin{box-shadow:0 0 0 .22em rgba(20,13,9,.9),0 .25em .8em rgba(0,0,0,.5)}

/* ── small screens ── */
@media (max-width:899px){
  .split{grid-template-columns:1fr;gap:1.6em}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .title{font-size:1.75em}
}
/* code inside a title reads as a filename, not a chip */
.title code,.hero-title code{font-size:.92em;font-weight:inherit;letter-spacing:-.02em;padding:0;border:0;background:none;color:inherit;white-space:normal}

/* ═══════════ Core visuals: prompt pane · code pane (optional explorer) · terminal ═══════════ */
.code-pane .cp-body{display:grid;grid-template-columns:1fr;min-height:0}
.code-pane.has-side .cp-body{grid-template-columns:minmax(9em,.42fr) 1fr}
.cp-side{border-right:1px solid var(--code-line);background:#140b06;padding:.8em .2em;font-size:.66em;display:flex;flex-direction:column;gap:.1em}
.cp-h{font-family:var(--mono);font-size:.86em;letter-spacing:.12em;color:var(--code-muted);padding:0 .9em .6em}
.cp-f{display:flex;align-items:center;gap:.55em;padding:.32em .9em .32em calc(.9em + var(--d,0) * 1.1em);color:#d8c2b2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-f .ic{width:1.1em;height:1.1em;color:#b08a73}
.cp-f.on{background:color-mix(in srgb,var(--lv) 28%,transparent);color:#fff;box-shadow:inset 2px 0 0 var(--lv)}
.cp-badge{font-family:var(--mono);font-size:.9em;letter-spacing:.06em;color:#ffd9c2;border:1px solid #5a3a26;border-radius:.4em;padding:.15em .55em}
.shell-pane pre{font-size:.72em;line-height:1.75}
.shell-pane .pane-bar{justify-content:flex-start}
.copyable .cprompt{max-height:22em;overflow:auto}
.vis{min-width:0}
.vis-missing{font-family:var(--mono);font-size:.7em;color:var(--bad);border:1px dashed var(--bad-line);border-radius:.6em;padding:1em}
@media (max-width:640px){.code-pane.has-side .cp-body{grid-template-columns:1fr}.cp-side{display:none}}

/* ═══════════ Slide layouts: hero · split · wide · points · steps · decider · capstone · close ═══════════ */

/* ── hero + close: night over the tower, lit by the level hue ── */
.slide.hero,.slide.close{color:var(--hero-ink);border-top:0;
  background:radial-gradient(60em 42em at 90% -4%,color-mix(in srgb,var(--lv) 46%,transparent),transparent 60%),
             radial-gradient(52em 38em at -4% 108%,rgba(255,186,110,.17),transparent 62%),
             linear-gradient(162deg,#110804 0%,#1e100a 52%,#2b160c 100%)}
.slide.hero::before,.slide.close::before{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:3.3em 3.3em;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 72% 38%,#000 10%,transparent 78%);mask-image:radial-gradient(ellipse 70% 80% at 72% 38%,#000 10%,transparent 78%)}
.slide.hero .slide-head,.slide.hero .slide-foot,.slide.close .slide-head,.slide.close .slide-foot{color:var(--hero-ink-3)}
.slide.hero .slide-foot .nextcue,.slide.close .slide-foot .nextcue{color:var(--hero-ink-2);border-color:rgba(255,255,255,.2)}
.crumb-hero{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--hero-ink-2)}
.hero-eyebrow{font-family:var(--mono);font-size:.72em;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--hero-gold)}
.hero-title{font-size:3.7em;font-weight:820;letter-spacing:-.036em;line-height:.98;color:#fff;text-wrap:balance}
.hero-title em,.grad{font-style:normal;background:linear-gradient(95deg,color-mix(in srgb,var(--lv) 52%,#fff) 0%,var(--hero-gold) 58%,#fff1e2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-family:var(--serif);font-size:1.5em;line-height:1.3;color:var(--hero-ink-2);max-width:20em;text-wrap:pretty}
.glass{background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.15);border-radius:1em;color:var(--hero-ink);
  -webkit-backdrop-filter:blur(.4em);backdrop-filter:blur(.4em)}
.slide.hero code,.slide.close code{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26)}
.slide.hero .kbd,.slide.close .kbd{--key-hi:rgba(255,255,255,.18);--key-lo:rgba(255,255,255,.08);--key-edge:rgba(255,255,255,.3);--key-skirt:rgba(255,255,255,.2);--key-ink:#fff;--key-drop:rgba(0,0,0,.3)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3em;align-items:center}
.hero-left{display:flex;flex-direction:column;gap:1.05em;min-width:0}
.the-line{display:flex;gap:.8em;align-items:flex-start;padding:.85em 1.05em;font-size:.86em;line-height:1.45;color:var(--hero-ink-2);max-width:32em}
.the-line .lbl{flex:none;font-family:var(--mono);font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--hero-gold);padding-top:.2em}
.the-line b{color:#fff}
.hero-meta{display:flex;gap:.5em;flex-wrap:wrap}
.hero-meta .chip{color:var(--hero-ink-2);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.hero-meta a.chip:hover{color:#fff;border-color:rgba(255,255,255,.4)}
/* agenda (right side of the hero): the stops of this lesson, clickable */
.agenda{display:flex;flex-direction:column;padding:.4em;gap:.15em}
.agenda-h{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.62em;letter-spacing:.14em;text-transform:uppercase;color:var(--hero-gold);padding:.9em 1em .5em}
.agenda a{display:grid;grid-template-columns:2.6em 1fr auto;gap:.8em;align-items:center;padding:.7em .9em;border-radius:.75em;text-decoration:none;color:var(--hero-ink);transition:background .15s}
.agenda a:hover,.agenda a:focus-visible{background:rgba(255,255,255,.08)}
.agenda .an{font-family:var(--mono);font-size:1.15em;font-weight:500;color:color-mix(in srgb,var(--lv) 55%,#fff)}
.agenda b{display:block;font-size:.92em;font-weight:650}
.agenda small{display:block;font-size:.76em;color:var(--hero-ink-3);line-height:1.35;margin-top:.1em}
.agenda .ic{width:1.1em;height:1.1em;color:var(--hero-ink-3)}
.hero-visual{min-width:0}

/* ── split + wide ── */
.s-split .split{flex:1 1 auto;align-items:center}
.s-split .split.top{align-items:start}
.split-l{display:flex;flex-direction:column;gap:1.05em;min-width:0}
.split-r{min-width:0;display:flex;flex-direction:column;gap:.6em}
.s-wide .wide-vis{min-width:0}
.s-wide .wide-points{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:1em;margin-top:.2em}
.s-wide .wide-points .point{background:var(--card);border:1px solid var(--card-line);border-radius:1em;padding:.85em 1em}

/* ── points: a grid of idea cards ── */
.cards-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:1em}
.cards-grid .card{display:flex;flex-direction:column;gap:.55em;padding:1.1em 1.2em}
.cards-grid .card .tile{margin-bottom:.15em}
.cards-grid .card .take{margin-top:auto;padding-top:.6em;border-top:1px dashed var(--card-line);font-size:.78em;color:var(--lv-ink);font-weight:600}

/* ── steps: the "do it now" runner as a deck timeline ── */
.dosteps{display:flex;flex-direction:column;gap:1.2em}
.tl{list-style:none;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:.9em;counter-reset:none}
.tl li{position:relative;min-width:0}
.tl li::after{content:"";position:absolute;top:1.02em;left:2.9em;right:-.5em;height:2px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--lv) 55%,transparent),color-mix(in srgb,var(--lv) 10%,transparent))}
.tl li:last-child::after{display:none}
.ds-dot{display:flex;flex-direction:column;align-items:flex-start;gap:.55em;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:0;color:var(--ink)}
.ds-dot .tl-n{display:grid;place-items:center;width:2.05em;height:2.05em;border-radius:50%;font-family:var(--mono);font-weight:500;font-size:.95em;
  background:var(--lv);color:var(--lv-on);box-shadow:0 0 0 .3em color-mix(in srgb,var(--lv) 18%,transparent);transition:box-shadow .2s}
.ds-dot .tl-n .ic{width:1.05em;height:1.05em;display:none;stroke-width:2.6}
.ds-dot .tl-t{font-size:.92em;font-weight:690;letter-spacing:-.01em;line-height:1.25}
.ds-dot .tl-w{font-size:.76em;color:var(--ink-2);line-height:1.4}
.ds-dot.done .tl-n{background:var(--good);color:#fff;box-shadow:0 0 0 .3em color-mix(in srgb,var(--good) 18%,transparent)}
.ds-dot.done .tl-n b{display:none}.ds-dot.done .tl-n .ic{display:block}
.ds-dot.now .tl-n{box-shadow:0 0 0 .3em color-mix(in srgb,var(--lv) 22%,transparent),0 0 0 .55em color-mix(in srgb,var(--lv) 12%,transparent)}
.ds-dot.now .tl-t{color:var(--lv-ink)}
.ds-dot:hover .tl-t{color:var(--lv-ink)}
.ds-list{list-style:none;display:flex;flex-direction:column;gap:1em}
.dstep{display:grid;grid-template-columns:.9fr 1.1fr;gap:1.6em;align-items:start;background:var(--card);border:1px solid var(--card-line);border-radius:1.1em;padding:1.15em 1.3em}
html.js .dosteps.on .dstep{display:none}
html.js .dosteps.on .dstep.cur{display:grid}
.ds-l{display:flex;flex-direction:column;gap:.7em;min-width:0}
.ds-n{font-family:var(--mono);font-size:.62em;letter-spacing:.14em;text-transform:uppercase;color:var(--lv-ink)}
.ds-h{font-size:1.3em;font-weight:760;letter-spacing:-.022em;line-height:1.15}
.ds-why{font-size:.9em;color:var(--ink-2);line-height:1.45}
.ds-see{display:flex;gap:.6em;align-items:flex-start;font-size:.82em;color:var(--ink-2);background:var(--good-bg);border:1px solid var(--good-line);border-radius:.75em;padding:.65em .85em}
.ds-see .ic{color:var(--good);margin-top:.08em}
.ds-see b{color:var(--ink)}
.ds-nav{display:none;gap:.5em;padding-top:.3em}
html.js .dosteps.on .ds-nav{display:flex}
.ds-nav button{display:inline-flex;align-items:center;gap:.4em;font-family:var(--mono);font-size:.6em;letter-spacing:.06em;text-transform:uppercase;
  background:transparent;border:1px solid var(--card-line);border-radius:99px;padding:.7em 1.1em;color:var(--ink-2);cursor:pointer}
.ds-nav button:hover:not(:disabled){border-color:var(--lv-line);color:var(--lv-ink)}
.ds-nav button:disabled{opacity:.35;cursor:default}
.ds-nav .ds-done{color:var(--btn-on);background:var(--btn);border-color:var(--btn)}
.ds-nav .ds-done.on{background:var(--good);border-color:var(--good);color:#fff}
.ds-l{grid-column:1;grid-row:1}
.ds-r{min-width:0;display:flex;flex-direction:column;gap:.6em;grid-column:2;grid-row:1 / span 2}
.ds-nav{grid-column:1;grid-row:2;align-self:end}
@media (max-width:899px){.ds-l,.ds-r,.ds-nav{grid-column:1;grid-row:auto}}
.ds-how{display:flex;gap:.75em;align-items:flex-start;background:var(--slide);border:1px dashed var(--card-line);border-radius:.85em;padding:.9em 1em;font-size:.88em;color:var(--ink-2);line-height:1.45}
.ds-how .ic{color:var(--lv-ink);width:1.3em;height:1.3em}
.ds-how b{color:var(--ink)}
.cprompt{font-family:var(--mono);font-size:.74em;line-height:1.6;white-space:pre-wrap;word-break:break-word;padding:1em 1.2em;margin:0;color:var(--code-text)}
.ds-sub{font-size:.78em;color:var(--ink-3)}

/* ── decider: pick the closest match (pure-CSS radios) ── */
.dchoices{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:1em;align-items:start}
.dchoice{position:relative;display:flex;flex-direction:column;gap:.7em}
.dradio{position:absolute;opacity:0;width:0;height:0}
.dlabel{display:flex;gap:.8em;align-items:flex-start;cursor:pointer;background:var(--card);border:1px solid var(--card-line);border-radius:1em;padding:1em 1.1em;
  font-size:.92em;line-height:1.4;color:var(--ink-2);min-height:5.4em;transition:border-color .15s,background .15s}
.dlabel .num{margin-top:.05em}
.dlabel:hover{border-color:var(--lv-line);background:var(--lv-soft)}
.dradio:checked+.dlabel{border-color:var(--lv);background:var(--lv-soft);color:var(--ink);box-shadow:0 0 0 .18em color-mix(in srgb,var(--lv) 22%,transparent)}
.dradio:focus-visible+.dlabel{outline:2px solid var(--lv);outline-offset:2px}
.dverdict{display:none;font-size:.86em;line-height:1.45;color:var(--ink);background:var(--slide);border:1px solid var(--card-line);border-left:.28em solid var(--lv);border-radius:.85em;padding:.8em 1em}
.dradio:checked~.dverdict{display:block}
.dgo{display:inline-flex;align-items:center;gap:.4em;margin-top:.6em;font-family:var(--mono);font-size:.72em;letter-spacing:.05em;text-transform:uppercase;
  color:var(--btn-on);background:var(--btn);border-radius:99px;padding:.55em 1em;text-decoration:none}
.dgo .ic{width:1.1em;height:1.1em}
.dhint{font-size:.74em;color:var(--ink-3)}

/* ── capstone: the whole level in one prompt ── */
.cap-how{list-style:none;display:flex;flex-direction:column;gap:.7em;counter-reset:cap}
.cap-how li{display:flex;gap:.75em;align-items:flex-start;font-size:.9em;color:var(--ink-2);line-height:1.45}
.cap-how li::before{counter-increment:cap;content:counter(cap);flex:none;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;
  font-family:var(--mono);font-size:.82em;background:var(--lv);color:var(--lv-on)}
.cap-how b{color:var(--ink)}
.practice .cprompt{max-height:20em;overflow:auto}

/* ── close: checklist + remember + the next rung ── */
.close-title{font-size:3.1em}
.close-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:1.6em;align-items:start}
.ck{padding:1.1em 1.25em;display:flex;flex-direction:column;gap:.2em}
.ck-h{display:flex;justify-content:space-between;align-items:center;gap:1em;font-family:var(--mono);font-size:.62em;letter-spacing:.14em;text-transform:uppercase;color:var(--hero-gold);padding-bottom:.6em}
.ck-h .sc-count{color:var(--hero-ink-2);letter-spacing:.04em}
.ck .sc-progress{height:.4em;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;margin-bottom:.5em}
.ck .sc-bar{height:100%;width:0;background:linear-gradient(90deg,var(--hero-gold),var(--lv));border-radius:99px;transition:width .3s ease}
.checklist{list-style:none;display:flex;flex-direction:column}
.checklist li{border-top:1px solid rgba(255,255,255,.08)}
.checklist label{display:grid;grid-template-columns:auto 1fr auto;gap:.85em;align-items:center;cursor:pointer;padding:.62em .2em;font-size:.88em;line-height:1.4;color:var(--hero-ink-2)}
.checklist input{appearance:none;-webkit-appearance:none;width:1.35em;height:1.35em;flex:none;border-radius:.4em;border:.12em solid color-mix(in srgb,var(--lv) 55%,#fff);
  background:transparent;display:grid;place-items:center;cursor:pointer;margin:0}
.checklist input::after{content:"";width:.7em;height:.7em;background:var(--hero-gold);opacity:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m4 12 5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m4 12 5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat}
.checklist input:checked{background:color-mix(in srgb,var(--lv) 40%,transparent);border-color:var(--hero-gold)}
.checklist input:checked::after{opacity:1}
.checklist input:focus-visible{outline:2px solid var(--hero-gold);outline-offset:2px}
.checklist label:has(input:checked) .ck-t{color:var(--hero-ink-3);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.checklist .ck-t b{color:#fff}
.ck-ref{font-family:var(--mono);font-size:.72em;color:var(--hero-ink-2);border:1px solid rgba(255,255,255,.18);border-radius:.4em;padding:.2em .5em;text-decoration:none}
.ck-ref:hover{color:#fff;border-color:rgba(255,255,255,.45)}
.sc-done{margin-top:.6em;padding:.8em 1em;background:rgba(154,216,160,.12);border:1px solid rgba(154,216,160,.4);border-radius:.8em;color:#d9f5df;font-weight:600;font-size:.86em}
.sc-done .sc-next{color:#fff;margin-left:.3em}
.remember{padding:1.1em 1.25em;display:flex;flex-direction:column;gap:.85em}
.remember-h{font-family:var(--mono);font-size:.62em;letter-spacing:.14em;text-transform:uppercase;color:var(--hero-gold)}
.rem{display:flex;gap:.85em;align-items:flex-start;font-size:.88em;line-height:1.4;color:var(--hero-ink-2)}
.rem .tile{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.14);width:2.1em;height:2.1em}
.rem b{color:#fff}
.levelup-line{font-family:var(--serif);font-size:1.15em;line-height:1.35;color:var(--hero-ink-2)}
.next-lesson{display:inline-flex;align-items:center;gap:.6em;align-self:flex-start;font-family:var(--mono);font-size:.7em;letter-spacing:.06em;text-transform:uppercase;
  color:#1a0f08;background:var(--hero-gold);border-radius:99px;padding:.85em 1.4em;text-decoration:none}
.next-lesson:hover{filter:brightness(1.06)}
.next-lesson .ic{width:1.2em;height:1.2em}
.close-links{display:flex;gap:.6em;flex-wrap:wrap;align-items:center}
.close-links .chip{color:var(--hero-ink-2);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}

/* ── responsive ── */
@media (max-width:1100px){.hero-title{font-size:3.1em}}
@media (max-width:899px){
  .hero-grid,.close-grid{grid-template-columns:1fr;gap:1.6em}
  .dstep{grid-template-columns:1fr}
  .tl{grid-template-columns:repeat(var(--n,4),minmax(4.2em,1fr));overflow-x:auto;padding-bottom:.4em;scrollbar-width:thin}
  .ds-dot .tl-w{display:none}
  .dchoices{grid-template-columns:1fr}
  .dlabel{min-height:0}
  .cards-grid{grid-template-columns:repeat(min(var(--cols,3),2),minmax(0,1fr))}
  .s-wide .wide-points{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero-title{font-size:2.4em}.close-title{font-size:2.1em}
  .hero-sub{font-size:1.2em}
  .cards-grid{grid-template-columns:1fr}
  .tl li::after{display:none}
  .ds-dot .tl-t{font-size:.78em}
}

/* title with a right-hand aside (the deck's "title left, one-line context right") */
.title-row{display:grid;grid-template-columns:1fr minmax(0,.8fr);gap:2.6em;align-items:end}
.title-row .lead.aside{font-size:.98em;padding-bottom:.2em}
@media (max-width:899px){.title-row{grid-template-columns:1fr;gap:.6em}}

/* short slides (decider, capstone, wide, points): rest them on the screen's centre line, and let the prompt use the height */
@media (min-width:900px){.slide.s-decider .slide-body,.slide.s-capstone .slide-body,.slide.s-wide .slide-body,.slide.s-points .slide-body{justify-content:safe center}}
.practice .cprompt{max-height:min(58vh,36em)}
@media (min-width:900px){.s-decider .dchoices{min-height:14em}}  /* reserve the verdict's room so the centred slide doesn't jump on pick */

/* ═══════════ Anatomy — one prompt, broken into labelled parts (visuals/anatomy.mjs) ═══════════
   A chat-input pane; each segment of the prompt carries a tinted box + underline in its hue,
   and a hooked connector down to its label. Dark pane (--annN) by default; .an-light on cream (--cN). */

.an-fig{margin:0;display:flex;flex-direction:column;gap:.8em;min-width:0}
.an-head{display:flex;align-items:center;gap:.75em;flex-wrap:wrap;min-width:0}
.an-head .chip .ic{width:1.05em;height:1.05em}
.an-title{font-size:1.06em;font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--ink)}
.an-title em{font-style:normal;color:var(--lv-ink)}
.an-tag{margin-left:auto}

/* hue slots: --ad on the dark pane · --al fill / --ali text on cream */
.an-h1{--ad:var(--ann1);--al:var(--c1);--ali:var(--c1-ink)}
.an-h2{--ad:var(--ann2);--al:var(--c2);--ali:var(--c2-ink)}
.an-h3{--ad:var(--ann3);--al:var(--c3);--ali:var(--c3-ink)}
.an-h4{--ad:var(--ann4);--al:var(--c4);--ali:var(--c4-ink)}
.an-h5{--ad:var(--ann5);--al:var(--c5);--ali:var(--c5-ink)}
.an-h6{--ad:var(--ann6);--al:var(--c6);--ali:var(--c6-ink)}
.an-seg{--a:var(--ad);--ai:var(--ad);--sub:var(--code-muted);--tx:var(--code-text)}
.an-light .an-seg{--a:var(--al);--ai:var(--ali);--sub:var(--ink-3);--tx:var(--ink)}

.an-segs{list-style:none;margin:0;display:flex;flex-wrap:wrap;align-items:flex-start;gap:1.35em .6em;padding:1.35em 1.45em 1.3em}
.an-seg{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:100%}
.an-txt{font-size:1.1em;line-height:1.3;color:var(--tx);letter-spacing:-.005em;text-wrap:pretty;
  padding:.1em .38em .14em;border-radius:.34em .34em .16em .16em;
  background:color-mix(in srgb,var(--a) 14%,transparent);box-shadow:inset 0 -.13em 0 var(--a);transition:background .15s}
.an-txt b{font-weight:650}
.an-txt em{font-style:normal;color:var(--a)}
.an-fig .an-txt code{font-family:var(--mono);font-size:.86em;font-weight:500;white-space:normal;word-break:break-word;
  padding:.04em .34em;border-radius:.3em;border:0;color:var(--tx);background:color-mix(in srgb,var(--a) 22%,transparent)}
.an-seg.hot .an-txt{background:color-mix(in srgb,var(--a) 30%,transparent)}

/* the label + its hook (an L from under the segment's left edge) */
.an-lab{position:relative;display:flex;align-items:center;flex-wrap:wrap;column-gap:.6em;row-gap:.1em;
  margin-top:.55em;padding-left:2.25em;font-family:var(--mono);font-size:.68em;line-height:1.3;color:var(--sub)}
.an-hook{position:absolute;left:.85em;top:-.82em;width:1em;height:1.47em;
  border-left:1.5px solid var(--a);border-bottom:1.5px solid var(--a);border-bottom-left-radius:.45em}
.an-lab .ic{width:1.3em;height:1.3em;color:var(--a);margin-right:-.15em}
.an-lab b{font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ai)}
.an-sub{letter-spacing:.01em}
.an-sub code{font-size:1em;padding:0 .25em}

/* input footer: mode chip · hint · send */
.an-foot{display:flex;align-items:center;gap:.7em;margin:0 1.45em;padding:.8em 0 .95em;border-top:1px solid var(--code-line)}
.an-sp{flex:1}
.an-mode{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.64em;color:var(--code-text);
  padding:.45em .95em;border-radius:99px;border:1px solid var(--code-line);background:var(--code-bar);white-space:nowrap}
.an-mode .ic{width:1.15em;height:1.15em;color:var(--code-muted)}
.an-hint{font-family:var(--mono);font-size:.62em;color:var(--code-muted);text-align:right;line-height:1.4}
.an-fig .an-hint code{font-size:1em;padding:0 .2em;border:0;background:none;color:var(--code-text);white-space:nowrap}
.an-send{display:grid;place-items:center;flex:none;width:1.85em;height:1.85em;border-radius:.55em;background:var(--lv);color:var(--lv-on)}
.an-send .ic{width:1em;height:1em;stroke-width:2.2}

/* wide slides: the prompt reads at headline-ish size, like a real composer */
.wide-vis .an-txt{font-size:1.22em}
.wide-vis .an-lab{font-size:.72em}

/* light variant — on a cream card */
.an-light .an-box{background:var(--slide);border:1px solid var(--card-line);border-radius:.85em;box-shadow:var(--shadow-md);min-width:0}
.an-light .an-txt{background:color-mix(in srgb,var(--a) 12%,transparent)}
.an-light .an-seg.hot .an-txt{background:color-mix(in srgb,var(--a) 24%,transparent)}
.an-light .an-foot{border-top-color:var(--card-line)}
.an-light .an-mode{color:var(--ink-2);border-color:var(--card-line);background:var(--card)}
.an-light .an-mode .ic{color:var(--ink-3)}
.an-light .an-hint{color:var(--ink-3)}
.an-light .an-hint code{color:var(--ink)}

@media (max-width:640px){
  .an-segs{padding:1.05em 1em 1.05em;gap:1.15em .5em}
  .an-fig .an-txt{font-size:1em}
  .an-fig .an-lab{font-size:.76em}
  .an-foot{margin:0 1em;flex-wrap:wrap;row-gap:.65em}
  .an-mode,.an-hint{font-size:.74em}
  .an-hint{order:3;flex-basis:100%;text-align:left}
  .an-tag{display:none}
}

/* ═══════════ Diagrams: chevrons (arrow-step process) + shortcuts (keycap cards) — visuals/chevrons.mjs ═══════════ */

/* ── chevrons ── */
.cv{margin:0;min-width:0;display:flex;flex-direction:column;gap:1.3em}
.cv ul,.cv ol{list-style:none;margin:0;padding:0}
.cv-row{--a:1.35em;--g:.85em;--s:.32em;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));column-gap:var(--g)}
.cv-step{display:flex;flex-direction:column;gap:1em;min-width:0;border-radius:.6em;transition:background .15s}
/* the arrow: extends right into the gap so its point nests into the next one's notch */
.cv-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.6em;height:3.6em;
  width:calc(100% + var(--g) + var(--a) - var(--s));padding:0 calc(var(--a) + .85em) 0 calc(var(--a) + .55em);
  background:color-mix(in srgb,var(--lv) var(--t),var(--slide));color:var(--ink);
  clip-path:polygon(0 0,calc(100% - var(--a)) 0,100% 50%,calc(100% - var(--a)) 100%,0 100%,var(--a) 50%)}
.cv-step:first-child .cv-head{padding-left:1em;clip-path:polygon(0 0,calc(100% - var(--a)) 0,100% 50%,calc(100% - var(--a)) 100%,0 100%);border-radius:.7em 0 0 .7em}
.cv-step:last-child .cv-head{width:100%}
.cv-n{font-family:var(--mono);font-size:1.6em;font-weight:500;letter-spacing:-.02em;line-height:1;color:var(--lv-ink)}
.cv-step:nth-child(n+3) .cv-n{color:var(--ink)}
.cv-head .ic{width:1.4em;height:1.4em;color:var(--ink);stroke-width:1.7}
.cv-body{display:flex;flex-direction:column;gap:.45em;padding:0 .25em;min-width:0}
.cv-t{font-size:1.12em;font-weight:740;letter-spacing:-.02em;line-height:1.15;color:var(--ink);text-wrap:balance;margin:0}
.cv-p{font-size:.84em;line-height:1.42;color:var(--ink-2);text-wrap:pretty;margin:0}
.cv-p b{color:var(--ink)}
.cv-items{display:flex;flex-direction:column;gap:.4em;margin-top:.25em!important}
.cv-items li{display:flex;gap:.55em;align-items:flex-start;font-size:.8em;line-height:1.38;color:var(--ink-2)}
.cv-items .ic{width:1.1em;height:1.1em;color:var(--lv-ink);margin-top:.1em}
.cv-dot{flex:none;width:.4em;height:.4em;margin:.5em .35em 0 .3em;border-radius:50%;background:var(--lv)}
.cv-chips{display:flex;flex-wrap:wrap;gap:.4em;margin-top:.3em!important}
.cv-chips .chip{font-family:var(--sans);font-size:.74em}
.cv-step.hot{background:var(--lv-soft)}
.cv-step.hot .cv-t{color:var(--lv-ink)}
/* checklist bar */
.cv-check{display:flex;align-items:center;gap:1.4em;padding:.95em 1.3em;border-radius:1em;background:var(--lv-soft);border:1px solid var(--lv-line)}
.cv-ch{flex:none;display:flex;align-items:center;gap:.65em;max-width:9.5em}
.cv-ch .ic{width:1.5em;height:1.5em;color:var(--lv-ink)}
.cv-ch b{font-size:.98em;font-weight:720;letter-spacing:-.012em;line-height:1.2;color:var(--ink)}
.cv-cl{flex:1 1 auto;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5em 1.6em!important;font-size:.86em;color:var(--ink-2)}

/* ── shortcuts ── */
.sk{margin:0;min-width:0;display:flex;flex-direction:column;gap:.6em}
.sk ul{list-style:none;margin:0;padding:0}
.sk-note{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.45em;margin:0;font-size:.84em;line-height:1.6;color:var(--ink-2)}
.sk-note .ic{color:var(--lv-ink)}
.sk-note>span{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.1em .45em}
.sk-note .kbd{font-size:.86em}
.sk-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:.8em}
.sk-card{position:relative;display:flex;flex-direction:column;gap:.35em;min-width:0;padding:.85em 1.1em .95em;border-radius:1em;
  background:var(--card);border:1px solid var(--card-line);transition:border-color .15s,box-shadow .15s}
.sk-card.hot{border-color:var(--lv);box-shadow:0 0 0 .22em color-mix(in srgb,var(--lv) 16%,transparent)}
.sk-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.6em;margin-bottom:.3em}
.sk-top .tile{width:2.1em;height:2.1em;border-radius:.65em}
.sk-top .tile .ic{width:1.1em;height:1.1em}
.sk-keys{display:flex;align-items:center;flex-wrap:wrap;gap:.35em .55em;min-width:0}
.sk-keys .kbd{font-size:.86em}
.sk-then{font-family:var(--mono);font-size:.62em;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.sk-hint{font-size:.74em;color:var(--ink-3)}
.sk-t{font-size:1.06em;font-weight:730;letter-spacing:-.018em;line-height:1.2;color:var(--ink);margin:0}
.sk-p{font-size:.82em;line-height:1.42;color:var(--ink-2);text-wrap:pretty;margin:0}
.sk-p b{color:var(--ink)}
/* the feature card */
.sk-hero{grid-column:span 2;grid-row:span 2;flex-direction:row;align-items:center;gap:1.6em;padding:1.5em 1.6em;border:0;color:var(--lv-on);
  background:radial-gradient(30em 20em at 100% 0%,color-mix(in srgb,#fff 16%,transparent),transparent 65%),var(--btn);
  box-shadow:0 1.2em 2.2em -1.3em color-mix(in srgb,var(--lv) 90%,transparent)}
html[data-theme="dark"] .sk-hero{background:radial-gradient(30em 20em at 100% 0%,color-mix(in srgb,#fff 10%,transparent),transparent 65%),color-mix(in srgb,var(--lv) 62%,#120a06)}
.sk-hl{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:.7em}
.sk-eye{display:inline-flex;align-items:center;gap:.6em;align-self:flex-start;font-family:var(--mono);font-size:.6em;letter-spacing:.14em;text-transform:uppercase;
  padding:.5em 1em;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);color:#fff;margin-bottom:.4em}
.sk-eye .ic{width:1.3em;height:1.3em}
.sk-hero .sk-keys .kbd{font-size:1.2em;padding:.32em .7em .34em;min-width:2.1em}
.sk-hero .sk-hint,.sk-hero .sk-then{color:rgba(255,255,255,.75)}
.sk-hero .sk-t{font-size:1.65em;font-weight:780;letter-spacing:-.025em;color:#fff;margin-top:.15em}
.sk-hero .sk-p{font-size:.92em;color:rgba(255,255,255,.86);max-width:22em}
.sk-hero .sk-p code{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}
/* mini command palette inside the hero */
.sk-pal{flex:1.15 1 0;min-width:0;padding:.55em;border-radius:.9em;font-size:.86em}
.sk-q{display:flex;align-items:center;gap:.4em;padding:.55em .7em;border-radius:.55em;border:1px solid color-mix(in srgb,var(--lv) 55%,#fff 10%);
  font-family:var(--mono);font-size:.8em;color:#fff;background:rgba(255,255,255,.03)}
.sk-gt{color:var(--code-muted)}
.sk-pal ul{margin-top:.45em!important;display:flex;flex-direction:column;gap:.15em}
.sk-pal li{display:flex;align-items:center;gap:.4em;padding:.55em .7em;border-radius:.5em;font-size:.76em;color:var(--code-text)}
.sk-pal li>span:first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-pal li.on{background:color-mix(in srgb,var(--lv) 26%,var(--code-bg))}
.sk-pal em{font-style:normal;font-weight:650;color:color-mix(in srgb,var(--lv) 40%,#fff)}
.sk-pk{flex:none;font-family:var(--mono);font-size:.82em;padding:.15em .45em;border-radius:.3em;border:1px solid var(--code-line);color:var(--code-muted);background:rgba(255,255,255,.04)}

/* ── small screens ── */
@media (max-width:899px){
  .cv-row{--a:1em;--g:.6em}
  .cv-head{height:3.1em}
  .cv-n{font-size:1.35em}
}
@media (max-width:640px){
  /* steps stack; each chevron points down and nests into the next */
  .cv-row{grid-template-columns:minmax(0,1fr);row-gap:1.1em;--a:.8em}
  .cv-step{display:grid;grid-template-columns:4.2em minmax(0,1fr);column-gap:.9em;align-items:start}
  .cv-head{width:auto;height:calc(100% + 1.1em + var(--a) - .3em);min-height:4.6em;flex-direction:column;justify-content:flex-start;gap:.5em;
    padding:calc(var(--a) + .55em) 0 calc(var(--a) + .6em);border-radius:0;
    clip-path:polygon(0 0,50% var(--a),100% 0,100% calc(100% - var(--a)),50% 100%,0 calc(100% - var(--a)))}
  .cv-step:first-child .cv-head{padding:.8em 0 calc(var(--a) + .6em);border-radius:.6em .6em 0 0;
    clip-path:polygon(0 0,100% 0,100% calc(100% - var(--a)),50% 100%,0 calc(100% - var(--a)))}
  .cv-step:last-child .cv-head{height:auto;align-self:stretch}
  .cv-body{padding:.2em 0 0}
  .cv-p,.cv-items li{font-size:.86em}
  .cv-chips .chip{font-size:.78em}
  .cv-check{flex-direction:column;align-items:flex-start;gap:.8em;padding:.9em 1em}
  .cv-ch{max-width:none}
  .cv-cl{grid-template-columns:minmax(0,1fr);font-size:.9em}
  .sk-note{justify-content:flex-start}
  .sk-grid{grid-template-columns:minmax(0,1fr)}
  .sk-hero{grid-column:auto;grid-row:auto;flex-direction:column;align-items:stretch;padding:1.15em}
  .sk-pal{flex:none;font-size:1em}
  .sk-hl{flex:none}
  .sk-pal li{font-size:.8em}
  .sk-then,.sk-eye{font-size:.72em}
  .sk-hint{font-size:.8em}
}

/* ═══════════ Diagram: flow — nodes + connectors, "row" and "hub" layouts (visuals/flow.mjs) ═══════════ */
.fl{margin:0;min-width:0;display:flex;flex-direction:column;gap:.85em}
.fl-h{display:flex;align-items:center;gap:.75em;font-family:var(--mono);font-size:.62em;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.fl-h .ic{width:1.35em;height:1.35em;color:var(--lv-ink)}
.fl ul,.fl ol{list-style:none;margin:0;padding:0}

/* badges (pills) — tone: lv · warn · good · plain; .fl-solid = filled */
.fl-badge{display:inline-flex;align-items:center;gap:.4em;align-self:flex-start;font-family:var(--mono);font-size:.62em;font-weight:500;line-height:1.2;letter-spacing:.02em;
  padding:.3em .75em;border-radius:999px;white-space:nowrap;border:1px solid;--t:var(--lv);--ti:var(--lv-ink);--to:var(--lv-on);
  color:var(--ti);background:color-mix(in srgb,var(--t) 13%,transparent);border-color:color-mix(in srgb,var(--t) 32%,transparent)}
.fl-badge .ic{width:1.15em;height:1.15em}
.fl-t-lv{--t:var(--lv);--ti:var(--lv-ink);--to:var(--lv-on)}
.fl-t-warn{--t:var(--warn);--ti:var(--warn);--to:#fff}
.fl-t-good{--t:var(--good);--ti:var(--good);--to:#fff}
.fl-t-plain{--t:var(--ink-3);--ti:var(--ink-2);--to:var(--slide)}
.fl-badge.fl-solid{background:var(--t);border-color:var(--t);color:var(--to)}
html[data-theme="dark"] .fl-t-warn,html[data-theme="dark"] .fl-t-good{--to:#170c06}
.fl-chips{display:flex;flex-wrap:wrap;gap:.45em}
.fl-chips .chip{background:var(--slide)}

/* ── row ── */
.fl-track{display:grid;align-items:stretch;column-gap:.6em}
.fl-node{container-type:inline-size;display:flex;flex-direction:column;gap:.8em;min-width:0;padding:1.05em clamp(.75em,6%,1.1em) 1.1em;border-radius:1.05em;
  background:var(--card);border:1px solid var(--card-line);transition:border-color .15s,box-shadow .15s}
.fl-top{display:flex;gap:.8em;align-items:flex-start;min-width:0}
.fl-tt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.22em}
.fl-title{font-size:1.12em;font-weight:740;letter-spacing:-.02em;line-height:1.15;color:var(--ink);text-wrap:balance}
.fl-sub{font-size:.8em;line-height:1.35;color:var(--ink-2);text-wrap:pretty}
.fl-tt .fl-badge{margin-top:.3em}
.fl-num{flex:none;font-family:var(--mono);font-size:.66em;font-weight:500;letter-spacing:.06em;color:var(--lv-ink);padding-top:.2em}
.fl-path{display:flex;align-items:flex-start;gap:.55em;font-size:.82em;color:var(--ink-3)}
.fl-path .ic{margin-top:.15em}
.fl-path code{white-space:normal;word-break:break-all;line-height:1.5}
.fl-items{display:flex;flex-direction:column;gap:.45em}
.fl-items li{display:flex;gap:.6em;align-items:flex-start;font-size:.8em;line-height:1.38;color:var(--ink-2)}
.fl-items .ic{width:1.15em;height:1.15em;color:var(--lv-ink);margin-top:.08em}
.fl-items b{color:var(--ink)}
.fl-tree{position:relative;padding:.6em .55em .55em;border-radius:.7em;background:var(--slide);border:1px solid var(--card-line);font-family:var(--mono);font-size:.68em}
.fl-ttag{position:absolute;top:.75em;right:.85em;font-size:.86em;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.fl-tree li{display:flex;align-items:center;gap:.5em;padding:.18em .5em .18em calc(.5em + var(--d) * 1.15em);border-radius:.4em;color:var(--ink-2);line-height:1.35;min-width:0}
.fl-tree li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-tree .ic{width:1.15em;height:1.15em;color:var(--ink-3)}
.fl-tree li:first-child{color:var(--ink);font-weight:500}
.fl-tree .fl-hot{background:color-mix(in srgb,var(--lv) 14%,transparent);color:var(--ink);font-weight:500}
.fl-tree .fl-hot .ic{color:var(--lv-ink)}
.fl-chipbox{display:flex;flex-direction:column;gap:.6em;margin-top:auto;padding-top:.75em;border-top:1px solid var(--card-line)}
.fl-chiph{display:flex;justify-content:space-between;align-items:baseline;gap:.8em}
.fl-chiph b{font-size:.84em;font-weight:690;color:var(--ink)}
.fl-chiph span{font-family:var(--mono);font-size:.58em;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
/* narrow stages (4 across, or in a split): tile above the title */
@container (max-width:15em){
  .fl-top{flex-direction:column;gap:.65em}
  .fl-num{position:absolute;top:1.25em;right:1.1em}
  .fl-title{font-size:1.02em}
  .fl-items li{font-size:.76em}
  .fl-chips .chip{white-space:normal;word-break:break-word}
}
@container (max-width:9.5em){
  .fl-node>*{font-size:.94em}
}
.fl-node{position:relative}
/* tones */
.fl-tonal{background:var(--lv-soft);border-color:var(--lv-line)}
.fl-tonal .tile{background:var(--lv);color:var(--lv-on)}
.fl-ghost{background:transparent;border-style:dashed}
.fl-dark{background:var(--code-bg);border-color:var(--code-line);box-shadow:var(--pane-shadow);
  background-image:radial-gradient(28em 18em at 100% 0%,color-mix(in srgb,var(--lv) 30%,transparent),transparent 70%)}
.fl-dark .tile{background:var(--lv);color:var(--lv-on)}
.fl-dark .fl-title{color:#fff}
.fl-dark .fl-sub,.fl-dark .fl-items li,.fl-dark .fl-path{color:var(--code-text)}
.fl-dark .fl-items .ic,.fl-dark .fl-num{color:var(--ann2)}
.fl-dark .fl-items b{color:#fff}
.fl-dark code{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.fl-dark .fl-badge{--ti:#ffd9c2;--t:var(--ann2)}
.fl-dark .fl-chipbox{border-top-color:var(--code-line)}
.fl-dark .fl-chiph b{color:#fff}.fl-dark .fl-chiph span{color:var(--code-muted)}
.fl-dark .chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18);color:var(--code-text)}
.fl-dark .fl-tree{background:rgba(255,255,255,.04);border-color:var(--code-line)}
.fl-dark .fl-tree li{color:var(--code-text)}.fl-dark .fl-tree .ic,.fl-dark .fl-ttag{color:var(--code-muted)}
.fl-dark .fl-tree li:first-child,.fl-dark .fl-tree .fl-hot{color:#fff}
/* connectors */
.fl-link{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;min-width:2.15em}
.fl-link::before{content:"";position:absolute;left:-.6em;right:-.6em;top:50%;height:1.5px;background:color-mix(in srgb,var(--lv) 40%,var(--card-line));z-index:0}
.fl-arrow{position:relative;z-index:1;display:grid;place-items:center;width:2.15em;height:2.15em;border-radius:50%;background:var(--slide);color:var(--lv-ink);
  border:1px solid var(--lv-line);box-shadow:var(--shadow-md)}
.fl-arrow .ic{width:1.05em;height:1.05em;stroke-width:2.1}
.fl-ll{position:absolute;bottom:calc(50% + 1.6em);left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.58em;letter-spacing:.06em;color:var(--lv-ink);
  white-space:nowrap;padding:.15em .55em;border-radius:99px;background:var(--slide)}
/* staircase: bottoms aligned, each card's top a step higher */
.fl-rise .fl-track{align-items:end}
.fl-rise .fl-node{align-self:stretch;margin-top:calc((var(--n) - 1 - var(--i,0)) * 2.4em)}
.fl-rise .fl-node:nth-child(1){--i:0}.fl-rise .fl-node:nth-child(3){--i:1}.fl-rise .fl-node:nth-child(5){--i:2}.fl-rise .fl-node:nth-child(7){--i:3}
.fl-rise .fl-link{align-self:end;height:5em}
/* hover link with a split slide's legend */
.fl-node.hot{border-color:var(--lv);box-shadow:0 0 0 .22em color-mix(in srgb,var(--lv) 16%,transparent)}

/* ── hub ── */
.fl-hub{position:relative;z-index:1;display:flex;gap:1em;align-items:flex-start;width:min(100%,46em);margin:0 auto;padding:.95em 1.25em 1em;border-radius:1.15em;
  background:var(--lv-soft);border:1px solid var(--lv-line);box-shadow:0 1em 2em -1.4em color-mix(in srgb,var(--lv) 70%,transparent)}
.fl-hub .tile{width:2.7em;height:2.7em;border-radius:.85em}
.fl-hub .tile .ic{width:1.4em;height:1.4em}
.fl-hb{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.3em}
.fl-hh{display:flex;align-items:center;justify-content:space-between;gap:.5em 1em;flex-wrap:wrap}
.fl-hh .fl-badge{align-self:center}
.fl-hsub{font-family:var(--mono);font-size:.7em;color:var(--ink-2);line-height:1.4}
.fl-hchips{margin-top:.45em}
.fl-spokes{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:1.4em}
.fl-spoke{display:flex;flex-direction:column;align-items:center;min-width:0}
.fl-spoke.hot .fl-group{border-color:var(--lv);box-shadow:0 0 0 .22em color-mix(in srgb,var(--lv) 14%,transparent)}
/* the dashed wire: dot · pill · dot */
.fl-wire{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:3.1em;margin-top:-.35em}
.fl-wire::before{content:"";position:absolute;top:.3em;bottom:.3em;left:50%;border-left:2px dashed color-mix(in srgb,var(--lv) 55%,transparent);transform:translateX(-1px)}
.fl-dot{position:relative;z-index:1;display:block;width:.6em;height:.6em;border-radius:50%;background:var(--lv);box-shadow:0 0 0 .22em color-mix(in srgb,var(--lv) 22%,var(--slide))}
.fl-pill{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.4em;font-family:var(--mono);font-size:.6em;font-weight:500;color:var(--lv-ink);white-space:nowrap;
  padding:.3em .8em;border-radius:99px;background:var(--slide);border:1px solid var(--lv-line)}
.fl-pill .ic{width:1.15em;height:1.15em}
.fl-group{position:relative;align-self:stretch;flex:1 1 auto;display:flex;flex-direction:column;margin-top:.85em;padding:1.3em .75em .75em;border-radius:1.1em;
  background:color-mix(in srgb,var(--card-2) 55%,var(--slide));border:1px solid var(--card-line);transition:border-color .15s,box-shadow .15s}
.fl-gtab{position:absolute;top:0;left:1em;transform:translateY(-55%);display:inline-flex;align-items:center;gap:.55em;max-width:calc(100% - 2em);
  padding:.4em .95em;border-radius:99px;background:var(--slide);border:1px solid var(--card-line);box-shadow:var(--shadow)}
.fl-gtab b{font-size:.92em;font-weight:720;letter-spacing:-.012em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-gtab .ic{color:var(--ink-2)}
.fl-scs{display:flex;flex-direction:column;gap:.6em}
.fl-sc{display:flex;gap:.85em;align-items:flex-start;min-width:0;padding:.72em .85em;border-radius:.9em;
  background:color-mix(in srgb,var(--t) 8%,var(--slide));border:1px solid color-mix(in srgb,var(--t) 28%,transparent)}
.fl-sc.fl-t-plain{background:var(--slide);border-color:var(--card-line)}
.fl-sct{display:grid;place-items:center;flex:none;width:2.3em;height:2.3em;border-radius:.7em;background:var(--t);color:var(--to,var(--lv-on))}
.fl-sc.fl-t-lv .fl-sct{color:var(--lv-on)}
.fl-sct .ic{width:1.2em;height:1.2em}
.fl-scb{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.38em}
.fl-sch{display:flex;align-items:center;gap:.35em .7em;flex-wrap:wrap}
.fl-sch b{font-size:.98em;font-weight:720;letter-spacing:-.015em;color:var(--ink);line-height:1.2}
.fl-sch .fl-badge{align-self:center;font-size:.58em}
.fl .fl-scp{font-family:var(--mono);font-size:.68em;line-height:1.45;color:var(--ink-2);background:none;border:0;padding:0;white-space:normal;word-break:break-all}
.fl-sc .fl-chips .chip{font-size:.62em}
.fl-st{font-family:var(--mono);font-size:.58em;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ti);line-height:1.5}
.fl-foot{display:flex;align-items:flex-start;justify-content:center;gap:.6em;font-size:.84em;line-height:1.45;color:var(--ink-2);text-align:center;text-wrap:balance;margin:0}
.fl-foot .ic{color:var(--lv-ink);margin-top:.12em}
.fl-foot b{color:var(--ink)}

/* ── small screens: the row turns vertical, arrows point down; spokes stack ── */
@media (max-width:640px){
  .fl-track{grid-template-columns:minmax(0,1fr)!important;row-gap:.35em}
  .fl-rise .fl-node{margin-top:0}
  .fl-rise .fl-link{height:auto}
  .fl-link{flex-direction:row;min-height:2.6em;gap:.6em}
  .fl-link::before{left:50%;right:auto;top:-.35em;bottom:-.35em;width:1.5px;height:auto;transform:translateX(-.75px)}
  .fl-arrow{transform:rotate(90deg)}
  .fl-ll{position:absolute;bottom:auto;top:50%;left:calc(50% + 1.6em);transform:translateY(-50%);font-size:.66em}
  .fl-node{padding:.9em .95em}
  .fl-hub{flex-direction:column;gap:.7em;padding:.95em}
  .fl-hh{flex-direction:column;align-items:flex-start}
  .fl-hh .fl-badge{align-self:flex-start;white-space:normal}
  .fl-spokes{grid-template-columns:minmax(0,1fr);gap:.4em}
  .fl-wire{height:3.2em}
  .fl-sc{padding:.7em .75em;gap:.65em}
  .fl-sct{width:2em;height:2em}
  .fl-badge,.fl-sch .fl-badge{font-size:.74em}
  .fl-st,.fl-pill,.fl-hsub,.fl .fl-scp,.fl-tree,.fl-ll{font-size:.75em}
  .fl-sc .fl-chips .chip,.fl-chips .chip{font-size:.74em}
  .fl-foot{justify-content:flex-start;text-align:left}
}
html[data-theme="dark"] .fl-dark{border-color:var(--lv-line);background-image:radial-gradient(28em 18em at 100% 0%,color-mix(in srgb,var(--lv) 42%,transparent),transparent 72%)}

/* ═══════════ Diagram: matrix — 2–4 option columns compared on shared rows (visuals/matrix.mjs) ═══════════ */
.mx{margin:0;min-width:0;--h:var(--lv);--h-ink:var(--lv-ink)}
.mx-grid{display:grid;grid-template-columns:minmax(5.6em,7.2em) repeat(var(--mx-n,3),minmax(0,1fr));column-gap:.85em;row-gap:0;align-items:stretch}

/* column cards: span the header + every body row, and share the parent's row tracks */
.mx-col{display:grid;grid-template-rows:subgrid;min-width:0;border-radius:1em;overflow:hidden;
  background:color-mix(in srgb,var(--card) 45%,var(--slide));border:1px solid var(--card-line);box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.mx-col.hot{border-color:var(--h);box-shadow:0 0 0 .2em color-mix(in srgb,var(--h) 22%,transparent)}
.mx-head{display:flex;align-items:center;gap:.8em;padding:.95em 1.1em;min-width:0;
  background:color-mix(in srgb,var(--h) 13%,var(--slide));border-bottom:1px solid color-mix(in srgb,var(--h) 26%,var(--card-line))}
.mx-tile{display:grid;place-items:center;flex:none;width:2.5em;height:2.5em;border-radius:.75em;background:var(--h);color:#fff;
  box-shadow:0 .3em .7em -.35em color-mix(in srgb,var(--h) 80%,transparent)}
.mx-tile .ic{width:1.2em;height:1.2em}
.mx-hd{min-width:0;display:flex;flex-direction:column;gap:.12em}
.mx-name{font-size:1.14em;font-weight:740;letter-spacing:-.018em;line-height:1.15;color:var(--ink);overflow-wrap:anywhere}
.mx-name code{font:inherit;padding:0;border:0;background:none;color:inherit}
.mx-tagl{font-size:.78em;font-weight:650;line-height:1.25;color:var(--h-ink);text-wrap:balance}

/* body cells: hairlines inset from the card edge, content centred in the shared row */
.mx-cell{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.35em;min-width:0;margin:0 1.1em;padding:.8em 0}
.mx-cell+.mx-cell{border-top:1px solid var(--rule)}
.mx-t{font-size:.83em;line-height:1.42;color:var(--ink-2);text-wrap:pretty}
.mx-t b{color:var(--ink)}
.mx-t em{font-style:normal;color:var(--h-ink);font-weight:650}
.mx-t code{white-space:normal;overflow-wrap:anywhere}
.mx-code{margin:0;font-family:var(--mono);font-size:.7em;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink-2);
  padding:.1em 0 .1em .8em;border-left:2px solid color-mix(in srgb,var(--h) 55%,transparent)}
.mx-tag{font-family:var(--mono);font-size:.54em;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  padding:.25em .6em;border:1px dashed var(--card-line);border-radius:.35em}
/* per-cell row label: for screen readers on wide screens, visible on phones */
.mx-cl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* row labels (left column) */
.mx-lab{grid-column:1;display:flex;align-items:center;gap:.6em;min-width:0;padding:.4em 0;
  font-family:var(--mono);font-size:.6em;font-weight:500;letter-spacing:.13em;text-transform:uppercase;line-height:1.3;color:var(--ink-2)}
.mx-lab .ic,.mx-cl .ic{width:1.45em;height:1.45em;color:var(--lv-ink)}

/* the rule-of-thumb band: full width, its cells sit under their columns */
.mx-foot{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:start;margin-top:.8em;padding:.8em 0;
  border-radius:1em;background:var(--lv-soft);border:1px solid color-mix(in srgb,var(--lv) 20%,transparent)}
.mx-flab{display:flex;align-self:center;align-items:center;gap:.6em;padding-left:1em;font-family:var(--mono);font-size:.6em;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;line-height:1.3;color:var(--lv-ink)}
.mx-flab .ic{width:1.45em;height:1.45em}
.mx-fc{display:flex;flex-wrap:wrap;align-items:center;gap:.35em .4em;min-width:0;padding:0 1.1em}
.mx-fc>b{flex:1 0 100%;font-size:.84em;font-weight:700;line-height:1.25;color:var(--ink)}
.mx-arrow{display:inline-flex;color:var(--h-ink)}
.mx-arrow .ic{width:.95em;height:.95em}
.mx-pill{display:inline-flex;align-items:center;font-size:.72em;font-weight:700;line-height:1.2;padding:.22em .75em;border-radius:999px;
  background:color-mix(in srgb,var(--h) 20%,var(--slide));color:var(--h-ink);border:1px solid color-mix(in srgb,var(--h) 38%,transparent)}
.mx-pill code{padding:0;border:0;background:none;color:inherit;font-size:.95em}

/* tablets: a narrower label column */
@media (max-width:899px){.mx-grid{grid-template-columns:minmax(4.8em,6em) repeat(var(--mx-n,3),minmax(0,1fr));column-gap:.6em}
  .mx-head{flex-direction:column;align-items:flex-start;gap:.5em}
  .mx-lab,.mx-flab{font-size:.66em;letter-spacing:.1em}}

/* phones: one card per option, the row label repeated in every cell, the band as a list */
@media (max-width:640px){
  .mx-grid{display:flex;flex-direction:column;gap:.75em}
  .mx-col{display:flex;flex-direction:column}
  .mx-head{flex-direction:row;align-items:center}
  .mx-lab{display:none}
  .mx-cell{padding:.65em 0}
  .mx-cl{position:static;width:auto;height:auto;overflow:visible;clip-path:none;display:flex;align-items:center;gap:.5em;
    font-family:var(--mono);font-size:.62em;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
  .mx-cl .ic{width:1.3em;height:1.3em}
  .mx-t{font-size:.86em}
  .mx-tagl{font-size:.8em}
  .mx-code{font-size:.74em}
  .mx-foot{display:flex;flex-direction:column;align-items:stretch;gap:.7em;margin-top:0;padding:.85em 0}
  .mx-fc>b{flex:0 1 auto;font-size:.86em}
  .mx-fc{gap:.4em}
}

/* ═══════════ Mock Claude: claude.ai chat window (.ca-*) + Connectors settings (.se-*) ═══════════
   Light/cream app surfaces built from the slide tokens, so they go dark with the page.
   All sizes em off .ca (≈ .72 of the slide size); pins are sized off --ca-u (the .ca em, in px)
   so a pin reads the same whether it sits on a 13px label or a 15px bubble. */

@property --ca-u{syntax:'<length>';inherits:true;initial-value:16px}
.ca{--ca-u:1em;--ca-raise:#fff;--ca-side:color-mix(in srgb,var(--card) 62%,var(--slide));--ca-bub:var(--card-2);
  position:relative;margin:0;font-size:.72em;line-height:1.45;color:var(--ink);background:var(--slide);
  border:1px solid var(--card-line);border-radius:1.05em;overflow:visible;box-shadow:var(--pane-shadow);text-align:left;min-width:0}
html[data-theme="dark"] .ca{--ca-raise:var(--card);--ca-side:color-mix(in srgb,var(--card) 55%,var(--slide));--ca-bub:var(--card-2)}
.ca .ic{width:1.15em;height:1.15em}
.ca .ic.claude{stroke-width:2.6}
.ca b{font-weight:650}
.ca-sp{flex:1}
.ca-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.slide.hero .ca code,.slide.close .ca code{color:var(--ink);background:color-mix(in srgb,var(--lv) 12%,transparent);border-color:color-mix(in srgb,var(--lv) 22%,transparent)}

/* pins: region-anchored (.ca-p-<pos> places the pin on its region's box) */
.ca .ca-pin{font-size:calc(var(--ca-u) * 1.02)}
.ca-p-l{left:-1.25em;top:50%} .ca-p-r{left:calc(100% + 1.25em);top:50%}
.ca-p-t{left:50%;top:-1.1em}   .ca-p-b{left:50%;top:calc(100% + 1.1em)}
.ca-p-tl{left:0;top:0} .ca-p-tr{left:100%;top:0} .ca-p-bl{left:0;top:100%} .ca-p-br{left:100%;top:100%}
.ca-p-in{left:calc(100% - 1.25em);top:50%} .ca-p-c{left:50%;top:50%} .ca-p-g{left:1.15em;top:50%}

/* browser chrome */
.ca-bar{display:flex;align-items:center;gap:.8em;height:2.5em;padding:0 .9em;background:var(--card-2);border-bottom:1px solid var(--card-line);border-radius:1.05em 1.05em 0 0}
.ca-dots{display:inline-flex;gap:.42em;flex:none}.ca-dots i{display:block;width:.72em;height:.72em;border-radius:50%;background:color-mix(in srgb,var(--ink-3) 38%,transparent)}
.ca-url{display:inline-flex;align-items:center;gap:.45em;margin:0 auto;min-width:0;max-width:60%;padding:.28em 1em;border-radius:99px;background:var(--slide);border:1px solid var(--card-line);
  font-family:var(--mono);font-size:.78em;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca-url .ic{width:1em;height:1em}
.ca-bar-sp{width:2.6em;flex:none}

/* ── chatapp: sidebar · conversation · artifact ── */
.ca-win{display:grid;grid-template-columns:minmax(0,1fr);border-radius:0 0 1.05em 1.05em}
.ca.has-side .ca-win{grid-template-columns:11.5em minmax(0,1fr)}
.ca.has-art .ca-win{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}
.ca.has-side.has-art .ca-win{grid-template-columns:11.5em minmax(0,1fr) minmax(0,.92fr)}

.ca-side{position:relative;display:flex;flex-direction:column;gap:.15em;padding:.8em .6em .7em;background:var(--ca-side);border-right:1px solid var(--card-line);border-radius:0 0 0 1.05em;min-width:0}
.ca-brand{display:flex;align-items:center;gap:.45em;padding:.15em .45em .65em;font-size:1.06em}
.ca-brand b{font-family:var(--serif);font-weight:400;font-size:1.3em;letter-spacing:-.01em}
.ca-logo .ic{width:1.25em;height:1.25em}
.ca-ico{display:inline-grid;place-items:center;color:var(--ink-3)}
.ca-new,.ca-nav,.ca-proj{position:relative;display:flex;align-items:center;gap:.6em;padding:.42em .5em;border-radius:.6em;color:var(--ink-2);white-space:nowrap;min-width:0}
.ca-new{color:var(--ink);font-weight:600;margin-bottom:.2em}
.ca-plus{display:inline-grid;place-items:center;width:1.55em;height:1.55em;border-radius:50%;background:var(--btn);color:var(--btn-on);flex:none}
.ca-plus .ic{width:.95em;height:.95em;stroke-width:2.4}
.ca-nav .ic{color:var(--ink-3)}
.ca-nav.on{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.ca-lbl{overflow:hidden;text-overflow:ellipsis;min-width:0}
.ca-proj{margin-left:1.2em;padding-left:.6em;font-size:.92em;color:var(--lv-ink);font-weight:600;border-left:1px solid var(--card-line);border-radius:0 .6em .6em 0}
.ca-pdot{width:.5em;height:.5em;border-radius:50%;background:var(--lv);flex:none}
.ca-recents{position:relative;margin-top:.55em;min-width:0}
.ca-rail{display:none}
.ca-h{font-size:.78em;color:var(--ink-3);padding:.2em .65em .35em;font-weight:500}
.ca-recents ul{list-style:none;display:flex;flex-direction:column;gap:.05em}
.ca-recents li{padding:.3em .65em;border-radius:.55em;font-size:.9em;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca-recents li.on{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink);font-weight:550}
.ca-user{display:flex;align-items:center;gap:.6em;margin-top:auto;padding:.7em .45em 0;border-top:1px solid var(--card-line)}
.ca-av{display:inline-grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:var(--ink);color:var(--slide);font-size:.84em;font-weight:650;flex:none}
.ca-user .ca-lbl{font-size:.9em;font-weight:600;line-height:1.2}
.ca-user small{display:block;font-weight:400;font-size:.86em;color:var(--ink-3)}

.ca-chat{position:relative;display:flex;flex-direction:column;min-width:0}
.ca-head{position:relative;display:flex;align-items:center;gap:.4em;padding:.75em 1.3em;border-bottom:1px solid color-mix(in srgb,var(--card-line) 60%,transparent);font-size:.92em;white-space:nowrap;min-width:0}
.ca-head b{overflow:hidden;text-overflow:ellipsis;min-width:0}
.ca-head .ic{color:var(--ink-3);width:1em;height:1em}
.ca-crumb{position:relative;display:inline-flex;align-items:center;gap:.4em;color:var(--ink-3);flex:none}
.ca-crumb .ic{width:1.05em;height:1.05em}

.ca-log{list-style:none;display:flex;flex-direction:column;gap:1.05em;padding:1.15em 1.4em 1em;flex:1 1 auto}
.ca-msg{position:relative;min-width:0}
.ca-you{display:flex;flex-direction:column;align-items:flex-end;gap:.45em;padding-left:2.4em}
.ca-bubble{position:relative;max-width:100%;padding:.6em .95em;border-radius:1.05em 1.05em .3em 1.05em;background:var(--ca-bub);color:var(--ink);text-wrap:pretty}
.ca-files{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.45em}
.ca-file{position:relative;display:flex;align-items:center;gap:.6em;padding:.45em .85em .45em .5em;border-radius:.75em;background:var(--ca-raise);border:1px solid var(--card-line);box-shadow:var(--shadow);min-width:0;max-width:100%}
.ca-ftile{display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:.5em;background:color-mix(in srgb,var(--lv) 14%,transparent);color:var(--lv-ink);flex:none}
.ca-fname{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.ca-fname b{font-size:.92em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca-fname small{font-family:var(--mono);font-size:.74em;color:var(--ink-3);letter-spacing:.03em}

.ca-claude{display:grid;grid-template-columns:1.6em minmax(0,1fr);gap:.55em;align-items:start}
.ca-claude.has-pin{padding-right:2.6em}
.ca-spark{display:grid;place-items:center;height:1.45em}
.ca-spark .ic{width:1.3em;height:1.3em}
.ca-say{display:flex;flex-direction:column;gap:.45em;min-width:0;text-wrap:pretty}
.ca-say ul{list-style:none;display:flex;flex-direction:column;gap:.2em}
.ca-say li{position:relative;padding-left:1em}
.ca-say li::before{content:"";position:absolute;left:.15em;top:.62em;width:.34em;height:.34em;border-radius:50%;background:var(--ink-3)}
.ca-say b{color:var(--ink)}
.ca-tool{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:.5em;max-width:100%;padding:.28em .7em .28em .55em;border-radius:.6em;
  font-size:.86em;color:var(--ink-2);background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid var(--card-line)}
.ca-tool span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ca-tool .ic{width:1.1em;height:1.1em;color:var(--ink-3)}
.ca-tool .ic:last-child{width:.95em;height:.95em}

.ca-comp{position:relative;margin:0 1.1em 1.1em;padding:.75em .75em .6em 1em;border-radius:1.05em;background:var(--ca-raise);border:1px solid var(--card-line);box-shadow:var(--shadow-md)}
.ca-ph{color:var(--ink-3);padding-bottom:.75em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca-cbar{display:flex;align-items:center;gap:.4em;min-width:0}
.ca-cbtn{position:relative;display:inline-grid;place-items:center;width:2.05em;height:2.05em;border-radius:.6em;border:1px solid var(--card-line);color:var(--ink-2);flex:none}
.ca-cbtn .ic{width:1.05em;height:1.05em}
.ca-tchip{display:inline-flex;align-items:center;padding:.22em .7em;border-radius:99px;font-size:.8em;color:var(--lv-ink);background:var(--lv-soft);border:1px solid var(--lv-line);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ca-model{position:relative;display:inline-flex;align-items:center;gap:.25em;padding:.3em .55em;border-radius:.55em;font-size:.88em;color:var(--ink-2);white-space:nowrap;flex:none}
.ca-model .ic{width:.95em;height:.95em}
.ca-send{position:relative;display:inline-grid;place-items:center;width:2.05em;height:2.05em;border-radius:.6em;background:var(--btn);color:var(--btn-on);flex:none}
.ca-send .ic{width:1.05em;height:1.05em;stroke-width:2.3}

.ca-art{position:relative;display:flex;flex-direction:column;margin:.75em .75em .75em 0;border-radius:.85em;background:var(--ca-raise);border:1px solid var(--card-line);box-shadow:var(--shadow-md);min-width:0}
.ca-ahead{display:flex;align-items:center;gap:.55em;padding:.6em .6em .6em .75em;border-bottom:1px solid var(--card-line);min-width:0}
.ca-atile{display:grid;place-items:center;width:2em;height:2em;border-radius:.5em;background:var(--card);color:var(--ink-2);border:1px solid var(--card-line);flex:none}
.ca-aname{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.ca-aname b{font-size:.92em;line-height:1.2;overflow-wrap:anywhere}
.ca-aname small{font-size:.76em;color:var(--ink-3)}
.ca-abtn{display:inline-flex;align-items:center;gap:.35em;padding:.32em .45em;border-radius:.5em;border:1px solid var(--card-line);color:var(--ink-2);font-size:.82em;flex:none}
.ca-abtn .ic{width:1.1em;height:1.1em}
.ca-pub{background:var(--ink);color:var(--slide);border-color:var(--ink);padding:.32em .65em}
.ca-adoc{display:flex;flex-direction:column;gap:.4em;padding:1em 1.1em 1.2em;font-size:.92em;color:var(--ink-2);text-wrap:pretty}
.ca-adoc .mh{font-family:var(--serif);font-weight:400;font-size:1.55em;line-height:1.1;color:var(--ink);letter-spacing:-.01em;margin-bottom:.15em}
.ca-adoc .mh:not(:first-child){font-size:1.2em;margin-top:.35em}
.ca-adoc .li{position:relative;padding-left:1.05em}
.ca-adoc .li::before{content:"";position:absolute;left:.1em;top:.6em;width:.36em;height:.36em;border-radius:.1em;background:var(--lv)}

/* ── settings: nav · connector list ── */
.se-win{display:grid;grid-template-columns:10.5em minmax(0,1fr);border-radius:0 0 1.05em 1.05em}
.se-nav{position:relative;padding:1.1em .7em;border-right:1px solid var(--card-line);background:var(--ca-side);border-radius:0 0 0 1.05em}
.se-nh{font-family:var(--serif);font-size:1.45em;line-height:1;padding:0 .4em .6em;color:var(--ink)}
.se-nav ul{list-style:none;display:flex;flex-direction:column;gap:.1em}
.se-nav li{padding:.38em .6em;border-radius:.55em;color:var(--ink-2);font-size:.94em}
.se-nav li.on{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink);font-weight:600}
.se-main{display:flex;flex-direction:column;gap:1em;padding:1.2em 1.4em 1.3em;min-width:0}
.se-head{display:flex;align-items:flex-start;gap:1em;justify-content:space-between}
.se-head .mh{font-size:1.3em;font-weight:700;letter-spacing:-.015em;line-height:1.15}
.se-head p{font-size:.88em;color:var(--ink-3);margin-top:.2em;max-width:30em;text-wrap:pretty}
.se-add{position:relative;display:inline-flex;align-items:center;gap:.4em;flex:none;padding:.45em .8em;border-radius:.6em;border:1px solid var(--card-line);background:var(--ca-raise);font-size:.86em;font-weight:600;color:var(--ink);white-space:nowrap}
.se-add .ic{width:1em;height:1em;stroke-width:2.2}
.se-list{list-style:none;display:flex;flex-direction:column;border:1px solid var(--card-line);border-radius:.85em;background:var(--ca-raise);overflow:visible}
.se-item+.se-item{border-top:1px solid var(--card-line)}
.se-item.open{background:color-mix(in srgb,var(--lv) 4%,var(--ca-raise))}
.se-item:first-child{border-radius:.85em .85em 0 0}.se-item:last-child{border-radius:0 0 .85em .85em}
.se-row{position:relative;display:flex;align-items:center;gap:.85em;padding:.75em .9em;min-width:0}
.se-gut>.se-item>.se-row{padding-left:2.5em}
.se-ic{display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:.6em;flex:none;border:1px solid color-mix(in srgb,var(--se-h) 30%,transparent);
  background:color-mix(in srgb,var(--se-h) 13%,var(--ca-raise));color:var(--se-hi)}
.se-ic .ic{width:1.2em;height:1.2em}
.se-h1{--se-h:var(--c6);--se-hi:var(--c6-ink)} .se-h2{--se-h:var(--c3);--se-hi:var(--c3-ink)} .se-h3{--se-h:var(--c5);--se-hi:var(--c5-ink)}
.se-h4{--se-h:var(--c4);--se-hi:var(--c4-ink)} .se-h5{--se-h:var(--c1);--se-hi:var(--c1-ink)} .se-h6{--se-h:var(--c2);--se-hi:var(--c2-ink)}
.se-name{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1 1 auto}
.se-name b{display:flex;align-items:center;gap:.5em;font-size:.98em}
.se-name small{font-size:.84em;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.se-badge{font-family:var(--mono);font-size:.68em;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:.15em .5em;border-radius:.4em;color:var(--ink-2);background:var(--card-2)}
.se-st,.se-btn{position:relative;display:inline-flex;align-items:center;gap:.35em;flex:none;font-size:.84em;white-space:nowrap;padding:.32em .75em;border-radius:99px;color:var(--ink-3)}
.se-st.se-on{color:var(--good);background:var(--good-bg);border:1px solid var(--good-line)}
.se-st .ic{width:1em;height:1em;stroke-width:2.4}
.se-btn{color:var(--btn-on);background:var(--btn);font-weight:600;border-radius:.6em;padding:.38em .95em}
.se-chev{display:inline-grid;place-items:center;color:var(--ink-3);transform:rotate(180deg);flex:none}
.se-chev .ic{width:1em;height:1em}
.se-scopes{position:relative;margin:0 .9em .85em 4.05em;padding:.6em .3em .3em;border-radius:.7em;border:1px solid var(--card-line);background:var(--slide)}
.se-gut>.se-item .se-scopes{margin-left:5.65em}
.se-sh{display:flex;justify-content:space-between;gap:1em;padding:0 .7em .4em;font-family:var(--mono);font-size:.72em;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.se-scopes ul{list-style:none;display:flex;flex-direction:column}
.se-scope{position:relative;display:flex;align-items:center;gap:.6em;padding:.45em .7em;border-radius:.5em;min-width:0}
.se-scope+.se-scope{border-top:1px dashed var(--card-line)}
.se-gut .se-scope{padding-left:2.5em}
.se-sn{flex:1 1 auto;min-width:0;font-size:.94em;color:var(--ink)}
.se-scope.off .se-sn{color:var(--ink-3)}
.se-tag{display:inline-flex;align-items:center;gap:.3em;flex:none;font-family:var(--mono);font-size:.72em;letter-spacing:.05em;text-transform:uppercase;padding:.2em .55em;border-radius:.4em;border:1px solid}
.se-tag .ic{width:1.1em;height:1.1em}
.se-read{color:var(--good);background:var(--good-bg);border-color:var(--good-line)}
.se-write{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.se-tog{position:relative;flex:none;width:2.15em;height:1.2em;border-radius:99px;background:var(--card-2);border:1px solid var(--card-line)}
.se-tog i{position:absolute;top:50%;left:.12em;width:.9em;height:.9em;border-radius:50%;background:var(--ca-raise);box-shadow:var(--shadow);transform:translateY(-50%)}
html[data-theme="dark"] .se-tog i{background:var(--ink-3)}
.se-tog.on{background:var(--btn);border-color:var(--btn)}
.se-tog.on i{left:auto;right:.12em;background:var(--btn-on)}

/* pins that sit left of a button get room */
.se-st.pin-l,.se-btn.pin-l,.se-add.pin-l{margin-left:2.3em}
.ca-p-e{left:calc(100% + .58em);top:50%}

/* ── hero: a touch larger, it is the picture ── */
.hero-visual>.ca{font-size:.76em}

/* ── responsive — container queries on the window itself (em = the .ca size) ── */
.ca{container-type:inline-size}
/* the icon rail: when an artifact is open (.rail), or the window is narrow */
.ca.has-side.rail.has-art .ca-win{grid-template-columns:3.1em minmax(0,1fr) minmax(0,.8fr)}
.ca.has-side.rail:not(.has-art) .ca-win{grid-template-columns:3.1em minmax(0,1fr)}
.ca.rail .ca-side{align-items:center;padding:.7em .3em;gap:.35em}
.ca.rail .ca-side :is(.ca-lbl,.ca-brand b,.ca-brand .ca-sp,.ca-hide-m,.ca-h,.ca-recents ul){display:none}
.ca.rail .ca-brand{padding:.15em 0 .5em}
.ca.rail :is(.ca-new,.ca-nav,.ca-proj){padding:.4em 0;gap:0;margin:0;width:2.2em;justify-content:center}
.ca.rail .ca-proj{border-left:0;border-radius:.6em}
.ca.rail .ca-rail{display:inline-grid;place-items:center;padding:.4em;color:var(--ink-3)}
.ca.rail .ca-recents{margin-top:0}
.ca.rail .ca-user{padding:.6em 0 0}
@container (max-width:40em){
  .ca.has-side .ca-win{grid-template-columns:3.1em minmax(0,1fr)}
  .ca.has-side.has-art .ca-win{grid-template-columns:3.1em minmax(0,1fr) minmax(0,.8fr)}
  .ca-side{align-items:center;padding:.7em .3em;gap:.35em}
  .ca-side :is(.ca-lbl,.ca-brand b,.ca-brand .ca-sp,.ca-hide-m,.ca-h,.ca-recents ul){display:none}
  .ca-brand{padding:.15em 0 .5em}
  :is(.ca-new,.ca-nav,.ca-proj){padding:.4em 0;gap:0;margin:0;width:2.2em;justify-content:center}
  .ca-proj{border-left:0;border-radius:.6em}
  .ca-rail{display:inline-grid;place-items:center;padding:.4em;color:var(--ink-3)}
  .ca-recents{margin-top:0}
  .ca-user{padding:.6em 0 0}
  .ca-tchip{display:none}
  .se-win{grid-template-columns:minmax(0,1fr)}
  .se-nav{display:none}
}
/* small: the artifact drops under the chat */
@container (max-width:34em){
  .ca.has-art:not(.has-side) .ca-win{grid-template-columns:minmax(0,1fr)}
  .ca.has-side .ca-win,.ca.has-side.has-art .ca-win,.ca.has-side.rail.has-art .ca-win{grid-template-columns:3.1em minmax(0,1fr)}
  .ca.has-side .ca-side{grid-row:span 2}
  .ca-art{margin:0 1em 1em;grid-column:-2/-1}
  .ca-log{padding:1em 1em .9em}
  .ca-comp{margin:0 .8em .9em}
  .ca-you{padding-left:1.8em}
  .se-main{padding:1em .9em 1.1em}
  .se-head{flex-direction:column;gap:.6em}
  .se-add.pin-l{margin-left:0}
  .se-add.pin-l>.ca-p-l{left:calc(100% + 1.25em)}
  .se-row{flex-wrap:wrap;row-gap:.45em}
  .se-name{flex-basis:calc(100% - 3.2em)}
  .se-row :is(.se-st,.se-btn){margin-left:3.15em}
  .se-row :is(.se-st,.se-btn).pin-l{margin-left:3.15em}
  .se-row :is(.se-st,.se-btn).pin-l>.ca-p-l{left:calc(100% + 1.25em)}
  .se-gut>.se-item>.se-row :is(.se-st,.se-btn){margin-left:3.15em}
  .se-scopes,.se-gut>.se-item .se-scopes{margin:0 .6em .7em}
  .se-scope{flex-wrap:wrap;row-gap:.35em}
  .se-sn{flex-basis:100%}
  .se-scope .se-tog{margin-right:2.2em}
}
@media (max-width:640px){
  .ca,.hero-visual>.ca{font-size:.82em}
  .ca .ca-pin{font-size:calc(var(--ca-u) * .96)}
}
/* the rail has no room for the project row — the header crumb names it */
.ca.rail .ca-proj{display:none}
@container (max-width:40em){.ca-proj{display:none}}
.ca .ca-alt{display:none}
@container (max-width:40em){.ca .ca-alt{display:grid}}
/* a pin above a composer control gets its own row of air */
.ca-comp.pin-up .ca-ph{padding-bottom:2.15em}

/* ═══════════ Mock code UI — a simplified VS Code window (.vs-*) + the Claude Code panel (.cc-*) ═══════════
   visuals/mockcode.mjs. Dark panes in both themes; numbered pins are anchored to named regions
   (.vs-anc is position:relative; .vs-pp-<pos> places the .pin inside it). All sizes in em. */

.vs,.cc-solo{margin:0;--vs-side:#140b06;--vs-hi:color-mix(in srgb,var(--lv) 55%,#fff);--vs-sel:color-mix(in srgb,var(--lv) 26%,transparent);
  --vs-act:3.1em;--vs-exp:minmax(9.5em,.72fr);--vs-mainw:minmax(0,1.55fr);--vs-ccw:minmax(0,1.18fr)}
.vs{font-size:.66em;overflow:visible;display:flex;flex-direction:column;line-height:1.35}
.vs .sr,.cc .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vs .ic,.cc .ic{width:1.15em;height:1.15em}
.vs .ic.claude,.cc .ic.claude{color:var(--claude);stroke-width:2.3}
.vs-sp,.cc-sp{flex:1 1 auto;min-width:.5em}

/* ── pins: anchored to a region, never raw x/y ── */
@property --vs-pinfs{syntax:'<length>';inherits:true;initial-value:16px}
.vs,.cc-solo{--vs-pinfs:1.22em}
.vs-anc{position:relative}
/* free space inside a big region (activity · explorer · editor · panel): its pins sit here, clear of the content */
.vs-gap{position:relative;flex:1 1 auto;min-height:0}
.vs-gap:not(:empty){min-height:3em}
.vs .pin,.cc .pin{font-size:var(--vs-pinfs);box-shadow:0 0 0 .2em var(--code-bg),0 0 0 .32em color-mix(in srgb,var(--lv) 70%,#fff),0 .3em .9em rgba(0,0,0,.5)}
html[data-theme="dark"] .vs .pin,html[data-theme="dark"] .cc .pin{box-shadow:0 0 0 .2em var(--code-bg),0 0 0 .32em color-mix(in srgb,var(--lv) 70%,#fff),0 .3em .9em rgba(0,0,0,.5)}
.vs-pp-c{left:50%;top:50%}
.vs-pp-t{left:50%;top:1.45em}.vs-pp-b{left:50%;top:calc(100% - 1.45em)}
.vs-pp-l{left:1.45em;top:50%}.vs-pp-r{left:calc(100% - 1.6em);top:50%}
.vs-pp-tl{left:1.45em;top:1.45em}.vs-pp-tr{left:calc(100% - 1.6em);top:1.45em}
.vs-pp-bl{left:1.45em;top:calc(100% - 1.45em)}.vs-pp-br{left:calc(100% - 1.6em);top:calc(100% - 1.45em)}
.vs-pp-before{left:-1.45em;top:50%}.vs-pp-after{left:calc(100% + 1.45em);top:50%}
.vs-pp-above{left:50%;top:-1.3em}.vs-pp-below{left:50%;top:calc(100% + 1.3em)}
/* the anchored region glows while its legend item is hovered */
.vs-anc.hot:not(.pin){box-shadow:inset 0 0 0 .14em color-mix(in srgb,var(--lv) 75%,#fff);border-radius:.35em}
.vs-anc{transition:box-shadow .15s}

/* ── title bar ── */
.vs-title{display:flex;align-items:center;gap:.9em;height:2.7em;padding:0 .9em;background:var(--code-bar);border-bottom:1px solid var(--code-line);
  color:var(--code-muted);font-size:.92em;white-space:nowrap;min-width:0;flex:none}
.vs-logo{display:grid;place-items:center;color:var(--vs-hi)}
.vs-menu{display:flex;gap:.85em;color:var(--code-text);opacity:.9;min-width:0;overflow:hidden}
.vs-cmd{display:inline-flex;align-items:center;gap:.55em;padding:.32em 1.1em;border:1px solid var(--code-line);border-radius:.5em;background:var(--code-bg);
  color:var(--code-text);font-family:var(--mono);font-size:.9em;letter-spacing:.02em;min-width:0;overflow:visible}
.vs-win{display:inline-flex;gap:1.1em;color:var(--code-muted)}
.vs-win .ic{width:1.05em;height:1.05em}
.vs-tmini{justify-content:flex-start;gap:0}
.vs-tname{flex:1;text-align:center;font-family:var(--mono);font-size:.92em;letter-spacing:.04em;margin-right:3em;overflow:hidden;text-overflow:ellipsis}

/* ── body grid: activity · explorer · editor/bottom · Claude ── */
.vs>:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}
.vs>:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
.vs-body{display:grid;grid-template-columns:var(--vs-cols);min-height:26em;overflow:hidden;flex:1 1 auto;min-width:0}
.vs-mini .vs-body{min-height:19em}
.vs-body>*{min-width:0}

/* activity bar */
.vs-act{display:flex;flex-direction:column;justify-content:space-between;background:var(--vs-side);border-right:1px solid var(--code-line);padding:.35em 0}
.vs-act ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15em}
.vs-ab{display:grid;place-items:center;height:2.7em;color:#9a7f6d;box-shadow:inset 2px 0 0 transparent}
.vs-ab .ic{width:1.45em;height:1.45em}
.vs-ab.on{color:#fff;box-shadow:inset 2px 0 0 var(--lv)}
.vs-ab-cc .ic.claude{width:1.5em;height:1.5em}

/* explorer */
.vs-exp{display:flex;flex-direction:column;background:var(--vs-side);border-right:1px solid var(--code-line);padding:.45em 0 0}
.vs-h{display:flex;align-items:center;justify-content:space-between;padding:.35em 1em .6em;font-family:var(--mono);font-size:.82em;letter-spacing:.14em;text-transform:uppercase;color:var(--code-muted)}
.vs-tree{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.vs-f{display:flex;align-items:center;gap:.45em;padding:.36em .8em .36em calc(.55em + var(--d,0) * 1.1em);color:#d8c2b2;white-space:nowrap;min-width:0}
.vs-f>span{overflow:hidden;text-overflow:ellipsis}
.vs-f .ic{color:#b08a73}
.vs-f .vs-tw{width:.95em;height:.95em;flex:none;color:var(--code-muted)}
i.vs-tw{display:inline-block}
.vs-root{font-weight:650;color:var(--code-text);letter-spacing:.03em;font-size:.94em;padding-left:.55em}
.vs-f.on{background:var(--vs-sel);color:#fff;box-shadow:inset 2px 0 0 var(--lv)}
.vs-f.on .ic{color:var(--vs-hi)}
.vs-ol{display:flex;flex-direction:column;border-top:1px solid var(--code-line);font-family:var(--mono);font-size:.78em;letter-spacing:.12em;color:var(--code-muted)}
.vs-ol span{display:flex;align-items:center;gap:.4em;padding:.55em .9em}
.vs-ol .vs-tw{width:1em;height:1em}

/* editor */
.vs-main{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--code-line)}
.vs-main:last-child{border-right:0}
.vs-ed{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.vs-tabs{display:flex;align-items:stretch;height:2.65em;background:var(--code-bar);border-bottom:1px solid var(--code-line);min-width:0;white-space:nowrap}
.vs-tab{display:inline-flex;align-items:center;gap:.5em;padding:0 1em;color:var(--code-muted);border-right:1px solid var(--code-line);font-size:.95em;min-width:0}
.vs-tab.on{background:var(--code-bg);color:var(--code-text);box-shadow:inset 0 2px 0 var(--lv)}
.vs-tab .ic{color:#b08a73}.vs-tab.on .ic{color:var(--vs-hi)}
.vs-tab .vs-tx{width:.9em;height:.9em;color:var(--code-muted)}
.vs-tico{display:inline-grid;place-items:center;padding:0 .5em;color:var(--code-muted)}
.vs-crumbs{display:flex;align-items:center;gap:.3em;padding:.5em 1.2em .2em;font-size:.86em;color:var(--code-muted);white-space:nowrap;overflow:hidden}
.vs-crumbs .vs-tw{width:.9em;height:.9em}
.vs .vs-code{font-family:var(--mono);font-size:.9em;line-height:1.72;margin:0;padding:.55em 0 .8em;white-space:pre-wrap;word-break:break-word;flex:none}
.vs-l{display:flex;min-height:1lh}
.vs-ln{flex:none;width:3.4em;padding-right:1.1em;text-align:right;color:var(--code-ln);user-select:none}
.vs-lt{flex:1;min-width:0;padding-right:2.6em}
.vs-l.cur{background:rgba(255,255,255,.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(255,255,255,.06)}
.vs-l.cur .vs-ln{color:var(--code-text)}
.vs-l.mark{background:linear-gradient(90deg,color-mix(in srgb,var(--lv) 24%,transparent),transparent 85%)}
.vs-cu{display:inline-block;width:1.5px;height:1.15em;vertical-align:-.2em;margin-left:.1em;background:var(--code-text)}
.vs-code .h{color:var(--syn-h);font-weight:700}.vs-code .k{color:var(--syn-k)}.vs-code .s{color:var(--syn-s)}.vs-code .n{color:var(--syn-n)}
.vs-code .a{color:var(--syn-a)}.vs-code .c{color:var(--syn-c);font-style:italic}.vs-code .w{color:#fff;font-weight:600}.vs-code .p{color:var(--syn-p)}

/* bottom panel */
.vs-bot{border-top:1px solid var(--code-line);flex:none;display:flex;flex-direction:column;min-height:7.2em}
.vs-main.no-ed .vs-bot{flex:1 1 auto;border-top:0}
.vs-btabs{display:flex;align-items:center;gap:1.5em;padding:.6em 1.2em 0;font-family:var(--mono);font-size:.8em;letter-spacing:.1em;text-transform:uppercase;color:var(--code-muted);white-space:nowrap}
.vs-btabs span{padding-bottom:.45em;border-bottom:2px solid transparent}
.vs-btabs span.on{color:var(--code-text);border-bottom-color:var(--lv)}
.vs .vs-term{font-family:var(--mono);font-size:.88em;line-height:1.7;margin:0;padding:.75em 1.35em .9em;white-space:pre-wrap;word-break:break-all;display:flex;flex-direction:column;flex:1 1 auto}
.vs-term .p{color:var(--syn-k)}.vs-term .w{color:#fff}.vs-term .out{color:var(--code-muted)}

/* status bar */
.vs-status{display:flex;align-items:stretch;height:2.15em;background:var(--vs-side);border-top:1px solid var(--code-line);font-size:.86em;color:var(--code-muted);white-space:nowrap;flex:none;min-width:0}
.vs-rem{display:grid;place-items:center;padding:0 .85em;background:var(--lv);color:var(--lv-on)}
.vs-si{display:inline-flex;align-items:center;gap:.35em;padding:0 .75em}
.vs-si .ic{width:1em;height:1em}
.vs-sicc{color:var(--code-text);font-weight:600;background:rgba(255,255,255,.05)}

/* ═══ the Claude Code panel (.cc) — inside the window or alone (.cc-solo) ═══ */
.cc{display:flex;flex-direction:column;min-width:0;background:var(--code-bg)}
.cc-solo{font-size:.7em;line-height:1.4}
.vs-cc{line-height:1.4}
.cc-head{display:flex;align-items:center;gap:.4em;height:2.65em;padding:0 .7em 0 1em;border-bottom:1px solid var(--code-line);background:var(--code-bar);flex:none;white-space:nowrap}
.cc-solo .cc-head{height:3.1em;padding:0 .9em 0 1.2em}
.cc-title{display:inline-flex;align-items:center;gap:.55em;font-weight:700;color:var(--code-text);font-size:1.02em}
.cc-hbtn{display:inline-grid;place-items:center;width:2em;height:2em;border-radius:.45em;color:var(--code-muted)}
.cc-main{display:flex;flex-direction:column;justify-content:space-between;gap:1em;flex:1 1 auto;padding:.9em .9em .85em}
.cc-solo .cc-main{padding:1.1em 1.2em 1.1em;gap:1.4em}
.cc-thread{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75em;min-width:0}
.cc-user{align-self:flex-end;max-width:92%;margin-left:2.2em;padding:.6em .85em;border-radius:.75em .75em .25em .75em;
  background:#2a190f;border:1px solid #4a3021;color:var(--code-text);line-height:1.45;text-wrap:pretty}
.cc .cc-thread code,.cc-ref{font-family:var(--mono);font-size:.84em;padding:.08em .4em;border-radius:.3em;white-space:nowrap;
  background:color-mix(in srgb,var(--lv) 30%,transparent);color:color-mix(in srgb,var(--lv) 30%,#fff);border:1px solid color-mix(in srgb,var(--lv) 45%,transparent)}
.cc-user b{color:#fff}
.cc-read{display:flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.84em;color:var(--code-muted);align-self:flex-start;max-width:100%}
.cc-read .cc-file{color:var(--code-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-dot{width:.5em;height:.5em;border-radius:50%;background:#71d39b;flex:none}
.cc-say{display:flex;gap:.55em;align-items:flex-start;color:var(--code-text);line-height:1.45;align-self:flex-start;max-width:100%}
.cc-say .ic{margin-top:.12em}
.cc-say b{color:#fff}
.cc-listw,.cc-donew{align-self:stretch}
.cc-list,.cc-done{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35em;color:var(--code-text)}
.cc-list li{position:relative;padding-left:1.7em}
.cc-list li::before{content:"";position:absolute;left:.55em;top:.5em;width:.4em;height:.4em;border-radius:50%;background:var(--vs-hi,color-mix(in srgb,var(--lv) 55%,#fff))}
.cc-done li{display:flex;gap:.6em;align-items:flex-start}
.cc-done .ic{color:#71d39b;margin-top:.1em;stroke-width:2.4}
.cc-list b,.cc-done b{color:#fff}

/* diff card */
.cc-diff{border:1px solid var(--code-line);border-radius:.7em;overflow:visible;background:#140b06;align-self:stretch}
.cc-dh{display:flex;align-items:center;gap:.55em;padding:.6em .85em;font-family:var(--mono);font-size:.84em;color:var(--code-text);border-bottom:1px solid var(--code-line);min-width:0}
.cc-dh .ic{color:var(--code-muted)}
.cc-dh .cc-file{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-stat{display:inline-flex;gap:.5em;font-weight:500;white-space:nowrap}
.cc-plus{color:#71d39b}.cc-minus{color:#ff8d7a}
.cc .cc-dl{margin:0;font-family:var(--mono);font-size:.82em;line-height:1.6;padding:.35em 0;white-space:pre-wrap;word-break:break-word;display:flex;flex-direction:column}
.cc-dl>span{display:flex;gap:.6em;padding:0 .9em}
.cc-dl b{flex:none;width:.7em;font-weight:500}
.cc-del{background:rgba(255,110,90,.14);color:#ffc2b5}.cc-del b{color:#ff8d7a}
.cc-add{background:rgba(113,211,155,.12);color:#c9f2d7}.cc-add b{color:#71d39b}
.cc-ctx{color:var(--code-muted)}
.cc-acts{display:flex;justify-content:flex-end;gap:.6em;padding:.65em .8em;border-top:1px solid var(--code-line)}
.cc-btn{display:inline-flex;align-items:center;gap:.4em;padding:.42em 1em;border-radius:.45em;font-weight:650;font-size:.92em;border:1px solid #4a3021;color:var(--code-text);background:#22150d}
.cc-ok{background:#2b7a45;border-color:#2b7a45;color:#fff}
.cc-ok .ic{width:1em;height:1em;stroke-width:2.6}

/* input box */
.cc-in{border:1px solid #4a3021;border-radius:.75em;background:#1f130b;padding:.75em .8em .6em;display:flex;flex-direction:column;gap:.7em;flex:none}
.cc-ph{display:inline-flex;align-items:center;color:var(--code-muted);align-self:flex-start}
.cc-caret{display:inline-block;width:.5em;height:1.15em;margin-left:.2em;background:color-mix(in srgb,var(--lv) 55%,#fff);animation:blink 1.1s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.cc-caret{animation:none}}
.cc-in-bar{display:flex;align-items:center;gap:.6em}
.cc-mode{display:inline-flex;align-items:center;gap:.4em;padding:.3em .65em;border-radius:.45em;font-family:var(--mono);font-size:.84em;font-weight:500;white-space:nowrap;
  color:color-mix(in srgb,var(--lv) 35%,#fff);background:color-mix(in srgb,var(--lv) 18%,transparent);border:1px solid color-mix(in srgb,var(--lv) 45%,transparent)}
.cc-mode .ic{width:1.05em;height:1.05em}.cc-mode .cc-chev{width:.9em;height:.9em}
.cc-hints{display:inline-flex;gap:1em;font-family:var(--mono);color:var(--code-muted);padding:0 .4em}
.cc-send{display:inline-grid;place-items:center;width:2em;height:2em;border-radius:50%;background:var(--lv);color:var(--lv-on)}
.cc-send .ic{width:1em;height:1em;stroke-width:2.4}
.cc-in-c{flex-direction:row;align-items:center;justify-content:space-between;padding:.65em .8em}
.cc-in-c .cc-mode{background:none;border:0;color:var(--code-muted);padding:0}

/* ── mini (hero) ── */
.vs-mini{font-size:.62em}
.vs-mini .vs-exp{padding-top:.3em}

/* ── narrower windows: drop the least useful chrome first ── */
@container (max-width:40em){.vs-mx{display:none}}
.vs{container-type:inline-size}
@media (max-width:1100px){.vs:not(.vs-mini){--vs-exp:minmax(8.5em,.62fr)}.vs-menu .vs-mx,.vs-tico.vs-mx{display:none}}

/* ── mobile: activity bar stays (slim), explorer becomes a strip, editor + panel stack ── */
@media (max-width:640px){
  .vs{font-size:.8em}
  .cc-solo{font-size:.8em}
  .vs-body{grid-template-columns:minmax(0,1fr);min-height:0}
  .vs.has-act .vs-body{grid-template-columns:2.6em minmax(0,1fr)}
  .vs.has-act .vs-body>:not(.vs-act){grid-column:2}
  .vs-act{grid-column:1;grid-row:1 / span 3}
  .vs-ab{height:2.4em}.vs-ab .ic{width:1.25em;height:1.25em}
  .vs-ab-end{display:none!important}
  .vs-exp{border-right:0;border-bottom:1px solid var(--code-line);padding:.5em .5em .55em}
  .vs-exp .vs-h,.vs-ol{display:none}
  .vs-exp{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5em .35em}
  .vs-tree{display:contents}
  .vs-exp .vs-gap{flex:0 0 2.8em;min-height:2.2em}
  .vs-f{padding:.25em .55em;border-radius:.4em;background:rgba(255,255,255,.04)}
  .vs-f .vs-tw{display:none}
  .vs-root{background:none;padding-left:.2em}
  .vs-main{border-right:0}
  .vs-cc{border-top:1px solid var(--code-line)}
  .vs-menu,.vs-win,.vs-mx,.vs-tico.vs-mx{display:none}
  .vs-title{justify-content:space-between}
  .vs-tname{margin-right:0}
  .vs-lt{padding-right:2.4em}
  .vs-ln{width:2.6em;padding-right:.8em}
  .vs-status .vs-si:not(.vs-sicc):not(:nth-child(2)){display:none}
  .cc-user{margin-left:1.2em}
  .vs-tabs{padding-right:.9em}
  .vs-el>.pin{left:calc(100% - .1em);top:0;font-size:calc(var(--vs-pinfs) * .76)}
  .cc-user>.pin{left:-.1em;top:50%}
}

/* ═══════════ Diagram: stack — a load-order rail of layers summing to one "=" bar (visuals/stack.mjs) ═══════════ */
.st{margin:0;min-width:0;display:flex;flex-direction:column;gap:.95em}
.st-h{display:flex;align-items:center;gap:.75em;font-family:var(--mono);font-size:.62em;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.st-h .ic{width:1.35em;height:1.35em;color:var(--lv-ink)}
.st-body{position:relative;--nw:2.55em;--g:.55em;--sg:1.15em;--cg:1em}
.st-list{list-style:none;display:flex;flex-direction:column;gap:var(--g);margin:0;padding:0}
.st-row,.st-sum{position:relative;display:grid;grid-template-columns:var(--nw) minmax(0,1fr);column-gap:var(--cg);align-items:center}
/* the rail: one 2px segment per row, joined across the gaps; starts at the first node, ends at "=" */
.st-row::before,.st-sum::before{content:"";position:absolute;z-index:0;left:calc(var(--nw) / 2 - 1px);width:2px;
  top:calc(var(--g) / -2);bottom:calc(var(--g) / -2);background:color-mix(in srgb,var(--lv) 38%,var(--card-line))}
.st-row:first-child::before{top:50%}
.st-sum{margin-top:var(--sg)}
.st-sum::before{top:calc(-1 * var(--sg) - var(--g));bottom:50%}
.st-sum::after{content:"";position:absolute;left:calc(var(--nw) + var(--cg));right:0;top:calc(var(--sg) / -2);height:1px;background:var(--rule)}

/* nodes */
.st-node{position:relative;z-index:1;justify-self:center;display:grid;place-items:center;width:var(--nw);height:var(--nw);border-radius:50%;
  background:var(--lv-soft);color:var(--lv-ink);box-shadow:inset 0 0 0 1px var(--lv-line);transition:transform .15s,box-shadow .15s}
.st-node .ic{width:1.15em;height:1.15em}
.st-on .st-node{background:var(--lv);color:var(--lv-on);box-shadow:0 0 0 .32em color-mix(in srgb,var(--lv) 20%,transparent)}
.st-faint .st-node{width:calc(var(--nw) * .78);height:calc(var(--nw) * .78);background:var(--slide);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--card-line)}
.st-faint .st-node .ic{width:1em;height:1em}
.st-dash .st-node{background:var(--slide);box-shadow:inset 0 0 0 1.5px var(--lv-line)}
.st-eq{background:var(--lv);color:var(--lv-on);box-shadow:0 .35em .9em -.3em color-mix(in srgb,var(--lv) 70%,transparent);
  font-family:var(--mono);font-size:1.05em;font-weight:500;line-height:1;width:calc(var(--nw) / 1.05);height:calc(var(--nw) / 1.05)}

/* layer cards */
.st-card{display:flex;align-items:center;gap:.9em;min-width:0;min-height:2.95em;padding:.62em .75em .62em 1.15em;
  background:var(--card);border:1px solid var(--card-line);border-radius:.9em;transition:border-color .15s,background .15s}
.st-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.12em}
.st-t{font-size:1em;font-weight:700;letter-spacing:-.012em;line-height:1.25;color:var(--ink);text-wrap:balance}
.st-t code{font-size:.9em;font-weight:500;padding:0;background:none;border:0;color:inherit;letter-spacing:-.01em}
.st-ex{font-size:.78em;font-style:italic;line-height:1.35;color:var(--ink-3);text-wrap:pretty}
.st-side{flex:0 1 auto;min-width:0;max-width:58%;display:flex;justify-content:flex-end;text-align:right}
.st-side .st-t code{font-size:.9em;font-weight:500;padding:0;background:none;border:0;color:inherit;letter-spacing:-.01em}
.st-ex{font-size:.8em}
.st-tag{font-size:.66em}
.st-on .st-card{background:var(--lv-soft);border-color:var(--lv-line);box-shadow:0 0 0 .2em color-mix(in srgb,var(--lv) 9%,transparent)}
.st-on .st-tag{background:color-mix(in srgb,var(--lv) 13%,transparent);color:var(--lv-ink);border-color:color-mix(in srgb,var(--lv) 30%,transparent)}
.st-dash .st-card{background:transparent;border:1.5px dashed color-mix(in srgb,var(--lv) 42%,var(--card-line))}
.st-faint .st-card{background:transparent;min-height:2.5em;padding-top:.48em;padding-bottom:.48em}
.st-faint .st-t{font-size:.92em;font-weight:620;color:var(--ink-2)}
/* hover link with a split slide's legend (lesson.js toggles .hot) */
.st-row.hot .st-card{border-color:var(--lv);background:var(--lv-soft)}
.st-row.hot .st-node{transform:scale(1.1)}

/* the sum: "=" + a bar filled with the level hue */
.st-bar{display:flex;align-items:center;gap:1.2em;min-width:0;padding:.95em 1.3em;border-radius:1em;background:var(--lv);color:var(--lv-on);
  box-shadow:0 1em 1.8em -1.1em color-mix(in srgb,var(--lv) 85%,transparent)}
.st-btxt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.18em}
.st-btxt b{font-size:1.18em;font-weight:760;letter-spacing:-.018em;line-height:1.2;color:var(--lv-on);text-wrap:balance}
.st-btxt>span:not(.sr-only){font-size:.84em;line-height:1.35;color:color-mix(in srgb,var(--lv-on) 84%,transparent)}
.st-bar code{color:var(--lv-on);background:color-mix(in srgb,var(--lv-on) 16%,transparent);border-color:color-mix(in srgb,var(--lv-on) 30%,transparent)}
.st-lines{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.28em;width:3.6em}
.st-lines i{display:block;height:.24em;border-radius:99px;background:currentColor;opacity:.42}
.st-lines i:nth-child(1){width:100%}.st-lines i:nth-child(2){width:72%}.st-lines i:nth-child(3){width:90%}.st-lines i:nth-child(4){width:58%}.st-lines i:nth-child(5){width:80%}

/* on a wide slide (desktop): the sum moves beside the layers — a brace gathers them into "=" */
@media (min-width:900px){
  .s-wide .st-body{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);column-gap:0;align-items:stretch}
  .s-wide .st-row:last-child::before{bottom:50%}
  .s-wide .st-sum{margin:0;padding-left:1.1em;grid-template-columns:auto minmax(0,1fr);column-gap:.9em;align-items:stretch}
  .s-wide .st-sum::after{left:0;right:auto;top:1.1em;bottom:1.1em;width:.9em;height:auto;background:none;
    border:2px solid color-mix(in srgb,var(--lv) 38%,var(--card-line));border-left:0;border-radius:0 .9em .9em 0}
  .s-wide .st-sum::before{left:calc(.9em + 2px);top:calc(50% - 1px);bottom:auto;width:1.1em;height:2px}
  .s-wide .st-eq{align-self:center;margin-left:1em}
  .s-wide .st-bar{align-self:center;flex-direction:column;align-items:flex-start;justify-content:center;gap:1.1em;padding:1.35em 1.45em 1.45em}
  .s-wide .st-btxt{flex:none}
  .s-wide .st-btxt b{font-size:1.3em}
  .s-wide .st-lines{align-items:flex-start;width:5.5em}
}

@media (max-width:640px){
  .st-body{--nw:2.2em;--cg:.7em;--g:.5em}
  .st-card{flex-wrap:wrap;gap:.35em .6em;padding:.55em .7em .55em .85em}
  .st-side{max-width:100%;justify-content:flex-start;text-align:left}
  .st-tag{white-space:normal;font-size:.7em}
  .st-lines{display:none}
  .st-bar{padding:.8em 1em}
  .st-btxt b{font-size:1.08em}
}

/* ═══════════ Diagram: tree — an explorer pane with annotated rows (visuals/tree.mjs) ═══════════ */
.tr{margin:0;min-width:0;--st:1.45em;--pad:1.15em;--icw:1.15em;--gap:.6em;
  --tr-ink:var(--code-text);--tr-ic:var(--code-muted);--tr-guide:color-mix(in srgb,var(--code-muted) 32%,transparent);--tr-lead:color-mix(in srgb,var(--code-muted) 55%,transparent);
  --tr-note:var(--code-muted);--tr-on:color-mix(in srgb,var(--lv) 30%,var(--code-bg));--tr-on-ink:#fff;--tr-out:color-mix(in srgb,var(--lv) 42%,#fff)}
.tr-bar{display:flex;align-items:center;gap:.9em;height:2.5em;padding:0 1.2em;font-family:var(--mono);font-size:.64em;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;color:var(--code-muted);background:var(--code-bar);border-bottom:1px solid var(--code-line)}
.tr-sp{flex:1}
.tr-more{letter-spacing:.1em}
.tr-tag{letter-spacing:.14em}
.tr-body{padding:.65em 0 .75em;font-size:.86em}
.tr-list{list-style:none;margin:0;padding:0}

.tr-row{position:relative;display:flex;align-items:center;gap:var(--gap);min-width:0;min-height:2.15em;
  padding:.3em 1.1em .3em calc(var(--pad) + var(--d,0) * var(--st));color:var(--tr-ink);transition:background .15s,box-shadow .15s}
/* indentation guides: one hairline under each ancestor folder's icon */
.tr-row::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--pad) + var(--icw) / 2 - .5px);width:calc(var(--d,0) * var(--st));
  background:repeating-linear-gradient(90deg,var(--tr-guide) 0 1px,transparent 1px var(--st));pointer-events:none}
.tr-row>.ic{position:relative;width:var(--icw);height:var(--icw);color:var(--tr-ic)}
.tr-n{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.tr-root{font-weight:720;letter-spacing:.02em;text-transform:uppercase;color:var(--tr-on-ink);margin-bottom:.15em}
.tr-root>.ic{color:var(--tr-ink)}
.tr-faint{opacity:.55}
/* the highlighted row (and any row whose legend item is hovered) */
.tr-on,.tr-row.hot{background:var(--tr-on);box-shadow:inset .2em 0 0 var(--lv)}
.tr-on .tr-n,.tr-row.hot .tr-n{font-weight:680;color:var(--tr-on-ink)}
.tr-on>.ic,.tr-row.hot>.ic{color:var(--tr-on-ink)}

/* annotation: a dotted leader, then a note or a pill, right-aligned */
.tr-lead{flex:1 1 1.5em;min-width:1.2em;height:0;margin:0 .35em;border-top:1.5px dotted var(--tr-lead)}
.tr-note{flex:0 1 auto;min-width:0;font-size:.84em;line-height:1.3;color:var(--tr-note);text-align:right;text-wrap:balance}
.tr-pill{flex:0 1 auto;min-width:0;font-size:.84em;font-weight:650;line-height:1.25;padding:.32em .95em;border-radius:999px;text-align:center;
  background:var(--lv);color:var(--lv-on);box-shadow:0 .3em .8em -.4em color-mix(in srgb,var(--lv) 80%,transparent)}
.tr-pill.tr-out{background:transparent;color:var(--tr-out);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tr-out) 55%,transparent);font-weight:500}
.tr-pill code,.tr-note code{font-size:.92em;padding:0 .1em;border:0;background:none;color:inherit;white-space:nowrap}
.tr-note code{color:var(--tr-ink)}
.tr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* light variant: a small card, mono rows (an inline example beside text) */
.tr-light{--st:1.35em;--pad:1em;--icw:1.1em;--gap:.5em;
  --tr-ink:var(--ink);--tr-ic:var(--ink-3);--tr-guide:var(--card-line);--tr-lead:color-mix(in srgb,var(--ink-3) 45%,transparent);
  --tr-note:var(--ink-3);--tr-on:var(--lv-soft);--tr-on-ink:var(--ink);--tr-out:var(--lv-ink);
  background:color-mix(in srgb,var(--card) 55%,var(--slide));border:1px solid var(--card-line);border-radius:.9em;overflow:hidden;box-shadow:var(--shadow)}
.tr-light .tr-bar{background:transparent;border-bottom:1px solid var(--rule);color:var(--ink-3);height:2.3em}
.tr-light .dots3 i{background:var(--card-line)}
.tr-light .tr-body{font-family:var(--mono);font-size:.74em;padding:.55em 0 .65em}
.tr-light .tr-row{min-height:1.95em}
.tr-light .tr-on .tr-n,.tr-light .tr-row.hot .tr-n{color:var(--lv-ink)}
.tr-light .tr-on>.ic,.tr-light .tr-row.hot>.ic{color:var(--lv-ink)}
.tr-light .tr-pill{font-family:var(--sans)}
.tr-light .tr-note{font-family:var(--sans);font-size:.9em}

/* phones: annotations drop below their row, lined up with the name */
@media (max-width:640px){
  .tr{--st:1.15em;--pad:.85em}
  .tr-body{font-size:.9em}
  .tr-light .tr-body{font-size:.8em}
  .tr-row{flex-wrap:wrap;row-gap:.25em;padding-right:.85em}
  .tr-lead{flex:0 0 100%;height:0;margin:0;border:0}
  .tr-note,.tr-pill{margin-left:calc(var(--icw) + var(--gap));text-align:left;margin-bottom:.2em}
  .tr-note{font-size:.86em}
}
/* pinned rows carry their legend number, so the match reads without hovering */
.tr-pin{flex:none;display:inline-grid;place-items:center;width:1.45em;height:1.45em;margin-left:.45em;border-radius:50%;font-family:var(--mono);font-size:.68em;font-weight:700;background:var(--lv);color:var(--lv-on)}
[data-hk].hot .tr-pin{box-shadow:0 0 0 .2em color-mix(in srgb,var(--lv) 30%,transparent)}

/* ═══════════ Demos: the faux Claude interfaces (ported from the pre-deck lesson pages) ═══════════
   Light surfaces use the deck tokens (so they theme); dark panes keep literal espresso
   colours because they depict app windows and stay dark in both themes. Sizes are em,
   so a demo scales with its slide. Players: learn/lesson.js (class-based). */
/* ===== interactive IDE model ===== */
.idemodel{background:var(--paper);border:1px solid var(--card-line);border-left:3px solid var(--accent);border-radius:0.5em;padding:1.15em 1.25em;margin:0}
.im-tabs{display:flex;gap:0.438em;flex-wrap:wrap;margin:0.625em 0 0.75em}
.im-tab{font-family:var(--mono);font-size:.6em;letter-spacing:.08em;text-transform:uppercase;background:var(--paper);border:1px solid var(--card-line);border-radius:1.667em;padding:0.833em 1.354em;color:var(--ink-mid);cursor:pointer}
.im-tab.on{color:var(--btn-on);background:var(--btn);border-color:var(--cta)}
.im-shell{display:flex;border:1px solid var(--dark-2);border-radius:0.5em;overflow:hidden;background:#1a0f08;min-height:16.875em}
.im-side{flex:0 0 10.887em;background:#23150d;border-right:1px solid #3a2616;padding:1.008em 0.907em;display:flex;flex-direction:column;gap:0.706em;font-family:var(--mono);font-size:.62em;color:#c79b86}
.im-side .im-file{padding-left:0.625em;opacity:.7}
.im-side .im-file.on{color:#ffd9c2;opacity:1}
.im-main{flex:1;display:flex;flex-direction:column;min-width:0}
.im-ed{margin:0;padding:1.128em 1.215em;font-family:var(--mono);font-size:.72em;line-height:1.75;color:#e8d5c4;background:#1a0f08;white-space:pre-wrap;min-height:10.417em}
.im-ghost{color:#8d6e63;font-style:italic}
.im-cursor{color:var(--accent-light);animation:imblink 1.1s step-end infinite}
@keyframes imblink{50%{opacity:0}}
.im-sel{background:rgba(230,74,25,.35);color:#ffe0cf;border-radius:2px}
.im-panel{border-top:1px solid #3a2616;background:#23150d;padding:0.75em 0.875em;display:flex;flex-direction:column;gap:0.562em;align-items:flex-start}
.im-p{margin:0;font-size:.8em;color:#e2cfc6}
.im-btn{font-family:var(--mono);font-size:.62em;letter-spacing:.06em;text-transform:uppercase;background:none;border:1px solid #8d6e63;border-radius:1.411em;padding:0.706em 1.31em;color:#ffd9c2;cursor:pointer}
.im-btn.on{background:var(--accent);border-color:var(--accent);color:var(--lv-on)}
.im-btn:hover{border-color:var(--accent-light)}
.im-bub{background:#1a0f08;border:1px solid #3a2616;border-left:3px solid var(--accent);border-radius:0.481em;padding:0.801em 0.962em;font-size:.78em;color:#e8d5c4;line-height:1.5}
.im-acts{font-family:var(--mono);font-size:.66em;color:#9ad8a0;display:flex;flex-direction:column;gap:0.379em}
.im-diff{width:100%;border:1px solid #3a2616;border-radius:0.375em;overflow:hidden}
.im-diff .dh{display:block;font-family:var(--mono);font-size:.58em;letter-spacing:.06em;text-transform:uppercase;color:#ffd9c2;background:#1a0f08;padding:0.647em 1.078em;border-bottom:1px solid #3a2616}
.im-diff .dl{display:block;font-family:var(--mono);font-size:.68em;padding:2px 0.919em;color:#c9b3aa}
.im-diff .dl.rm{background:rgba(180,50,40,.25);color:#ff9a8a}
.im-diff .dl.ad{background:rgba(60,140,70,.22);color:#9ad8a0}
.im-hint{font-size:.8em;color:var(--ink-light);margin:0.781em 0 0}
.im-hint::before{content:"◆ ";color:var(--accent)}
@media (max-width:560px){.im-side{flex-basis:5.25em}}
@media (prefers-reduced-motion:reduce){.im-cursor{animation:none}}

/* ===== interactive GitHub board ===== */
.gitmodel{background:var(--paper);border:1px solid var(--card-line);border-left:3px solid var(--accent);border-radius:0.5em;padding:1.15em 1.25em;margin:0}
.gm-cols{display:grid;grid-template-columns:1fr auto 1fr;gap:0.625em;align-items:stretch;margin-top:0.75em}
.gm-col{background:#1a0f08;border:1px solid #3a2616;border-radius:0.5em;padding:0.688em 0.625em;min-height:9.375em}
.gm-h{font-family:var(--mono);font-size:.62em;letter-spacing:.04em;color:#ffd9c2;text-align:center;margin-bottom:0.907em}
.gm-stack{display:flex;flex-direction:column;gap:0.375em}
.gm-c{font-family:var(--mono);font-size:.64em;padding:0.586em 0.879em;border-radius:0.488em;background:#23150d;border:1px solid #3a2616;color:#e8d5c4;transition:box-shadow .2s}
.gm-c.mate{color:#9ad8a0}
.gm-c.merge{background:rgba(230,74,25,.22);color:#ffd9c2}
.gm-c.only{box-shadow:0 0 0 2px var(--accent-light);border-color:var(--accent)}
.gm-mid{display:flex;flex-direction:column;justify-content:center;gap:1.75em;font-family:var(--mono);font-size:.5em;letter-spacing:.06em;text-transform:uppercase;color:#8d6e63;text-align:center;line-height:1.4}
.gm-status{font-size:.82em;color:var(--ink-mid);line-height:1.5;min-height:3em;margin:1.067em 0 0.915em}
.gm-status b{color:var(--ink);font-weight:600}
.gm-btns{display:flex;gap:0.438em;flex-wrap:wrap}
.gm-btns button{font-family:var(--mono);font-size:.6em;letter-spacing:.06em;text-transform:uppercase;background:var(--accent-bg);border:1px solid var(--accent);border-radius:1.667em;padding:0.833em 1.354em;color:var(--accent-text);cursor:pointer}
.gm-btns button:hover{background:var(--lv-hover)}
.gm-btns button.ghost{background:var(--paper);border-color:var(--rule);color:var(--ink-light)}
@media (max-width:560px){.gm-status{min-height:3.6em}}

/* ===== faux-interface demos (vague⇄sharp toggles, ROCCO builder) ===== */
.ivx{margin:0;min-width:0}
.ivx-lbl{font-family:var(--mono);font-size:.62em;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);margin:0 0 1.008em}

/* --- vague ⇄ sharp toggle cards --- */
.vc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));gap:0.75em}
.vc-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--card-line);border-radius:0.625em;padding:0.812em 0.875em;box-shadow:0 2px 0.625em rgba(62,39,35,.04)}
.vc-top{display:flex;align-items:center;gap:0.5em;margin-bottom:0.562em}
.vc-cat{font-family:var(--mono);font-size:.58em;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-light)}
.vc-state{margin-left:auto;font-family:var(--mono);font-size:.56em;letter-spacing:.06em;text-transform:uppercase;color:var(--bad);background:var(--bad-bg);border-radius:1.339em;padding:3px 1.004em}
.vc-card.fixed .vc-state{color:var(--good);background:var(--good-bg)}
.vc-msg{margin:0;font-family:var(--mono);font-size:.76em;line-height:1.55;white-space:pre-wrap;word-break:break-word;background:var(--dark-2);border-radius:0.576em;padding:0.905em 0.987em;min-height:3.2em}
.vc-msg-vague{color:#e8c7bb}
.vc-msg-clear{display:none;color:#d7ead9}
.vc-card.fixed .vc-msg-vague{display:none}
.vc-card.fixed .vc-msg-clear{display:block}
.vc-crit{margin:0.703em 0 0;font-size:.8em;line-height:1.45}
.vc-crit-bad{color:var(--bad)}
.vc-crit-good{display:none;color:var(--good)}
.vc-card.fixed .vc-crit-bad{display:none}
.vc-card.fixed .vc-crit-good{display:block}
.vc-toggle{margin-top:1.146em;align-self:flex-start;font-family:var(--mono);font-size:.6em;letter-spacing:.06em;text-transform:uppercase;background:var(--accent-bg);border:1px solid var(--accent);border-radius:1.667em;padding:0.729em 1.354em;color:var(--accent-text);cursor:pointer}
.vc-toggle:hover{background:var(--lv-hover)}

/* --- ROCCO builder --- */
.rocco{background:var(--paper);border:1px solid var(--card-line);border-left:3px solid var(--accent);border-radius:0.5em;padding:1.125em 1.25em}
.ro-presets{display:flex;align-items:center;gap:0.438em;flex-wrap:wrap;margin-bottom:0.875em}
.ro-plbl{font-family:var(--mono);font-size:.58em;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-light);margin-right:2px}
.ro-preset,.ro-clear{font-family:var(--mono);font-size:.6em;letter-spacing:.04em;text-transform:uppercase;background:var(--accent-bg);border:1px solid var(--accent);border-radius:1.667em;padding:0.729em 1.354em;color:var(--accent-text);cursor:pointer}
.ro-preset:hover,.ro-clear:hover{background:var(--lv-hover)}
.ro-preset.on{color:var(--btn-on);background:var(--btn);border-color:var(--cta)}
.ro-clear{background:var(--paper);border-color:var(--rule);color:var(--ink-light)}
.ro-fields{display:flex;flex-direction:column;gap:0.562em}
.ro-field{display:flex;gap:0.688em;align-items:flex-start}
.ro-key{flex:0 0 auto;width:2.083em;height:2.083em;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:.78em;color:var(--ink-light);background:var(--rule-soft);border:1px solid var(--card-line);margin-top:2px}
.ro-field.filled .ro-key{color:var(--lv-on);background:var(--accent);border-color:var(--accent)}
.ro-body{flex:1;min-width:0}
.ro-name{display:block;font-family:var(--mono);font-size:.58em;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mid);margin-bottom:3px}
.ro-in{width:100%;box-sizing:border-box;resize:none;overflow:hidden;font-family:var(--sans);font-size:.86em;line-height:1.5;color:var(--ink);background:var(--bg);border:1px solid var(--card-line);border-radius:0.436em;padding:0.509em 0.727em;min-height:2.3em}
.ro-in:focus{outline:none;border-color:var(--accent);background:var(--paper)}
.ro-in::placeholder{color:var(--ink-faint)}
.ro-out{margin-top:0.938em}
.ro-out-h{display:flex;align-items:center;gap:0.5em;flex-wrap:wrap;margin-bottom:0.438em}
.ro-out-t{font-family:var(--mono);font-size:.58em;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-light)}
.ro-acts{margin-left:auto;display:flex;gap:0.438em}
.ro-prompt{margin:0;background:var(--dark-2);color:#ecd9cc;border:1px solid #3a2616;border-radius:0.61em;padding:0.991em 1.143em;font-family:var(--mono);font-size:.82em;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.ro-prompt.empty{color:#8d6e63}

/* --- token split --- */
.tok-chips{display:flex;flex-wrap:wrap;gap:0.312em}
.tok-chip{font-family:var(--mono);font-size:.82em;color:#e8d5c4;background:var(--dark-2);border:1px solid #3a2616;border-radius:0.381em;padding:0.381em 0.686em}
.tok-chip:nth-child(odd){background:#2c1b10}
.tok-note{font-size:.86em;color:var(--ink-mid);margin:0.799em 0 0}
.tok-note b{color:var(--accent-text);font-family:var(--mono);font-size:.8em}

/* --- terminal replay (faux Claude window) --- */
.tm-win{border:1px solid var(--dark-2);border-radius:0.625em;overflow:hidden;background:#1a0f08;box-shadow:0 0.25em 1.125em rgba(62,39,35,.1)}
.tm-bar{display:flex;align-items:center;gap:0.625em;padding:0.562em 0.75em;background:#23150d;border-bottom:1px solid #3a2616}
.tm-dots{display:flex;gap:0.312em}
.tm-dots i{width:0.562em;height:0.562em;border-radius:50%;background:#4a3122}
.tm-tabs{display:flex;gap:0.312em;margin-left:2px}
.tm-tab{font-family:var(--mono);font-size:.58em;letter-spacing:.05em;text-transform:uppercase;background:transparent;border:1px solid #3a2616;border-radius:1.509em;padding:0.539em 1.185em;color:#c79b86;cursor:pointer}
.tm-tab.on{color:var(--btn-on);background:var(--btn);border-color:var(--cta)}
.tm-replay{margin-left:auto;font-family:var(--mono);font-size:.58em;letter-spacing:.05em;text-transform:uppercase;background:transparent;border:1px solid #3a2616;border-radius:1.509em;padding:0.539em 1.185em;color:#ffb38f;cursor:pointer}
.tm-replay:hover{border-color:var(--accent-light);color:#fff}
.tm-body{padding:0.875em}
.tm-panel{display:none}
.tm-panel.on{display:block}
.tm-msg{margin-bottom:0.688em}
.tm-who{display:block;font-family:var(--mono);font-size:.54em;letter-spacing:.09em;text-transform:uppercase;margin-bottom:0.463em}
.tm-user .tm-who{color:#8d6e63}
.tm-claude .tm-who{color:#ffb38f}
.tm-txt{margin:0;font-size:.9em;line-height:1.5;color:#e8d5c4;white-space:pre-wrap}
.tm-user .tm-txt{color:#c79b86}
.tm-txt.typing::after{content:"▋";color:var(--accent-light);animation:tmcar 1s step-end infinite}
@keyframes tmcar{50%{opacity:0}}
.tm-flag{margin:0.915em 0 0;font-size:.82em;line-height:1.45;border-radius:0.457em;padding:0.686em 0.838em}
.tm-flag-bad{color:#ffd0c2;background:rgba(230,74,25,.16);border:1px solid rgba(230,74,25,.4)}
.tm-flag-good{color:#c9ead0;background:rgba(76,160,90,.15);border:1px solid rgba(76,160,90,.4)}

/* --- connector grant (faux permission dialog) --- */
.gr-win{max-width:27.5em;background:var(--paper);border:1px solid var(--card-line);border-radius:0.75em;padding:1em 1.125em;box-shadow:0 0.25em 1.125em rgba(62,39,35,.08)}
.gr-head{display:flex;align-items:center;gap:0.688em;padding-bottom:0.75em;border-bottom:1px solid var(--rule)}
.gr-icon{font-size:1.5em}
.gr-h-txt b{display:block;font-size:.95em;color:var(--ink)}
.gr-h-txt small{font-family:var(--mono);font-size:.7em;color:var(--ink-light)}
.gr-scopes{display:flex;flex-direction:column;gap:2px;margin:0.75em 0}
.gr-scope{display:flex;align-items:center;gap:0.688em;padding:0.562em 0.25em;cursor:pointer}
.gr-chk{position:absolute;opacity:0;width:0;height:0}
.gr-sw{flex:0 0 auto;width:2.375em;height:1.375em;border-radius:0.75em;background:var(--rule);position:relative;transition:.15s}
.gr-sw::after{content:"";position:absolute;top:2px;left:2px;width:1.125em;height:1.125em;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.15s}
.gr-chk:checked+.gr-sw{background:var(--accent)}
.gr-chk:checked+.gr-sw::after{transform:translateX(1em)}
.gr-chk:focus-visible+.gr-sw{outline:2px solid var(--accent);outline-offset:2px}
.gr-txt{flex:1;min-width:0}
.gr-txt b{display:block;font-size:.88em;color:var(--ink)}
.gr-txt small{font-size:.78em;color:var(--ink-light)}
.gr-tag{font-family:var(--mono);font-size:.54em;letter-spacing:.06em;text-transform:uppercase;border-radius:1.157em;padding:3px 0.926em}
.gr-tag-read{color:var(--good);background:var(--good-bg)}
.gr-tag-write{color:var(--bad);background:var(--bad-bg)}
.gr-readout{font-size:.84em;line-height:1.5;color:var(--ink-mid);background:var(--rule-soft);border-radius:0.521em;padding:0.67em 0.818em;margin:2px 0 0.893em}
.gr-readout b{color:var(--ink);font-weight:600}
.gr-readout.warn{background:var(--warn-bg);color:var(--warn)}
.gr-actions{display:flex;align-items:center;gap:0.688em;flex-wrap:wrap}
.gr-approve{font-family:var(--mono);font-size:.62em;letter-spacing:.05em;text-transform:uppercase;background:var(--btn);color:var(--btn-on);border:1px solid var(--cta);border-radius:1.815em;padding:0.907em 1.613em;cursor:pointer}
.gr-approve:hover{filter:brightness(1.08)}
.gr-status{font-size:.8em;color:var(--ink-mid);line-height:1.4}
.gr-status.ok{color:var(--good)}
.gr-status.warn{color:var(--bad)}

/* --- multi-agent run --- */
.ag-brd{background:var(--paper);border:1px solid var(--card-line);border-left:3px solid var(--accent);border-radius:0.5em;padding:0.938em 1.062em}
.ag-tag{font-family:var(--mono);font-size:.54em;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-bg);border-radius:1.157em;padding:3px 0.926em;margin-right:0.81em}
.ag-brief{font-size:.9em;color:var(--ink);line-height:1.5}
.ag-lead{font-size:.84em;color:var(--ink-mid);margin:0.893em 0 0.744em;padding:0.67em 0.818em;background:var(--rule-soft);border-radius:0.521em;line-height:1.45}
.ag-lead b{color:var(--ink)}
.ag-par{display:inline-block;font-family:var(--mono);font-size:.56em;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-text);border:1px solid var(--accent);border-radius:1.116em;padding:2px 0.781em;margin-left:0.446em}
.ag-workers{display:flex;flex-direction:column;gap:0.438em}
.ag-w{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0.625em;padding:0.562em 0.688em;background:#1a0f08;border:1px solid #3a2616;border-radius:0.438em;opacity:.55;transition:opacity .25s,box-shadow .25s}
.ag-w.working{opacity:1;box-shadow:0 0 0 2px var(--accent-light)}
.ag-w.done{opacity:1}
.ag-w-role{font-family:var(--mono);font-size:.66em;letter-spacing:.03em;color:#ffd9c2;background:#3a2616;border-radius:0.473em;padding:0.379em 0.758em}
.ag-w-job{font-size:.82em;color:#c79b86;min-width:0}
.ag-w-out{font-family:var(--mono);font-size:.72em;color:#9ad8a0;display:none;grid-column:2;margin-top:2px}
.ag-w.done .ag-w-out{display:block}
.ag-w-badge{font-family:var(--mono);font-size:.56em;letter-spacing:.05em;text-transform:uppercase;color:#8d6e63;white-space:nowrap}
.ag-w.working .ag-w-badge{color:var(--accent-light)}
.ag-w.done .ag-w-badge{color:#9ad8a0}
.ag-result,.ag-gate{display:none}
.agents.ran .ag-result{display:block;margin-top:0.852em;font-size:.88em;color:var(--ink)}
.ag-result-v{font-family:var(--mono);font-size:.8em;color:var(--accent-text)}
.agents.ran .ag-gate{display:block;margin:0.744em 0 0;font-size:.84em;color:var(--ink-mid);line-height:1.45}
.ag-btns{display:flex;gap:0.5em;margin-top:0.75em}
.ag-run{font-family:var(--mono);font-size:.62em;letter-spacing:.05em;text-transform:uppercase;background:var(--btn);color:var(--btn-on);border:1px solid var(--cta);border-radius:1.815em;padding:0.907em 1.613em;cursor:pointer}
.ag-run:hover{filter:brightness(1.08)}
.ag-reset{font-family:var(--mono);font-size:.62em;letter-spacing:.05em;text-transform:uppercase;background:var(--paper);color:var(--ink-light);border:1px solid var(--card-line);border-radius:1.815em;padding:0.907em 1.411em;cursor:pointer}
@media (max-width:560px){.ag-w{grid-template-columns:auto 1fr;row-gap:2px}.ag-w-badge{grid-column:2;justify-self:start}}

/* --- deliverable review (trace claims to source) --- */
.rv-doc{background:var(--paper);border:1px solid var(--card-line);border-radius:0.625em;overflow:hidden;box-shadow:0 2px 0.75em rgba(62,39,35,.05)}
.rv-head{display:flex;align-items:center;justify-content:space-between;gap:0.625em;padding:0.688em 0.875em;background:var(--rule-soft);border-bottom:1px solid var(--rule)}
.rv-file{font-family:var(--mono);font-size:.72em;color:var(--ink)}
.rv-tally{font-family:var(--mono);font-size:.62em;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-light)}
.rv-claims{display:flex;flex-direction:column}
.rv-claim{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0.625em 0.75em;padding:0.75em 0.875em;border-bottom:1px solid var(--rule-soft)}
.rv-text{margin:0;font-size:.9em;color:var(--ink-mid);line-height:1.45}
.rv-claim.checked .rv-text{color:var(--ink)}
.rv-check{font-family:var(--mono);font-size:.58em;letter-spacing:.05em;text-transform:uppercase;background:var(--accent-bg);border:1px solid var(--accent);border-radius:1.509em;padding:0.647em 1.185em;color:var(--accent-text);cursor:pointer;white-space:nowrap}
.rv-check:hover{background:var(--lv-hover)}
.rv-claim.checked .rv-check{pointer-events:none}
.rv-claim.good .rv-check{background:var(--good-bg);border-color:var(--good-line);color:var(--good)}
.rv-claim.bad .rv-check{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.rv-src{grid-column:1/-1;margin:0;font-size:.8em;line-height:1.4;display:none}
.rv-claim.checked .rv-src{display:block}
.rv-claim.good .rv-src{color:var(--good)}
.rv-claim.bad .rv-src{color:var(--bad)}
.rv-foot{padding:0.812em 0.875em}
.rv-verdict{margin:0;font-size:.86em;color:var(--ink-mid);line-height:1.45;opacity:.45;transition:opacity .2s}
.rv-verdict.show{opacity:1;color:var(--ink)}
.rv-acts{display:flex;gap:0.5em;margin-top:0.688em}
.rv-accept,.rv-back{font-family:var(--mono);font-size:.6em;letter-spacing:.05em;text-transform:uppercase;border-radius:1.667em;padding:0.833em 1.458em;cursor:pointer;border:1px solid var(--card-line)}
.rv-accept{background:var(--rule-soft);color:var(--ink-light)}
.review.reviewed .rv-accept{background:var(--btn);border-color:var(--btn);color:var(--btn-on)}
.review.reviewed .rv-accept.locked{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.rv-back{background:var(--paper);color:var(--accent-text);border-color:var(--accent)}
.rv-back:hover{background:var(--accent-bg)}
.rv-flash{margin:0.838em 0 0;font-size:.82em;line-height:1.4;font-weight:500}
.rv-flash.ok{color:var(--good)}
.rv-flash.warn{color:var(--bad)}
@media (max-width:560px){.rv-claim{grid-template-columns:1fr}.rv-check{justify-self:start}}

/* --- rules file (a rule needs a check) --- */
.rl-file{border:1px solid var(--dark-2);border-radius:0.625em;overflow:hidden;background:#1a0f08}
.rl-bar{display:flex;align-items:center;gap:0.625em;padding:0.562em 0.75em;background:#23150d;border-bottom:1px solid #3a2616}
.rl-name{font-family:var(--mono);font-size:.7em;color:#ffd9c2}
.rl-rules{display:flex;flex-direction:column}
.rl-rule{display:grid;grid-template-columns:1fr auto;gap:0.5em 0.875em;align-items:start;padding:0.812em 0.875em;border-bottom:1px solid #2c1b10}
.rl-rule:last-child{border-bottom:0}
.rl-text{margin:0;font-family:var(--mono);font-size:.8em;color:#e8d5c4;line-height:1.5}
.rl-text::before{content:"– ";color:var(--accent-light)}
.rl-gate{grid-column:1;display:flex;align-items:center;gap:0.562em;cursor:pointer;margin-top:2px}
.rl-chk{position:absolute;opacity:0;width:0;height:0}
.rl-chk:checked+.gr-sw{background:var(--accent)}
.rl-chk:checked+.gr-sw::after{transform:translateX(1em)}
.rl-chk:focus-visible+.gr-sw{outline:2px solid var(--accent-light);outline-offset:2px}
.rl-gate .gr-sw{background:#3a2616}
.rl-gate-t b{display:block;font-size:.68em;color:#c79b86;font-weight:500}
.rl-gate-t small{font-family:var(--mono);font-size:.64em;color:#8d6e63}
.rl-chk:checked~.rl-gate-t b{color:#ffb38f}
.rl-outcome{grid-row:1;grid-column:2;font-family:var(--mono);font-size:.6em;letter-spacing:.04em;text-transform:uppercase;color:#8d6e63;text-align:right;white-space:nowrap}
.rl-outcome.ok{color:#9ad8a0}
.rl-outcome.bad{color:#ff9a7a}
.rl-rule.slipped{background:rgba(230,74,25,.1)}
.rl-note{font-size:.84em;color:var(--ink-mid);line-height:1.5;margin:0.893em 0 0;min-height:1.5em}
.rules.ran .rl-note{color:var(--ink);font-weight:500}
.rl-run{font-family:var(--mono);font-size:.62em;letter-spacing:.05em;text-transform:uppercase;background:var(--btn);color:var(--btn-on);border:1px solid var(--cta);border-radius:1.815em;padding:0.907em 1.613em;cursor:pointer}
.rl-run:hover{filter:brightness(1.08)}
.rl-reset{font-family:var(--mono);font-size:.62em;letter-spacing:.05em;text-transform:uppercase;background:var(--paper);color:var(--ink-light);border:1px solid var(--card-line);border-radius:1.815em;padding:0.907em 1.411em;cursor:pointer}
/* mobile: give the rule text the full width; drop its outcome badge to its own row */
@media (max-width:560px){.rl-rule{grid-template-columns:1fr;gap:0.438em}.rl-outcome{grid-row:auto;grid-column:1;text-align:left}}

/* --- capability surface picker --- */
.sf-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0.875em;align-items:start}
.sf-ladder{display:flex;flex-direction:column;gap:0.25em}
.sf-rung{display:flex;align-items:center;gap:0.625em;text-align:left;background:var(--paper);border:1px solid var(--card-line);border-radius:0.5em;padding:0.562em 0.688em;cursor:pointer;transition:.12s}
.sf-rung:hover{border-color:var(--accent-light);background:var(--accent-bg)}
.sf-rung.on{border-color:var(--accent);background:var(--accent-bg);box-shadow:inset 3px 0 0 var(--accent)}
.sf-n{flex:0 0 auto;width:1.964em;height:1.964em;border-radius:0.536em;display:grid;place-items:center;font-family:var(--mono);font-size:.7em;font-weight:700;color:var(--ink-light);background:var(--rule-soft)}
.sf-rung.on .sf-n{color:var(--lv-on);background:var(--accent)}
.sf-name{font-size:.86em;color:var(--ink);font-weight:500}
.sf-detail{position:sticky;top:calc(var(--topH) + 0.75em);background:var(--dark-2);border:1px solid #3a2616;border-radius:0.625em;padding:0.938em 1em;min-height:7.5em}
.sf-adds{margin:0 0 0.765em;font-size:.98em;line-height:1.4;color:#ffd9c2;font-family:var(--serif)}
.sf-unlocks{margin:0;font-size:.86em;color:#e8d5c4;line-height:1.5}
.sf-unlocks span{display:block;font-family:var(--mono);font-size:.54em;letter-spacing:.1em;text-transform:uppercase;color:#c79b86;margin-bottom:0.463em}
@media (max-width:560px){.sf-wrap{grid-template-columns:1fr}.sf-detail{position:static}}

/* --- context window (fill it until the oldest turns fall out) --- */
.cx-win{background:#1a0f08;border:1px solid #3a2616;border-radius:0.625em;overflow:hidden}
.cx-head{display:flex;justify-content:space-between;align-items:center;gap:0.919em;padding:0.919em 1.195em;background:#23150d;border-bottom:1px solid #3a2616;font-family:var(--mono);font-size:.68em;color:#ffd9c2}
.cx-cap{color:#c79b86}
.cx-cap b{color:#ffb38f}
.cx-stack{display:flex;flex-direction:column;gap:0.375em;padding:0.75em 0.812em;min-height:4em}
.cx-msg{font-size:.82em;color:#e8d5c4;background:#23150d;border:1px solid #3a2616;border-radius:0.457em;padding:0.61em 0.838em;line-height:1.4;animation:cxin .28s ease}
.cx-msg.gone{opacity:.34;color:#8d6e63;border-style:dashed;text-decoration:line-through}
@keyframes cxin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cx-msg{animation:none}.tm-txt.typing::after{animation:none}}
.cx-note{font-size:.84em;color:var(--ink-mid);line-height:1.5;margin:0.893em 0 0.893em;min-height:3em}
.cx-add{font-family:var(--mono);font-size:.62em;letter-spacing:.05em;text-transform:uppercase;background:var(--btn);color:var(--btn-on);border:1px solid var(--cta);border-radius:1.815em;padding:0.907em 1.613em;cursor:pointer}
.cx-add:hover{filter:brightness(1.08)}
.cx-add:disabled{background:var(--rule);border-color:var(--rule);color:var(--ink-light);cursor:default}
.cx-reset{font-family:var(--mono);font-size:.62em;letter-spacing:.05em;text-transform:uppercase;background:var(--paper);color:var(--ink-light);border:1px solid var(--card-line);border-radius:1.815em;padding:0.907em 1.411em;cursor:pointer}

/* --- inbox scan (open each flag; one is mislabeled) — .ib-* avoids the self-check .sc-* namespace --- */
.ib-win{background:var(--paper);border:1px solid var(--card-line);border-radius:0.625em;overflow:hidden;box-shadow:0 2px 0.75em rgba(62,39,35,.05)}
.ib-bar{display:flex;align-items:center;gap:0.562em;padding:0.625em 0.812em;background:var(--rule-soft);border-bottom:1px solid var(--rule)}
.ib-icon{font-size:1.05em}
.ib-q{font-family:var(--mono);font-size:.68em;color:var(--ink-mid)}
.ib-list{display:flex;flex-direction:column}
.ib-item{border-bottom:1px solid var(--rule-soft)}
.ib-item:last-child{border-bottom:0}
.ib-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:0.688em;padding:0.75em 0.812em}
.ib-dot{width:0.5em;height:0.5em;border-radius:50%;background:var(--accent)}
.ib-item.open .ib-dot{background:var(--rule)}
.ib-meta{min-width:0}
.ib-subj{display:block;font-size:.88em;color:var(--ink);font-weight:600;line-height:1.3}
.ib-from{font-family:var(--mono);font-size:.68em;color:var(--ink-light)}
.ib-flag{font-family:var(--mono);font-size:.56em;letter-spacing:.03em;color:var(--accent-text);background:var(--accent-bg);border-radius:1.228em;padding:3px 0.893em;white-space:nowrap}
.ib-open{font-family:var(--mono);font-size:.58em;letter-spacing:.04em;text-transform:uppercase;background:var(--paper);border:1px solid var(--accent);border-radius:1.509em;padding:0.647em 1.185em;color:var(--accent-text);cursor:pointer;white-space:nowrap}
.ib-open:hover{background:var(--accent-bg)}
.ib-item.good .ib-open{background:var(--good-bg);border-color:var(--good-line);color:var(--good);pointer-events:none}
.ib-item.bad .ib-open{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad);pointer-events:none}
.ib-body{display:none;padding:0 0.812em 0.812em 2em}
.ib-item.open .ib-body{display:block}
.ib-text{margin:0 0 0.588em;font-size:.85em;color:var(--ink-mid);line-height:1.5;background:var(--rule-soft);border-radius:0.441em;padding:0.662em 0.809em}
.ib-verdict{margin:0;font-size:.82em;line-height:1.45}
.ib-item.good .ib-verdict{color:var(--good)}
.ib-item.bad .ib-verdict{color:var(--bad)}
.ib-note{margin:0;padding:0.904em 0.979em;font-size:.83em;color:var(--ink-mid);line-height:1.45;border-top:1px solid var(--rule-soft)}
.ib-note.done{color:var(--ink);font-weight:500}
@media (max-width:560px){.ib-row{grid-template-columns:auto 1fr auto;row-gap:0.312em}.ib-flag{grid-column:2;justify-self:start}.ib-body{padding-left:0.812em}}

/* --- verify by type (fact vs judgment) --- */
.vf-answer{display:flex;gap:0.688em;background:var(--dark-2);border-radius:0.562em;padding:0.812em 0.938em;margin-bottom:0.875em}
.vf-answer .vf-who{flex:0 0 auto;font-family:var(--mono);font-size:.54em;letter-spacing:.09em;text-transform:uppercase;color:#ffb38f;padding-top:3px}
.vf-atext{margin:0;font-size:.9em;line-height:1.55;color:#e8d5c4}
.vf-instr{font-family:var(--mono);font-size:.6em;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-light);margin:0 0 0.938em}
.vf-claims{display:flex;flex-direction:column;gap:0.562em}
.vf-claim{background:var(--paper);border:1px solid var(--card-line);border-radius:0.562em;padding:0.75em 0.812em}
.vf-claim.right{border-color:var(--good-line)}
.vf-claim.wrong{border-color:var(--bad-line)}
.vf-claim.hall{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.vf-text{margin:0 0 0.71em;font-size:.88em;color:var(--ink);line-height:1.45}
.vf-hall{display:none}
.vf-claim.hall .vf-hall{display:inline-block;margin-left:0.926em;font-family:var(--mono);font-size:.54em;letter-spacing:.04em;text-transform:uppercase;color:var(--bad);background:var(--bad-bg);border-radius:1.042em;padding:2px 0.81em;vertical-align:middle}
.vf-btns{display:flex;gap:0.5em;flex-wrap:wrap}
.vf-b{flex:1;min-width:14.113em;font-family:var(--mono);font-size:.62em;letter-spacing:.03em;background:var(--rule-soft);border:1px solid var(--card-line);border-radius:0.806em;padding:0.907em 1.109em;color:var(--ink-mid);cursor:pointer;transition:.12s}
.vf-b:hover{border-color:var(--accent-light);color:var(--ink)}
.vf-claim.answered .vf-b{cursor:default}
.vf-b.correct{background:var(--good-bg);border-color:var(--good-line);color:var(--good);font-weight:600}
.vf-b.picked-wrong{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.vf-b.dim{opacity:.4}
.vf-how{display:none;margin:0.838em 0 0;font-size:.82em;color:var(--ink-mid);line-height:1.45}
.vf-claim.answered .vf-how{display:block}

/* ── deck fit: new markup + sizing inside slides ── */
.ro-name textarea{display:block;margin-top:.3em;font-size:calc(.86em / .58);letter-spacing:0;text-transform:none}
.ivx .ic{width:1.15em;height:1.15em}
.tm-who{display:inline-flex;align-items:center;gap:.4em}
.tm-who .ic,.vf-who .ic{color:var(--claude);stroke-width:2.4}
.ag-lead .ic,.ag-gate .ic,.rv-file .ic,.cx-head .ic,.gm-h .ic,.im-dir .ic,.ib-icon .ic{color:var(--lv-ink)}
.cx-head .ic,.gm-h .ic,.im-dir .ic{color:#ffb38f}
.ag-run,.rl-run,.cx-add,.ag-reset,.rl-reset,.cx-reset,.tm-replay,.vc-toggle,.ib-open,.gm-btns button{display:inline-flex;align-items:center;gap:.45em}
.gr-h-txt b{display:flex;align-items:center;gap:.4em}
.ivx-cap{font-size:.7em;color:var(--ink-3);margin-top:.5em}
/* dark panes need an edge when the page is dark too */
.vf-answer,.tm-win,.cx-win,.rl-file,.im-shell,.gm-col,.vc-msg,.ro-prompt{border:1px solid var(--code-line)}
/* ROCCO: label beside its field on wider screens (saves a screen's worth of height on laptops) */
@media (min-width:900px){
  .ro-name{display:grid;grid-template-columns:8.6em 1fr;align-items:center;gap:1.1em;margin-bottom:0}
  .ro-name textarea{margin-top:0}
  .ro-field{align-items:center}
  .ro-fields{gap:.45em}
}
/* the window shows its size before the first turn: room for every slot, and an empty-state line */
.cx-stack{min-height:calc(var(--cap,5) * 2.15em)}
.cx-stack:empty{display:grid;place-items:center}
.cx-stack:empty::before{content:"Empty window — add the first turn";font-family:var(--mono);font-size:.68em;letter-spacing:.04em;color:#8d6e63;border:1px dashed #3a2616;border-radius:.6em;padding:.8em 1.2em}

/* ── deck fit: demos must still fit one screen once they've been played ── */
@media (min-width:900px){
  /* idemodel: the panel sits beside the editor, as in VS Code */
  .im-main{flex-direction:row}
  .im-ed{flex:1 1 52%;min-width:0}
  .im-panel{flex:1 1 48%;min-width:0;border-top:0;border-left:1px solid #3a2616;flex-flow:row wrap;align-content:flex-start}
  .im-panel>:not(.im-btn){flex-basis:100%}
  /* agents: a worker's output lands on its own row's right, not a new line */
  .ag-w{grid-template-columns:auto minmax(0,1fr) auto auto}
  .ag-w-out{grid-column:3;margin-top:0;white-space:nowrap}
}
/* gitmodel: newest commit on top, the history scrolls instead of growing */
.gm-stack{max-height:8.6em;overflow-y:auto;scrollbar-width:thin}
/* verify: tighter claim cards (three answered claims + the answer must fit 720px) */
.vf-answer{margin-bottom:.6em;padding:.65em .85em}
.vf-instr{margin-bottom:.6em}
.vf-claims{gap:.45em}
.vf-claim{padding:.55em .75em}
.vf-text{margin-bottom:.45em}
.vf-b{padding:.62em 1em}
.vf-how{margin-top:.45em;font-size:.78em}
.gm-status{margin:.75em 0 .6em}.gm-h{margin-bottom:.6em}
/* interactive apps read at app size, a step below the slide's text */
.ivx{font-size:.9em}

/* ═══════════ The full reference (learn/<slug>-full.html) ═══════════
   Long-form reading in the deck's frame: the same top bar, level hue and light/dark
   theme; a night title band like the deck's hero; a sticky, numbered contents rail
   that follows your place; prose set for sustained reading (~68ch). */

body.is-ref{background:var(--slide)}
.ref-hero{position:relative;isolation:isolate;padding:calc(var(--topH) + clamp(2.4rem,7vh,4.5rem)) clamp(1.1rem,5vw,3.6rem) clamp(2rem,6vh,3.6rem);color:var(--hero-ink);
  background:radial-gradient(60rem 36rem at 92% -10%,color-mix(in srgb,var(--lv) 46%,transparent),transparent 60%),
             radial-gradient(48rem 30rem at -6% 120%,rgba(255,186,110,.15),transparent 62%),
             linear-gradient(162deg,#110804 0%,#1e100a 52%,#2b160c 100%)}
.ref-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 75% 30%,#000 10%,transparent 78%);mask-image:radial-gradient(ellipse 70% 90% at 75% 30%,#000 10%,transparent 78%)}
.ref-hero-in{max-width:78rem;margin:0 auto}
.ref-eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hero-gold);margin-bottom:1rem}
.ref-title{font-size:clamp(2.2rem,5.4vw,4.4rem);font-weight:820;letter-spacing:-.036em;line-height:1.02;max-width:20ch;text-wrap:balance}
.ref-sub{font-family:var(--serif);font-size:clamp(1.2rem,2.1vw,1.7rem);line-height:1.3;color:var(--hero-ink-2);max-width:40ch;margin-top:1rem;text-wrap:pretty}
.ref-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.8rem;font-size:1.15rem}
.ref-hero .chip{color:var(--hero-ink-2);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.ref-back{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  color:var(--btn-on);background:var(--btn);border-radius:99px;padding:.7em 1.15em}
.ref-hero .ref-back{color:#1b0f08;background:var(--hero-gold)}
.ref-back .ic{width:1.1em;height:1.1em}
.ref-back:hover{filter:brightness(1.08)}

/* body: contents rail + prose */
.ref{display:grid;grid-template-columns:minmax(13rem,17rem) minmax(0,46rem);justify-content:center;gap:clamp(2rem,5vw,4.5rem);
  padding:clamp(2rem,5vh,3.5rem) clamp(1.1rem,5vw,3.6rem) 3rem;max-width:84rem;margin:0 auto}
.ref-toc{position:sticky;top:calc(var(--topH) + 1.4rem);align-self:start;max-height:calc(100vh - var(--topH) - 2.8rem);overflow:auto;scrollbar-width:thin;
  display:flex;flex-direction:column;gap:2px;font-size:.88rem;padding-right:.4rem}
.ref-toc-h{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .6rem .6rem}
.ref-toc a{display:flex;gap:.7em;align-items:baseline;padding:.42em .6em;border-radius:.5em;color:var(--ink-2);text-decoration:none;line-height:1.3;border-left:2px solid transparent}
.ref-toc a .tn{flex:none;font-family:var(--mono);font-size:.78em;color:var(--ink-3)}
.ref-toc a:hover{background:var(--lv-soft);color:var(--ink)}
.ref-toc a.on{background:var(--lv-soft);color:var(--ink);border-left-color:var(--lv);font-weight:600}
.ref-toc a.on .tn{color:var(--lv-ink)}

/* prose */
.ref-prose{font-size:1.08rem;line-height:1.72;color:var(--ink-2);min-width:0}
.ref-prose>*+*{margin-top:1.05em}
.ref-prose h2,.ref-prose h3,.ref-prose h4{color:var(--ink);scroll-margin-top:calc(var(--topH) + 1.2rem);line-height:1.18;text-wrap:balance}
.ref-prose h2{font-size:clamp(1.65rem,2.6vw,2.1rem);font-weight:780;letter-spacing:-.025em;margin-top:2.6em;padding-top:1.1em;border-top:1px solid var(--rule)}
.ref-prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.ref-prose h3{font-size:1.28rem;font-weight:700;letter-spacing:-.012em;margin-top:2em}
.ref-prose h4{font-size:1.06rem;font-weight:700;margin-top:1.6em}
.ref-prose h2+*,.ref-prose h3+*,.ref-prose h4+*{margin-top:.6em}
.ref-prose strong{color:var(--ink);font-weight:650}
.ref-prose a{color:var(--lv-ink);text-decoration-thickness:1px;text-underline-offset:.18em}
.ref-prose ul,.ref-prose ol{padding-left:1.35em}
.ref-prose li+li{margin-top:.4em}
.ref-prose li::marker{color:var(--lv-ink)}
.ref-prose hr{border:0;height:1px;background:var(--rule);margin:2.2em 0}
.ref-prose blockquote{background:var(--lv-soft);border-left:.28em solid var(--lv);border-radius:.4em .9em .9em .4em;padding:.95em 1.2em;color:var(--ink)}
.ref-prose blockquote>*+*{margin-top:.6em}
.ref-prose code{font-family:var(--mono);font-size:.86em;background:var(--card);border:1px solid var(--card-line);border-radius:.35em;padding:.06em .36em;color:var(--ink);overflow-wrap:anywhere}
.ref-prose pre{background:var(--code-bg);color:var(--code-text);border:1px solid var(--code-line);border-radius:.8em;padding:1em 1.2em;overflow:auto;font-size:.86rem;line-height:1.6;box-shadow:var(--pane-shadow)}
.ref-prose pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit;overflow-wrap:normal}
.ref-prose .tbl{overflow-x:auto;border:1px solid var(--card-line);border-radius:.8em;background:var(--card)}
.ref-prose table{border-collapse:collapse;width:100%;font-size:.92rem;line-height:1.5}
.ref-prose th,.ref-prose td{text-align:left;vertical-align:top;padding:.65em .85em;border-bottom:1px solid var(--card-line)}
.ref-prose th{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--lv-ink);font-weight:500;background:var(--card-2)}
.ref-prose tr:last-child td{border-bottom:0}

/* footer: previous / next reference */
.ref-foot{max-width:84rem;margin:0 auto;padding:1rem clamp(1.1rem,5vw,3.6rem) 4rem;display:flex;flex-direction:column;align-items:center;gap:1.6rem}
.ref-pn{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;max-width:64rem}
.pn{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;border:1px solid var(--card-line);border-radius:1rem;background:var(--card);text-decoration:none;color:var(--ink);font-weight:650}
.pn small{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:400;margin-bottom:.2rem}
.pn.next{justify-content:flex-end;text-align:right}
.pn .ic{width:1.2em;height:1.2em;color:var(--lv-ink);flex:none}
.pn:hover{border-color:var(--lv-line);background:var(--lv-soft)}

@media (max-width:899px){
  .ref{grid-template-columns:minmax(0,1fr)}
  .ref-toc{position:static;max-height:none;overflow:visible;border:1px solid var(--card-line);border-radius:1rem;background:var(--card);padding:.8rem}
  .ref-prose{font-size:1.02rem}
}
@media (max-width:560px){.ref-pn{grid-template-columns:1fr}.pn.next{justify-content:flex-start;text-align:left;flex-direction:row-reverse}}
@media print{.ref-hero{color:#000;background:none;padding-top:1rem}.ref-hero .chip,.ref-back,.ref-toc,.ref-foot{display:none}.ref{display:block}.ref-prose{color:#000}}
/* the contents fold into a <details> on phones; on desktop the rail is always open and the summary hidden */
.ref-tocd{position:sticky;top:calc(var(--topH) + 1.4rem);align-self:start}
.ref-tocd>summary{display:none}
.ref-tocd .ref-toc{position:static;max-height:calc(100vh - var(--topH) - 2.8rem)}
@media (max-width:899px){
  .ref-tocd{position:static;border:1px solid var(--card-line);border-radius:1rem;background:var(--card)}
  .ref-tocd>summary{display:flex;align-items:center;gap:.6em;cursor:pointer;padding:.9rem 1rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
  .ref-tocd>summary::after{content:"+";margin-left:auto;font-size:1.1rem;color:var(--lv-ink)}
  .ref-tocd[open]>summary::after{content:"−"}
  .ref-tocd .ref-toc{border:0;background:none;padding:0 .6rem .8rem;max-height:none}
  .ref-tocd .ref-toc-h{display:none}
}

/* the A4 rule, as on the decks: on wide screens the reading column and its title band stop at an A4 landscape width */
.ref-hero-in,.ref,.ref-foot{max-width:var(--page-w)}
.ref-title{font-size:clamp(2.2rem,4.6vw,3.6rem)}

/* ═══════════ Print / Save as PDF: one slide per landscape page ═══════════ */
@media print{
  @page{size:1600px 900px;margin:0}
  html,body{background:#fff}
  html{scroll-snap-type:none!important}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cur-top,.prog,.dnav,.skip,.levelup-banner,.slide-foot .nextcue{display:none!important}
  .slide{--fs:22px;min-height:0;height:900px;padding-top:1.4em;break-after:page;page-break-after:always;border-top:0}
  .slide:last-of-type{break-after:auto;page-break-after:auto}
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  html.js .dosteps.on .dstep{display:grid!important}
  html.js .dosteps.on .dstep:not(.cur){display:none!important}
  .hero-title em,.grad{background:none;color:var(--hero-gold);-webkit-text-fill-color:var(--hero-gold)}
}