/* =====================================================================
   Tinker, Illustrated — course stylesheet
   Structure: tokens → base → layout → components → lesson → viz → print
   ===================================================================== */

/* ---------- 1. Tokens ------------------------------------------------ */
:root {
  /* light palette: stone paper, near-black ink, deep teal accent */
  --paper:      #F5F4F0;
  --surface:    #FFFFFF;
  --surface-2:  #ECEAE3;
  --rail:       #EFEDE7;
  --ink:        #1A1D24;
  --ink-2:      #4A4F5C;
  --ink-3:      #7B808E;
  --line:       #D9D6CD;
  --line-2:     #E7E5DE;
  --accent:     #0E7C73;
  --accent-ink: #0A5F58;
  --accent-soft:#D7ECE9;
  --focus:      #0E7C73;

  /* semantic badges */
  --b-concept-fg:  #0A5F58; --b-concept-bg:  #D7ECE9;
  --b-visual-fg:   #5A3FA8; --b-visual-bg:   #E8E1F7;
  --b-code-fg:     #7A4E06; --b-code-bg:     #F5E7C4;
  --b-watch-fg:    #9E2B2B; --b-watch-bg:    #F7DBDB;
  --b-recap-fg:    #4A4F5C; --b-recap-bg:    #E6E4DD;
  --b-gloss-fg:    #2F6B3A; --b-gloss-bg:    #DDEEDF;

  /* code */
  --code-bg:    #EEEDE7;
  --code-ink:   #1F232B;
  --code-kw:    #7B2CBF;
  --code-str:   #0B6E4F;
  --code-num:   #A85A00;
  --code-com:   #7B808E;
  --code-fn:    #1F4FB8;
  --code-dec:   #A83232;
  --code-out-bg:#F7F6F2;

  /* viz chalkboard (same in both themes — it is the one committed world) */
  --viz-bg:     #0D1220;
  --viz-bg-2:   #121A2C;
  --viz-grid:   #1B2338;
  --viz-line:   #2A3450;
  --viz-text:   #E8EAF0;
  --viz-dim:    #9AA1B5;
  --v-blue:     #5BC0EB;
  --v-gold:     #F5C451;
  --v-green:    #7BD88F;
  --v-red:      #FF6B6B;
  --v-violet:   #B48CE6;
  --v-teal:     #4FD1C5;
  --v-orange:   #FF9F43;
  --v-grey:     #6C7386;

  --radius:     10px;
  --radius-s:   6px;
  --shadow:     0 1px 2px rgba(20,22,30,.06), 0 8px 24px -12px rgba(20,22,30,.18);
  --measure:    68ch;
  --content-w:  760px;
  --wide-w:     1040px;
  --rail-w:     280px;

  --font-serif: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans:  "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:  "IBM Plex Mono", "Cascadia Code", "SFMono-Regular", Consolas, monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #0F1217;
    --surface:    #161B23;
    --surface-2:  #1D232D;
    --rail:       #131820;
    --ink:        #E7E9EE;
    --ink-2:      #B3B9C6;
    --ink-3:      #7F8697;
    --line:       #2A3140;
    --line-2:     #222935;
    --accent:     #3FBFB2;
    --accent-ink: #6ED4C9;
    --accent-soft:#143A37;
    --focus:      #3FBFB2;
    --b-concept-fg: #6ED4C9; --b-concept-bg: #143A37;
    --b-visual-fg:  #C9B3F5; --b-visual-bg:  #2B2246;
    --b-code-fg:    #F2C97A; --b-code-bg:    #3A2B0F;
    --b-watch-fg:   #F59A9A; --b-watch-bg:   #3F1D1D;
    --b-recap-fg:   #B3B9C6; --b-recap-bg:   #222935;
    --b-gloss-fg:   #9BD9A6; --b-gloss-bg:   #1E3A24;
    --code-bg:    #0F141C;
    --code-ink:   #E2E6EE;
    --code-kw:    #C39BFF;
    --code-str:   #8FD9B6;
    --code-num:   #F0B36B;
    --code-com:   #7F8697;
    --code-fn:    #8FB8FF;
    --code-dec:   #F59A9A;
    --code-out-bg:#12171F;
    --shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper:      #0F1217;
  --surface:    #161B23;
  --surface-2:  #1D232D;
  --rail:       #131820;
  --ink:        #E7E9EE;
  --ink-2:      #B3B9C6;
  --ink-3:      #7F8697;
  --line:       #2A3140;
  --line-2:     #222935;
  --accent:     #3FBFB2;
  --accent-ink: #6ED4C9;
  --accent-soft:#143A37;
  --focus:      #3FBFB2;
  --b-concept-fg: #6ED4C9; --b-concept-bg: #143A37;
  --b-visual-fg:  #C9B3F5; --b-visual-bg:  #2B2246;
  --b-code-fg:    #F2C97A; --b-code-bg:    #3A2B0F;
  --b-watch-fg:   #F59A9A; --b-watch-bg:   #3F1D1D;
  --b-recap-fg:   #B3B9C6; --b-recap-bg:   #222935;
  --b-gloss-fg:   #9BD9A6; --b-gloss-bg:   #1E3A24;
  --code-bg:    #0F141C;
  --code-ink:   #E2E6EE;
  --code-kw:    #C39BFF;
  --code-str:   #8FD9B6;
  --code-num:   #F0B36B;
  --code-com:   #7F8697;
  --code-fn:    #8FB8FF;
  --code-dec:   #F59A9A;
  --code-out-bg:#12171F;
  --shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ---------- 2. Base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); }
