/* ═══════════════ RESET & VARS ═══════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#faf7f2;--bg2:#f3efe8;--bg3:#ebe6dd;
  --ink:#1c1917;--stone:#57534e;--pebble:#78716c;--muted:#a8a29e;
  --teal:#0f766e;--indigo:#4338ca;--rose:#be123c;--amber:#b45309;--sky:#0369a1;
  --card:#ffffff;--border:#e7e5e4;--border-light:#f0eee9;
  --shadow-sm:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.03);
  --shadow-md:0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:0 8px 30px rgba(0,0,0,.08);
  --radius:16px;--radius-sm:10px;--radius-xs:6px;
  --font-sans:'Inter',system-ui,-apple-system,sans-serif;
  --font-serif:'Playfair Display',Georgia,serif;
  --font-mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.4,0,.2,1);
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-sans);background:var(--bg);color:var(--ink);line-height:1.7;font-size:16px}
::selection{background:rgba(15,118,110,.12)}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
code{font-family:var(--font-mono);background:rgba(15,118,110,.06);padding:.1em .35em;border-radius:4px;font-size:.88em;color:var(--teal)}

/* ═══════════════ PROGRESS BAR ═══════════════ */
.progress-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--indigo));z-index:999;width:0;transition:width .15s var(--ease)}

/* ═══════════════ NAV ═══════════════ */
.chapter-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(250,247,242,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transform:translateY(-100%);transition:transform .35s var(--ease)}
.chapter-nav.visible{transform:translateY(0)}
.nav-inner{max-width:1400px;margin:0 auto;padding:.5rem 1rem;display:flex;align-items:center;gap:.5rem}
.nav-logo{font-family:var(--font-mono);font-weight:700;font-size:.85rem;color:var(--teal);padding:.3rem .6rem;border-radius:var(--radius-xs);background:rgba(15,118,110,.06);white-space:nowrap}
.nav-chapters{display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;flex:1}
.nav-chapters::-webkit-scrollbar{display:none}
.nav-ch{font-size:.7rem;font-weight:500;color:var(--pebble);padding:.35rem .6rem;border-radius:99px;white-space:nowrap;transition:.2s var(--ease);border:1px solid transparent}
.nav-ch:hover{color:var(--teal);background:rgba(15,118,110,.05);border-color:rgba(15,118,110,.12)}
.nav-ch.active{color:var(--teal);background:rgba(15,118,110,.08);border-color:rgba(15,118,110,.18)}
.nav-num{font-family:var(--font-mono);font-size:.6rem;opacity:.5;margin-right:.2rem}

