@font-face { font-family: 'Archivo Variable'; src: url('./fonts/archivo.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono Variable'; src: url('./fonts/jetbrains-mono.woff2') format('woff2-variations'); font-weight: 100 800; font-style: normal; font-display: swap; }

:root { --page: #f6f6f6; --ink: #171717; --text: #606060; --line: #d5d5d5; --teal: #1b8992; --red: #ad3d31; --green: #18775c; --sans: 'Archivo Variable', Arial, Helvetica, sans-serif; --mono: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); }
.reveal { color: var(--text); font-family: var(--sans); font-size: 28px; font-weight: 450; }
.reveal .slides { text-align: left; }
.reveal .slides section { height: 900px; padding: 62px 72px; background: var(--page); overflow: hidden; }
.reveal .slides section::after { content: 'Slides: GPLv3+ / MIT'; position: absolute; left: 72px; bottom: 20px; color: var(--text); font: 12px var(--mono); }
.reveal h1, .reveal h2, .reveal h3, .reveal p, .reveal figure { margin: 0; }
.reveal h1, .reveal h2, .reveal h3 { color: var(--ink); font-family: inherit; font-weight: 500; letter-spacing: -.035em; text-transform: none; }
.reveal h1 { font-size: 66px; line-height: 1.05; }
.reveal h2 { font-size: 50px; line-height: 1.08; }
.reveal h3 { margin-bottom: 18px; font-size: 28px; }
.reveal p { line-height: 1.32; }
.reveal code { font-family: var(--mono); }
.reveal a { color: var(--teal); }
.subtitle { margin-top: 5px !important; color: var(--ink); font-size: 32px; font-style: italic; }

/* Title and transition slides are deliberately sparse. */
.title-slide { position: relative; }
.title-slide .subtitle { font-size: 37px; }
.title-meta { position: absolute; left: 72px; bottom: 78px; display: flex; gap: 130px; font-size: 19px; line-height: 1.38; }
.title-meta p:last-child { font-size: 17px; }
.meme-slide { text-align: center !important; }
.meme-slide h2 { margin-top: 28px; }
.meme-slide .subtitle { font-size: 30px; }
.meme-slide figure { margin: 42px auto 0; }
.meme-slide img { display: block; width: 660px; height: 500px; margin: 0 auto; object-fit: contain; }
.j-lens-release figure { margin-top: 22px; }.j-lens-release img { height: 430px; }.interesting-line { margin-top: 8px !important; color: var(--text); font-size: 20px; font-style: italic; }.j-lens-release .source { position: static; display: block; margin-top: 24px; font-size: 16px; }
.j-lens-plot { margin: 20px 0 0; }.j-lens-plot img { display: block; width: 100%; height: 610px; object-fit: contain; }.j-lens-plot figcaption { margin-top: 8px; color: var(--ink); font-size: 25px; font-style: italic; }

/* Default content page: ordinary text first, evidence second. */
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 62px; margin-top: 48px; }
.content-grid figure { margin: 0; }
.content-grid img { display: block; width: 300px; height: 515px; margin: 0 auto; object-fit: cover; object-position: top; }
.content-grid figcaption { width: 300px; margin: 12px auto 0; font-size: 16px; line-height: 1.28; }
.content-grid ul, .two-column ul { margin: 0; padding-left: 1.12em; }
.content-grid li { margin: 0 0 17px; padding-left: 8px; font-size: 29px; line-height: 1.32; }
.content-grid strong, .two-column strong { color: var(--text); font-weight: 720; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-top: 48px; }
.two-column ol { margin: 0; padding-left: 1.25em; }
.two-column li { margin-bottom: 18px; padding-left: 8px; line-height: 1.32; }
.compact { font-size: 23px; }
.compact li { margin-bottom: 13px; }
.small { margin-top: 26px !important; font-size: 20px; }
.plain-note { margin-top: 26px !important; font-size: 21px; line-height: 1.3 !important; }
.plain-note strong { color: var(--ink); }
.vector-equation { margin: 45px 0 34px; color: var(--ink); font: 34px var(--mono); letter-spacing: -.04em; }
.word2vec-figure { margin: 4px 0 0; }.word2vec-figure img { display: block; width: 100%; max-height: 360px; object-fit: contain; background: white; }.word2vec-figure figcaption { margin-top: 12px; font-size: 16px; line-height: 1.28; }

/* Evidence uses rules and type, rather than panels or cards. */
.reveal table { width: 100%; border-collapse: collapse; font-size: 22px; }
.reveal th, .reveal td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.reveal th { color: var(--text); font-weight: 700; }
.wide-table { margin-top: 54px; }
.wide-table th { font-size: 16px; }
.wide-table td { padding: 17px 12px; }
.conclusion-list { margin-top: 30px !important; }
.source { position: absolute; left: 72px; bottom: 50px; font-size: 18px; }

/* Simple diagrams: keep the implementation visible, not decorative. */
.model-run, .residual-diagram, .state-flow, .read-path { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 28px 0 32px; }
.model-run span, .residual-diagram span, .state-flow span, .read-path span { padding: 12px 15px; border: 1px solid var(--line); color: var(--ink); font: 17px var(--mono); }
.model-run b, .residual-diagram b, .state-flow b, .read-path b { color: var(--text); font-weight: 500; }
.state-flow strong { padding: 12px 15px; color: var(--ink); font: 17px var(--mono); }
.cache { display: flex; gap: 8px; margin: 34px 0; }
.cache span { padding: 14px 13px; border-bottom: 1px solid var(--ink); color: var(--ink); font: 17px var(--mono); }
.transformer-memory, .rwkv-memory { margin: 20px 0 28px; color: var(--ink); }
.transformer-memory > span, .rwkv-memory > span, .rwkv-memory > strong { display: block; width: 230px; padding: 10px 0; border-bottom: 1px solid var(--ink); font: 17px var(--mono); }
.transformer-memory > i, .rwkv-memory > i { display: block; margin: 8px 0; color: var(--text); font-size: 16px; font-style: normal; }
.transformer-memory > div { display: flex; flex-direction: column; gap: 5px; width: 230px; }
.transformer-memory > div span { padding: 6px 0 6px 16px; border-left: 2px solid var(--line); font: 16px var(--mono); }
.rwkv-memory > i { margin-left: 100px; font-size: 25px; }
.rwkv-memory > strong { color: var(--text); font-weight: 600; }
.residual-svg { display: block; width: 100%; height: 385px; margin: -6px 0 4px; }
.memory-svg { display: block; width: 100%; height: 365px; margin: -10px 0 8px; }
.logit-lens-svg { display: block; width: 100%; height: 390px; margin: -4px 0 0; }
.next-token-svg { display: block; width: 100%; height: 500px; margin: -10px 0 0; }
.wkv-operation-svg { display: block; width: 100%; height: 440px; margin: -12px 0 10px; }
.state-transplant-svg { display: block; width: 100%; height: 370px; margin: -10px 0 0; }
.token-embedding-svg { display: block; width: 100%; height: 420px; margin: -8px 0 0; }
.layernorm-rotation-svg { display: block; width: 100%; height: 360px; margin: -8px 0 0; }
.residual-svg .svg-stream, .memory-svg .svg-stream { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.logit-lens-svg .svg-stream { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.next-token-svg .svg-stream { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.residual-svg .svg-read, .memory-svg .svg-read { fill: none; stroke: var(--text); stroke-width: 1.8; }
.logit-lens-svg .svg-write { fill: none; stroke: var(--teal); stroke-width: 2.5; }
.residual-svg .svg-write { fill: none; stroke: var(--teal); stroke-width: 2.5; }
.residual-svg marker path, .memory-svg marker path, .logit-lens-svg marker path, .next-token-svg marker path { fill: var(--ink); }
.residual-svg .svg-node, .memory-svg .svg-node, .logit-lens-svg .svg-node, .next-token-svg .svg-node { fill: var(--page); stroke: var(--ink); stroke-width: 1.5; }
.residual-svg .svg-layer, .memory-svg .svg-layer, .logit-lens-svg .svg-layer, .next-token-svg .svg-layer { fill: #e8e8e8; stroke: var(--ink); stroke-width: 1.5; }
.residual-svg .svg-text, .memory-svg .svg-text, .logit-lens-svg .svg-text, .next-token-svg .svg-text { fill: var(--ink); font: 600 16px var(--mono); text-anchor: middle; }
.residual-svg .svg-label, .memory-svg .svg-label, .logit-lens-svg .svg-label, .next-token-svg .svg-label { fill: var(--text); font: 600 13px var(--sans); letter-spacing: .04em; }
.residual-svg .svg-note, .memory-svg .svg-note, .logit-lens-svg .svg-note, .next-token-svg .svg-note { fill: var(--text); font: 16px var(--sans); }
.logit-lens-svg .svg-bar, .next-token-svg .svg-bar { fill: var(--teal); }
.logit-lens-svg .logit-word, .next-token-svg .next-token-word { text-anchor: start; }
.read-path { margin-top: 34px; }
.read-path span { padding: 9px 10px; font-size: 14px; }
.vertical-residual { margin: 20px 0 28px; color: var(--ink); }
.vertical-residual > div { display: flex; align-items: center; gap: 12px; min-height: 46px; }
.vertical-residual span { display: inline-block; min-width: 185px; padding: 8px 0; border-bottom: 1px solid var(--ink); font: 17px var(--mono); }
.vertical-residual b { font-size: 22px; font-weight: 450; }
.vertical-residual strong { color: var(--text); font-size: 18px; font-weight: 600; }
.vertical-residual i { display: block; margin: 2px 0 2px 82px; color: var(--text); font-style: normal; font-size: 25px; }

/* Code is source material, not a UI component. */
.reveal pre { width: 100%; margin: 0; box-shadow: none; background: transparent; }
.reveal pre code, .reveal pre code.hljs { max-height: none; padding: 0; color: var(--ink); background: transparent; font-size: 18px; line-height: 1.42; }
.reveal pre code.hljs * { background: transparent; }
.reveal .hljs-comment, .reveal .hljs-quote { color: #555; }
.reveal .hljs-keyword, .reveal .hljs-selector-tag, .reveal .hljs-literal, .reveal .hljs-type { color: #6a2700; font-weight: 650; }
.reveal .hljs-string, .reveal .hljs-regexp, .reveal .hljs-attr, .reveal .hljs-template-tag { color: #075f43; }
.reveal .hljs-number, .reveal .hljs-symbol, .reveal .hljs-bullet { color: #174b8d; }
.reveal .hljs-title, .reveal .hljs-title.function_, .reveal .hljs-params { color: #1b1b1b; }
.reveal .hljs-built_in, .reveal .hljs-variable, .reveal .hljs-subst { color: #5b2378; }
.code-column { grid-template-columns: 1.08fr .92fr; gap: 50px; }
.timeline { margin-top: 38px; }
.timeline p { padding: 19px 0; border-bottom: 1px solid var(--line); font-size: 25px; }
.timeline code { display: inline-block; width: 85px; color: var(--teal); font-size: 19px; }
.fact { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 34px; }
.red { color: var(--red) !important; }.green { color: var(--green) !important; }
.equation { margin: 25px 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); text-align: center; font: 25px var(--mono); }
.small-equation { font-size: 19px; }

.meme-grid img { width: 300px; height: 400px; object-fit: contain; background: transparent; }
.meme-grid figcaption { width: 300px; }
.result { margin-top: 24px !important; }
.result img { display: block; width: 100%; height: 320px; object-fit: contain; background: #111; }
.result figcaption { margin-top: 8px; font-size: 16px; }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 15px; font-size: 18px; }
.limits { display: flex; gap: 45px; margin-top: 20px !important; padding-left: 1em !important; font-size: 18px; }
.limits li { padding-left: 5px; }

.closing-slide h2 { margin-bottom: 45px; }
.closing-slide > p { margin: 0 0 16px; color: var(--text); font-size: 31px; }
.closing-action { margin-top: 45px !important; color: var(--ink) !important; font-weight: 650; }
.closing-foot { position: absolute; left: 72px; bottom: 58px; display: flex; align-items: center; gap: 22px; font-size: 17px; }
.closing-foot img { width: 110px; height: 110px; }
.closing-foot span { font: 13px var(--mono); }
@media print { .reveal .slides section { box-shadow: none !important; } }