h2 { font-size: 1.45rem; margin-top: 2.2rem; margin-bottom: .6rem; }
h3 { font-size: 1.12rem; margin-top: 1.6rem; margin-bottom: .4rem; }
p { margin: 0 0 1.05em; }
a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
strong { font-weight: 600; }
em { font-style: italic; }
code, kbd, pre { font-family: var(--font-mono); }
code { font-size: .88em; background: var(--code-bg); color: var(--code-ink); padding: .08em .38em; border-radius: 4px; }
kbd { font-size: .8em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: .05em .4em; background: var(--surface); }
ul, ol { padding-left: 1.3em; margin: 0 0 1.05em; }
li { margin: .25em 0; }
li::marker { color: var(--ink-3); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
button { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--surface); padding: .5rem .8rem; z-index: 100; }
.skip-link:focus { left: 8px; }

.sans { font-family: var(--font-sans); }
.eyebrow { font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.muted { color: var(--ink-3); }
.small { font-size: .92rem; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- 3. Chrome / layout ------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  height: 52px; padding: 0 1.1rem;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-sans); font-size: .9rem;
}
.topbar .brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
.topbar .brand .dots { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 16px; }
.topbar .brand .dots i { display: block; width: 7px; height: 7px; border-radius: 50%; }
.topbar .brand .dots i:nth-child(1){ background: var(--v-blue); }
.topbar .brand .dots i:nth-child(2){ background: var(--v-gold); }
.topbar .brand .dots i:nth-child(3){ background: var(--v-green); }
.topbar .brand .dots i:nth-child(4){ background: var(--v-violet); }
.topbar .crumbs { display: flex; align-items: center; gap: .5rem; color: var(--ink-3); min-width: 0; }
.topbar .crumbs a { color: var(--ink-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .crumbs a:hover { color: var(--ink); }
.topbar .crumbs .sep { opacity: .6; }
.topbar .spacer { flex: 1; }
.iconbtn {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 32px; padding: 0 .65rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font-family: var(--font-sans); font-size: .82rem; cursor: pointer;
}
.iconbtn:hover { color: var(--ink); border-color: var(--ink-3); }
.iconbtn svg { width: 16px; height: 16px; }
.iconbtn.active { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }

.page { max-width: var(--wide-w); margin: 0 auto; padding: 2.5rem 1.25rem 5rem; }
.page-narrow { max-width: var(--content-w); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-sans); font-weight: 600; font-size: .92rem;
  padding: .7rem 1.15rem; border-radius: 9px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .12s ease, background .15s ease;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--ink-3); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { color: var(--ink); background: var(--surface-2); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn:active { transform: translateY(1px); }

/* ---------- 4. Home ------------------------------------------------ */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.5rem; align-items: center; margin-bottom: 3.5rem; }
.hero h1 { font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.6rem); font-weight: 500; letter-spacing: -.02em; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--accent-ink); }
.hero .lede { font-size: 1.15rem; color: var(--ink-2); max-width: 34ch; margin-top: 1rem; }
.hero .actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero .viz { margin: 0; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }

.paths { display: grid; gap: 1rem; }
.path-card {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 1.4rem; align-items: center;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px;
  padding: 1.4rem 1.6rem; text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.path-card:hover { border-color: var(--ink-3); transform: translateY(-1px); box-shadow: var(--shadow); }
.path-card .picto { width: 96px; height: 96px; color: var(--ink-2); display: grid; place-items: center; }
.path-card .picto svg { width: 84px; height: 84px; }
.path-card h2 { margin: 0 0 .3rem; font-size: 1.35rem; }
.path-card .desc { color: var(--ink-2); margin: 0; max-width: 60ch; }
.path-card .meta { font-family: var(--font-sans); font-size: .8rem; color: var(--ink-3); margin-top: .55rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.path-card.soon { opacity: .82; }
@media (max-width: 720px) { .path-card { grid-template-columns: 64px 1fr; } .path-card .status { grid-column: 2; } .path-card .picto { width: 64px; height: 64px; } .path-card .picto svg { width: 56px; height: 56px; } }

.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-sans); font-size: .76rem; font-weight: 500; letter-spacing: .02em;
  padding: .28rem .7rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap;
}
.pill.done { border-color: transparent; background: var(--accent-soft); color: var(--accent-ink); }
.pill.active { border-color: var(--accent); color: var(--accent-ink); }
.pill.soon { border-style: dashed; color: var(--ink-3); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.legend-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem 1.2rem; margin: 1rem 0 1.5rem; font-family: var(--font-sans); font-size: .86rem; color: var(--ink-2); }
.legend-row .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: .5rem; }

