:root{
    --bg:#07080c; --well:#04060a; --raise:#0c0e14;
    --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.22); --border-top:rgba(255,255,255,.07);
    --caret:#ffffff; --brand-red:#e10600;
    --surface2:#0c0e13; --surface3:#0a0b10;
    --p-accent:#e8b04b; --p-accent-2:#7fb4a2; --p-highlight:#d96f4e;
    --p-ink:#dde3ee; --p-ink2:#d9dfec; --p-muted:#8a93a6; --p-surface:#0d0f10; --p-faint:#5b6273;
    /* teaching palette — colour = category, from the validated brights */
    --c-blue:#6095f4; --c-gold:#f4c370; --c-red:#da403c; --c-green:#5ede78; --c-cyan:#45e6ef; --c-violet:#c05bda;
    --coral:#FF5A2B; --coral-deep:#FF6A3D;
    --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --font-serif:"Spectral",Georgia,"Times New Roman",serif;
    --font-sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
    --r-s:6px; --r-m:10px; --r-l:13px;
  }
  *{box-sizing:border-box; margin:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg); color:var(--p-ink); font-family:var(--font-mono); font-size:15px; line-height:1.6;
    -webkit-font-smoothing:antialiased; min-height:100vh;
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%3E%3Cg%20fill%3D%22%23d8deeb%22%20fill-opacity%3D%220.01%22%20transform%3D%22translate%289%2C9.8%29%20scale%280.271%29%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2218%22%20height%3D%2264%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2223%22%20width%3D%2232%22%20height%3D%2218%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2272%22%20width%3D%2296%22%20height%3D%2218%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M32%2032%20a32%2032%200%201%200%2064%200%20a32%2032%200%201%200%20-64%200%20Z%20M42%2032%20a22%2022%200%201%201%2044%200%20a22%2022%200%201%201%20-44%200%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size:44px 44px;}
  a{color:var(--p-accent); text-decoration:none;}
  /* simple two-track grid — a fixed rail beside a single reading column */
  .layout{display:grid; grid-template-columns:250px minmax(0,940px); gap:0 clamp(44px,4.5vw,76px);
    width:min(1260px,94vw); max-width:1260px; margin:0 0 0 max(24px,5vw); padding:0; position:relative; z-index:1;}
  @media (max-width:900px){ .layout{grid-template-columns:1fr; width:92vw; margin:0 auto;} .rail{position:static !important; height:auto !important; max-width:420px !important; margin:0 auto;} }

  /* ---------- rail — compact, left-aligned ---------- */
  .rail{position:sticky; top:0; align-self:start; width:100%; max-height:100vh;
    display:flex; flex-direction:column; gap:16px; padding:40px 8px 24px; overflow:auto; overflow-x:hidden;}
  .lockup{display:flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; color:inherit; transition:transform .25s ease;
    border:1.5px solid transparent; border-radius:11px; padding:10px 12px;
    background:linear-gradient(var(--surface2),var(--surface3)) padding-box,linear-gradient(135deg,rgba(225,6,0,.55),rgba(255,255,255,.06) 55%,rgba(232,176,75,.4)) border-box;}
  .lockup:hover{transform:translateY(-1px);}
  .lockup svg{width:16px; height:16px;}
  .lockup .wm{font-size:16px; font-weight:800; color:#e10600; letter-spacing:-.01em; line-height:1; display:inline-flex; align-items:center;}
  .lockup .cr{display:inline-block; width:8px; height:15px; background:#f4c370; margin-left:2px; border-radius:1px; animation:blink 1.1s step-end infinite;}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
  /* home + map chips */
  .railnav{display:flex; gap:8px;}
  .railnav a{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; text-decoration:none; font-size:11px; font-weight:700; letter-spacing:.02em;
    border:1.5px solid transparent; border-radius:10px; padding:11px 6px; transition:transform .15s;}
  .railnav a:hover{transform:translateY(-1px);}
  .railnav a.home{color:#ff6a63; background:linear-gradient(var(--surface3),var(--surface3)) padding-box,linear-gradient(140deg,#e10600,rgba(225,6,0,.2)) border-box;}
  .railnav a.map{color:#e8b04b; background:linear-gradient(var(--surface3),var(--surface3)) padding-box,linear-gradient(140deg,#f4c370,rgba(244,195,112,.2)) border-box;}
  .railnav svg{width:17px; height:17px;}
  /* chapter box — number, title, dot-progress list, prev/next */
  .chbox{width:100%; border:1px solid var(--border-strong); border-radius:var(--r-l); background:linear-gradient(180deg,#0d0f14,#0a0c11); padding:15px 15px 17px;}
  .chbox .ch-vol{font-family:var(--font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--p-accent); font-weight:700; margin-bottom:4px;}
  .chbox .ch-title{font-size:14px; font-weight:700; color:var(--p-ink); line-height:1.25; letter-spacing:-.01em; margin-bottom:15px;}
  .dotlist{position:relative; padding-left:18px;}
  .dotlist::before{content:""; position:absolute; left:4px; top:6px; bottom:6px; width:2px; background:var(--border-strong); border-radius:2px;}
  .dotlist a{display:flex; align-items:center; gap:10px; padding:6px 0; position:relative; text-decoration:none;}
  .dotlist .dot{position:absolute; left:-18px; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.2); transition:background .2s, width .2s, height .2s;}
  .dotlist .lbl{font-size:11px; color:var(--p-muted); line-height:1.35; transition:color .2s;}
  .dotlist a.done .dot{background:var(--p-accent-2);} .dotlist a.done .lbl{color:var(--p-ink2);}
  .dotlist a.on .dot{width:10px; height:10px; background:var(--c-gold); box-shadow:0 0 0 3px rgba(244,195,112,.22);}
  .dotlist a.on .lbl{color:var(--p-ink);}
  .chbox .pctrow{margin-top:16px; font-family:var(--font-mono); font-size:10.5px; color:var(--p-faint); display:flex; justify-content:space-between;}
  .chbox .pctrow b{color:var(--p-accent); font-weight:600;}
  /* prev/next — shared .pn card, compact in the rail, fuller at the page foot */
  .pn{display:flex; flex-direction:column; gap:3px; border:1px solid var(--border-strong); border-radius:10px; background:linear-gradient(180deg,#0d0f14,#0a0c11);
    text-decoration:none; transition:border-color .18s, transform .18s;}
  .pn:hover{border-color:rgba(232,176,75,.5); transform:translateY(-2px);}
  .pn-k{font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--p-faint); font-weight:700; font-family:var(--font-mono);}
  .pn-t{font-size:12.5px; font-weight:700; color:var(--p-ink); line-height:1.25;}
  .chbox .pn{padding:11px 13px; margin-top:16px;}
  .chbox .pn.next .pn-k{color:var(--p-accent);}

  /* ---------- reading column ---------- */
  main{min-width:0; padding:40px 0 0 clamp(32px,3.5vw,60px); max-width:940px; width:100%; border-left:1px solid var(--border);}
  .kicker{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--p-faint); display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
  .kicker .py{color:var(--brand-red); font-weight:600;}
  .kicker .cur{color:var(--p-ink2);}
  h1{font-size:clamp(30px,4.4vw,42px); line-height:1.1; font-weight:800; letter-spacing:-.015em; margin-bottom:14px; color:var(--p-ink);}
  h1 .n{color:var(--p-faint); font-family:var(--font-mono); font-weight:600; margin-right:12px; font-size:.55em;}
  .h1rule{height:2px; width:64px; background:linear-gradient(90deg,var(--c-gold),var(--p-highlight)); border-radius:2px; margin:0 0 18px;}
  .lede{font-family:var(--font-serif); font-size:16.5px; color:var(--p-ink2); max-width:900px; margin:0 0 20px; line-height:1.68;}
  .lede b{color:var(--p-ink);}
  .learnchips{display:flex; flex-wrap:wrap; gap:9px; margin:8px 0 28px;}
  .learnchips span{font-family:var(--font-mono); font-size:11.5px; border-radius:20px; padding:6px 13px;}
  h2{font-size:22px; font-weight:700; color:var(--p-ink); letter-spacing:-.01em; margin:52px 0 14px; scroll-margin-top:24px; position:relative;
    display:flex; align-items:center; gap:11px;}
  h2 .hn{flex:0 0 auto; font-family:var(--font-mono); font-size:13px; font-weight:800; color:#08090d;
    background:linear-gradient(135deg,var(--c-gold),#e69f3c); border-radius:6px; padding:3px 8px;}
  h2 .h2rule{flex:1; height:1px; background:linear-gradient(90deg,rgba(232,176,75,.4),var(--border) 42%,transparent); min-width:24px;}
  .prose{font-family:var(--font-sans); font-size:15px; line-height:1.72; color:var(--p-ink2); max-width:900px; margin:14px 0;}
  .prose b{font-weight:600; color:var(--p-ink);} .prose i{color:var(--p-muted);}
  .prose code, code.k{font-family:var(--font-mono); font-size:.85em; background:var(--well); border:1px solid var(--border); border-radius:4px; padding:.08em .38em; color:var(--c-cyan); box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
  .b0{color:var(--c-blue);} .b1{color:var(--c-gold);} .b2{color:var(--c-red);} .bg{color:var(--c-green);}
  /* takeaway cards — placed after a section's discussion */
  .takeaways{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0 8px; max-width:900px;}
  .takeaways .tk{border:1px solid var(--border); border-top:2px solid var(--p-accent); border-radius:9px; padding:13px 15px; background:var(--p-surface);}
  .takeaways .tk .k{font-family:var(--font-mono); font-size:11px; font-weight:600; margin-bottom:5px; color:var(--p-accent);}
  .takeaways .tk .v{font-size:13px; line-height:1.5; color:var(--p-muted);}
  .takeaways .tk .v b{color:var(--p-ink); font-weight:600;}
  .takeaways .tk.blue{border-top-color:var(--c-blue);} .takeaways .tk.blue .k{color:var(--c-blue);}
  .takeaways .tk.red{border-top-color:var(--c-red);} .takeaways .tk.red .k{color:var(--c-red);}
  .takeaways .tk.green{border-top-color:var(--c-green);} .takeaways .tk.green .k{color:var(--c-green);}
  .takeaways .tk.cyan{border-top-color:var(--c-cyan);} .takeaways .tk.cyan .k{color:var(--c-cyan);}
  .takeaways .tk.violet{border-top-color:var(--c-violet);} .takeaways .tk.violet .k{color:var(--c-violet);}
  @media (max-width:560px){ .takeaways{grid-template-columns:1fr;} }

  /* figure / interactive frame — corner brackets, capped, the fixed-block sizing rule */
  /* the "premium schematic" card: coral top accent strip + blueprint grid backdrop — background layers set below in [6] (shimmer) */
  .fig{position:relative; border:1.5px solid color-mix(in srgb, var(--coral) 55%, transparent); border-radius:var(--r-l); overflow:hidden;
    padding:18px 18px 14px; margin:24px 0; max-width:857px;
    box-shadow:0 10px 34px -12px rgba(255,90,43,.28), 0 10px 30px -14px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);}
  .fig::before,.fig::after{content:""; position:absolute; width:16px; height:16px; opacity:.9; z-index:2; filter:drop-shadow(0 0 4px rgba(255,90,43,.65));}
  .fig::before{top:9px; left:9px; border-left:2.5px solid var(--coral); border-top:2.5px solid var(--coral);}
  .fig::after{bottom:9px; right:9px; border-right:2.5px solid var(--coral); border-bottom:2.5px solid var(--coral);}
  .fig .flabel{font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:var(--p-faint); margin-bottom:12px; display:flex; justify-content:space-between; position:relative; z-index:1;}
  .fig .flabel .tag{color:var(--p-accent);}
  /* ambient glow on every lit / highlighted shape, across every diagram — driven by fill colour, not per-figure edits */
  .fig svg rect[fill="#5ede78"],.fig svg circle[fill="#5ede78"],.fig svg path[fill="#5ede78"]{filter:drop-shadow(0 0 6px rgba(94,222,120,.75));}
  .fig svg rect[fill="#f4c370"],.fig svg circle[fill="#f4c370"],.fig svg path[fill="#f4c370"]{filter:drop-shadow(0 0 6px rgba(244,195,112,.75));}
  .fig svg rect[fill="#6095f4"],.fig svg circle[fill="#6095f4"],.fig svg path[fill="#6095f4"]{filter:drop-shadow(0 0 6px rgba(96,149,244,.75));}
  .fig svg rect[fill="#da403c"],.fig svg circle[fill="#da403c"],.fig svg path[fill="#da403c"]{filter:drop-shadow(0 0 6px rgba(218,64,60,.75));}
  .fig svg rect[fill="#45e6ef"],.fig svg circle[fill="#45e6ef"],.fig svg path[fill="#45e6ef"]{filter:drop-shadow(0 0 6px rgba(69,230,239,.75));}
  .fig svg rect[fill="#c05bda"],.fig svg circle[fill="#c05bda"],.fig svg path[fill="#c05bda"]{filter:drop-shadow(0 0 6px rgba(192,91,218,.75));}
  .fig svg rect[fill="rgba(244,195,112,.12)"]{filter:drop-shadow(0 0 5px rgba(244,195,112,.5));}
  figcaption{font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--p-muted); margin-top:12px; line-height:1.5;}

  .ctlrow{display:flex; align-items:center; gap:12px; margin-top:14px;}
  .ctlrow label{font-size:11px; color:var(--p-muted); letter-spacing:.03em;}
  .ctlrow input[type=range]{flex:1; accent-color:var(--p-accent); height:4px;}
  .ctlrow .ro{font-family:var(--font-mono); font-size:17px; font-weight:700; color:var(--p-accent); min-width:38px; text-align:right; font-variant-numeric:tabular-nums; transition:color .16s, transform .16s, text-shadow .16s;}
  /* the live value POPS on every change — cause->effect made unmissable */
  .ctlrow .ro.bump{color:var(--coral); transform:scale(1.18); text-shadow:0 0 14px rgba(255,90,43,.6);}
  /* one-time "drag me" nudge when an interactive first scrolls into view */
  .ctlrow.nudge input[type=range]{animation:dragnudge 1s ease 2;}
  @keyframes dragnudge{0%,100%{box-shadow:0 0 0 0 rgba(255,90,43,0);}50%{box-shadow:0 0 0 6px rgba(255,90,43,.22);}}
  .ctlrow.nudge label::after{content:" — drag"; color:var(--coral); animation:nudgefade 2.4s ease forwards;}
  @keyframes nudgefade{0%,55%{opacity:1;}100%{opacity:0;}}
  .hint{position:relative; font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--p-muted); margin-top:14px; padding:11px 14px 11px 15px; border-left:2px solid var(--coral); background:linear-gradient(90deg,rgba(255,90,43,.055),transparent 72%); border-radius:0 9px 9px 0;}
  .hint::before{content:"\25C6 try it"; display:inline-block; font-family:var(--font-mono); font-style:normal; font-size:8.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--coral); margin-right:10px; vertical-align:1px;}

  /* callouts */
  .cal{display:flex; gap:12px; border-left:3px solid var(--p-accent); background:var(--p-surface); border-radius:0 var(--r-m) var(--r-m) 0; padding:12px 15px; margin:22px 0; max-width:1500px;}
  .cal.warn{border-left-color:var(--c-red);} .cal.note{border-left-color:var(--c-blue);}
  .cal .ttl{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--p-accent); font-weight:700; margin-bottom:3px;}
  .cal.warn .ttl{color:var(--c-red);} .cal.note .ttl{color:var(--c-blue);}
  .cal .bd{font-family:var(--font-serif); font-size:16.5px; color:var(--p-ink); line-height:1.55;}
  .cal .bd b{color:var(--p-ink);}
  .next{font-family:var(--font-serif); font-style:italic; color:var(--p-accent-2); font-size:17.5px; margin:18px 0 6px;}

  /* myth vs reality — two columns */
  .vs{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0; max-width:1500px;}
  .vs .col{border:1px solid var(--border); border-radius:var(--r-m); padding:13px 15px; background:var(--p-surface); font-family:var(--font-serif); font-size:16.5px; color:var(--p-ink); line-height:1.55;}
  .vs .myth{border-left:3px solid var(--c-red);} .vs .real{border-left:3px solid var(--c-green);}
  .vs h4{font-size:11px; letter-spacing:.04em; margin-bottom:6px; font-family:var(--font-mono);}
  .vs .myth h4{color:var(--c-red);} .vs .real h4{color:var(--c-green);}
  @media (max-width:560px){ .vs{grid-template-columns:1fr;} }
  /* the reframe — "unlock" */
  .unlock{border:1px solid rgba(232,176,75,.3); background:rgba(232,176,75,.06); border-radius:var(--r-m); padding:13px 15px; margin:22px 0; max-width:1500px; font-family:var(--font-serif); font-size:17px; line-height:1.6; color:var(--p-ink);}
  .unlock .ttl{font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--p-accent); font-weight:700; margin-bottom:5px;}
  .unlock b{font-weight:700;}
  /* the "wait —" aside */
  .curio{border-left:3px solid var(--c-violet); background:var(--p-surface); border-radius:0 var(--r-m) var(--r-m) 0; padding:12px 15px; margin:20px 0; max-width:1500px; font-family:var(--font-serif); font-size:16.5px; color:var(--p-ink); line-height:1.55;}
  .curio .q{color:var(--c-violet); font-weight:700; font-style:italic; margin-right:6px;}
  /* collapsible deeper cut */
  details.deeper{border:1px solid var(--border); border-radius:var(--r-m); background:var(--well); padding:0 14px; margin:20px 0; max-width:1500px;}
  details.deeper summary{cursor:pointer; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--p-accent-2); padding:11px 0; list-style:none;}
  details.deeper summary::-webkit-details-marker{display:none;}
  details.deeper summary::before{content:"▸ "; color:var(--p-accent);}
  details.deeper[open] summary::before{content:"▾ ";}
  details.deeper .body{font-family:var(--font-serif); font-size:16.5px; color:var(--p-muted); line-height:1.62; padding:0 0 13px;}
  details.deeper .body b{color:var(--p-ink);}
  /* code block — NO macOS traffic-light dots (banned), just a lang tag */
  .codewrap{border:1px solid var(--border); border-radius:var(--r-m); overflow:hidden; margin:20px 0; max-width:1500px; background:var(--well);}
  .codewrap .codehead{display:flex; align-items:center; padding:7px 13px; border-bottom:1px solid var(--border); background:#0a0b10;}
  .codewrap .codehead .lang{margin-left:auto; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--p-faint);}
  .codewrap .codehead .fn{font-size:10px; color:var(--p-muted); font-family:var(--font-mono);}
  .codewrap pre{margin:0; padding:13px 15px; overflow-x:auto;}
  .codewrap code{font-family:var(--font-mono); font-size:12.5px; line-height:1.65; color:#c2c9d6; background:none; border:0; padding:0;}
  .codewrap .kw{color:#c58bf0;} .codewrap .cm{color:#5b6273; font-style:italic;} .codewrap .st{color:var(--c-green);} .codewrap .fnn{color:var(--p-accent);}
  /* extra cal variants */
  .cal.tip{border-left-color:var(--c-cyan);} .cal.tip .ttl{color:var(--c-cyan);}
  .cal.idea{border-left-color:var(--p-accent);} .cal.idea .ttl{color:var(--p-accent);}

  /* signature footer */
  .signature{margin:52px 0 96px; padding-top:26px; border-top:1px solid var(--border); display:flex; flex-direction:row; align-items:center; gap:14px; text-align:left;}
  .signature .sig-chip{display:inline-flex; align-items:center; gap:6px; text-decoration:none; border:1px solid color-mix(in srgb, var(--coral) 45%, transparent); border-radius:9px; padding:8px 14px; background:var(--surface2); box-shadow:0 8px 20px -14px rgba(255,90,43,.5); transition:transform .2s, border-color .2s, box-shadow .2s;}
  .signature .sig-chip:hover{transform:translateY(-2px); border-color:var(--coral); box-shadow:0 10px 24px -12px rgba(255,90,43,.65);}
  .signature .sig-chip span{font-size:13px; font-weight:800; color:#e10600; letter-spacing:-.01em; line-height:1;}
  .signature .by{font-size:10px; letter-spacing:.05em; color:var(--p-muted); padding-left:14px; border-left:1px solid var(--border);}
  .signature .by b{color:var(--p-ink); font-weight:600;}

  @keyframes dotpulse{0%,100%{box-shadow:0 0 0 3px rgba(244,195,112,.22)}50%{box-shadow:0 0 0 6px rgba(244,195,112,.08)}}
  /* top progress bar */
  .topbar{position:fixed; top:0; left:0; right:0; height:3px; z-index:100; background:rgba(255,255,255,.05);}
  .topbar-fill{width:0%; height:100%; background:linear-gradient(90deg,var(--c-blue),var(--c-green),var(--c-gold),var(--c-red)); box-shadow:0 0 8px rgba(244,195,112,.5); transition:width .08s linear;}
  /* back-to-top */
  .totop{position:fixed; right:26px; bottom:26px; z-index:60; width:46px; height:46px; border-radius:50%; cursor:pointer;
    background:linear-gradient(180deg,#12151c,#0b0d12); border:1px solid var(--border-strong); color:var(--p-accent);
    display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(12px) scale(.9); transition:opacity .25s, transform .25s, color .18s, border-color .18s; box-shadow:0 12px 30px -12px rgba(0,0,0,.9);}
  .totop.show{opacity:1; transform:none;}
  .totop:hover{border-color:var(--p-accent); color:var(--c-gold);}
  .totop svg{width:20px; height:20px;}
  /* [14] drop cap on the lede */
  .lede.dropcap::first-letter{float:left; font-family:var(--font-serif); font-weight:700; font-size:3.5em; line-height:.8; padding:6px 12px 0 0;
    background:linear-gradient(180deg,var(--c-gold),var(--p-highlight)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
  /* [16] selection */
  ::selection{background:rgba(244,195,112,.28); color:#fff;}
  /* [17] themed scrollbar */
  html{scrollbar-width:thin; scrollbar-color:rgba(232,176,75,.45) transparent;}
  ::-webkit-scrollbar{width:12px; height:12px;}
  ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#4a4026,#2a2a33); border-radius:8px; border:3px solid var(--bg);}
  ::-webkit-scrollbar-thumb:hover{background:var(--p-accent);}
  ::-webkit-scrollbar-track{background:transparent;}
  /* [18] reveal on scroll (class added by JS → progressive) */
  .reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:none;}
  /* [19] figure hover lift + [20] brackets light up */
  .fig{transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;}
  .fig:hover{transform:translateY(-3px); border-color:var(--border-strong); box-shadow:0 24px 54px -30px rgba(0,0,0,.92);}
  .fig:hover::before,.fig:hover::after{opacity:1;}
  /* [21] code copy button + [22] code left accent */
  .codewrap{position:relative;}
  .codewrap::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--c-violet),transparent); z-index:1;}
  .copybtn{margin-left:10px; font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--p-faint);
    background:transparent; border:1px solid var(--border); border-radius:5px; padding:3px 8px; cursor:pointer; transition:.16s;}
  .copybtn:hover{color:var(--p-accent); border-color:var(--p-accent);}
  .copybtn.done{color:var(--c-green); border-color:var(--c-green);}
  /* [23] link underline sweep */
  .prose a,.next a{background-image:linear-gradient(var(--p-accent),var(--p-accent)); background-size:0 1px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .25s;}
  .prose a:hover,.next a:hover{background-size:100% 1px;}
  /* plain hairline divider between hero and first section */
  .hairline{height:1px; background:linear-gradient(90deg,var(--border),transparent); margin:30px 0 26px; max-width:760px;}
  /* [26] next teaser as a pull-quote */
  .next{position:relative; padding-left:22px; border-left:2px solid rgba(127,180,162,.4);}
  .next::before{content:"→"; position:absolute; left:-1px; top:-24px; font-size:36px; color:rgba(127,180,162,.16); font-style:normal;}
  /* [27] callout glyphs */
  .cal .ttl{display:flex; align-items:center; gap:7px;}
  .cal.idea .ttl::before{content:"◆";} .cal.note .ttl::before{content:"●";} .cal.tip .ttl::before{content:"▸";} .cal.warn .ttl::before{content:"▲";}
  /* [28] (removed — no cloudy ambient glow) */
  /* [29] chapter-end marker */
  .chapend{display:flex; align-items:center; justify-content:center; gap:14px; margin:52px auto 0; max-width:1500px; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--p-faint);}
  .chapend::before,.chapend::after{content:""; height:1px; flex:1; max-width:120px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);}
  .chapend b{color:var(--p-accent);}
  /* [+] prev / next chapter nav at the foot of the reading */
  .pagenav{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:30px auto 0; max-width:1500px;}
  .pagenav .pn{display:flex; flex-direction:column; gap:6px; border:1px solid var(--border); border-radius:var(--r-l); background:linear-gradient(180deg,#0d0f14,#0a0c11); padding:18px 22px; text-decoration:none; transition:border-color .18s, transform .18s, box-shadow .18s;}
  .pagenav .pn:hover{border-color:rgba(232,176,75,.5); transform:translateY(-2px); box-shadow:0 16px 34px -24px rgba(0,0,0,.9);}
  .pagenav .pn-k{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--p-faint); font-weight:700;}
  .pagenav .pn-t{font-size:17px; font-weight:700; color:var(--p-ink);}
  .pagenav .pn:hover .pn-t{color:var(--p-accent);}
  .pagenav .pn.next{text-align:right; align-items:flex-end;}
  .pagenav .pn.next .pn-k{color:var(--p-accent);}
  @media (max-width:620px){ .pagenav{grid-template-columns:1fr;} }
  /* [31] focus-visible */
  a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--p-accent); outline-offset:3px; border-radius:3px;}
  /* [39] print */
  @media print{ .rail,.totop{display:none!important;} .layout{grid-template-columns:1fr; width:100%; max-width:none;} main{max-width:none;} .fig,.codewrap,.vs{break-inside:avoid;} body{background:#fff;} body::before{display:none;} .prose,.lede{color:#111; max-width:none;} }
  /* [40] reduced motion */
  @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important; transition-duration:.001ms!important;} html{scroll-behavior:auto;} .reveal{opacity:1!important; transform:none!important;} }

  /* [41] custom slider track + [42] thumb + [43] hover/focus */
  .ctlrow input[type=range]{-webkit-appearance:none; appearance:none; background:linear-gradient(90deg,rgba(232,176,75,.55),rgba(255,255,255,.10)); border-radius:6px; height:5px;}
  .ctlrow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffe4ab,var(--p-accent)); border:2px solid #170f03; box-shadow:0 2px 9px -1px rgba(244,195,112,.7); cursor:pointer; transition:transform .12s, box-shadow .12s;}
  .ctlrow input[type=range]::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:var(--p-accent); border:2px solid #170f03; cursor:pointer;}
  .ctlrow input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.18);}
  .ctlrow input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(244,195,112,.22);}
  /* [44] figure tag dot */
  .fig .flabel .tag::before{content:"●"; color:var(--p-accent); margin-right:5px; font-size:7px; vertical-align:2px;}
  /* [45] figure hover brightens caption */
  .fig figcaption{transition:color .22s;} .fig:hover figcaption{color:var(--p-ink);}
  /* shrink the diagram artwork itself (proportionally) — the card/frame stays full width */
  .fig svg{width:80%; height:auto; display:block; margin:0 auto;}
  /* [57] drop-cap fade-in */
  .lede.dropcap::first-letter{animation:dropin .9s ease both;}
  @keyframes dropin{from{opacity:0}to{opacity:1}}
  /* h2 badge hover nudge */
  h2 .hn{transition:transform .15s;} h2:hover .hn{transform:scale(1.06);}
  /* [60] link hover brighten */
  .prose a:hover,.next a:hover{color:var(--c-gold);}
  /* [61] key-term hover glow */
  .prose .b0,.prose .b1,.prose .b2,.prose .bg{transition:text-shadow .2s;}
  .prose .b0:hover{text-shadow:0 0 12px rgba(96,149,244,.6);} .prose .b1:hover{text-shadow:0 0 12px rgba(244,195,112,.6);}
  .prose .b2:hover{text-shadow:0 0 12px rgba(218,64,60,.6);} .prose .bg:hover{text-shadow:0 0 12px rgba(94,222,120,.6);}
  /* [62] code selection colour */
  .codewrap code::selection{background:rgba(197,139,240,.35);}
  /* [63] curio question-mark watermark */
  .curio{position:relative; overflow:hidden;}
  .curio::after{content:"?"; position:absolute; right:10px; bottom:-20px; font-family:var(--font-serif); font-size:84px; font-weight:700; color:rgba(192,91,218,.08); pointer-events:none;}
  /* [64] next-teaser arrow bounce */
  .next::before{animation:arrowb 2.2s ease-in-out infinite;}
  @keyframes arrowb{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
  /* [65] callout hover lighten */
  .cal{transition:background .2s, box-shadow .2s;} .cal:hover{background:#101319; box-shadow:0 8px 26px -20px rgba(0,0,0,.9);}
  /* [66] callout glyph pulse */
  .cal .ttl::before{display:inline-block; animation:ipulse 3s ease-in-out infinite;}
  @keyframes ipulse{0%,100%{opacity:1}50%{opacity:.55}}
  /* [67] details summary hover */
  details.deeper summary{transition:color .15s, padding-left .15s;} details.deeper summary:hover{color:var(--c-gold); padding-left:4px;}
  /* [68] details body slide-in on open */
  details.deeper[open] .body{animation:detin .4s ease both;}
  @keyframes detin{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
  /* [69] unlock reframe glow */
  .unlock{transition:box-shadow .25s, border-color .25s;} .unlock:hover{box-shadow:0 0 30px -12px rgba(232,176,75,.5); border-color:rgba(232,176,75,.5);}
  /* [70] myth/reality hover lift */
  .vs .col{transition:transform .18s, border-color .18s;} .vs .col:hover{transform:translateY(-3px);}
  .vs .myth:hover{border-color:rgba(218,64,60,.5);} .vs .real:hover{border-color:rgba(94,222,120,.5);}
  /* [71] code block hover border */
  .codewrap{transition:border-color .2s;} .codewrap:hover{border-color:var(--border-strong);}
  /* [72] copy-success check */
  .copybtn.done::before{content:"✓ ";}
  /* [73] footer nav arrows slide */
  .pagenav .pn-k{display:inline-block; transition:transform .2s;}
  .pagenav .pn.prev:hover .pn-k{transform:translateX(-4px);} .pagenav .pn.next:hover .pn-k{transform:translateX(4px);}
  /* [74] back-to-top bounce */
  .totop:hover{transform:translateY(-3px);}
  /* [75] signature logo hover */
  /* [76] figures scale-in on reveal */
  .fig.reveal{transform:translateY(20px) scale(.985);} .fig.reveal.in{transform:none;}
  /* [77] callouts/code slide-in on reveal from the left, figures from below (variety) */
  .cal.reveal,.unlock.reveal{transform:translateX(-16px);} .cal.reveal.in,.unlock.reveal.in{transform:none;}
  /* [78] (removed — was the ambient glow pulse) */
  /* [79] focus ring colour pulse */
  a:focus-visible{animation:focring 1.2s ease infinite alternate;}
  @keyframes focring{from{outline-color:var(--p-accent)}to{outline-color:var(--c-gold)}}
  /* ===== embedded trace3 — scoped under .t3 (no global class leaks) ===== */
.t3[data-t3]{--tc-code:#c58bf0; --tc-mem:#5fd0e6; --tc-reg:#7fb4a2; --tc-alu:#e8b04b; --tc-sum:#eb6b3c;
  border:1.5px solid color-mix(in srgb, var(--coral) 50%, transparent); border-radius:var(--r-l); background:linear-gradient(180deg,#0a0c11,#08090d);
  padding:14px 15px 13px; margin:26px 0; max-width:none; font-family:var(--font-mono); font-size:12.5px; line-height:1.42; color:var(--p-ink); overflow:hidden;
  box-shadow:0 10px 34px -12px rgba(255,90,43,.25), 0 10px 30px -14px rgba(0,0,0,.85);}
.t3 .t3head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:10px;}
.t3 .t3kick{font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:var(--p-muted); margin-bottom:4px; display:flex; align-items:center; gap:7px;}
.t3 .t3kick .t3tag{color:#07080c; font-weight:800; letter-spacing:.1em; border:none; border-radius:999px; padding:3px 10px; background:var(--c-violet); box-shadow:0 0 14px -3px rgba(192,91,218,.65);}
.t3 .t3ttl{font-size:16px; font-weight:700; letter-spacing:-.01em;}
.t3 .t3desc{font-size:12px; color:var(--p-muted); font-family:var(--font-serif); margin-top:3px; line-height:1.45; max-width:92ch;}
.t3 .t3desc b{color:var(--p-ink);}
.t3 .t3badges{display:flex; gap:6px; flex-wrap:wrap;}
.t3 .t3badge{font-size:9.5px; border:1px solid var(--border-strong); border-radius:999px; padding:3px 10px; color:var(--p-muted); background:var(--p-surface); white-space:nowrap;}
.t3 .t3badge b{color:var(--p-accent-2); font-weight:600;}
/* fixed rows so text length never reflows the widget */
.t3 .t3grid{display:grid; grid-template-rows:1fr 1fr; gap:9px; height:min(82vh,800px);}
.t3 .t3banner{display:grid; grid-template-columns:1.15fr 1fr; gap:10px; min-height:0;}
.t3 .t3work{display:grid; grid-template-columns:1.15fr 1fr; gap:10px; min-height:0;}
.t3 .panel{background:#07080d; border:1px solid var(--border); border-radius:var(--r-m); padding:9px 11px; min-width:0; min-height:0; overflow:auto; display:flex; flex-direction:column; position:relative;}
.t3 .pl{position:sticky; top:0; z-index:5; background:#07080d; padding-top:2px; font-size:8.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--p-faint); margin-bottom:7px; display:flex; justify-content:space-between; gap:8px; align-items:center;}
.t3 .p-code{border-left:2px solid rgba(197,139,240,.4);} .t3 .p-code .pl{color:var(--tc-code);}
.t3 .p-mem{border-left:2px solid rgba(69,230,239,.35);} .t3 .p-mem .pl{color:var(--tc-mem);}
.t3 .pl .evt{font-size:9px; letter-spacing:.05em; color:var(--p-accent); font-weight:600; border:1px solid rgba(232,176,75,.3); border-radius:999px; padding:0 7px; text-transform:none;}
.t3 .typetag{font-size:8px; color:var(--p-accent-2); background:rgba(127,180,162,.08); border:1px solid rgba(127,180,162,.26); border-radius:4px; padding:1px 6px; white-space:nowrap;}
/* visual */
.t3 .visual{background:linear-gradient(180deg,#0b0d12,#08090d); border:1px solid color-mix(in srgb, var(--coral) 35%, transparent); border-radius:var(--r-m); padding:11px 13px 10px; position:relative; overflow:hidden; display:flex; flex-direction:column;}
.t3 .visual::before,.t3 .visual::after{content:""; position:absolute; width:11px; height:11px; opacity:.5;}
.t3 .visual::before{top:6px; left:6px; border-left:2px solid var(--p-accent); border-top:2px solid var(--p-accent);}
.t3 .visual::after{bottom:6px; right:6px; border-right:2px solid var(--p-accent); border-bottom:2px solid var(--p-accent);}
.t3 .viz-inner{flex:1; display:flex; flex-direction:column; justify-content:center; gap:0; width:100%; max-width:520px; margin:0 auto; min-height:0;}
.t3 .placerow,.t3 .bitrow,.t3 .powrow{display:flex; gap:5px;}
.t3 .placerow .pv{flex:1 1 0; min-width:0; text-align:center; font-size:11px; color:var(--p-faint); font-weight:600; transition:color .2s;}
.t3 .placerow .pv.hot{color:var(--p-accent);}
.t3 .bitrow{margin:5px 0;}
.t3 .bcell{flex:1 1 0; height:46px; min-width:0; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700;
  background:var(--well); color:var(--p-faint); border:1px solid var(--border); transition:background-color .26s, color .26s, box-shadow .18s, transform .16s;}
.t3 .bcell.set{background:var(--c-green,#5ede78); color:#04140a; border-color:transparent;}
.t3 .bcell.zero{color:var(--p-muted);}
.t3 .bcell.pending{color:var(--p-faint); opacity:.5;}
.t3 .bcell.focus{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--p-accent); transform:translateY(-3px); z-index:2;}
.t3 .powrow .px{flex:1 1 0; min-width:0; text-align:center; font-size:8px; color:var(--p-faint);}
.t3 .sumline{text-align:center; font-size:15px; color:var(--c-green,#5ede78); font-weight:700; margin-top:10px; font-variant-numeric:tabular-nums; min-height:20px;}
.t3 .sumline .eq{color:var(--p-ink);}
.t3 .binline{text-align:center; font-size:11px; color:var(--tc-mem); margin-top:3px; min-height:14px;}
/* narration + ALU column */
.t3 .rcol{display:grid; grid-template-rows:1fr 1fr 1.05fr; gap:8px; min-height:0;}
.t3 .nbox{border:1px solid var(--border); border-radius:var(--r-m); padding:7px 11px; background:#07080d; min-height:0; overflow:auto;}
.t3 .nbox .nl{font-size:8.5px; letter-spacing:.13em; text-transform:uppercase; margin-bottom:4px; display:flex; align-items:center; gap:6px;}
.t3 .nbox .nl::before{content:""; width:11px; height:2px; border-radius:2px;}
.t3 .nbox.plain .nl{color:var(--p-accent);} .t3 .nbox.plain .nl::before{background:var(--p-accent);}
.t3 .nbox.expert .nl{color:#6095f4;} .t3 .nbox.expert .nl::before{background:#6095f4;}
.t3 .nbox.plain .body{font-family:var(--font-serif); font-size:13px; line-height:1.5; color:var(--p-ink);}
.t3 .nbox.expert .body{font-family:var(--font-mono); font-size:11px; line-height:1.45; color:#c7cedb;}
.t3 .alu{border:1px solid rgba(232,176,75,.24); border-radius:var(--r-m); padding:8px 11px; background:linear-gradient(180deg,#0d0b07,#08090d); min-height:0; overflow:auto;}
.t3 .alu .top{display:flex; align-items:center; gap:9px; margin-bottom:5px;}
.t3 .alu .op{font-size:10px; font-weight:800; letter-spacing:.1em; color:#1a1305; background:var(--p-accent); border-radius:5px; padding:2px 8px;}
.t3 .alu .lbl{font-size:8.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--p-accent);}
.t3 .alu .expr{font-size:13px; color:var(--p-ink);} .t3 .alu .expr .o{color:var(--p-muted); margin:0 6px;} .t3 .alu .expr .r{color:var(--p-accent-2); font-weight:700;}
.t3 .alu .note{font-size:11px; color:var(--p-muted); margin-top:5px; line-height:1.45; font-family:var(--font-serif); font-style:italic;}
/* code */
.t3 .code-wrap{display:flex; gap:11px; flex:1; min-height:0;}
.t3 .code{flex:1 1 0; font-size:11.5px; line-height:1.5; overflow:auto; min-height:0;}
.t3 .ln{display:flex; border-left:3px solid transparent; white-space:pre; border-radius:0 3px 3px 0;}
.t3 .ln.active{background:rgba(232,176,75,.12); border-left-color:var(--p-accent);}
.t3 .ln .n{width:22px; text-align:right; padding-right:10px; color:#41444d; user-select:none; flex:0 0 auto;}
.t3 .ln .c{color:#c2c9d6;}
.t3 .kw{color:#c58bf0;} .t3 .fn{color:var(--p-accent);} .t3 .num{color:#8fd6ef;} .t3 .cm{color:#5b6273; font-style:italic;} .t3 .op{color:#9aa3b2;} .t3 .st{color:#6be58b;}
.t3 .car2{display:inline-block; width:.5em; height:1em; margin-left:1px; vertical-align:-.14em; background:var(--p-accent); animation:blink 1.05s step-end infinite;}
.t3 .varcol{width:104px; flex:0 0 auto; border-left:1px solid var(--border); padding-left:10px; overflow:auto; min-height:0;}
.t3 .vcl{font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:var(--p-faint); margin-bottom:7px;}
.t3 .vrow{display:flex; align-items:center; gap:5px; padding:4px 0; font-size:10px; border-bottom:1px dashed rgba(255,255,255,.055);}
.t3 .vrow .vtype{font-size:7.5px; padding:1px 5px; border-radius:3px; font-weight:700; flex:0 0 auto;}
.t3 .vrow .vn{color:var(--p-ink);} .t3 .vrow .vv{margin-left:auto; font-variant-numeric:tabular-nums; color:var(--p-muted); max-width:52px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.t3 .vrow .vv.chg{color:var(--p-accent); font-weight:700;}
.t3 .t-int{background:rgba(127,214,255,.14); color:#7fd6ef;} .t3 .t-str{background:rgba(107,229,139,.14); color:#6be58b;}
/* memory */
.t3 .sh2{font-size:8px; letter-spacing:.13em; text-transform:uppercase; color:var(--p-faint); margin:2px 0 5px;}
.t3 .regs{display:flex; gap:6px;}
.t3 .reg{flex:1; border:1px solid var(--border); border-radius:6px; padding:5px 7px; background:var(--p-surface); position:relative;}
.t3 .reg .rt{position:absolute; top:4px; right:6px; font-size:7px; color:var(--p-accent-2); opacity:.85;}
.t3 .reg .rn{font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--p-muted);}
.t3 .reg .rv{font-size:16px; font-weight:700; color:var(--p-ink);}
.t3 .reg.changed{border-color:var(--p-accent); box-shadow:0 0 0 1px rgba(232,176,75,.4);} .t3 .reg.changed .rv{color:var(--p-accent);}
.t3 .heapobj{border:1px solid var(--border); border-left:2px solid var(--tc-mem); border-radius:6px; padding:6px 8px; background:rgba(69,230,239,.05); margin-top:8px;}
.t3 .heapobj-name{font-size:9px; color:var(--tc-mem); margin-bottom:5px; font-weight:600; display:flex; gap:6px; align-items:baseline;}
.t3 .heapobj-name .ht{color:var(--p-muted); font-weight:400; font-size:8px;}
.t3 .bitsbig{font-size:19px; font-weight:700; letter-spacing:2px; color:var(--tc-mem);}
.t3 .bitsbig .pend{color:var(--p-faint); opacity:.4;}
.t3 .summary{margin-top:9px; border-top:1px dashed var(--border); padding-top:8px;}
.t3 .summary .sh{font-size:8.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--tc-sum); margin-bottom:5px;}
.t3 .summary .phase{font-family:var(--font-serif); font-style:italic; font-size:12px; color:var(--p-ink); line-height:1.42; min-height:34px;}
/* controls */
.t3 .ctrl{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:11px;}
.t3 .btn{font-family:inherit; font-size:12px; color:var(--p-ink); background:var(--p-surface); border:1px solid var(--border); border-radius:8px; padding:7px 13px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:border-color .15s, background .15s;}
.t3 .btn:hover{border-color:var(--border-strong);}
.t3 .btn.primary{background:var(--p-accent); color:#1a1305; border-color:transparent; font-weight:600;}
.t3 .btn:disabled{opacity:.4; cursor:default;}
.t3 .btn svg{width:12px; height:12px; fill:currentColor;}
.t3 .btn.nextbtn,.t3 .btn.prevbtn{flex-direction:column; gap:0; padding:4px 14px; line-height:1.05;}
.t3 .btn.nextbtn .nlabel,.t3 .btn.prevbtn .nlabel{display:inline-flex; align-items:center; gap:5px; font-weight:700;}
.t3 .btn.nextbtn .nsub,.t3 .btn.prevbtn .nsub{font-size:7.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.72; margin-top:1px;}
.t3 .btn.prevbtn{background:transparent; border-color:rgba(232,176,75,.55); color:var(--p-accent);}
.t3 .btn.prevbtn:hover{background:rgba(232,176,75,.12);}
.t3 .btn.resetbtn svg{transition:transform .55s cubic-bezier(.5,0,.2,1);}
.t3 .btn.resetbtn:hover{color:var(--brand-red); border-color:rgba(225,6,0,.55);} .t3 .btn.resetbtn:hover svg{transform:rotate(-360deg);}
.t3 .scrub{flex:1; min-width:110px; accent-color:var(--p-accent); height:4px;}
.t3 .counter{font-size:10.5px; color:var(--p-muted); font-variant-numeric:tabular-nums; white-space:nowrap;} .t3 .counter b{color:var(--p-ink);}
@keyframes t3nudge{0%,60%,100%{transform:translateX(0)}68%{transform:translateX(-5px)}76%{transform:translateX(5px)}84%{transform:translateX(-3px)}92%{transform:translateX(2px)}}
.t3 .btn.nudge{animation:t3nudge 2s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){ .t3 .btn.nudge{animation:none;} }
@media (max-width:820px){ .t3 .t3grid{display:flex; flex-direction:column;} .t3 .t3banner,.t3 .t3work{grid-template-columns:1fr;} .t3 .visual{height:230px;} .t3 .rcol{display:flex; flex-direction:column;} .t3 .nbox{min-height:74px;} }
  /* --- trace3 ram (viz-specific) --- */
/* ===== bespoke visual for the RAM random-access trace3 — every selector under .t3-ram ===== */
.t3-ram .ram-formula{text-align:center; min-height:44px; display:flex; flex-direction:column; justify-content:center; gap:4px; margin-bottom:11px;}
.t3-ram .ram-tmpl{font-size:10px; letter-spacing:.05em; color:var(--p-faint); font-variant-numeric:tabular-nums;}
.t3-ram .ram-live{font-size:15px; font-weight:700; color:var(--p-ink); font-variant-numeric:tabular-nums; min-height:20px; line-height:1.3;}
.t3-ram .ram-live .base{color:var(--p-muted);}
.t3-ram .ram-live .mul{color:var(--p-accent);}
.t3-ram .ram-live .off{color:var(--tc-mem,#5fd0e6);}
.t3-ram .ram-live .res{color:var(--c-green,#5ede78);}
.t3-ram .ram-live .q{color:var(--p-faint);}
.t3-ram .ram-live .o{color:var(--p-muted); margin:0 3px;}
.t3-ram .ram-street{display:flex; gap:5px; justify-content:center; align-items:flex-end; padding:6px 0 2px;}
.t3-ram .ram-box{flex:1 1 0; min-width:0; border:1px solid var(--border); border-radius:6px; background:var(--well); padding:5px 2px 4px; text-align:center; position:relative; transition:background-color .24s, border-color .24s, transform .16s, box-shadow .18s;}
.t3-ram .rb-idx{font-size:7.5px; color:var(--p-faint); letter-spacing:.02em; line-height:1.1;}
.t3-ram .rb-val{font-size:15px; font-weight:700; color:var(--p-muted); font-variant-numeric:tabular-nums; line-height:1.25; transition:color .24s;}
.t3-ram .rb-addr{font-size:8px; color:var(--p-faint); font-variant-numeric:tabular-nums; margin-top:1px; line-height:1.1;}
.t3-ram .ram-box.hit{background:rgba(232,176,75,.16); border-color:var(--p-accent); transform:translateY(-4px); box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--p-accent),0 6px 15px rgba(0,0,0,.45); z-index:2;}
.t3-ram .ram-box.hit .rb-val{color:var(--p-accent);}
.t3-ram .ram-box.hit .rb-addr,.t3-ram .ram-box.hit .rb-idx{color:var(--p-accent);}
.t3-ram .ram-read{text-align:center; min-height:20px; margin-top:12px; font-size:12px; color:var(--p-muted); font-variant-numeric:tabular-nums;}
.t3-ram .ram-read .rv{color:var(--c-green,#5ede78); font-weight:700;}
.t3-ram .ram-read .ra{color:var(--p-accent); font-weight:700;}
/* memory-panel compact heap strip + list type-tag */
.t3-ram .heaprow{display:flex; gap:3px; margin-top:3px;}
.t3-ram .hcell{flex:1 1 0; min-width:0; text-align:center; font-size:11px; font-weight:700; color:var(--p-muted); background:var(--p-surface); border:1px solid var(--border); border-radius:4px; padding:3px 0; font-variant-numeric:tabular-nums; transition:background-color .2s,color .2s,border-color .2s;}
.t3-ram .hcell.hit{background:var(--p-accent); color:#1a1305; border-color:transparent;}
.t3-ram .heapaddr{font-size:9px; color:var(--p-faint); margin-top:6px; font-variant-numeric:tabular-nums;}
.t3-ram .heapaddr .ra{color:var(--c-green,#5ede78); font-weight:700;}
.t3-ram .t-list{background:rgba(232,176,75,.14); color:var(--p-accent);}
  /* --- trace3 cpu (viz-specific) --- */
/* ===== trace3 CPU — bespoke visual, scoped under .t3-cpu ===== */
.t3-cpu .cpuwrap{display:flex; align-items:stretch; justify-content:center; gap:0; width:100%; height:158px;}
.t3-cpu .mbox{flex:0 0 auto; width:188px; border:1px solid var(--border); border-radius:9px; background:#07080d; padding:7px 8px 8px; display:flex; flex-direction:column; gap:6px; transition:box-shadow .2s, border-color .2s;}
.t3-cpu .mbox-t{font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--p-faint); text-align:center; margin-bottom:1px;}
.t3-cpu .mbox.cpu{border-color:rgba(127,180,162,.35);}
.t3-cpu .mbox.ram{border-color:rgba(69,230,239,.30);}
.t3-cpu .regcell{display:flex; align-items:center; gap:8px; background:var(--well); border:1px solid var(--border); border-radius:6px; padding:5px 9px; transition:box-shadow .2s, border-color .2s, background .2s;}
.t3-cpu .regcell .rl{font-size:11px; font-weight:700; color:var(--p-accent-2); width:14px; flex:0 0 auto;}
.t3-cpu .regcell .rv{margin-left:auto; font-size:15px; font-weight:700; color:var(--p-ink); font-variant-numeric:tabular-nums;}
.t3-cpu .regcell .rv.empty{color:var(--p-faint); font-weight:400;}
.t3-cpu .alustrip{margin-top:auto; display:flex; align-items:center; gap:7px; background:linear-gradient(180deg,#0d0b07,#08090d); border:1px solid rgba(232,176,75,.28); border-radius:6px; padding:6px 9px; transition:box-shadow .2s, border-color .2s;}
.t3-cpu .alustrip .al{font-size:9px; font-weight:800; letter-spacing:.08em; color:#1a1305; background:var(--p-accent); border-radius:4px; padding:1px 6px; flex:0 0 auto;}
.t3-cpu .alustrip .ae{font-size:12px; color:var(--p-muted); font-variant-numeric:tabular-nums; margin-left:auto;}
.t3-cpu .alustrip.live{border-color:var(--p-accent); box-shadow:0 0 0 2px rgba(232,176,75,.20);}
.t3-cpu .alustrip.live .ae{color:var(--p-accent); font-weight:700;}
.t3-cpu .ramcell{display:flex; align-items:center; gap:8px; background:var(--well); border:1px solid var(--border); border-radius:6px; padding:5px 8px; transition:box-shadow .2s, border-color .2s, background .2s;}
.t3-cpu .ramcell .ca{font-size:9px; color:var(--tc-mem); font-weight:700; flex:0 0 auto;}
.t3-cpu .ramcell .cn{font-size:8px; color:var(--p-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.t3-cpu .ramcell .cv{margin-left:auto; font-size:15px; font-weight:700; color:var(--p-ink); font-variant-numeric:tabular-nums; flex:0 0 auto;}
.t3-cpu .ramcell .cv.empty{color:var(--p-faint); font-weight:400;}
/* the bus between CPU and RAM */
.t3-cpu .bus{flex:1 1 auto; min-width:46px; align-self:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0 7px;}
.t3-cpu .busarrow{font-size:14px; line-height:1; color:var(--p-faint); transition:color .2s, transform .2s;}
.t3-cpu .buswire{width:100%; height:3px; border-radius:3px; background:repeating-linear-gradient(90deg,var(--border) 0 6px, transparent 6px 12px); transition:background .2s;}
.t3-cpu .buslabel{font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--p-faint); transition:color .2s;}
.t3-cpu .bus.on .buswire{background:var(--c-green);}
.t3-cpu .bus.on .busarrow{color:var(--c-green);}
.t3-cpu .bus.on .buslabel{color:var(--c-green);}
.t3-cpu .bus.load .busarrow{transform:scaleX(-1);}
/* green "touched this step" outline for the moved cells */
.t3-cpu .regcell.hot,.t3-cpu .ramcell.hot{border-color:var(--c-green); box-shadow:0 0 0 2px rgba(94,222,120,.28);}
.t3-cpu .vizcap{margin-top:11px; text-align:center; font-size:11px; color:var(--p-muted); font-variant-numeric:tabular-nums; min-height:15px;}
/* memory-panel RAM rows */
.t3-cpu .ramrow{display:flex; align-items:center; gap:8px; font-size:11px; padding:3px 0; border-bottom:1px dashed rgba(255,255,255,.05);}
.t3-cpu .ramrow:last-child{border-bottom:0;}
.t3-cpu .ramrow .ra{color:var(--tc-mem); font-weight:700; width:32px; flex:0 0 auto;}
.t3-cpu .ramrow .rnm{font-size:9px; color:var(--p-faint);}
.t3-cpu .ramrow .rvl{margin-left:auto; font-weight:700; color:var(--p-ink); font-variant-numeric:tabular-nums;}
.t3-cpu .ramrow .rvl.chg{color:var(--p-accent);}
.t3-cpu .ramrow .rvl.empty{color:var(--p-faint); font-weight:400;}
/* banner ALU op badge glows on the real add */
.t3-cpu .alu .op.live{box-shadow:0 0 0 2px rgba(232,176,75,.25);}
@media (max-width:820px){ .t3-cpu .cpuwrap{height:auto; flex-direction:column; align-items:stretch; gap:8px;}
  .t3-cpu .mbox{width:auto;} .t3-cpu .bus{flex-direction:row; min-width:0; gap:8px; padding:2px 0;} .t3-cpu .buswire{height:3px;} }
  /* --- trace3 vm (viz-specific) --- */
.t3-vm .vmwrap{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0; gap:2px;}
.t3-vm .vmstack{width:196px; height:150px; display:flex; flex-direction:column-reverse; justify-content:flex-start; gap:7px; padding:8px; border-left:2px solid rgba(255,255,255,.16); border-right:2px solid rgba(255,255,255,.16); border-bottom:3px solid var(--p-accent-2); border-radius:0 0 9px 9px; background:linear-gradient(180deg,rgba(127,180,162,.03),rgba(127,180,162,.09));}
.t3-vm .vmslot{height:36px; border-radius:7px; display:flex; align-items:center; justify-content:center; gap:9px; position:relative; border:1px dashed rgba(255,255,255,.15); background:transparent; transition:background-color .24s,color .24s,box-shadow .18s,transform .16s;}
.t3-vm .vmslot .sv{font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--p-faint);}
.t3-vm .vmslot .slbl{font-size:10px; font-weight:600; color:var(--p-faint);}
.t3-vm .vmslot.empty .sv::before{content:"\00b7"; color:var(--p-faint); opacity:.4;}
.t3-vm .vmslot.empty{opacity:.4;}
.t3-vm .vmslot.filled{border-style:solid; border-color:transparent; background:var(--p-surface); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.t3-vm .vmslot.filled .sv{color:var(--p-ink);} .t3-vm .vmslot.filled .slbl{color:var(--p-muted);}
.t3-vm .vmslot.push{background:rgba(94,222,120,.16); box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--c-green,#5ede78); transform:translateY(-3px);}
.t3-vm .vmslot.push .sv{color:#c9ffd8;} .t3-vm .vmslot.push .slbl{color:#8fe6a6;}
.t3-vm .vmslot.pop{background:rgba(232,176,75,.16); box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--p-accent);}
.t3-vm .vmslot.pop .sv{color:#ffe9bf;} .t3-vm .vmslot.pop .slbl{color:#e8b04b;}
.t3-vm .vmslot.out{background:rgba(96,149,244,.16); box-shadow:0 0 0 2px var(--bg),0 0 0 3px #6095f4;}
.t3-vm .vmslot.out .sv{color:#dbe7ff;} .t3-vm .vmslot.out .slbl{color:#8fb2f6;}
.t3-vm .vmslot.tos::after{content:"\25c4 TOS"; position:absolute; right:-52px; font-size:8.5px; letter-spacing:.08em; font-weight:700; color:var(--p-accent-2); white-space:nowrap;}
.t3-vm .vmbase{font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--p-faint); margin-top:7px;}
.t3-vm .vmcap{text-align:center; font-size:12.5px; font-weight:600; color:var(--p-accent-2); margin-top:9px; min-height:18px; font-variant-numeric:tabular-nums;}
.t3-vm .reg.reg-op .rv{font-size:10.5px; line-height:1.15; word-break:break-all; letter-spacing:-.01em; padding-top:2px;}
.t3-vm .stacklist{font-size:16px; font-weight:700; letter-spacing:1px; color:var(--tc-mem); font-variant-numeric:tabular-nums;}
.t3-vm .stacklist .topmark{color:var(--c-green,#5ede78);}
.t3-vm .stacklist .mt{font-size:11px; font-weight:400; letter-spacing:0; color:var(--p-faint); font-style:italic;}
  /* --- trace3 heap (viz-specific) --- */
/* ===== stack/heap visual — scoped under .t3-heap ===== */
/* fixed desktop frame so no beat ever reflows the widget; long narration scrolls inside its own nbox */
@media (min-width:821px){ .t3-heap .t3grid{height:520px;} }
.t3-heap .hpwrap{display:flex; gap:12px; width:100%; height:100%; align-items:stretch;}
.t3-heap .hpcol{flex:1 1 0; min-width:0; display:flex; flex-direction:column;}
.t3-heap .hpcap{font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; display:flex; align-items:center; justify-content:space-between; gap:6px; font-weight:700;}
.t3-heap .hpcap .tag{font-size:7px; color:var(--p-faint); letter-spacing:.05em; font-weight:400; text-transform:none;}
.t3-heap .hpcol.stack .hpcap{color:var(--tc-reg);}
.t3-heap .hpcol.heap .hpcap{color:var(--tc-mem);}
.t3-heap .hpbody{flex:1 1 0; min-height:118px; border:1px dashed var(--border); border-radius:8px; padding:7px; display:flex; flex-direction:column; gap:6px; overflow:hidden;}
.t3-heap .hpcol.stack .hpbody{flex-direction:column-reverse; justify-content:flex-start;}
.t3-heap .hpcol.heap .hpbody{justify-content:flex-start;}
.t3-heap .frame{max-height:60px; border:1px solid rgba(127,180,162,.4); border-left:3px solid var(--tc-reg); border-radius:6px; background:rgba(127,180,162,.09); padding:6px 9px; overflow:hidden; transition:max-height .34s ease, opacity .3s ease, transform .3s ease, padding .3s, margin .3s, border-color .2s, box-shadow .2s; transform-origin:bottom;}
.t3-heap .frame .fname{font-size:11px; font-weight:700; color:var(--p-ink);}
.t3-heap .frame .flocals{font-size:8px; color:var(--tc-reg); margin-top:2px; letter-spacing:.02em;}
.t3-heap .frame.focus{border-color:var(--p-accent); box-shadow:0 0 0 1px rgba(232,176,75,.4); transform:translateY(-1px);}
.t3-heap .frame.gone{max-height:0; opacity:0; padding-top:0; padding-bottom:0; margin-top:-6px; border-width:0; transform:translateY(6px);}
.t3-heap .obj{max-height:60px; border:1px solid rgba(69,230,239,.4); border-left:3px solid var(--tc-mem); border-radius:6px; background:rgba(69,230,239,.07); padding:6px 9px; overflow:hidden; display:flex; align-items:baseline; gap:7px; transition:max-height .34s ease, opacity .3s ease, transform .3s ease, padding .3s, margin .3s, filter .3s, border-color .2s, box-shadow .2s;}
.t3-heap .obj .otype{font-size:8px; font-weight:700; color:var(--tc-mem); background:rgba(69,230,239,.14); border:1px solid rgba(69,230,239,.3); border-radius:4px; padding:1px 5px; flex:0 0 auto;}
.t3-heap .obj .oval{font-size:11px; font-weight:700; color:var(--p-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.t3-heap .obj .osize{font-size:8px; color:var(--p-muted); margin-left:auto; flex:0 0 auto;}
.t3-heap .obj .orphtag{display:none; font-size:7px; color:var(--p-highlight); border:1px solid rgba(217,111,78,.45); border-radius:3px; padding:0 4px; flex:0 0 auto;}
.t3-heap .obj.focus{border-color:var(--p-accent); box-shadow:0 0 0 1px rgba(232,176,75,.4);}
.t3-heap .obj.orphan{border-style:dashed; border-left-style:solid; opacity:.78;}
.t3-heap .obj.orphan .oval{color:var(--p-muted);}
.t3-heap .obj.orphan .orphtag{display:inline-block;}
.t3-heap .obj.dead{opacity:.4; filter:grayscale(1); border-color:var(--border);}
.t3-heap .obj.dead .oval{text-decoration:line-through; color:var(--p-faint);}
.t3-heap .obj.dead .otype{color:var(--p-faint); background:none; border-color:var(--border);}
.t3-heap .obj.gone{max-height:0; opacity:0; padding-top:0; padding-bottom:0; margin-bottom:-6px; border-width:0; transform:translateY(-6px);}
/* two clocks in the summary */
.t3-heap .clocks{display:flex; flex-direction:column; gap:5px;}
.t3-heap .ckrow{display:flex; align-items:baseline; gap:8px; min-height:15px;}
.t3-heap .ckrow .cklab{font-size:8px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; flex:0 0 40px;}
.t3-heap .ckrow.stack .cklab{color:var(--tc-reg);}
.t3-heap .ckrow.heap .cklab{color:var(--tc-mem);}
.t3-heap .ckrow .ckval{font-family:var(--font-serif); font-style:italic; color:var(--p-ink); font-size:11.5px; line-height:1.3;}
/* heap list in the memory panel */
.t3-heap [data-heaplist] .hl{display:flex; align-items:center; gap:7px; font-size:9.5px; padding:3px 0; border-bottom:1px dashed rgba(255,255,255,.05);}
.t3-heap [data-heaplist] .hl:last-child{border-bottom:0;}
.t3-heap [data-heaplist] .hlt{font-size:7.5px; font-weight:700; border-radius:3px; padding:1px 5px; background:rgba(69,230,239,.12); color:var(--tc-mem); flex:0 0 auto;}
.t3-heap [data-heaplist] .hlv{color:var(--p-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.t3-heap [data-heaplist] .hls{margin-left:auto; color:var(--p-muted); font-variant-numeric:tabular-nums; flex:0 0 auto;}
.t3-heap [data-heaplist] .hl.dead .hlv{text-decoration:line-through; color:var(--p-faint);}
.t3-heap [data-heaplist] .hl.dead .hlt{color:var(--p-faint); background:rgba(255,255,255,.04);}
.t3-heap [data-heaplist] .hl.orphan .hlv{color:var(--p-muted);}
.t3-heap [data-heaplist] .hl.none{opacity:.4;}
.t3-heap .vrow.empty{color:var(--p-faint);}
.t3-heap .vrow.empty .vn{font-style:italic;}
  /* column-width refinements: figures/code/trace3 sit inside the narrower reading column */
  figure.fig{max-width:771px;}
  .codewrap{max-width:100%;}
  .t3[data-t3]{max-width:100%;}
  .t3 .t3grid{height:min(74vh,665px);}
  /* quiet, thin scrollbars in the trace3 + rail */
  .t3 *{scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent;}
  .t3 *::-webkit-scrollbar{width:5px; height:5px;}
  .t3 *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:3px;}
  .t3 *::-webkit-scrollbar-track{background:transparent;}
  .rail{scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent;}
  .rail::-webkit-scrollbar{width:5px;} .rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:3px;} .rail::-webkit-scrollbar-track{background:transparent;}

  /* ===== small signs + small automations — reading aids and micro-interactions ===== */
  /* [1] active rail dot breathes instead of sitting static */
  @keyframes dotbreathe{0%,100%{box-shadow:0 0 0 3px rgba(244,195,112,.22);}50%{box-shadow:0 0 0 6px rgba(244,195,112,.06);}}
  .dotlist a.on .dot{animation:dotbreathe 2.4s ease-in-out infinite;}
  /* [2] a small checkmark sign on rail items you've already read past */
  .dotlist a.done .dot::after{content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:6px; color:#04140a; font-weight:900;}
  /* [3][4] takeaway cards: hover lift + staggered fade-in so they don't all pop at once */
  .takeaways .tk{transition:transform .3s ease, border-color .18s, box-shadow .18s, opacity .5s ease;}
  .takeaways .tk:hover{transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(0,0,0,.7);}
  .takeaways .tk:nth-child(1){transition-delay:0s;} .takeaways .tk:nth-child(2){transition-delay:.06s;}
  .takeaways .tk:nth-child(3){transition-delay:.12s;} .takeaways .tk:nth-child(4){transition-delay:.18s;}
  /* [5] small underline-sweep sign on takeaway card labels, echoing the prose link sweep */
  .takeaways .tk .k{background-image:linear-gradient(currentColor,currentColor); background-size:0 1px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .25s;}
  .takeaways .tk:hover .k{background-size:100% 1px;}
  /* [6] figure top accent strip gets a slow shimmer sweep instead of sitting flat */
  @keyframes stripshimmer{0%{background-position-x:-40%;}100%{background-position-x:140%;}}
  .fig{background-image:
      linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent),
      linear-gradient(90deg,var(--coral),var(--coral-deep)),
      linear-gradient(180deg,#12141c,#0d0f16),
      linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-position:top left,top left,0 0,0 0,0 0; background-repeat:no-repeat,no-repeat,no-repeat,repeat,repeat;
    background-size:40% 3px,100% 3px,100% 100%,22px 22px,22px 22px;
    animation:stripshimmer 5s ease-in-out infinite;}
  /* [7] small "core idea" corner flag on the idea callouts */
  .cal.idea{position:relative;}
  .cal.idea::after{content:"★"; position:absolute; top:-7px; right:10px; font-size:11px; color:var(--p-accent); background:var(--bg); padding:0 4px;}
  /* [8] inline code in prose invites copying: hover lift + pointer */
  .prose code{transition:background .15s, color .15s; cursor:pointer;}
  .prose code:hover{background:rgba(69,230,239,.12); color:#7ff0f7;}
  /* [9] a small live-stat glow on the rail progress percentage */
  .chbox .pctrow b{text-shadow:0 0 8px rgba(232,176,75,.5);}
  /* [10] "on this page" chapter box gets a tiny ambient pulse dot before the label */
  .chbox .ch-vol{display:flex; align-items:center; gap:6px;}
  .chbox .ch-vol::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--c-green); box-shadow:0 0 0 2px rgba(94,222,120,.18); animation:dotbreathe 2.4s ease-in-out infinite;}
  /* [11] rail nav icons nudge on hover — a small sign the chip is clickable */
  .railnav a svg{transition:transform .18s;} .railnav a:hover svg{transform:scale(1.12) rotate(-4deg);}
  /* [12] h2 numeral badge gets a soft resting glow, brightens on hover */
  h2 .hn{box-shadow:0 0 0 0 rgba(244,195,112,0); transition:box-shadow .2s;}
  h2:hover .hn{box-shadow:0 0 16px -2px rgba(244,195,112,.65);}
  /* [13] the "wait —" curio and "next" teaser get a subtle hover lighten, inviting a re-read */
  .curio{transition:background .2s;} .curio:hover{background:#101319;}
  .next{transition:color .2s;} .next:hover{color:var(--c-gold);}
  /* [14] figure caption gets a small leading mark instead of just italic text */
  .fig figcaption{position:relative; padding-left:14px;}
  .fig figcaption::before{content:"▸"; position:absolute; left:0; color:var(--coral);}
  /* [15] figure/interactive tag becomes a small pill "sign" instead of bare colored text */
  .fig .flabel .tag{border:1px solid rgba(255,90,43,.4); background:rgba(255,90,43,.1); border-radius:999px; padding:2px 8px; letter-spacing:.1em;}
  /* [16] takeaway card top border gets a slow colour breathing pulse (very subtle, not distracting) */
  @keyframes tkpulse{0%,100%{filter:brightness(1);}50%{filter:brightness(1.35);}}
  .takeaways .tk{animation:tkpulse 6s ease-in-out infinite;} .takeaways .tk:nth-child(2n){animation-delay:1.5s;} .takeaways .tk:nth-child(3n){animation-delay:3s;}
  /* [17] chbox border gets a slow, low-amplitude colour drift — a small "living document" cue */
  @keyframes chboxdrift{0%,100%{border-color:var(--border-strong);}50%{border-color:rgba(255,90,43,.35);}}
  .chbox{animation:chboxdrift 8s ease-in-out infinite;}
  /* [18] color-legend chip row in the rail — a small reading aid decoding the b0/b1/b2/bg key-term colours */
  .legend{display:flex; flex-wrap:wrap; gap:5px; padding:2px 2px 0; margin-bottom:14px;}
  .legend span{font-family:var(--font-mono); font-size:8.5px; letter-spacing:.03em; padding:3px 7px; border-radius:999px; border:1px solid; display:inline-flex; align-items:center; gap:4px;}
  .legend span::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor;}
  .legend .lg-b0{color:var(--c-blue); border-color:rgba(96,149,244,.35); background:rgba(96,149,244,.07);}
  .legend .lg-b1{color:var(--c-gold); border-color:rgba(244,195,112,.35); background:rgba(244,195,112,.07);}
  .legend .lg-b2{color:var(--c-red); border-color:rgba(218,64,60,.35); background:rgba(218,64,60,.07);}
  .legend .lg-bg{color:var(--c-green); border-color:rgba(94,222,120,.35); background:rgba(94,222,120,.07);}
  /* [19] scroll cue under the hero chips — a small bouncing sign inviting the reader down */
  .scrollcue{display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--p-faint); margin:4px 0 0;}
  @keyframes cuebob{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}
  .scrollcue svg{animation:cuebob 1.7s ease-in-out infinite;}
  /* [20] totop button gains a circular read-progress ring instead of a bare circle */
  .totop{overflow:visible;}
  .totop .ring-track{fill:none; stroke:var(--border); stroke-width:2;}
  .totop .ring-fill{fill:none; stroke:var(--coral); stroke-width:2; stroke-linecap:round; transition:stroke-dashoffset .1s linear;}
  /* [21] pagenav prev/next cards get a small directional arrow that slides toward the reading direction */
  .pagenav .pn::after{content:"›"; opacity:0; transition:opacity .18s, transform .18s; margin-left:4px; color:var(--coral);}
  .pagenav .pn.prev::after{content:"‹"; margin-left:0; margin-right:4px; order:-1;}
  .pagenav .pn:hover::after{opacity:1; transform:translateX(3px);} .pagenav .pn.prev:hover::after{transform:translateX(-3px);}
  /* [22] details.deeper summary gets a small "expand" affordance ring on focus/hover */
  details.deeper summary{border-radius:6px;} details.deeper summary:hover{background:rgba(232,176,75,.06);}
  /* [23] unlock/reframe callouts pulse their left glow very softly, cueing "reconsider this" */
  @keyframes unlockpulse{0%,100%{border-color:rgba(232,176,75,.3);}50%{border-color:rgba(232,176,75,.6);}}
  .unlock{animation:unlockpulse 5s ease-in-out infinite;}
  .takeaways .tk{position:relative;}
  @media (prefers-reduced-motion:reduce){ .dotlist a.on .dot,.chbox .ch-vol::before,.fig,.takeaways .tk,.chbox,.unlock,.scrollcue svg{animation:none!important;} }

  /* ═══════════ SECTION COLOUR-CODING — course-wide design choice ═══════════
     Each section gets an identity colour, cycling the validated teaching palette
     (blue → gold → green → cyan → violet → coral). It shows in three coordinated places:
     the h2 numeral badge (bright fill + soft glow), the h2 trailing hairline, and the rail
     dot-progress spine — so every chapter reads as a legible colour map and each section is
     instantly distinct. Coral stays reserved for interactive widgets/figures, keeping
     "read this" and "try this" as two clear visual systems. Pure nth-of-type → auto-scales
     to any section count, on every chapter, with zero per-page work. */
  main h2:nth-of-type(6n+1){--sec:#6095f4;} main h2:nth-of-type(6n+2){--sec:#f4c370;}
  main h2:nth-of-type(6n+3){--sec:#5ede78;} main h2:nth-of-type(6n+4){--sec:#45e6ef;}
  main h2:nth-of-type(6n+5){--sec:#c05bda;} main h2:nth-of-type(6n+6){--sec:#ff7a4d;}
  main h2 .hn{background:var(--sec,#f4c370); box-shadow:0 0 16px -4px var(--sec,#f4c370);}
  main h2:hover .hn{box-shadow:0 0 22px -2px var(--sec,#f4c370);}
  main h2 .h2rule{background:linear-gradient(90deg, color-mix(in srgb,var(--sec,#f4c370) 60%,transparent), var(--border) 45%, transparent);}
  .dotlist a:nth-of-type(6n+1){--sec:#6095f4;} .dotlist a:nth-of-type(6n+2){--sec:#f4c370;}
  .dotlist a:nth-of-type(6n+3){--sec:#5ede78;} .dotlist a:nth-of-type(6n+4){--sec:#45e6ef;}
  .dotlist a:nth-of-type(6n+5){--sec:#c05bda;} .dotlist a:nth-of-type(6n+6){--sec:#ff7a4d;}
  .dotlist .dot{background:var(--sec,rgba(255,255,255,.2));}
  .dotlist a.on .dot{background:var(--sec,#f4c370); box-shadow:0 0 0 3px color-mix(in srgb,var(--sec,#f4c370) 32%,transparent);}
  .dotlist a.done .dot{background:var(--sec,var(--p-accent-2));}

  /* ═══════════ LAB-INSTRUMENT ELEVATION — premium depth, type & widget framing (course-wide) ═══════════ */
  /* subtle aurora ground — dimension without cloudiness (print already hides body::before) */
  body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(760px 520px at 90% -8%, rgba(255,90,43,.07), transparent 60%),
               radial-gradient(720px 560px at -10% 108%, rgba(192,91,218,.055), transparent 62%); }
  /* confident display h1 — graded white ink, tighter tracking (keep the faint chapter numeral) */
  h1{ letter-spacing:-.03em; background:linear-gradient(180deg,#ffffff,#b9c2d4);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  h1 .n{ -webkit-text-fill-color:var(--p-faint); color:var(--p-faint); }
  .h1rule{ background:linear-gradient(90deg,var(--coral),var(--c-gold)); box-shadow:0 0 16px -2px rgba(255,90,43,.5); }
  /* machined bezel depth on the rail box + takeaway cards */
  .chbox{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 24px 46px -30px rgba(0,0,0,.9); }
  .takeaways .tk{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
  /* breadcrumb spec readout — a right-aligned instrument pill */
  .kicker{ flex-wrap:wrap; }
  .kicker .spec{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:10.5px; padding:4px 10px; border:1px solid var(--border); border-radius:999px; color:var(--p-muted); background:var(--raise); }
  .kicker .spec b{ color:var(--c-gold); font-weight:700; }
  /* ── interactive aids: Trace3 + CodeRun read as thoughtful, self-explaining panels ── */
  .t3[data-t3]{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 34px -12px rgba(255,90,43,.24), 0 10px 30px -14px rgba(0,0,0,.85); }
  .t3 .t3kick .t3tag{ display:inline-flex; align-items:center; gap:5px; }
  .t3 .t3kick .t3tag::before{ content:"\25B6"; font-size:7px; }
  .t3 .t3ttl{ font-size:17px; letter-spacing:-.01em; }
  .t3 .btn{ border-radius:9px; }
  .t3 .btn.primary{ box-shadow:0 6px 16px -8px var(--coral); }
  .crgallery .crg-tag{ display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:3px 10px; }
  .crgallery .crg-tag::before{ content:"\25B6"; font-size:7px; }
  .cr .cr-tag{ border-radius:999px; }
  /* CodeRun gallery reads as a clear "run it line by line" aid */
  .crgallery .crg-band{ background:linear-gradient(180deg,rgba(255,90,43,.06),transparent); }
  .crgallery .crg-title{ font-size:20px; letter-spacing:-.012em; color:var(--p-ink); }
  .crgallery .crg-intro{ color:var(--p-muted); }
  .crgallery .crg-glabel{ color:var(--coral); }
  .cr .cr-head{ background:linear-gradient(180deg,rgba(255,90,43,.05),transparent); }
  .cr .cr-ttl{ font-size:13.5px; }
  /* figures read as clearly-labelled diagrams */
  .fig .flabel{ font-size:9.5px; letter-spacing:.14em; }
  .fig .flabel .tag{ display:inline-flex; align-items:center; gap:5px; font-weight:700; }
  .fig .flabel .tag::before{ content:"\25C8"; font-size:7px; }
  /* interactive figures (those with a live control) read GREEN + a pulsing dot, so a reader instantly
     sees which figures respond to them; static figures keep the gold diamond. :has() degrades gracefully. */
  .fig:has(.ctlrow) .flabel .tag, .fig:has(.scrub) .flabel .tag{ color:var(--c-green); border-color:rgba(94,222,120,.4); background:rgba(94,222,120,.1); }
  .fig:has(.ctlrow) .flabel .tag::before, .fig:has(.scrub) .flabel .tag::before{ content:"\25CF"; font-size:8px; animation:livepulse 1.8s ease-in-out infinite; }
  @keyframes livepulse{ 0%,100%{opacity:.45;} 50%{opacity:1;} }
  .fig figcaption{ font-size:13px; }
  /* "what to notice" note — a grounded, eye-directing cue added to figures that need it (cyan,
     distinct from the coral 'try it' hint and the gold caption). Shared so every chapter matches. */
  .fig .fignote{margin-top:11px; padding:9px 13px 9px 14px; border-left:2px solid var(--c-cyan); background:linear-gradient(90deg,rgba(69,230,239,.06),transparent 74%); border-radius:0 8px 8px 0; font-family:var(--font-serif); font-size:13px; line-height:1.55; color:var(--p-muted);}
  .fig .fignote b{color:var(--c-cyan); font-style:normal; font-weight:700; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.13em; text-transform:uppercase; margin-right:9px;}
  .fig .fignote code{font-family:var(--font-mono); font-size:11.5px; color:var(--p-ink); background:rgba(255,255,255,.05); padding:0 4px; border-radius:3px;}

  /* ===== trace3: reach the last beat -> the Reset button rings ('press me to replay') ===== */
  @property --t3ra{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
  .t3 [data-reset]{ position:relative; }
  .t3 [data-reset].atend{ border-color:rgba(232,176,75,.7)!important; color:var(--p-ink)!important; animation:t3resetglow 1.5s ease-in-out infinite; }
  .t3 [data-reset].atend svg{ animation:t3reseticon 2.4s ease-in-out infinite; transform-origin:12px 12px; }
  .t3 [data-reset].atend::before{
    content:""; position:absolute; inset:-4px; border-radius:11px; pointer-events:none; z-index:4;
    background:conic-gradient(from var(--t3ra,0deg), rgba(232,176,75,0) 0deg, rgba(232,176,75,0) 250deg, var(--c-gold,#e8b04b) 320deg, #ffe9b8 342deg, var(--c-gold,#e8b04b) 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; padding:2px;
    animation:t3ringturn 1.15s linear infinite; }
  @keyframes t3ringturn{ to{ --t3ra:360deg; } }
  @keyframes t3resetglow{ 0%,100%{ box-shadow:0 0 0 1px rgba(232,176,75,.2);} 50%{ box-shadow:0 0 0 2px rgba(232,176,75,.45), 0 0 15px -3px rgba(232,176,75,.55);} }
  @keyframes t3reseticon{ 0%,70%{ transform:rotate(0);} 90%,100%{ transform:rotate(-360deg);} }
  @media (prefers-reduced-motion:reduce){ .t3 [data-reset].atend,.t3 [data-reset].atend::before,.t3 [data-reset].atend svg{ animation:none!important; } }