/* ═══════════════ HERO ═══════════════ */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(170deg,#e8e2d6 0%,#f3efe8 30%,#faf7f2 70%)}
.hero canvas{position:absolute;inset:0;z-index:1}
.hero-content{position:relative;z-index:2;text-align:center;padding:2rem;max-width:720px}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border-radius:99px;background:rgba(15,118,110,.06);border:1px solid rgba(15,118,110,.15);font-family:var(--font-mono);font-size:.78rem;color:var(--teal);margin-bottom:1.5rem;font-weight:500}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.hero-title{margin-bottom:1rem}
.hero-line{display:block;font-size:clamp(3rem,8vw,6.5rem);font-weight:900;letter-spacing:-.04em;line-height:1}
.hero-gradient{background:linear-gradient(135deg,var(--teal),var(--indigo) 60%,var(--rose));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:1.15rem;color:var(--stone);max-width:520px;margin:0 auto 2rem;line-height:1.65;font-weight:400}
.hero-actions{display:flex;gap:.8rem;justify-content:center;margin-bottom:2rem;flex-wrap:wrap}
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2rem;background:var(--ink);color:#fff;border-radius:99px;font-weight:600;font-size:.95rem;transition:.2s var(--ease);border:none;cursor:pointer;box-shadow:var(--shadow-md)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg);background:#0d0d0d}
.btn-ghost{display:inline-flex;padding:.85rem 1.5rem;color:var(--stone);border-radius:99px;font-weight:500;font-size:.95rem;border:1px solid var(--border);transition:.2s var(--ease)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.hero-refs{display:flex;align-items:center;gap:.6rem;justify-content:center;flex-wrap:wrap;font-size:.8rem}
.ref-tag{color:var(--muted);font-weight:500}
.ref-link{color:var(--pebble);border-bottom:1px solid var(--border);padding-bottom:1px;transition:.2s}
.ref-link:hover{color:var(--teal);border-color:var(--teal)}
.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;text-align:center;color:var(--muted);font-size:.8rem}
.scroll-arrow{animation:bob 2s infinite;font-size:1.2rem;margin-top:.3rem}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ═══════════════ CHAPTERS ═══════════════ */
.chapter{max-width:1200px;margin:0 auto;padding:5rem 2rem}
.chapter-header{text-align:center;margin-bottom:3rem}
.ch-num{font-family:var(--font-mono);font-size:.85rem;color:var(--teal);font-weight:600;letter-spacing:.1em;margin-bottom:.4rem}
.ch-title{font-family:var(--font-serif);font-size:clamp(2rem,4.5vw,3.2rem);font-weight:700;color:var(--ink);margin-bottom:.6rem;letter-spacing:-.01em}
.ch-subtitle{color:var(--stone);font-size:1.1rem;max-width:560px;margin:0 auto;line-height:1.6}

/* ═══════════════ SPLIT LAYOUT ═══════════════ */
.split-layout{display:grid;grid-template-columns:1fr 400px;gap:2rem;align-items:stretch}
@media(max-width:960px){.split-layout{grid-template-columns:1fr;align-items:start}}
.viz-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:center}
.viz-panel canvas{display:block;width:100%;cursor:crosshair;flex-shrink:0}

/* Activation function panel */
.act-header{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;flex-shrink:0;position:relative;z-index:2}
.act-title{font-weight:600;font-size:1rem;color:var(--ink)}
.act-btns{display:flex;gap:.4rem}
.viz-hint{position:absolute;bottom:10px;left:12px;font-family:var(--font-mono);font-size:.72rem;color:var(--muted);background:rgba(250,247,242,.85);padding:.2rem .6rem;border-radius:var(--radius-xs)}
.explain-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm)}
.explain-panel h3{font-size:1.1rem;font-weight:700;margin-bottom:.8rem}
.explain-intro{color:var(--stone);font-size:.95rem;margin-bottom:1rem;line-height:1.65}
.explain-row{display:flex;gap:.7rem;align-items:flex-start;margin:.6rem 0}
.explain-row p{font-size:.95rem;color:var(--stone);line-height:1.55}
.explain-row strong{color:var(--ink)}
.dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;margin-top:6px}
.dot-teal{background:var(--teal)}.dot-indigo{background:var(--indigo)}.dot-rose{background:var(--rose)}.dot-amber{background:var(--amber)}.dot-sky{background:var(--sky)}.dot-stone{background:var(--pebble)}.dot-white{background:#fff;border:2px solid var(--border)}
.text-teal{color:var(--teal)}.text-indigo{color:var(--indigo)}.text-rose{color:var(--rose)}.text-amber{color:var(--amber)}.text-sky{color:var(--sky)}

/* ═══════════════ LIVE READOUT ═══════════════ */
.live-readout{font-family:var(--font-mono);font-size:.85rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .9rem;margin-top:1rem;color:var(--teal);min-height:2.5em;line-height:1.5;transition:all .15s}

/* ═══════════════ CALLOUT ═══════════════ */
.callout{background:rgba(15,118,110,.04);border:1px solid rgba(15,118,110,.12);border-radius:var(--radius-sm);padding:.9rem 1.1rem;margin-top:1rem}
.callout-title{font-family:var(--font-mono);font-size:.75rem;color:var(--teal);font-weight:600;margin-bottom:.3rem}
.callout p{font-size:.9rem;color:var(--stone);line-height:1.55}
.callout-link{color:var(--teal);font-weight:600;border-bottom:1px solid rgba(15,118,110,.3)}
.callout-link:hover{border-color:var(--teal)}

/* ═══════════════ CALLOUT ROW (side by side below split) ═══════════════ */
.callout-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem}
@media(max-width:768px){.callout-row{grid-template-columns:1fr}}