/* ---------- 5. Path page & module cards ---------------------------- */
.path-head { margin-bottom: 2rem; }
.path-head h1 { font-weight: 500; }
.path-head .lede { color: var(--ink-2); font-size: 1.08rem; max-width: 62ch; margin-top: .6rem; }
.progress-line { display: flex; align-items: center; gap: 1rem; margin: 1.4rem 0 0; font-family: var(--font-sans); font-size: .85rem; color: var(--ink-2); }
.bar { flex: 1; height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s ease; }

.modules { display: grid; gap: .9rem; counter-reset: mod; }
.module-card {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 1.3rem; align-items: start;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px;
  padding: 1.25rem 1.5rem; text-decoration: none; color: inherit; position: relative;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.module-card:hover { border-color: var(--ink-3); box-shadow: var(--shadow); }
.module-card .picto { width: 72px; height: 72px; color: var(--ink-2); display: grid; place-items: center; }
.module-card .picto svg { width: 60px; height: 60px; }
.module-card .num { font-family: var(--font-sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .25rem; }
.module-card h3 { margin: 0 0 .3rem; font-size: 1.22rem; }
.module-card .desc { margin: 0; color: var(--ink-2); max-width: 62ch; }
.module-card .meta { font-family: var(--font-sans); font-size: .8rem; color: var(--ink-3); margin-top: .5rem; display: flex; gap: 1rem; }
.module-card .mini-bar { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; overflow: hidden; }
.module-card .mini-bar i { display: block; height: 100%; background: var(--accent); }
.module-card.soon { opacity: .75; }
.module-card.soon:hover { box-shadow: none; border-color: var(--line); }
@media (max-width: 640px) { .module-card { grid-template-columns: 1fr; } .module-card .picto { display: none; } }

/* ---------- 6. Module intro ---------------------------------------- */
.intro { max-width: var(--content-w); margin: 0 auto; }
.intro h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem); font-weight: 500; letter-spacing: -.02em; margin: .5rem 0 1rem; }
.intro .lede { color: var(--ink-2); font-size: 1.1rem; }
.outcomes { margin: 1.6rem 0; padding: 1.1rem 1.3rem; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); }
.outcomes h3 { margin: 0 0 .5rem; font-size: .78rem; font-family: var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.outcomes ul { margin: 0; }
.toc { margin-top: 1.8rem; }
.toc .toc-head { font-family: var(--font-sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc li { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: baseline; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--line-2); font-size: 1.02rem; }
.toc li .n { font-family: var(--font-sans); font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.toc li .cnt { font-family: var(--font-sans); font-size: .78rem; color: var(--ink-3); }
.toc li a { text-decoration: none; color: var(--ink); }
.toc li a:hover { color: var(--accent-ink); }
.toc li .kinds { display: inline-flex; gap: 3px; margin-left: .6rem; vertical-align: middle; }
.toc li .kinds i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.intro-cta { display: flex; align-items: center; gap: 1.2rem; margin-top: 2rem; flex-wrap: wrap; }
.intro-cta .stats { font-family: var(--font-sans); font-size: .82rem; color: var(--ink-3); }
.prereqs { font-family: var(--font-sans); font-size: .85rem; color: var(--ink-2); margin-top: .4rem; }

/* kind dots (shared) */
.k-concept { background: var(--b-concept-fg); }
.k-visual  { background: var(--b-visual-fg); }
.k-code    { background: var(--b-code-fg); }
.k-watchout{ background: var(--b-watch-fg); }
.k-recap   { background: var(--b-recap-fg); }
.k-glossary{ background: var(--b-gloss-fg); }

/* ---------- 7. Lesson layout --------------------------------------- */
.lesson { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: calc(100vh - 52px); }
.rail {
  background: var(--rail); border-right: 1px solid var(--line-2);
  position: sticky; top: 52px; height: calc(100vh - 52px);
  display: flex; flex-direction: column; font-family: var(--font-sans);
}
.rail .rail-head { padding: 1.1rem 1.2rem .9rem; border-bottom: 1px solid var(--line-2); }
.rail .rail-head .eyebrow { font-size: .66rem; }
.rail .rail-head .title { font-family: var(--font-serif); font-weight: 600; font-size: 1.02rem; line-height: 1.3; margin-top: .3rem; }
.rail nav { flex: 1; overflow-y: auto; padding: .6rem 0 1rem; scrollbar-width: thin; }
.rail .sec { padding: .55rem 1.2rem .15rem; }
.rail .sec-title { display: flex; gap: .55rem; align-items: baseline; font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.rail .sec-title .n { color: var(--ink-3); font-weight: 500; font-size: .7rem; font-variant-numeric: tabular-nums; }
.rail .scr { display: flex; align-items: center; gap: .55rem; padding: .3rem 1.2rem .3rem 2.05rem; font-size: .8rem; color: var(--ink-2); text-decoration: none; border-left: 3px solid transparent; }
.rail .scr .d { width: 7px; height: 7px; border-radius: 50%; flex: none; opacity: .35; }
.rail .scr.seen .d { opacity: 1; }
.rail .scr:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.rail .scr.current { color: var(--accent-ink); font-weight: 600; background: var(--surface); border-left-color: var(--accent); }
.rail .scr .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail .rail-foot { padding: .9rem 1.2rem 1rem; border-top: 1px solid var(--line-2); font-size: .74rem; color: var(--ink-3); }
.rail .rail-foot .pl { display: flex; justify-content: space-between; margin-bottom: .4rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.rail .rail-foot .reset { margin-top: .7rem; width: 100%; height: 30px; border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--ink-3); font-size: .74rem; cursor: pointer; }
.rail .rail-foot .reset:hover { color: var(--ink); border-color: var(--ink-3); }

.stage-col { min-width: 0; display: flex; flex-direction: column; }
.screen { flex: 1; padding: 2.6rem 2rem 3rem; }
.screen-inner { max-width: var(--content-w); margin: 0 auto; }
.screen .badges { display: flex; align-items: center; gap: .7rem; font-family: var(--font-sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; }
.badge { display: inline-block; padding: .28rem .6rem; border-radius: 999px; font-weight: 600; letter-spacing: .1em; }
.badge-concept { color: var(--b-concept-fg); background: var(--b-concept-bg); }
.badge-visual  { color: var(--b-visual-fg);  background: var(--b-visual-bg); }
.badge-code    { color: var(--b-code-fg);    background: var(--b-code-bg); }
.badge-watchout{ color: var(--b-watch-fg);   background: var(--b-watch-bg); }
.badge-recap   { color: var(--b-recap-fg);   background: var(--b-recap-bg); }
.badge-glossary{ color: var(--b-gloss-fg);   background: var(--b-gloss-bg); }

/* wrap-up: takeaway cards */
.takeaways { list-style: none; padding: 0; margin: 1.4rem 0 1rem; counter-reset: tk; display: grid; gap: 1rem; max-width: none; }
.takeaways > li { counter-increment: tk; display: grid; grid-template-columns: 2rem 1fr; gap: .2rem 1rem; align-items: start; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 1.25rem 1.5rem 1.3rem; }
.takeaways > li::before { content: counter(tk); font-family: var(--font-sans); font-weight: 600; font-size: 1.15rem; color: var(--accent-ink); line-height: 1.35; }
.takeaways .tk-title { font-family: var(--font-sans); font-weight: 600; font-size: 1.04rem; line-height: 1.4; margin: 0 0 .5rem; color: var(--ink); letter-spacing: 0; }
.takeaways p { margin: 0; color: var(--ink-2); font-size: 1.02rem; line-height: 1.62; }
.takeaways code { font-size: .86em; }

/* wrap-up: glossary accordion */
.glossary { display: grid; gap: .75rem; margin: 1.4rem 0 1rem; max-width: none; }
.gl-item { background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; transition: border-color .15s ease; }
.gl-item:hover { border-color: var(--ink-3); }
.gl-item summary { list-style: none; display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: .9rem; padding: 1rem 1.3rem; cursor: pointer; font-family: var(--font-serif); font-weight: 600; font-size: 1.1rem; color: var(--ink); }
.gl-item summary::-webkit-details-marker { display: none; }
.gl-item summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 12px; }
.gl-dot { width: 9px; height: 9px; border-radius: 2px; background: var(--b-gloss-fg); }
.gl-toggle::before { content: '+'; font-family: var(--font-sans); font-weight: 400; font-size: 1.25rem; color: var(--ink-3); line-height: 1; }
.gl-item[open] .gl-toggle::before { content: '−'; }
.gl-def { padding: .1rem 1.3rem 1.2rem calc(1.3rem + 10px + .9rem); color: var(--ink-2); font-size: 1.02rem; line-height: 1.62; }
.gl-def p { margin: 0; }
.gl-def code { font-size: .86em; }
.screen h1 { margin-bottom: 1.1rem; font-weight: 600; }
.screen .lede { font-size: 1.12rem; color: var(--ink-2); font-style: italic; margin-bottom: 1.6rem; }
.screen .lede em { font-style: normal; }
.body { max-width: var(--measure); }
.body > p, .body > ul, .body > ol, .body > h2, .body > h3, .body > table { max-width: var(--measure); }

/* things that break out wider than the text column */
.wide { max-width: none; width: min(100%, var(--content-w)); }
@media (min-width: 1200px) {
  .lesson .screen-inner { max-width: 820px; }
  .lesson .viz, .lesson .wide { width: calc(100% + 90px); margin-left: -45px; max-width: none; }
}

.lesson-nav {
  position: sticky; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: .8rem 2rem; background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--line-2); font-family: var(--font-sans);
}
.lesson-nav .mid { text-align: center; font-size: .8rem; color: var(--ink-3); }
.lesson-nav .mid a { color: var(--ink-3); text-decoration: none; letter-spacing: .1em; text-transform: uppercase; font-size: .7rem; font-weight: 600; }
.lesson-nav .mid a:hover { color: var(--ink); }
.lesson-nav .right { text-align: right; }

/* focus (recording) mode */
body.focus-mode .rail, body.focus-mode .topbar { display: none; }
body.focus-mode .lesson { grid-template-columns: 1fr; min-height: 100vh; }
body.focus-mode .screen-inner { max-width: 900px; }
body.focus-mode .lesson-nav { opacity: 0; transition: opacity .2s; }
body.focus-mode .lesson-nav:hover, body.focus-mode .lesson-nav:focus-within { opacity: 1; }

@media (max-width: 900px) {
  .lesson { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .rail nav { max-height: 260px; }
  .screen { padding: 1.8rem 1.1rem 2.5rem; }
  .lesson-nav { padding: .7rem 1.1rem; }
}

/* ---------- 8. Components: callouts, tables, code ------------------ */
.callout { display: grid; grid-template-columns: 4px 1fr; gap: 1rem; margin: 1.4rem 0; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-2); overflow: hidden; }
.callout > .stripe { background: var(--accent); }
.callout > .cbody { padding: .95rem 1.1rem .95rem 0; }
.callout .ctitle { font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .35rem; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout.note > .stripe { background: var(--accent); }
.callout.tip  > .stripe { background: var(--b-visual-fg); }
.callout.warn > .stripe { background: var(--b-watch-fg); }
.callout.paper> .stripe { background: var(--b-code-fg); }
.callout.warn .ctitle { color: var(--b-watch-fg); }
.callout.tip .ctitle { color: var(--b-visual-fg); }
.callout.paper .ctitle { color: var(--b-code-fg); }

table.t { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.6rem; font-size: .95rem; }
table.t th, table.t td { text-align: left; vertical-align: top; padding: .6rem .75rem; border-bottom: 1px solid var(--line-2); }
table.t th { font-family: var(--font-sans); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; border-bottom: 1px solid var(--line); }
table.t td code { white-space: nowrap; }
.table-wrap { overflow-x: auto; }
table.t.compact td, table.t.compact th { padding: .45rem .6rem; font-size: .9rem; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 1.2rem 0; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2rem 1fr; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--line-2); }
.steps li::before { content: counter(step); font-family: var(--font-sans); font-weight: 600; font-size: .8rem; color: var(--accent-ink); background: var(--accent-soft); width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 1rem 0 1.4rem; font-size: .96rem; }
.kv dt { font-family: var(--font-mono); font-size: .84rem; color: var(--ink-2); }
.kv dd { margin: 0; color: var(--ink-2); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem 0; }
.pair > div { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: .9rem 1rem; }
.pair h4 { margin: 0 0 .4rem; font-family: var(--font-sans); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pair p:last-child { margin: 0; }
@media (max-width: 600px) { .pair { grid-template-columns: 1fr; } }

/* code blocks */
.code { margin: 1.3rem 0 1.6rem; border-radius: var(--radius); border: 1px solid var(--line-2); overflow: hidden; background: var(--code-bg); font-size: .84rem; }
.code .code-head { display: flex; align-items: center; gap: .8rem; padding: .45rem .9rem; font-family: var(--font-sans); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-2); }
.code .code-head .title { text-transform: none; letter-spacing: 0; font-size: .78rem; color: var(--ink-2); }
.code .code-head .spacer { flex: 1; }
.code .copy { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-family: var(--font-sans); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .4rem; border-radius: 4px; }
.code .copy:hover { color: var(--ink); background: var(--surface-2); }
.code pre { margin: 0; padding: .95rem 1.05rem; overflow-x: auto; line-height: 1.55; color: var(--code-ink); tab-size: 4; }
.code pre code { background: transparent; padding: 0; font-size: inherit; color: inherit; }
.code .out { border-top: 1px dashed var(--line); background: var(--code-out-bg); }
.code .out .out-head { display: flex; align-items: center; gap: .6rem; padding: .35rem .9rem; font-family: var(--font-sans); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; user-select: none; }
.code .out .out-head::before { content: "▾"; font-size: .8rem; transition: transform .15s; }
.code .out.collapsed .out-head::before { transform: rotate(-90deg); }
.code .out.collapsed pre { display: none; }
.code .out pre { color: var(--ink-2); font-size: .8rem; max-height: 420px; overflow: auto; }
.tok-kw { color: var(--code-kw); }
.tok-str { color: var(--code-str); }
.tok-num { color: var(--code-num); }
.tok-com { color: var(--code-com); font-style: italic; }
.tok-fn { color: var(--code-fn); }
.tok-dec { color: var(--code-dec); }
.tok-b { color: var(--code-fn); }
.hl-line { background: color-mix(in srgb, var(--accent) 14%, transparent); display: inline-block; width: 100%; }

/* small "annotated code" list */
.annot { list-style: none; padding: 0; margin: .5rem 0 1.4rem; font-size: .95rem; }
.annot li { display: grid; grid-template-columns: max-content 1fr; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line-2); }
.annot li code { align-self: start; }

/* ---------- 9. Visualization panels -------------------------------- */
.viz {
  margin: 1.6rem 0 2rem; padding: 0;
  background: var(--viz-bg); color: var(--viz-text);
  border-radius: 14px; border: 1px solid #1E2740;
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.6);
  font-family: var(--font-sans);
  overflow: hidden;
}
.viz .viz-head { display: flex; align-items: center; gap: .8rem; padding: .6rem 1rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--viz-dim); border-bottom: 1px solid #1B2338; }
.viz .viz-head .spacer { flex: 1; }
.viz .viz-head .tag { color: var(--v-violet); }
.viz .viz-stage { position: relative; padding: .6rem .6rem 0; }
.viz .viz-stage svg { display: block; width: 100%; height: auto; }
.viz svg text { font-family: var(--font-sans); }
.viz svg text:not([fill]) { fill: var(--viz-text); }
.viz svg .mono { font-family: var(--font-mono); }
.viz svg .dim { fill: var(--viz-dim); }
.viz svg .serif { font-family: var(--font-serif); }
.viz .viz-caption { padding: .85rem 1rem .9rem; font-size: .9rem; line-height: 1.5; color: var(--viz-text); min-height: 3.2rem; border-top: 1px solid #1B2338; font-family: var(--font-serif); }
.viz .viz-caption b { color: var(--v-gold); font-weight: 600; }
.viz .viz-caption .k { font-family: var(--font-mono); font-size: .85em; color: var(--v-blue); }
.viz .viz-caption a, .viz svg a { color: var(--v-blue); text-decoration-color: rgba(91,192,235,.5); }
.modref a { white-space: nowrap; }
.viz .viz-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .55rem 1rem; border-top: 1px solid #1B2338; background: var(--viz-bg-2); }
.viz .vbtn { display: inline-flex; align-items: center; gap: .35rem; height: 30px; padding: 0 .7rem; border-radius: 7px; border: 1px solid #2A3450; background: #151C2E; color: var(--viz-text); font-family: var(--font-sans); font-size: .78rem; cursor: pointer; }
.viz .vbtn:hover { border-color: #3B4870; background: #1B2340; }
.viz .vbtn.primary { background: #1F3A5A; border-color: #2E5A8A; }
.viz .vbtn svg { width: 12px; height: 12px; fill: currentColor; }
.viz .vbtn[disabled] { opacity: .4; cursor: default; }
.viz .steps-dots { display: inline-flex; gap: 5px; margin: 0 .5rem; }
.viz .steps-dots i { width: 7px; height: 7px; border-radius: 50%; background: #2A3450; cursor: pointer; }
.viz .steps-dots i.on { background: var(--v-gold); }
.viz .steps-dots i.past { background: #4B577A; }
.viz .ctl-spacer { flex: 1; }
.viz .slider { display: inline-flex; align-items: center; gap: .55rem; font-size: .78rem; color: var(--viz-dim); }
.viz .slider input[type=range] { width: 130px; accent-color: var(--v-gold); }
.viz .slider .val { font-family: var(--font-mono); color: var(--viz-text); min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.viz .seg { display: inline-flex; border: 1px solid #2A3450; border-radius: 7px; overflow: hidden; }
.viz .seg button { height: 30px; padding: 0 .7rem; border: 0; background: #151C2E; color: var(--viz-dim); font-family: var(--font-sans); font-size: .76rem; cursor: pointer; }
.viz .seg button + button { border-left: 1px solid #2A3450; }
.viz .seg button.on { background: #1F3A5A; color: var(--viz-text); }
.viz .chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--viz-dim); }
.viz .chip i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.viz .legend { display: flex; gap: 1rem; flex-wrap: wrap; padding: .5rem 1rem 0; font-size: .74rem; color: var(--viz-dim); }
.viz .legend span { display: inline-flex; align-items: center; gap: .4rem; }
.viz .legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.viz .readout { font-family: var(--font-mono); font-size: .8rem; color: var(--viz-text); }
.viz .readout b { color: var(--v-gold); font-weight: 500; }

/* SVG transitions */
.viz svg .tr { transition: opacity .45s ease, transform .5s cubic-bezier(.2,.7,.2,1), fill .35s ease, stroke .35s ease, stroke-dashoffset .6s ease, x .5s ease, y .5s ease, width .5s ease, height .5s ease, cx .5s ease, cy .5s ease, r .4s ease; }
.viz svg .hidden { opacity: 0; }
.viz svg .flow { animation: dash 1.1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.viz svg .pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.viz svg .blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.viz svg .tok { cursor: default; }
.viz svg .tok:hover rect { stroke: var(--viz-text); }
.viz svg .clickable { cursor: pointer; }
.viz svg .clickable:hover { filter: brightness(1.2); }

@media (prefers-reduced-motion: reduce) {
  .viz svg .tr { transition: none; }
  .viz svg .flow, .viz svg .pulse, .viz svg .blink { animation: none; }
}

/* ---------- 10. Misc ------------------------------------------------- */
.next-module { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; margin-top: 2.4rem; padding: 1.2rem 1.4rem; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; }
.next-module .eyebrow { margin-bottom: .2rem; }
.next-module h3 { margin: 0; }
.next-module p { margin: .3rem 0 0; color: var(--ink-2); }
.done-banner { text-align: center; padding: 2rem 1rem; }
.done-banner .eyebrow { margin-bottom: .5rem; }
.footer { text-align: center; font-family: var(--font-sans); font-size: .78rem; color: var(--ink-3); padding: 3rem 1rem 1rem; }
.footer a { color: var(--ink-3); }

@media print {
  .topbar, .rail, .lesson-nav, .viz-controls { display: none !important; }
  .lesson { grid-template-columns: 1fr; }
  body { background: #fff; }
}

/* Reading and exploration refinements. Keep the paper / chalkboard design. */
.body { max-width: none; }
.body > p, .body > ul, .body > ol { line-height: 1.75; }
main h1[tabindex="-1"]:focus { outline: none; }
.screen .badges { flex-wrap: wrap; gap: .5rem; }
.rail .scr { padding-top: .45rem; padding-bottom: .45rem; }
.rail .scr .t { white-space: normal; line-height: 1.4; }
.learning-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.5rem; color: var(--ink-2); font-size: .92rem; }
.learning-guide p { margin: .5rem 0 0; }
.explore { padding: 1.2rem 1.35rem; margin: 1.5rem 0; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
.explore p { margin: .4rem 0 .75rem; }
.explore summary { color: var(--accent-ink); font: 500 .86rem var(--font-sans); cursor: pointer; padding: .3rem 0; }
.explore details[open] summary { margin-bottom: .6rem; }
.explore details > div { color: var(--ink-2); }
.source-note { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .9rem 0; border-top: 1px solid var(--line-2); font: .78rem/1.6 var(--font-sans); color: var(--ink-2); margin-top: 1.5rem; }
.source-note > span { font-weight: 600; }
.contents-toggle, .focus-exit { display: none; }
body.focus-mode .focus-exit { display: inline-flex; position: fixed; top: .75rem; right: .75rem; z-index: 30; opacity: .4; }
body.focus-mode .focus-exit:hover, body.focus-mode .focus-exit:focus-visible { opacity: 1; }
body.focus-mode .screen { padding-top: 3.5rem; }
.viz .viz-head { flex-wrap: wrap; letter-spacing: .06em; }
.viz .viz-head .vbtn { text-transform: none; letter-spacing: 0; margin-left: auto; }
.viz .viz-stage { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #4B577A var(--viz-bg); }
.viz .viz-stage svg { min-width: 680px; }
.hero .viz .viz-stage svg { min-width: 0; }
.hero { grid-template-columns: 1fr 1.3fr; }
.viz .vbtn, .viz .seg button { min-height: 36px; height: auto; }
.viz .steps-dots { flex-wrap: wrap; gap: 0; margin: 0; }
.viz .steps-dots button { display: grid; place-items: center; width: 24px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.viz .steps-dots button::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4B577A; }
.viz .steps-dots button.on::after { background: var(--v-gold); box-shadow: 0 0 0 3px #F5C45122; }
.viz .steps-dots button.past::after { background: #97A3C2; }
.viz .slider { flex-wrap: wrap; row-gap: .25rem; color: #B5BED2; }
.viz .slider input[type=range] { min-height: 32px; cursor: pointer; }
.viz .playback-speed { display: flex; align-items: center; gap: .4rem; margin-left: auto; color: var(--viz-dim); font-size: .75rem; }
.viz .playback-speed select { background: #151C2E; color: var(--viz-text); border: 1px solid #3B4870; padding: .35rem; border-radius: 6px; font: inherit; }
.viz .viz-caption { line-height: 1.65; min-height: 5.8rem; }
.viz :focus-visible { outline-color: var(--v-gold); }
.viz-transcript { border-top: 1px solid #2A3450; padding: .7rem 1rem; font-size: .86rem; color: var(--viz-text); }
.viz-transcript summary { cursor: pointer; color: var(--v-blue); font-size: .8rem; }
.viz-transcript summary span { color: var(--viz-dim); }
.viz-transcript ol { list-style: none; margin: .6rem 0 0; padding: 0; }
.viz-transcript li { display: grid; grid-template-columns: auto 1fr; gap: .8rem; padding: .7rem .5rem; border-radius: 6px; }
.viz-transcript li.current { background: var(--viz-bg-2); }
.viz-transcript li button { align-self: start; color: var(--v-gold); background: transparent; border: 1px solid #4B577A; border-radius: 5px; padding: .3rem; font-size: .75rem; cursor: pointer; }
.viz-transcript a { color: var(--v-blue); }
.viz-paused svg .flow, .viz-paused svg .pulse, .viz-paused svg .blink { animation-play-state: paused; }
.diagram-open { overflow: hidden; }
.viz-dialog { width: min(1200px, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid #3B4870; border-radius: 16px; background: var(--viz-bg); color: var(--viz-text); }
.viz-dialog::backdrop { background: #050915cc; backdrop-filter: blur(4px); }
.diagram-toolbar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1rem; background: var(--viz-bg-2); font: .9rem var(--font-sans); }
.viz-dialog .viz { width: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.viz-dialog .expand-viz { display: none; }
.viz-dialog .diagram-toolbar .iconbtn { color: var(--viz-text); background: var(--viz-bg); border-color: #4B577A; }
@media (min-width: 1200px) {
  .lesson .viz, .lesson .wide { width: 100%; margin-left: 0; }
  .lesson .screen-inner { max-width: 900px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .contents-toggle { display: flex; justify-content: space-between; gap: 1rem; width: 100%; border: 0; background: transparent; padding: .8rem 1.1rem; color: var(--accent-ink); font: 500 .82rem var(--font-sans); cursor: pointer; }
  .rail .rail-head { padding: .7rem 1.1rem; }
  .rail .rail-head .title { display: none; }
  .rail:not(.contents-open) nav, .rail:not(.contents-open) .rail-foot { display: none; }
}
@media (max-width: 600px) {
  .topbar { gap: .5rem; padding: 0 .75rem; }
  .topbar .crumbs { display: none; }
  .topbar .brand { font-size: .85rem; }
  .topbar .iconbtn { padding: 0 .45rem; }
  .screen { padding: 1.6rem 1rem 2rem; }
  .learning-guide { grid-template-columns: 1fr; gap: .5rem; }
  .lesson-nav { gap: .5rem; padding: .6rem .75rem; }
  .lesson-nav .btn { font-size: .78rem; padding: .55rem .6rem; }
  .lesson-nav .mid { font-size: .68rem; }
  .lesson-nav .mid a { font-size: .6rem; }
  .pair { grid-template-columns: 1fr; }
  .annot li { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .annot li code { overflow-wrap: anywhere; }
  .viz .viz-head { padding: .6rem .75rem; gap: .4rem; }
  .viz .viz-head > .spacer + span { display: none; }
  .viz .viz-stage::before { content: 'Swipe diagram to explore →'; display: block; color: var(--viz-dim); font-size: .7rem; padding: .25rem; }
  .viz .viz-controls { padding: .65rem .75rem; gap: .5rem; }
  .viz .slider { width: 100%; }
  .viz .slider input[type=range] { flex: 1; min-width: 70px; }
  .viz .seg { flex-wrap: wrap; }
  .viz .playback-speed { margin-left: 0; }
  .viz .viz-caption { padding: .8rem; }
  .viz-dialog { width: calc(100vw - .75rem); max-height: calc(100dvh - .75rem); }
  .next-module { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
@media print {
  .focus-exit, .expand-viz, .contents-toggle { display: none !important; }
  .viz .viz-stage svg { min-width: 0; }
}