:root {
  --ink:#17202b; --muted:#5f6b72; --paper:#f6f2e9; --white:#fffdf8; --line:#d8d3c9;
  --teal:#168f83; --teal-soft:#dff2ed; --coral:#e66d56; --coral-soft:#fff0ea;
  --yellow:#f0bd4f; --navy:#142332; --display:Georgia,serif; --sans:Inter,ui-sans-serif,system-ui,sans-serif; --mono:"SFMono-Regular",Consolas,monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.55; }
button,select,input { font:inherit; }
button,a { color:inherit; }
a { text-decoration:none; }
code { padding:1px 4px; background:#e9e4da; color:#8d4438; font:0.92em var(--mono); }
.page-width { width:min(1180px,calc(100% - 64px)); margin-inline:auto; }
.topbar { position:sticky; z-index:20; top:0; display:flex; align-items:center; gap:35px; min-height:68px; padding:0 34px; background:rgba(246,242,233,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(8px); }
.brand { display:flex; align-items:center; gap:10px; font:600 14px var(--display); white-space:nowrap; }
.brand small { display:block; color:var(--muted); font:10px var(--mono); }
.brand-mark { display:grid; place-items:center; width:29px; height:29px; border:2px solid var(--coral); color:var(--coral); font:600 18px var(--display); }
.topbar nav { display:flex; gap:22px; margin-left:auto; color:var(--muted); font:11px var(--mono); text-transform:uppercase; }
.topbar nav a:hover,.text-link:hover { color:var(--coral); }
.hero { padding:92px 0 64px; }
.eyebrow { color:var(--coral); font:10px var(--mono); letter-spacing:0; text-transform:uppercase; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:65px; align-items:center; margin-top:16px; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:23px; font:600 72px/.98 var(--display); letter-spacing:0; }
h1 em { color:var(--coral); font-style:normal; }
.hero-lede { max-width:650px; color:var(--muted); font-size:17px; }
.hero-actions { display:flex; align-items:center; gap:20px; margin-top:32px; }
.button { display:inline-block; padding:11px 15px; border:1px solid var(--ink); background:transparent; color:var(--ink); font:11px var(--mono); cursor:pointer; }
.button.primary { border-color:var(--coral); background:var(--coral); color:#fff; }
.button.primary:hover { background:#c95742; }
.button.quiet { border-color:var(--line); color:var(--muted); }
.text-link { color:var(--muted); font:11px var(--mono); }
.hero-equation { padding:32px; border:1px solid var(--ink); background:var(--white); box-shadow:12px 12px 0 #d9d1c3; }
.equation-label { margin-bottom:17px; color:var(--muted); font:10px var(--mono); text-transform:uppercase; }
.big-equation { font:600 28px var(--display); }
.big-equation + .big-equation { margin-top:8px; }
.big-equation span { color:var(--coral); }
.equation-key { display:grid; grid-template-columns:1fr 1fr; gap:9px 18px; margin-top:29px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font:11px var(--mono); }
.equation-key b { color:var(--teal); }
.lesson-section { padding:100px 0 35px; }
.pale-section { max-width:none; background:#eae5db; }
.section-heading { display:grid; grid-template-columns:100px 1fr; gap:24px; align-items:start; margin-bottom:30px; }
.section-heading > div { max-width:920px; }
.section-number { color:var(--coral); font:11px var(--mono); }
.section-heading h2 { margin-bottom:13px; font:600 40px/1.08 var(--display); }
.section-heading p { max-width:850px; margin:0; color:var(--muted); font-size:15px; }
.bank-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.bank-card { padding:17px; border:1px solid var(--line); background:var(--white); transition:.18s ease; cursor:pointer; }
.bank-card:hover,.bank-card.active { border-color:var(--teal); transform:translateY(-3px); box-shadow:0 8px 0 rgba(22,143,131,.12); }
.bank-image { position:relative; height:148px; overflow:hidden; margin-bottom:16px; border:1px solid var(--line); }
.bank-image span { position:absolute; z-index:1; top:12px; left:13px; color:rgba(23,32,43,.7); font:10px var(--mono); text-transform:uppercase; }
.road-image { background:#d5e7e2; }
.road-image:before { content:""; position:absolute; left:20%; bottom:-26%; width:70%; height:90%; background:#6e7275; transform:rotate(-18deg); }
.road-image:after { content:""; position:absolute; left:43%; bottom:-12%; width:3px; height:85%; background:#f9dc86; transform:rotate(-18deg); box-shadow:0 25px #f9dc86,0 50px #f9dc86; }
.road-image i { position:absolute; right:12%; bottom:9%; width:36%; height:18%; background:#7a9c68; border-radius:50%; transform:rotate(-15deg); }
.river-image { background:#bddfe1; }
.river-image:before { content:""; position:absolute; inset:35% -10% -15% 27%; background:#4f9db0; border-radius:55% 0 0 55%; transform:rotate(13deg); }
.river-image:after { content:""; position:absolute; left:-7%; bottom:-13%; width:78%; height:67%; background:#9abf77; transform:rotate(-10deg); }
.finance-image { background:#dfe1e5; }
.finance-image:before { content:""; position:absolute; left:15%; right:15%; bottom:0; height:78%; background:#8e9aa8; border:6px solid #e8e4d5; box-shadow:0 -13px #e8e4d5; }
.finance-image:after { content:"$"; position:absolute; top:55%; left:0; right:0; text-align:center; color:#f4e2a2; font:700 37px Georgia,serif; }
.bank-card h3 { margin-bottom:8px; font:600 18px/1.2 var(--display); }
.bank-card p { margin:0; color:var(--muted); font-size:13px; }
.bank-card em { color:var(--coral); }
.context-explain { display:grid; grid-template-columns:1fr 170px 34px 170px; gap:17px; align-items:center; margin-top:18px; padding:22px; border:1px solid var(--line); background:#fffaf2; }
.context-explain b { font:600 16px var(--display); }
.context-explain p { margin:6px 0 0; color:var(--muted); font-size:13px; }
.vector-before,.vector-after { padding:12px; border:1px solid var(--line); background:var(--white); }
.vector-before span,.vector-after span { display:block; color:var(--muted); font:9px var(--mono); text-transform:uppercase; }
.vector-before b,.vector-after b { display:block; margin-top:7px; color:var(--coral); font:12px var(--mono); }
.vector-after b { color:var(--teal); }
.context-arrow { color:var(--coral); font-size:24px; text-align:center; }
.architecture { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.architecture article { padding:24px; border:1px solid var(--line); background:var(--white); }
.arch-title { color:var(--muted); font:10px var(--mono); text-transform:uppercase; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.dot.coral { background:var(--coral); }.dot.teal { background:var(--teal); }
.arch-flow { display:flex; align-items:center; justify-content:space-between; gap:9px; margin:31px 0 20px; color:var(--muted); font:12px var(--mono); text-align:center; }
.arch-flow strong { padding:13px 10px; border:1px solid var(--ink); background:var(--paper); color:var(--ink); font-weight:500; }
.arch-flow em { padding:13px 10px; border:1px solid var(--coral); background:var(--coral-soft); color:var(--coral); font-style:normal; }
.architecture p,.reading-block p { margin:0; color:var(--muted); font-size:13px; }
.routing { display:grid; grid-template-columns:repeat(5,1fr); align-items:end; gap:8px; height:104px; padding:15px 14px 10px; margin-bottom:20px; border:1px solid #c5ddd9; background:#effaf8; }
.routing span { grid-column:1/-1; color:var(--muted); font:9px var(--mono); }.routing i { display:block; min-height:8px; background:var(--teal); }.routing b { grid-column:1/-1; color:var(--teal); font:11px var(--mono); }
.reading-block { margin-top:17px; padding-top:18px; border-top:1px solid var(--line); }.reading-block h3 { margin-bottom:6px; font:600 20px var(--display); }
.deck-shell { border:1px solid var(--ink); background:#fffdf8; box-shadow:10px 10px 0 #d9d1c3; }
.deck-toolbar { display:flex; align-items:center; gap:21px; padding:14px 17px; border-bottom:1px solid var(--line); }
.deck-count,.deck-title { font:10px var(--mono); text-transform:uppercase; }.deck-count { color:var(--coral); }.deck-title { color:var(--muted); }.deck-actions { display:flex; gap:5px; margin-left:auto; }.deck-button,.icon-control { display:grid; place-items:center; width:34px; height:31px; border:1px solid var(--ink); background:transparent; cursor:pointer; }.deck-button:hover,.icon-control:hover { background:var(--ink); color:#fff; }
.slide-stage { min-height:420px; padding:35px; background:#f7f4ed; }
.slide-caption { display:flex; justify-content:space-between; gap:20px; padding:17px 20px; border-top:1px solid var(--line); }.slide-caption p { max-width:800px; margin:5px 0 0; color:var(--muted); font-size:13px; }.slide-dots { display:flex; align-items:center; gap:6px; }.slide-dots button { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:#ccc5b9; cursor:pointer; }.slide-dots button.active { background:var(--coral); }
.slide-heading { margin-bottom:25px; }.slide-heading h3 { margin-bottom:5px; font:600 32px var(--display); }.slide-heading p { margin:0; max-width:800px; color:var(--muted); font-size:14px; }
.slide-layout { display:grid; grid-template-columns:1fr 1fr; gap:29px; align-items:center; }.slide-layout.three { grid-template-columns:repeat(3,1fr); }.slide-copy { color:var(--muted); font-size:14px; }.slide-copy strong { color:var(--ink); }.slide-callout { padding:14px; border-left:3px solid var(--coral); background:var(--coral-soft); color:var(--ink); font-size:14px; }
.token-strip { display:flex; gap:7px; flex-wrap:wrap; }.token-strip span { padding:9px 11px; border:1px solid var(--line); background:#fff; font:12px var(--mono); }.token-strip span.active { border-color:var(--coral); background:var(--coral-soft); color:var(--coral); }
.matrix-visual { display:grid; gap:10px; }.matrix-visual .matrix-label { color:var(--muted); font:10px var(--mono); text-transform:uppercase; }.matrix-line { display:flex; align-items:center; gap:11px; }.matrix-line .arrow { color:var(--coral); font-size:23px; }.matrix { display:inline-grid; gap:3px; padding:7px; border:1px solid var(--ink); background:#fff; }.matrix.grid-2 { grid-template-columns:repeat(2,40px); }.matrix.grid-3 { grid-template-columns:repeat(3,40px); }.matrix span { display:grid; place-items:center; min-height:31px; background:#e9f4f1; color:var(--ink); font:11px var(--mono); }.matrix.coral span { background:#fff0ea; }.matrix.yellow span { background:#fff8d9; }.matrix-note { color:var(--muted); font:11px var(--mono); }
.score-product { display:grid; grid-template-columns:1fr auto 1fr; gap:15px; align-items:center; }.score-product .big-op { color:var(--coral); font:27px var(--display); }.score-example { padding:18px; border:1px solid var(--line); background:#fff; }.score-example b { display:block; color:var(--coral); font:11px var(--mono); }.score-example p { margin:9px 0 0; font:13px var(--mono); }
.heatmap-large { display:grid; grid-template-columns:95px repeat(3,1fr); gap:4px; max-width:580px; }.heatmap-large span { display:grid; place-items:center; min-height:45px; background:#fff; font:11px var(--mono); }.heatmap-large .axis { background:transparent; color:var(--muted); }.heatmap-large .hot1 { background:#f0a08d; }.heatmap-large .hot2 { background:#f6c4ad; }.heatmap-large .mid { background:#f9dfc1; }.heatmap-large .cool { background:#b8ded5; }.heatmap-legend { display:flex; gap:4px; align-items:center; margin-top:13px; color:var(--muted); font:10px var(--mono); }.heatmap-legend i { width:18px; height:10px; }.heatmap-legend i:nth-of-type(1){background:#fff}.heatmap-legend i:nth-of-type(2){background:#f9dfc1}.heatmap-legend i:nth-of-type(3){background:#f0a08d}
.softmax-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; align-items:center; }.softmax-bars { display:grid; gap:8px; }.softmax-bars div { display:grid; grid-template-columns:62px 1fr 42px; gap:9px; align-items:center; color:var(--muted); font:11px var(--mono); }.softmax-bars i { display:block; height:13px; background:var(--coral); }.softmax-bars b { color:var(--ink); text-align:right; font:11px var(--mono); }
.attention-links { position:relative; display:grid; grid-template-columns:150px minmax(300px,1fr) 150px 210px; gap:14px; align-items:start; min-height:390px; padding:15px 17px 17px; border:1px solid var(--line); background:#fff; }.attention-links svg { position:relative; z-index:0; grid-column:2; grid-row:1; align-self:start; width:100%; height:350px; margin-top:19px; overflow:visible; }.link-column { position:relative; z-index:1; display:grid; gap:7px; }.link-column > span { margin-bottom:5px; color:var(--muted); font:9px var(--mono); text-transform:uppercase; }.link-column button { justify-self:start; min-width:90px; height:24px; padding:3px 8px; border:0; border-left:3px solid transparent; background:transparent; color:var(--ink); font:12px var(--mono); text-align:left; cursor:pointer; }.link-column button:hover,.link-column button.selected { border-left-color:var(--coral); background:var(--coral-soft); color:var(--coral); }.output-links button { justify-self:stretch; }.output-links button.selected { border-left-color:var(--teal); background:var(--teal-soft); color:var(--teal); }.link-readout { position:relative; z-index:1; grid-column:4; grid-row:1; align-self:end; padding:13px; border:1px solid var(--line); background:#fffaf2; }.link-readout strong { display:block; margin-top:3px; font:600 20px var(--display); }.link-readout p { margin:7px 0 0; color:var(--muted); font-size:11px; }.link-readout b { color:var(--coral); }
.mix-visual { display:grid; grid-template-columns:auto 30px auto 30px auto; gap:9px; align-items:center; }.mix-visual .mix-arrow { color:var(--coral); font-size:23px; }.mix-output { padding:11px; border:1px solid var(--teal); background:var(--teal-soft); }.mix-output b { display:block; color:var(--teal); font:11px var(--mono); }.mix-output strong { display:block; margin-top:9px; font:16px var(--mono); }
.mask-slide-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }.mask-grid-large { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; max-width:300px; }.mask-grid-large span { display:grid; place-items:center; min-height:48px; font:12px var(--mono); }.mask-grid-large .allow { background:#d9f0ec; color:var(--teal); }.mask-grid-large .block { background:#e3dfd7; color:#9d988f; }.mask-note { padding:16px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:13px; }
.multi-slide { display:grid; grid-template-columns:1fr 1.15fr; gap:27px; align-items:center; }.head-mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.head-mini { padding:12px; border:1px solid var(--line); background:#fff; }.head-mini h4 { margin:0 0 9px; color:var(--teal); font:11px var(--mono); }.mini-heat { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }.mini-heat i { display:block; height:23px; background:#d7ece7; }.mini-heat i.hot { background:#e98972; }.concat-strip { display:flex; align-items:center; gap:8px; }.concat-strip span { padding:18px 10px; border:1px solid var(--teal); background:var(--teal-soft); color:var(--teal); font:11px var(--mono); }.concat-strip b { color:var(--coral); font:20px var(--display); }
.block-slide { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }.block-slide div { display:grid; place-items:center; min-width:112px; min-height:70px; padding:12px; border:1px solid var(--ink); background:#fff; text-align:center; font:12px var(--mono); }.block-slide div:nth-child(2){border-color:var(--coral);background:var(--coral-soft)}.block-slide div:nth-child(4){border-color:var(--teal);background:var(--teal-soft)}.block-slide i { color:var(--coral); font-size:22px; }
.formula-board { padding:23px; border:1px solid #475567; background:#1d3042; color:#f7f4ed; }.formula-line { display:grid; grid-template-columns:28px 285px 1fr; gap:14px; align-items:baseline; padding:13px 0; border-bottom:1px solid #384b5e; }.formula-line:last-of-type { border-bottom:0; }.formula-index { color:var(--yellow); font:11px var(--mono); }.formula-line code { padding:0; background:none; color:#f9db92; font-size:16px; }.formula-line small { color:#b6c4cd; font:11px var(--mono); }.formula-complete { margin-top:20px; padding:17px; border:1px solid #6a7d91; color:#fff; font:600 18px var(--mono); text-align:center; }
.formula-complete small { display:block; margin-top:8px; color:#b6c4cd; font:10px var(--mono); font-weight:400; }
.shape-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:17px; }.shape-row div { padding:14px; border:1px solid #435669; background:#1d3042; }.shape-row b { display:block; color:var(--yellow); font:18px var(--mono); }.shape-row span { display:block; margin-top:5px; color:#bcc8cf; font-size:11px; }.dark-reading { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:18px; }.dark-reading p { margin:0; color:#c3cdd3; font-size:13px; }.dark-reading strong { color:#fff; }.dark-reading code { background:#30475a; color:#f8d67d; }
.dark-section { background:var(--navy); color:#f7f4ed; }.dark-section .section-heading p { color:#b7c5cd; }.light-heading .section-number { color:#f2c35e; }.light-heading h2 { color:#fff; }
.portrait-shell { max-width:860px; margin-inline:auto; border:1px solid var(--ink); background:#fffdf8; box-shadow:10px 10px 0 #d9d1c3; }
.portrait-toolbar { display:grid; grid-template-columns:36px 1fr 36px; gap:16px; align-items:center; min-height:108px; padding:17px 20px; border-bottom:1px solid var(--line); background:#fffaf2; }
.portrait-toolbar h3 { margin:4px 0 2px; font:600 22px var(--display); }
.portrait-toolbar p { margin:0; color:var(--muted); font-size:12px; }
.portrait-toolbar button:disabled { opacity:.3; cursor:not-allowed; }
.portrait-steps { position:relative; display:grid; gap:14px; max-height:620px; padding:22px 22px 420px; overflow-y:auto; scroll-behavior:smooth; background:#f2eee5; }
.portrait-step { position:relative; min-width:0; padding:19px; border:1px solid var(--line); background:#fffdf8; opacity:.2; transition:opacity .2s,border-color .2s,box-shadow .2s; cursor:pointer; }
.portrait-step.complete { opacity:.48; }
.portrait-step.active { border-color:var(--teal); box-shadow:inset 5px 0 var(--teal),0 7px 0 rgba(22,143,131,.1); opacity:1; }
.portrait-step:focus-visible { outline:2px solid var(--coral); outline-offset:2px; }
.portrait-step header { display:grid; grid-template-columns:34px 1fr; gap:12px; margin-bottom:18px; }
.portrait-step header > span { color:var(--coral); font:11px var(--mono); }
.portrait-step h4 { margin:0 0 4px; font:600 20px var(--display); }
.portrait-step header p { max-width:680px; margin:0; color:var(--muted); font-size:11px; }
.portrait-equation { display:flex; align-items:center; justify-content:center; gap:12px; min-width:0; overflow-x:auto; padding:3px 3px 9px; }
.portrait-operation { flex:0 0 auto; min-width:24px; color:var(--coral); font:25px var(--display); text-align:center; }
.portrait-matrix { flex:0 0 auto; margin:0; padding:10px; border:1px solid var(--line); background:#fbf8f0; }
.portrait-matrix figcaption { display:flex; justify-content:space-between; gap:15px; align-items:baseline; margin-bottom:8px; }
.portrait-matrix figcaption b { font:600 15px var(--display); }
.portrait-matrix figcaption span { color:var(--muted); font:9px var(--mono); white-space:nowrap; }
.portrait-matrix-grid { display:grid; grid-template-columns:repeat(var(--matrix-columns),36px); gap:3px; }
.portrait-matrix-grid > span { display:grid; place-items:center; width:36px; height:32px; background:#e8f3f0; font:10px var(--mono); }
.portrait-matrix.coral .portrait-matrix-grid > span { background:#f9d9d0; }
.portrait-matrix.yellow .portrait-matrix-grid > span { background:#fff1bd; }
.portrait-matrix.teal .portrait-matrix-grid > span { background:#cde8e2; }
.portrait-matrix.score .portrait-matrix-grid > span { background:#eadfd1; }
.portrait-matrix.mask .portrait-matrix-grid > span { background:#e4e1da; color:#77736c; }
.portrait-matrix.output { border-color:var(--teal); background:#eff8f6; }
.portrait-matrix.output .portrait-matrix-grid > span { background:#bfe1da; }
.portrait-matrix-grid > span.emphasized { outline:2px solid var(--coral); outline-offset:-2px; color:var(--ink); font-weight:700; }
.portrait-dots { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.portrait-dots button { display:flex; gap:7px; align-items:center; min-height:51px; padding:9px; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; color:var(--muted); font:9px var(--mono); text-align:left; cursor:pointer; }
.portrait-dots button:nth-child(3n) { border-right:0; }
.portrait-dots button:nth-last-child(-n+3) { border-bottom:0; }
.portrait-dots button span { display:grid; flex:0 0 21px; place-items:center; width:21px; height:21px; border:1px solid var(--line); color:var(--coral); }
.portrait-dots button.active { background:var(--teal-soft); color:var(--teal); }
.portrait-dots button.active span { border-color:var(--teal); background:var(--teal); color:#fff; }
.type-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.type-grid article { padding:22px; border:1px solid var(--line); background:#fffdf8; }.type-grid h3 { margin-bottom:10px; font:600 22px var(--display); }.type-grid p { color:var(--muted); font-size:13px; }.type-formula { margin:14px 0; padding:13px; border-left:3px solid var(--teal); background:var(--teal-soft); color:var(--teal); font:13px var(--mono); }.mask-table { display:grid; grid-template-columns:repeat(3,40px); gap:4px; margin:14px 0; }.mask-table span { display:grid; place-items:center; height:38px; background:#d9f0ec; color:var(--teal); font:12px var(--mono); }.mask-table span:nth-child(2),.mask-table span:nth-child(3),.mask-table span:nth-child(6) { background:#e3dfd7; color:#9d988f; }.sentence-attention { display:grid; grid-template-columns:1fr 1fr; gap:25px; align-items:center; margin-top:16px; padding:23px; border:1px solid var(--line); background:#fff; }.token-row { display:flex; flex-wrap:wrap; gap:5px; margin:13px 0 17px; }.token-row button { padding:7px 8px; border:1px solid var(--line); background:#fbf8f0; color:var(--ink); font:11px var(--mono); cursor:pointer; }.token-row button.selected { border-color:var(--coral); background:var(--coral-soft); color:var(--coral); }.sentence-attention p { margin:0; color:var(--muted); font-size:12px; }.attention-row-view { padding:19px; border:1px solid var(--line); background:#fffaf2; }.attention-row-label { display:flex; justify-content:space-between; color:var(--muted); font:10px var(--mono); }.attention-row-label b { color:var(--teal); font-weight:500; }.token-bar { display:grid; grid-template-columns:75px 1fr 42px; gap:9px; align-items:center; margin-top:9px; color:var(--muted); font:11px var(--mono); }.token-bar i { height:11px; background:var(--teal); transition:.2s; }.token-bar.selected i { background:var(--coral); }.token-bar b { color:var(--ink); text-align:right; }
.heads-diagram { display:grid; grid-template-columns:1.25fr .75fr; border:1px solid var(--line); background:#fff; }.head-stage { display:flex; align-items:center; gap:11px; padding:28px; border-right:1px solid var(--line); }.head-stage > i { color:var(--coral); font-size:23px; }.head-input-block,.head-proj-block,.head-output-block { display:grid; place-items:center; min-width:94px; min-height:74px; padding:10px; border:1px solid var(--ink); text-align:center; }.head-input-block b,.head-proj-block b,.head-output-block b { font:600 18px var(--display); }.head-input-block span,.head-proj-block span,.head-output-block span { margin-top:4px; color:var(--muted); font:9px var(--mono); }.head-cards { display:grid; gap:7px; min-width:200px; }.head-card { display:grid; grid-template-columns:58px 1fr 32px; gap:7px; align-items:center; min-height:66px; padding:8px 9px; border:1px solid var(--line); background:#fbf8f0; text-align:left; cursor:pointer; }.head-card.active { border-color:var(--teal); box-shadow:inset 3px 0 var(--teal); }.head-card strong,.head-card span { font:10px var(--mono); }.head-card span { color:var(--muted); }.mini-map { display:grid; grid-template-columns:repeat(3,8px); grid-template-rows:repeat(3,8px); gap:2px; width:28px; height:28px; justify-self:end; overflow:hidden; }.mini-map i { display:block; width:8px; height:8px; background:#d0e9e4; }.mini-map i.hot { background:#e8a08f; }.head-explanation { padding:28px; }.head-explanation h3 { margin:8px 0 6px; font:600 25px var(--display); }.head-explanation p { color:var(--muted); font-size:13px; }.large-head-map { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; max-width:250px; margin-top:22px; }.large-head-map i { display:block; height:30px; background:#d9ece8; }.large-head-map i.hot { background:var(--coral); }.multihead-formula { display:grid; grid-template-columns:auto 1fr; gap:25px; align-items:center; margin-top:17px; padding:18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.multihead-formula code { color:var(--teal); background:none; font-size:14px; }.multihead-formula p { margin:0; color:var(--muted); font-size:12px; }
.head-reading { display:grid; grid-template-columns:.8fr 1.2fr; gap:28px; margin-top:24px; padding:25px; border:1px solid var(--line); background:#fffdf8; }.head-reading h3 { margin:7px 0 9px; font:600 25px var(--display); }.head-reading p { margin:0 0 10px; color:var(--muted); font-size:13px; }.head-reading p:last-child { margin-bottom:0; }
.head-operation-table { display:grid; align-self:start; border:1px solid var(--line); background:var(--line); gap:1px; }
.head-operation-table > div { display:grid; grid-template-columns:90px 1fr; gap:12px; align-items:center; min-width:0; padding:13px; background:#fbf8f0; }
.head-operation-table span { color:var(--coral); font:9px var(--mono); text-transform:uppercase; }
.head-operation-table code { min-width:0; padding:0; background:none; color:var(--ink); font:10px var(--mono); overflow-wrap:anywhere; }
.head-operation-table .head-operation-result { background:var(--teal-soft); }
.head-operation-table .head-operation-result span,.head-operation-table .head-operation-result code { color:var(--teal); }
.head-worked { margin-top:22px; padding:25px; border:1px solid var(--line); background:#fff; }.worked-heading h3 { margin:7px 0 7px; font:600 26px var(--display); }.worked-heading p { max-width:900px; margin:0; color:var(--muted); font-size:13px; }.worked-head-grid { display:grid; grid-template-columns:.8fr 1.25fr 1fr; gap:15px; margin-top:21px; }.worked-input,.worked-head-panel,.worked-concat { padding:17px; border:1px solid var(--line); background:#fbf8f0; }.worked-label { color:var(--muted); font:10px var(--mono); text-transform:uppercase; }.worked-token-matrix { display:grid; grid-template-columns:68px repeat(4,1fr); gap:4px; margin-top:13px; }.worked-token-matrix span,.worked-token-matrix b { display:grid; place-items:center; min-height:31px; background:#fff; font:11px var(--mono); }.worked-token-matrix span { justify-content:start; padding-left:7px; color:var(--muted); }.worked-token-matrix b { color:var(--ink); }.worked-input p,.worked-concat p { margin:13px 0 0; color:var(--muted); font-size:11px; }.head-example-tabs { display:flex; gap:0; margin-bottom:15px; }.head-example-tabs button { flex:1; padding:8px 7px; border:1px solid var(--line); background:#fff; color:var(--muted); font:9px var(--mono); cursor:pointer; }.head-example-tabs button + button { border-left:0; }.head-example-tabs button.active { border-color:var(--teal); background:var(--teal-soft); color:var(--teal); }.worked-map { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin-top:12px; }.worked-map .map-cell { display:grid; place-items:center; min-height:42px; background:#d6ebe6; color:var(--ink); font:11px var(--mono); }.worked-map .map-cell.hot { background:var(--coral); color:#fff; }.worked-output { margin-top:13px; padding:11px; border-left:3px solid var(--coral); background:var(--coral-soft); color:var(--muted); font:11px var(--mono); }.worked-output code { background:#fff; }.concat-calculation { display:grid; grid-template-columns:1fr 15px 1fr 15px 1.25fr; gap:5px; align-items:center; margin-top:14px; }.concat-calculation > span { color:var(--coral); font:19px var(--display); text-align:center; }.concat-calculation > div { display:grid; gap:6px; padding:10px 8px; border:1px solid var(--line); background:#fff; }.concat-calculation > div span { color:var(--muted); font:9px var(--mono); }.concat-calculation > div b { font:10px var(--mono); }.concat-calculation .concat-result { border-color:var(--teal); background:var(--teal-soft); }.concat-result b { color:var(--teal); }.head-checks { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:17px; }.head-checks > div { padding:16px; border-top:3px solid var(--yellow); background:#fff9e9; }.head-checks b { font:600 15px var(--display); }.head-checks p { margin:7px 0 0; color:var(--muted); font-size:12px; }
.systems-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.systems-grid article { padding:23px; border:1px solid #435669; background:#1d3042; }.system-symbol { display:inline-grid; place-items:center; min-width:42px; min-height:32px; padding:0 8px; background:#2c4458; color:var(--yellow); font:15px var(--mono); }.systems-grid h3 { margin:16px 0 7px; font:600 21px var(--display); }.systems-grid p { margin:0; color:#bdc8ce; font-size:13px; }.systems-grid code { background:#30475a; color:#f8d67d; }.growth-chart { display:flex; align-items:end; gap:8px; height:80px; margin-top:19px; padding:10px 10px 0; border-bottom:1px solid #587083; }.growth-chart i { flex:1; background:var(--coral); }.systems-grid small { display:block; margin-top:7px; color:#8ea0ad; font:10px var(--mono); }.cache-chart { display:flex; gap:4px; align-items:end; height:80px; margin-top:19px; padding:10px 0 0; border-bottom:1px solid #587083; }.cache-chart i { flex:1; height:100%; background:var(--teal); }.cache-chart i:nth-child(2){height:82%}.cache-chart i:nth-child(3){height:66%}.cache-chart i:nth-child(4){height:50%}.cache-chart i:nth-child(5){height:35%}.tile-chart { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:19px; }.tile-chart i { height:22px; background:#e4bd66; }.modern-note { margin-top:17px; padding-top:20px; border-top:1px solid #435669; }.modern-note h3 { margin-bottom:6px; font:600 20px var(--display); }.modern-note p { max-width:900px; margin:0; color:#bdc8ce; font-size:13px; }
.notes-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }.notes-grid article { padding:21px; border:1px solid var(--line); background:#fffdf8; }.notes-grid h3 { margin-bottom:8px; font:600 21px var(--display); }.notes-grid p { margin:0; color:var(--muted); font-size:13px; }.takeaway { margin-top:17px; padding:25px; border:1px solid var(--coral); background:var(--coral-soft); }.takeaway span { color:var(--coral); font:10px var(--mono); text-transform:uppercase; }.takeaway strong { display:block; margin:5px 0; font:600 27px var(--display); }.takeaway p { margin:0; color:var(--muted); font-size:13px; }
/* Opening foundations */
.lesson-entry .entry-word { font:600 40px var(--display); }
.lesson-entry p { margin:22px 0 0; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.entry-flow { display:flex; align-items:center; gap:9px; margin-top:20px; font:11px var(--mono); }
.entry-flow span,.entry-flow strong { padding:8px 9px; border:1px solid var(--line); background:var(--paper); font-weight:500; }
.entry-flow strong { border-color:var(--teal); background:var(--teal-soft); color:var(--teal); }
.entry-flow i { color:var(--coral); font-style:normal; }
.embedding-foundation { display:grid; gap:16px; }
.embedding-pipeline { display:grid; grid-template-columns:minmax(140px,1fr) 24px minmax(140px,1fr) 24px minmax(170px,1fr) 24px minmax(240px,1.3fr); gap:8px; align-items:stretch; padding:20px; border:1px solid var(--line); background:#fff; }
.embedding-pipeline > div { display:flex; flex-direction:column; min-width:0; padding:15px; border:1px solid var(--line); background:#fbf8f0; }
.embedding-pipeline > i { display:grid; place-items:center; color:var(--coral); font-size:22px; font-style:normal; }
.embedding-pipeline span,.vector-step span { color:var(--muted); font:9px var(--mono); text-transform:uppercase; }
.embedding-pipeline strong { margin:9px 0 7px; font:600 21px var(--display); overflow-wrap:anywhere; }
.embedding-pipeline small { margin-top:auto; color:var(--muted); font-size:10px; }
.embedding-pipeline .embedding-result { border-color:var(--teal); background:var(--teal-soft); }
.embedding-result strong { color:var(--teal); font:13px var(--mono); }
.coordinate-question { display:grid; grid-template-columns:180px 1fr; gap:10px 24px; align-items:start; padding:22px; border-left:4px solid var(--yellow); background:#fff9e9; }
.coordinate-question .eyebrow { grid-row:1 / span 2; }
.coordinate-question h3 { margin:0; font:600 25px var(--display); }
.coordinate-question p { margin:0; color:var(--muted); font-size:13px; }
.training-loop { grid-column:2; display:flex; align-items:center; gap:10px; margin-top:5px; color:#8b681e; font:10px var(--mono); }
.training-loop b { padding:8px 10px; border:1px solid #e4c46f; background:#fffdf8; font-weight:500; }
.training-loop i { font-style:normal; }
.embedding-clarifiers { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:18px; border:1px solid var(--line); background:var(--line); }
.embedding-clarifiers div { padding:18px; background:var(--white); }
.embedding-clarifiers b { font:600 17px var(--display); }
.embedding-clarifiers p { margin:6px 0 0; color:var(--muted); font-size:12px; }
.bank-figure { margin:26px 0 0; border:1px solid var(--line); background:#fff; }
.bank-figure img { display:block; width:100%; height:auto; }
.bank-figure figcaption { padding:11px 14px; color:var(--muted); font:10px var(--mono); }
.context-workbench { margin-top:16px; padding:20px; border:1px solid var(--line); background:#fff; }
.starting-lookup { display:flex; align-items:baseline; gap:14px; margin-top:16px; padding:12px 15px; border-left:3px solid var(--ink); background:#fbf8f0; }
.starting-lookup span { color:var(--muted); font:9px var(--mono); text-transform:uppercase; }
.starting-lookup b { font:11px var(--mono); }
.starting-lookup small { margin-left:auto; color:var(--muted); font:9px var(--mono); white-space:nowrap; }
.context-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.context-choices .bank-card { display:grid; grid-template-columns:26px 1fr; gap:3px 8px; min-height:91px; padding:13px; text-align:left; transform:none; box-shadow:none; }
.context-choices .bank-card:hover,.context-choices .bank-card.active { transform:none; box-shadow:inset 4px 0 var(--teal); }
.context-choices .bank-card > span { grid-row:1 / span 2; color:var(--coral); font:9px var(--mono); }
.context-choices .bank-card strong { font:600 15px/1.25 var(--display); }
.context-choices .bank-card small { color:var(--muted); font:9px var(--mono); }
.vector-story { display:grid; grid-template-columns:1fr 32px 1fr 32px 1fr; gap:9px; align-items:center; margin-top:16px; }
.vector-step { min-width:0; min-height:112px; padding:16px; border:1px solid var(--line); background:#fbf8f0; }
.vector-step b { display:block; margin-top:9px; font:12px var(--mono); overflow-wrap:anywhere; }
.vector-step small { display:block; margin-top:8px; color:var(--muted); font-size:10px; }
.vector-step.delta { border-color:#e9b1a5; background:var(--coral-soft); }
.vector-step.contextual { border-color:#9bcfc6; background:var(--teal-soft); }
.vector-step.delta b { color:var(--coral); }.vector-step.contextual b { color:var(--teal); }
.vector-disclaimer { margin:13px 0 0; padding-top:13px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.attention-reveal { display:grid; grid-template-columns:.8fr 1.2fr; gap:30px; align-items:center; margin-top:18px; padding:24px; border:1px solid var(--teal); background:var(--teal-soft); }
.attention-reveal h3 { margin:5px 0 6px; font:600 25px var(--display); }.attention-reveal p { margin:0; color:var(--muted); font-size:13px; }
.reveal-steps { display:flex; align-items:center; justify-content:flex-end; gap:9px; }
.reveal-steps span { display:flex; align-items:center; gap:7px; min-height:58px; padding:10px; border:1px solid #9bcfc6; background:#fff; font:10px var(--mono); }
.reveal-steps b { display:grid; place-items:center; width:20px; height:20px; background:var(--teal); color:#fff; font-weight:500; }.reveal-steps i { color:var(--teal); font-style:normal; }

/* Historical bottleneck */
.rnn-primer { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-bottom:16px; border:1px solid var(--line); background:var(--line); }
.rnn-primer div { padding:18px; background:#fffdf8; }.rnn-primer span { color:var(--coral); font:11px var(--mono); text-transform:uppercase; }.rnn-primer p { margin:7px 0 0; color:var(--muted); font-size:12px; }
.architecture-panel { min-width:0; }
.state-labels { display:flex; justify-content:space-between; gap:12px; margin-top:20px; color:var(--muted); font:9px var(--mono); }
.recurrent-strip { display:grid; grid-template-columns:1fr 14px 1fr 14px 1fr 14px 1.2fr; gap:4px; align-items:center; margin-top:10px; }
.recurrent-strip div { display:grid; place-items:center; min-width:0; min-height:65px; padding:7px; border:1px solid var(--ink); background:#fbf8f0; text-align:center; }
.recurrent-strip b { font:11px var(--mono); overflow-wrap:anywhere; }.recurrent-strip small { color:var(--muted); font:9px var(--mono); }.recurrent-strip i { color:var(--coral); font-style:normal; text-align:center; }
.bottleneck-route { display:grid; grid-template-columns:1fr 24px 1.4fr 24px 1fr; gap:5px; align-items:center; margin:22px 0 10px; text-align:center; }
.bottleneck-route span { color:var(--muted); font:9px var(--mono); }.bottleneck-route i { color:var(--coral); font-style:normal; }
.bottleneck-route strong { padding:12px 7px; border:2px solid var(--coral); background:var(--coral-soft); color:var(--coral); font:12px var(--mono); }.bottleneck-route small { color:var(--muted); font-size:9px; font-weight:400; }
.decoder-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:17px; }.decoder-strip span { padding:8px 4px; border-top:2px solid var(--ink); background:#f2eee5; text-align:center; font:9px var(--mono); }
.alignment-tabs { display:flex; margin-top:17px; }.alignment-tabs button { flex:1; min-height:35px; padding:7px; border:1px solid var(--line); background:#fff; color:var(--muted); font:9px var(--mono); cursor:pointer; }.alignment-tabs button + button { border-left:0; }.alignment-tabs button.active { border-color:var(--teal); background:var(--teal-soft); color:var(--teal); }
.alignment-diagram { display:block; width:100%; min-height:245px; margin-top:8px; border:1px solid var(--line); background:#fbf8f0; }
.alignment-diagram rect { fill:#fff; stroke:#17202b; stroke-width:1.5; }.alignment-diagram text { fill:#17202b; font:600 12px var(--mono); text-anchor:middle; }.alignment-diagram .token-name { fill:#5f6b72; font-size:9px; font-weight:400; }
.alignment-lines path { fill:none; stroke:var(--teal); transition:stroke-width .2s,opacity .2s; }.weight-labels text { fill:var(--teal); font-size:10px; }.context-node rect { fill:var(--teal-soft); stroke:var(--teal); }.query-node rect { fill:var(--coral-soft); stroke:var(--coral); }.query-path { fill:none; stroke:var(--coral); stroke-width:2; stroke-dasharray:5 4; }
.alignment-readout { margin-top:10px; padding:12px; border-left:3px solid var(--teal); background:#effaf8; }.alignment-readout code { color:var(--teal); }.alignment-readout p { margin:6px 0 0; color:var(--muted); font-size:11px; }
.bottleneck-comparison { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }.bottleneck-comparison div { padding:16px; border-top:3px solid var(--yellow); background:#fff9e9; }.bottleneck-comparison b { font:600 16px var(--display); }.bottleneck-comparison p { margin:6px 0 0; color:var(--muted); font-size:12px; }

/* Retrieval bridge and runtime distinction */
.qkv-bridge { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.qkv-bridge article { position:relative; min-height:230px; padding:22px; border:1px solid var(--line); background:#fff; }.qkv-letter { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--teal); background:var(--teal-soft); color:var(--teal); font:600 18px var(--mono); }.qkv-bridge h3 { margin:15px 0 7px; font:600 21px var(--display); }.qkv-bridge p { color:var(--muted); font-size:12px; }.qkv-example { position:absolute; right:20px; bottom:20px; left:20px; padding-top:11px; border-top:1px solid var(--line); color:var(--coral); font:10px var(--mono); }
.retrieval-rule { display:grid; grid-template-columns:180px 1fr; gap:8px 22px; align-items:center; margin:15px 0 26px; padding:18px; border:1px solid var(--teal); background:var(--teal-soft); }.retrieval-rule span { grid-row:1 / span 2; color:var(--teal); font:10px var(--mono); text-transform:uppercase; }.retrieval-rule strong { font:600 17px var(--display); }.retrieval-rule p { margin:0; color:var(--muted); font-size:11px; }
.learned-runtime { display:grid; grid-template-columns:1fr 50px 1fr; gap:14px; align-items:stretch; margin-top:21px; }.learned-runtime > div { padding:19px; border:1px solid #435669; background:#1d3042; }.learned-runtime > i { display:grid; place-items:center; color:var(--yellow); font:10px var(--mono); font-style:normal; text-transform:uppercase; }.learned-runtime span { color:var(--yellow); font:9px var(--mono); text-transform:uppercase; }.learned-runtime h3 { margin:7px 0; color:#fff; font:600 20px var(--display); }.learned-runtime p { margin:0; color:#bdc8ce; font-size:12px; }.learned-runtime code { background:#30475a; color:#f8d67d; }
.creation-note { margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.creation-note p { margin:7px 0 0; color:var(--muted); font-size:12px; }

@media (max-width:900px) { .topbar nav { display:none; }.hero-grid,.architecture,.type-grid,.systems-grid,.heads-diagram,.sentence-attention,.dark-reading,.notes-grid,.head-reading,.worked-head-grid,.head-checks { grid-template-columns:1fr; }.head-stage { border-right:0; border-bottom:1px solid var(--line); flex-wrap:wrap; }.head-explanation { min-height:250px; }.bank-grid { grid-template-columns:1fr 1fr; }.slide-layout,.slide-layout.three,.multi-slide,.mask-slide-grid { grid-template-columns:1fr; }.shape-row { grid-template-columns:1fr 1fr; }.formula-line { grid-template-columns:25px 1fr; }.formula-line small { grid-column:2; }.section-heading { grid-template-columns:70px 1fr; }.context-explain { grid-template-columns:1fr 150px 25px 150px; } }
@media (max-width:600px) { .page-width { width:min(100% - 30px,1180px); }.topbar { padding:0 15px; }.hero { padding-top:65px; }.hero-equation { padding:22px; }.big-equation { font-size:23px; }.bank-grid { grid-template-columns:1fr; }.context-explain { grid-template-columns:1fr; }.context-arrow { transform:rotate(90deg); }.slide-stage { min-height:470px; padding:22px; }.formula-complete { font-size:13px; }.shape-row { grid-template-columns:1fr; } }

@media (max-width:900px) {
  .embedding-pipeline { grid-template-columns:1fr 1fr; }
  .embedding-pipeline > i { display:none; }
  .attention-reveal { grid-template-columns:1fr; }
  .reveal-steps { justify-content:flex-start; }
  .qkv-bridge { grid-template-columns:1fr; }
  .qkv-bridge article { min-height:190px; }
  .bottleneck-comparison { grid-template-columns:1fr; }
}

@media (max-width:600px) {
  h1 { font-size:48px; }
  .section-heading h2 { font-size:34px; }
  .entry-flow { display:grid; grid-template-columns:1fr; }
  .entry-flow i { transform:rotate(90deg); text-align:center; }
  .embedding-pipeline,.embedding-clarifiers,.context-choices,.rnn-primer { grid-template-columns:1fr; }
  .coordinate-question { grid-template-columns:1fr; }
  .coordinate-question .eyebrow { grid-row:auto; }
  .training-loop { grid-column:1; flex-wrap:wrap; }
  .vector-story { grid-template-columns:1fr; }
  .starting-lookup { align-items:flex-start; flex-direction:column; gap:5px; }
  .starting-lookup small { margin-left:0; }
  .vector-story .context-arrow { min-height:24px; }
  .reveal-steps { display:grid; grid-template-columns:1fr; }
  .reveal-steps i { transform:rotate(90deg); text-align:center; }
  .recurrent-strip { grid-template-columns:repeat(4,1fr); }
  .recurrent-strip i { display:none; }
  .state-labels { display:grid; }
  .alignment-diagram { min-height:0; }
  .retrieval-rule,.learned-runtime { grid-template-columns:1fr; }
  .retrieval-rule span { grid-row:auto; }
  .learned-runtime > i { min-height:25px; }
  .portrait-toolbar { grid-template-columns:34px 1fr 34px; gap:9px; padding:14px; }
  .portrait-toolbar h3 { font-size:18px; }
  .portrait-steps { max-height:780px; padding:12px 12px 760px; }
  .portrait-step { padding:14px; }
  .portrait-equation { display:grid; grid-template-columns:1fr; justify-items:center; overflow:visible; }
  .portrait-dots { grid-template-columns:1fr; }
  .portrait-dots button,.portrait-dots button:nth-child(3n) { border-right:0; border-bottom:1px solid var(--line); }
  .portrait-dots button:last-child { border-bottom:0; }
  .head-operation-table > div { grid-template-columns:1fr; gap:5px; }
}