/* ═══════════════ CONTROLS ═══════════════ */
.control-group{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--border-light)}
.slider-row{display:flex;align-items:center;gap:.7rem;margin:.5rem 0}
.slider-row label{font-family:var(--font-mono);font-size:.75rem;color:var(--pebble);min-width:95px;font-weight:500}
.slider-row input[type="range"]{flex:1;accent-color:var(--teal);height:5px}
.slider-val{font-family:var(--font-mono);font-size:.8rem;color:var(--teal);min-width:38px;text-align:right;font-weight:600}
.btn-row{display:flex;gap:.4rem;margin-top:.6rem;flex-wrap:wrap}
.btn-ctrl{padding:.4rem .85rem;border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--card);color:var(--stone);font-family:var(--font-mono);font-size:.78rem;font-weight:500;cursor:pointer;transition:.15s var(--ease)}
.btn-ctrl:hover{border-color:var(--teal);color:var(--teal)}
.btn-active,.btn-play{border-color:var(--teal);color:var(--teal);background:rgba(15,118,110,.05)}
.bp-controls{position:absolute;bottom:10px;left:12px;display:flex;gap:.3rem}
.bp-controls .btn-ctrl{background:rgba(250,247,242,.92)}

/* ═══════════════ BRIDGE ═══════════════ */
.bridge{text-align:center;padding:2rem 2rem;max-width:600px;margin:0 auto}
.bridge-arrow{font-size:1.5rem;color:var(--teal);margin-bottom:.3rem;animation:bob 2.5s infinite}
.bridge p{color:var(--stone);font-size:1rem;line-height:1.65}

/* ═══════════════ MODEL TAGS ═══════════════ */
.model-tag{display:inline-flex;padding:.15rem .5rem;border-radius:4px;font-family:var(--font-mono);font-size:.7rem;font-weight:500;margin:0 .1rem}
.tag-claude{background:rgba(15,118,110,.08);color:var(--teal);border:1px solid rgba(15,118,110,.15)}
.tag-gpt{background:rgba(67,56,202,.08);color:var(--indigo);border:1px solid rgba(67,56,202,.15)}
.tag-gemini{background:rgba(3,105,161,.08);color:var(--sky);border:1px solid rgba(3,105,161,.15)}
.tag-sm{display:inline-flex;padding:.15rem .4rem;border-radius:4px;font-size:.7rem;font-family:var(--font-mono);background:var(--bg2);color:var(--pebble);border:1px solid var(--border)}

/* ═══════════════ HIERARCHY ═══════════════ */
.hierarchy-container{display:flex;justify-content:center;margin:2rem 0}
.hierarchy-ring{border:2px solid;border-radius:999px;padding:1.5rem 2.5rem;display:flex;flex-direction:column;align-items:center;position:relative}
.ring-ai{border-color:rgba(15,118,110,.25);background:rgba(15,118,110,.02);padding:2rem 3rem}
.ring-ml{border-color:rgba(67,56,202,.25);background:rgba(67,56,202,.02);padding:1.5rem 2.5rem;margin-top:.5rem}
.ring-dl{border-color:rgba(190,18,60,.25);background:rgba(190,18,60,.02);padding:1.2rem 2rem;margin-top:.5rem}
.ring-llm{border-color:rgba(180,83,9,.4);background:rgba(180,83,9,.05);padding:1rem 2rem;margin-top:.5rem}
.ring-label{font-family:var(--font-mono);font-size:.82rem;font-weight:600;display:block;text-align:center}
.ring-ai .ring-label{color:var(--teal)}
.ring-ml>.ring-label{color:var(--indigo)}
.ring-dl>.ring-label{color:var(--rose)}
.ring-llm>.ring-label{color:var(--amber);font-size:1rem}
.ring-desc{font-size:.78rem;color:var(--pebble);text-align:center;margin-top:.2rem;margin-bottom:.3rem}
@media(max-width:600px){.hierarchy-ring{padding:1rem 1.2rem !important}.ring-label{font-size:.7rem}}

