@font-face{font-family:'Fraunces';src:url(/static/fonts/Fraunces-Regular.woff2) format('woff2');font-weight:100 500;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(/static/fonts/Fraunces-SemiBold.woff2) format('woff2');font-weight:501 700;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(/static/fonts/Fraunces-Black.woff2) format('woff2');font-weight:701 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(/static/fonts/Fraunces-Italic.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url(/static/fonts/SourceSerif4-Regular.woff2) format('woff2');font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(/static/fonts/GeistMono-Regular.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --void:#04070f; --surface:#070b16; --raised:#0a0f1d; --line:#12243c;
  --ink:#eceff1; --muted:#b0bec5; --faint:#607d8b;
  --violet:#67d3e8; --aqua:#4b7cff; --rose:#a9cbff;
  --grad:linear-gradient(110deg,var(--violet),var(--aqua) 55%,var(--rose));
  --measure:720px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--void); color:var(--ink);
  font-family:"Source Serif 4",system-ui,sans-serif; font-weight:300;
  font-size:19px; line-height:1.78; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* ambient glow blobs */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:
  radial-gradient(40vw 40vw at 80% -5%, #67d3e822, transparent 70%),
  radial-gradient(45vw 45vw at -10% 30%, #4b7cff18, transparent 70%),
  radial-gradient(40vw 40vw at 90% 105%, #a9cbff18, transparent 70%);}
a{color:var(--aqua);text-decoration:none;}
strong{font-weight:600;color:#fff;}
em{font-style:italic;color:var(--ink);}

/* progress + rail */
#bar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--grad);z-index:50;box-shadow:0 0 12px var(--violet);}
#rail{position:fixed;top:0;left:0;height:100vh;width:230px;padding:30px 0 30px 28px;overflow-y:auto;z-index:30;
  -ms-overflow-style:none;scrollbar-width:none;}
#rail::-webkit-scrollbar{display:none;}
#rail .brand{font-family:"Fraunces";font-weight:700;font-size:15px;letter-spacing:-.01em;margin-bottom:24px;line-height:1.3;}
#rail .brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
#rail a{display:block;font-family:"Geist Mono",monospace;font-size:11.5px;color:var(--faint);padding:5px 0;letter-spacing:.02em;border-left:2px solid transparent;padding-left:12px;margin-left:-12px;transition:color .2s,border-color .2s;}
#rail a:hover{color:var(--muted);}
#rail a.on{color:var(--ink);border-color:var(--violet);}
#rail a.sub{font-size:10px;color:#56546a;padding-left:26px;padding-top:3px;padding-bottom:3px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#rail a.sub:hover{color:var(--muted);}
#rail a.sub.on{color:var(--aqua);border-color:var(--aqua);}
#rail a.sub2{padding-left:40px;color:#736f8c;}
.toybox,details.deeper,.mfam,.dbody h5,.mcard,.ch[id]{scroll-margin-top:74px;}
#rail a .ac{display:block;font-size:9.5px;color:var(--violet);letter-spacing:.15em;text-transform:uppercase;margin-top:14px;margin-bottom:2px;opacity:.8;}

main{max-width:var(--measure);margin:0 auto;padding:0 26px;}
@media(min-width:1080px){ main{margin-left:max(260px, calc(50% - 360px));margin-right:26px;} }

/* hero */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;max-width:880px;margin:0 auto;padding:80px 26px;}
@media(min-width:1080px){ .hero{margin-left:max(260px, calc(50% - 440px));} }
.hero .eyebrow{font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--aqua);margin-bottom:26px;}
.hero h1{font-family:"Fraunces";font-weight:700;font-size:clamp(44px,8.5vw,104px);line-height:.98;letter-spacing:-.03em;margin:0;}
.hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
@keyframes shimmer{to{background-position:200% center;}}
.hero p{font-size:22px;color:var(--muted);max-width:60ch;margin:32px 0 0;font-weight:300;}
.hero .scroll{margin-top:64px;font-family:"Geist Mono",monospace;font-size:12px;color:var(--faint);letter-spacing:.1em;display:flex;align-items:center;gap:10px;}
.hero .scroll .dot{width:22px;height:34px;border:1.5px solid var(--faint);border-radius:12px;position:relative;}
.hero .scroll .dot::after{content:"";position:absolute;left:50%;top:9px;width:3px;height:6px;border-radius:2px;background:var(--aqua);transform:translateX(-50%);}
@keyframes mouse{0%,100%{opacity:0;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,8px)}}

/* act divider */
.act{min-height:62vh;display:flex;flex-direction:column;justify-content:center;margin:60px auto;max-width:880px;padding:0 26px;}
@media(min-width:1080px){ .act{margin-left:max(260px, calc(50% - 440px));} }
.act .num{font-family:"Fraunces";font-weight:700;font-size:clamp(90px,20vw,240px);line-height:.8;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9;}
.act .lab{font-family:"Geist Mono",monospace;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--aqua);margin:18px 0 8px;}
.act h2{font-family:"Fraunces";font-weight:600;font-size:clamp(30px,5vw,52px);line-height:1.05;letter-spacing:-.02em;margin:0;max-width:18ch;}
.act p{color:var(--muted);font-size:20px;max-width:48ch;margin-top:18px;}

/* chapter */
.ch{padding:70px 0 30px;}
.ch-head{margin-bottom:40px;}
.ch-head .kn{font-family:"Geist Mono",monospace;font-size:13px;color:var(--violet);letter-spacing:.08em;}
.ch-head h3{font-family:"Fraunces";font-weight:600;font-size:clamp(30px,5.5vw,46px);line-height:1.04;letter-spacing:-.02em;margin:12px 0 0;}
.ch-head .thesis{font-size:21px;color:var(--muted);margin-top:18px;max-width:54ch;}

.ch p{margin:20px 0;color:#D9D7E6;}
.ch p.big{font-size:21px;color:var(--ink);}
.kw{color:#fff;font-weight:500;background:linear-gradient(transparent 62%, rgba(139,124,255,.28) 0);padding:0 1px;}
.ch h4{font-family:"Fraunces";font-weight:600;font-size:24px;letter-spacing:-.01em;margin:48px 0 4px;}

/* analogy + plain callouts */
.analogy{position:relative;border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,#15131f,#0e0d15);padding:24px 26px 24px 64px;margin:30px 0;}
.analogy::before{content:"❝";position:absolute;left:22px;top:16px;font-family:"Fraunces";font-size:40px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.analogy .t{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--violet);margin-bottom:8px;}
.analogy p{margin:0;font-size:19px;color:var(--ink);}
.plain{border-left:2px solid var(--aqua);padding:4px 0 4px 20px;margin:26px 0;color:var(--muted);font-size:18px;}
.plain b{color:var(--aqua);font-weight:500;font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:6px;}

/* full-bleed diagram stage */
.stage{margin:54px -26px;padding:46px 26px;position:relative;}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 50% 45%, #67d3e814, transparent 75%);}
.stage svg{display:block;width:100%;height:auto;max-width:760px;margin:0 auto;filter:drop-shadow(0 6px 30px rgba(52,224,208,.08));}
.stage .cap{text-align:center;font-family:"Geist Mono",monospace;font-size:12px;color:var(--faint);margin-top:22px;letter-spacing:.03em;}
@media(min-width:1080px){ .stage{margin-left:-40px;margin-right:-40px;} }

/* svg shared text */
.svg-l{font-family:"Geist Mono",monospace;font-size:11px;fill:var(--muted);}
.svg-s{font-family:"Fraunces";font-weight:600;font-size:14px;fill:var(--ink);}
.svg-t{font-family:"Geist Mono",monospace;font-size:9px;fill:var(--faint);letter-spacing:.1em;}

/* math aside */
.curious{border:1px dashed var(--line);border-radius:14px;padding:6px 22px 18px;margin:30px 0;background:#0c0b12;}
.curious summary{font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);cursor:pointer;padding:14px 0;list-style:none;}
.curious summary::before{content:"∑  ";}
.curious summary::-webkit-details-marker{display:none;}
.curious[open] summary{border-bottom:1px solid var(--line);margin-bottom:12px;}
.curious .katex{color:var(--ink);}
.katex-display{overflow-x:auto;overflow-y:hidden;padding:6px 0;}
.curious p{font-size:16px;color:var(--muted);}

/* ===== go-deeper expandable panels ===== */
.deeper{margin:34px 0;border:1px solid var(--line);border-radius:18px;background:linear-gradient(165deg,#110f1a,#0a0910);overflow:hidden;}
.deeper>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:20px 24px;}
.deeper>summary::-webkit-details-marker{display:none;}
.deeper>summary .plus{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--aqua);display:grid;place-items:center;font-size:16px;color:var(--aqua);transition:transform .3s;}
.deeper[open]>summary .plus{transform:rotate(135deg);}
.deeper>summary .gd{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--aqua);}
.deeper>summary .lbl{color:var(--muted);font-size:15.5px;}
.deeper[open]>summary{border-bottom:1px solid var(--line);background:#0e0d16;}
.deeper>summary:hover .lbl{color:var(--ink);}
.dbody{padding:6px 26px 28px;}
.dbody h5{font-family:"Fraunces";font-weight:600;font-size:21px;color:#fff;margin:30px 0 4px;letter-spacing:-.01em;}
.dbody h6{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);margin:20px 0 2px;font-weight:700;}
.dbody p{font-size:16.5px;color:#C7C4DA;margin:11px 0;}
.dbody ul{margin:11px 0;padding-left:20px;color:#C7C4DA;font-size:16px;}
.dbody li{margin:8px 0;}
.dbody strong{color:#fff;}
.breath{border-left:2px solid var(--violet);padding:8px 0 8px 16px;margin:18px 0;color:var(--ink);font-size:16.5px;background:linear-gradient(90deg,#67d3e810,transparent);}
.breath b{display:block;font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);margin-bottom:5px;}
table.d{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px;}
table.d th,table.d td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted);line-height:1.5;}
table.d th{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--aqua);border-bottom:1px solid #4b7cff55;}
table.d td:first-child{color:var(--ink);}
table.d code,.dbody code{font-size:.85em;background:#1b1a26;color:#cfcbe6;}
pre.code{background:#08070c;border:1px solid var(--line);border-radius:12px;padding:16px 18px;overflow-x:auto;font-family:"Geist Mono",monospace;font-size:12.5px;line-height:1.65;margin:16px 0;color:#cfcbe6;}
pre.code .c{color:#5f5d72;} pre.code .k{color:#67d3e8;} pre.code .s{color:#4b7cff;} pre.code .f{color:#7fb0d6;}
.tagline{display:inline-block;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-family:"Geist Mono",monospace;font-size:11px;color:var(--aqua);margin:4px 6px 4px 0;}
#search{margin:4px 28px 18px 0;}
#search input{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px;color:var(--ink);font-family:"Geist Mono",monospace;font-size:12px;}
#search input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px #67d3e822;}
#search .note{font-family:"Geist Mono",monospace;font-size:10px;color:var(--faint);margin-top:6px;min-height:12px;letter-spacing:.04em;}
.shit{background:linear-gradient(90deg,#4b7cff22,transparent)!important;box-shadow:inset 3px 0 0 var(--aqua);border-radius:6px;transition:background .3s;}

/* ===== FUN LAYER ===== */
#spot{position:fixed;width:540px;height:540px;border-radius:50%;pointer-events:none;z-index:-1;transform:translate(-50%,-50%);background:radial-gradient(circle,#67d3e826,#4b7cff10 40%,transparent 62%);opacity:0;transition:opacity .5s;}
/* playful diagram + card life */
/* diagrams stay still — no hover motion */
.stage svg{transition:none;}
.cell{will-change:transform;}
.cell:active{transform:translateY(-1px) scale(.99);}
.deeper>summary:hover .plus{box-shadow:0 0 16px #4b7cff77;}
#rail a.on{text-shadow:0 0 14px #67d3e855;}
.tagline{transition:transform .15s,border-color .15s;} .tagline:hover{transform:translateY(-2px);border-color:var(--aqua);}

/* toy window chrome */
.toybox{margin:40px 0;border:1px solid var(--line);border-radius:20px;background:linear-gradient(165deg,#13111d,#0b0a11);overflow:hidden;box-shadow:0 30px 70px -45px #67d3e866;}
.toybox .chrome{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--line);background:#0e0d16;}
.toybox .chrome i{width:10px;height:10px;border-radius:50%;display:inline-block;transition:transform .2s;}
.toybox:hover .chrome i:nth-child(1){transform:scale(1.25);}
.toybox:hover .chrome i:nth-child(2){transform:scale(1.25);transition-delay:.05s;}
.toybox:hover .chrome i:nth-child(3){transform:scale(1.25);transition-delay:.1s;}
.toybox .chrome .t{font-family:"Geist Mono",monospace;font-size:11.5px;color:var(--faint);letter-spacing:.04em;margin-left:6px;}
.toybox .pad{padding:22px 20px 24px;}
.toylab{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);display:block;margin-bottom:12px;}

/* tokenizer toy */
#tzinp{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:14px 16px;color:var(--ink);font-family:"Source Serif 4",sans-serif;font-size:18px;font-weight:300;resize:vertical;min-height:62px;line-height:1.6;}
#tzinp:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px #67d3e822;}
.tzout{margin-top:20px;display:flex;flex-wrap:wrap;gap:7px 6px;min-height:46px;}
.tztok{position:relative;font-family:"Geist Mono",monospace;font-size:14px;padding:8px 10px 16px;border-radius:8px;white-space:pre;}
.tztok:hover{transform:translateY(-3px) scale(1.06);}
.tztok .id{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:8px;opacity:.65;}
.tztok .sp{opacity:.32;}
@keyframes tzpop{from{opacity:0;transform:translateY(8px) scale(.6);}to{opacity:1;transform:none;}}
.tzstats{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.tzstat{flex:1;min-width:108px;border:1px solid var(--line);border-radius:13px;padding:14px 16px;background:var(--raised);}
.tzstat .n{font-family:"Fraunces";font-weight:700;font-size:30px;line-height:1;}
.tzstat .n.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.tzstat .l{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:7px;}
.tzratio{margin-top:14px;font-size:14.5px;color:var(--muted);}
.tzratio b{color:var(--aqua);}
.tzdisc{margin-top:14px;font-family:"Geist Mono",monospace;font-size:11px;color:var(--faint);letter-spacing:.02em;}
.tzchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.tzchips button{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 13px;color:var(--muted);font-family:"Geist Mono",monospace;font-size:11.5px;cursor:pointer;transition:all .15s;}
.tzchips button:hover{border-color:var(--aqua);color:var(--ink);transform:translateY(-2px);}

/* generic interactive widgets */
.ix input[type=range]{width:100%;accent-color:var(--violet);height:6px;cursor:pointer;}
.ix .rd{font-family:"Geist Mono",monospace;font-size:14px;color:var(--muted);margin:8px 0;}
.ix .rd b{color:var(--aqua);font-size:17px;}
.bars{display:flex;gap:12px;align-items:flex-end;height:150px;margin:18px 0 6px;}
.bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%;}
.bars .fill{width:100%;border-radius:7px 7px 0 0;transition:height .28s cubic-bezier(.2,.8,.2,1);min-height:3px;}
.bars .lbl{font-family:"Geist Mono",monospace;font-size:12px;color:var(--muted);}
.bars .pct{font-family:"Geist Mono",monospace;font-size:10.5px;color:var(--aqua);}
.gchips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px;}
.gchips button{width:46px;height:46px;border-radius:11px;border:1px solid var(--line);font-size:19px;cursor:pointer;background:var(--surface);transition:all .12s;}
.gchips button:hover{transform:translateY(-2px);}
.gchips button.on{background:var(--aqua);border-color:var(--aqua);color:#04070f;}
.gadv{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;}
.gadv span{font-family:"Geist Mono",monospace;font-size:12px;padding:5px 8px;border-radius:6px;background:var(--surface);border:1px solid var(--line);color:var(--faint);}
.gadv span.pos{color:var(--aqua);border-color:#4b7cff55;}
.gadv span.neg{color:var(--rose);border-color:#a9cbff55;}
/* method decoder cards */
.mfam{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--violet);margin:40px 0 14px;display:flex;align-items:center;gap:14px;}
.mfam::after{content:"";flex:1;height:1px;background:var(--line);}
.mcard{display:grid;grid-template-columns:180px 1fr;gap:10px 26px;border:1px solid var(--line);border-radius:16px;background:var(--raised);padding:22px 24px;margin:12px 0;align-items:start;transition:transform .2s,border-color .2s,box-shadow .2s;}
.mcard:hover{transform:translateY(-3px);border-color:var(--violet);box-shadow:0 18px 50px -36px #67d3e888;}
.mcard .ac{font-family:"Fraunces";font-weight:700;font-size:30px;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;}
.mcard .fn{font-family:"Fraunces";font-weight:500;font-size:14.5px;color:var(--ink);margin-top:8px;line-height:1.3;}
.mcard p{margin:0;color:#C7C4DA;font-size:16px;line-height:1.7;}
@media(max-width:620px){.mcard{grid-template-columns:1fr;gap:6px;}}
@media (prefers-reduced-motion: reduce){
  .tztok{animation:none!important;} .bars .fill{transition:none;} .stage:hover svg{transform:none;} #spot{display:none;}
}

/* key-points grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:30px 0;}
.cell{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--raised);transition:transform .2s,border-color .2s;}
.cell:hover{transform:translateY(-3px);border-color:var(--violet);}
.cell .h{font-family:"Fraunces";font-weight:600;font-size:17px;color:#fff;margin-bottom:6px;}
.cell .d{font-size:15px;color:var(--muted);line-height:1.55;}
.cell .ic{font-size:22px;margin-bottom:10px;display:block;}

code{font-family:"Geist Mono",monospace;font-size:.84em;background:#1b1a26;color:#cfcbe6;padding:2px 6px;border-radius:5px;}

.closing{padding:100px 0 60px;text-align:center;max-width:600px;margin:0 auto;}
.closing h3{font-family:"Fraunces";font-weight:700;font-size:clamp(28px,5vw,44px);letter-spacing:-.02em;}
.closing h3 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.closing p{color:var(--muted);}
.foot{border-top:1px solid var(--line);margin-top:60px;padding:30px 0 80px;font-family:"Geist Mono",monospace;font-size:12px;color:var(--faint);line-height:1.8;max-width:var(--measure);}
@media(min-width:1080px){ .foot{margin-left:max(260px, calc(50% - 360px));} }

/* reveal */
.rv{opacity:1;transform:none;}
.rv.in{opacity:1;transform:none;}

/* mobile nav */
#burger{display:none;position:fixed;top:14px;right:14px;z-index:60;width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:#12121bcc;backdrop-filter:blur(8px);color:var(--ink);font-size:20px;cursor:pointer;}
@media(max-width:1079px){
  #rail{transform:translateX(-110%);transition:transform .3s;background:#0b0b12f2;backdrop-filter:blur(10px);width:250px;border-right:1px solid var(--line);}
  #rail.open{transform:none;}
  #burger{display:block;}
}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none;} .hero h1 .g{animation:none;}
  .hero .scroll .dot::after{animation:none;}
}

/* ── Vulnary masthead integration: push the guide's fixed UI below the 74px sticky masthead ── */
#rail{ top:74px !important; height:calc(100vh - 74px) !important; }
#bar{ top:74px !important; }
#burger{ top:88px !important; }
@media (max-width:980px){ #rail{ top:0 !important; height:100vh !important; } }