/* ═══════════════ LEARNING TYPES ═══════════════ */
.section-subhead{font-size:1.3rem;font-weight:700;text-align:center;margin:2.5rem 0 1.5rem;color:var(--ink)}
.learning-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;margin-bottom:2rem}
.lt-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm);transition:.2s var(--ease)}
.lt-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.lt-icon{font-size:1.8rem;margin-bottom:.5rem}
.lt-card h4{font-size:1.1rem;font-weight:700;margin-bottom:.5rem}
.lt-card p{font-size:.9rem;color:var(--stone);line-height:1.55;margin-bottom:.8rem}
.lt-visual{height:60px;background:var(--bg2);border-radius:var(--radius-sm);margin-bottom:.8rem;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.lt-flow{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-family:var(--font-mono)}
.lt-item{padding:.3rem .6rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xs);font-weight:500}
.lt-arrow{color:var(--muted);font-size:1.2rem}
.lt-model{background:var(--bg3);border-color:var(--stone)}
.lt-label{background:rgba(15,118,110,.08);border-color:rgba(15,118,110,.2);color:var(--teal);font-weight:600}
.lt-reward{background:rgba(15,118,110,.08);border-color:rgba(15,118,110,.2);color:var(--teal);font-weight:600}
.lt-clusters{width:100%;height:100%;position:relative}
.cluster-dot{position:absolute;width:8px;height:8px;border-radius:50%;opacity:.7}
.lt-tags{display:flex;gap:.3rem;flex-wrap:wrap}

/* ═══════════════ VOCAB TABLE ═══════════════ */
.vocab-table{overflow-x:auto;margin:1.5rem 0}
.vocab-table table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.vocab-table th{text-align:left;padding:.7rem 1rem;background:var(--bg2);font-family:var(--font-mono);font-size:.72rem;font-weight:600;color:var(--teal);letter-spacing:.04em;border-bottom:2px solid var(--border)}
.vocab-table td{padding:.65rem 1rem;border-bottom:1px solid var(--border-light);color:var(--stone);font-size:.9rem}
.vocab-table tr:hover td{background:rgba(15,118,110,.02);color:var(--ink)}
.vocab-table td strong{color:var(--ink)}

/* ═══════════════ STEP FLOW ═══════════════ */
.step-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.8rem;margin:2rem 0}
.step-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem;text-align:center;box-shadow:var(--shadow-sm);transition:.2s}
.step-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.step-num{font-family:var(--font-mono);font-size:.65rem;color:var(--teal);font-weight:600;margin-bottom:.3rem}
.step-icon{font-size:1.5rem;margin-bottom:.3rem}
.step-card h4{font-size:.9rem;font-weight:700;margin-bottom:.15rem}
.step-card p{font-size:.75rem;color:var(--pebble);line-height:1.4}

/* ═══════════════ STAT GRID ═══════════════ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem;margin:2rem 0}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.2rem;text-align:center;box-shadow:var(--shadow-sm)}
.stat-num{font-family:var(--font-serif);font-size:2.2rem;font-weight:700;line-height:1}
.stat-card p{font-size:.78rem;color:var(--pebble);margin-top:.3rem}

/* ═══════════════ QKV ═══════════════ */
.qkv-panel{padding:2rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem;background:var(--card)}
.qkv-flow{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:center}
.qkv-group{display:flex;gap:.6rem}
.qkv-node{width:60px;height:60px;border:2px solid var(--c);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 6%,white);transition:.2s}
.qkv-node:hover{transform:scale(1.08);box-shadow:0 4px 12px color-mix(in srgb,var(--c) 15%,transparent)}
.qkv-node span{font-size:1.2rem;font-weight:800;color:var(--c)}
.qkv-node small{font-size:.65rem;color:var(--pebble);font-family:var(--font-mono);margin-top:.1rem}
.qkv-arrow{font-size:1.2rem;color:var(--muted)}
.qkv-formula{font-family:var(--font-mono);font-size:.88rem;color:var(--teal);background:rgba(15,118,110,.05);padding:.6rem 1.5rem;border-radius:var(--radius-sm);font-weight:500}

/* ═══════════════ TOKENIZER ═══════════════ */
.tokenizer-panel{padding:2rem;display:flex;flex-direction:column;gap:1.2rem;background:var(--card);min-height:500px}
.tok-stage{text-align:center}
.tok-label{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);margin-bottom:.5rem;font-weight:500}
.tok-original{font-size:1.3rem;font-weight:700;color:var(--ink)}
.tok-arrow{text-align:center;font-size:.85rem;color:var(--muted);padding:.3rem 0}
.tok-tokens{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap}
.tok-token{padding:.35rem .7rem;border-radius:var(--radius-xs);border:1.5px solid;font-family:var(--font-mono);font-size:.82rem;font-weight:600;position:relative;transition:.2s}
.tok-token:hover{transform:scale(1.06)}
.tok-id{display:block;font-size:.6rem;font-weight:400;color:var(--muted);text-align:center;margin-top:.1rem}
.tok-embeddings{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;height:60px;align-items:flex-end;overflow:hidden}
.tok-embed-bar{display:flex;flex-direction:column;gap:1px;align-items:center;height:60px;justify-content:flex-end}
.tok-embed-bar .bar{width:8px;border-radius:2px;flex-shrink:0}
.tok-footer{text-align:center;font-size:.78rem;color:var(--muted);font-family:var(--font-mono)}

/* ═══════════════ PHASES ═══════════════ */
.phase-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;margin:1.5rem 0}
.phase-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm);transition:.2s}
.phase-card:hover{box-shadow:var(--shadow-md)}
.phase-highlight{border-color:rgba(15,118,110,.25);background:rgba(15,118,110,.02)}
.phase-num{font-family:var(--font-mono);font-size:.72rem;color:var(--teal);font-weight:600;margin-bottom:.3rem}
.phase-card h4{font-size:1.1rem;font-weight:700;margin-bottom:.4rem}
.phase-card p{font-size:.9rem;color:var(--stone);line-height:1.55;margin-bottom:.8rem}
.phase-detail{font-size:.82rem;color:var(--pebble);line-height:1.5;padding-top:.6rem;border-top:1px solid var(--border-light)}

/* ═══════════════ FOOTER ═══════════════ */
.site-footer{background:var(--bg2);border-top:1px solid var(--border);padding:3rem 2rem;text-align:center}
.footer-title{font-family:var(--font-serif);font-size:1.5rem;font-weight:700;color:var(--ink);margin-bottom:.3rem}
.footer-content p{color:var(--pebble);font-size:.9rem;margin-bottom:1rem}
.footer-links{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.footer-links a{font-size:.82rem;color:var(--pebble);border-bottom:1px solid var(--border);padding-bottom:1px;transition:.2s}
.footer-links a:hover{color:var(--teal);border-color:var(--teal)}

/* ═══════════════ SCROLL ANIMATIONS ═══════════════ */
.fade-in{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:768px){
  .chapter{padding:3rem 1rem}
  .step-flow{grid-template-columns:1fr 1fr}
  .nav-chapters{display:none}
  .hero-line{font-size:clamp(2.5rem,10vw,4rem)}
}