:root{color-scheme:light;--paper:#e8e4db;--ink:#3d3935;--muted:#7a6854;--border:#c2bdb0;--panel:#ddd9cf;--accent:#9d7b5a;--warm:#e7d3bf;--result:#dfe0c4;--code:#35322e;--code-text:#d6d2c7}:root[data-theme=dark]{color-scheme:dark;--paper:#1d1b18;--ink:#d9d2c6;--muted:#a99b88;--border:#514a40;--panel:#27241f;--accent:#b49a76;--warm:#3b3025;--result:#303124;--code:#12110f;--code-text:#d8d0c2}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font-family:Georgia,serif}.demo{max-width:600px;margin:auto;padding:20px}header{text-align:center}.eyebrow{margin:0;color:var(--muted);font:600 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.12em}h1{margin:6px 0 18px;font-size:22px;font-weight:500}.flow{display:grid;grid-template-columns:1fr 24px 1fr;grid-template-rows:auto 18px auto;align-items:stretch;gap:8px}.panel{position:relative;padding:15px;background:var(--panel);border:1.5px solid var(--border);border-radius:4px;transition:transform .2s,border-color .2s,box-shadow .2s,background .2s}.panel.active{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}.panel h2{margin:0 0 10px;text-align:center;font-size:16px;font-weight:600}.number{position:absolute;top:7px;left:9px;color:var(--muted);font:11px ui-monospace,SFMono-Regular,Menlo,monospace}.context{grid-area:1/1/2/4}.context pre{min-height:126px;margin:0;padding:12px;overflow:auto;white-space:pre-wrap;color:var(--code-text);background:var(--code);border-radius:3px;font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}.context+.arrow{grid-area:2/2;height:18px;line-height:18px;transform:rotate(90deg)}.transformer{grid-area:3/1;text-align:center;min-height:175px}.transformer+.arrow{grid-area:3/2}.prediction{grid-area:3/3;text-align:center;min-height:175px}.arrow{align-self:center;text-align:center;color:var(--muted);font:22px ui-monospace,SFMono-Regular,Menlo,monospace}.layers{display:flex;flex-direction:column;gap:6px;margin:18px auto 12px;width:76%}.layers i{display:block;height:13px;background:var(--warm);border:1px solid var(--accent);border-radius:2px}.transformer.active .layers i{animation:pulse .7s ease-in-out alternate infinite}.transformer p,.prediction p{margin:8px 0 0;color:var(--muted);font:10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}.prediction strong{display:flex;align-items:center;justify-content:center;min-height:58px;margin:18px 0 10px;padding:7px;color:var(--ink);background:var(--warm);border:1px solid var(--accent);border-radius:3px;font:600 15px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}.prediction.done{background:var(--result)}.return-path{display:flex;align-items:center;justify-content:center;gap:8px;margin:7px 0 0;color:var(--border);font:600 10px ui-monospace,SFMono-Regular,Menlo,monospace;transition:color .2s}.return-path b{font-size:20px}.return-path.active{color:var(--accent)}.caption{min-height:48px;margin:9px auto 5px;max-width:550px;text-align:center;font-size:14px;line-height:1.4}.controls{display:flex;justify-content:center;gap:7px}.controls button{min-width:96px;padding:8px 10px;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:3px;font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer}.controls button:hover:not(:disabled),.controls button:focus-visible{color:var(--ink);border-color:var(--accent)}.controls button:disabled{opacity:.38;cursor:default}.controls .watch{color:var(--accent)}@keyframes pulse{to{transform:translateX(3px);background:var(--panel)}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--paper:#1d1b18;--ink:#d9d2c6;--muted:#a99b88;--border:#514a40;--panel:#27241f;--accent:#b49a76;--warm:#3b3025;--result:#303124;--code:#12110f;--code-text:#d8d0c2}}@media(max-width:480px){.demo{padding:13px}h1{font-size:19px}.flow{grid-template-columns:1fr;grid-template-rows:auto 14px auto 14px auto}.context{grid-area:1/1}.context+.arrow{grid-area:2/1}.transformer{grid-area:3/1;min-height:135px}.transformer+.arrow{grid-area:4/1;transform:rotate(90deg)}.prediction{grid-area:5/1;min-height:120px}.context pre{min-height:118px}.layers{margin:12px auto 8px}.prediction strong{min-height:44px;margin:11px 0 7px}.caption{min-height:63px;font-size:13px}.controls{gap:5px}.controls button{min-width:0;flex:1;padding:8px 4px;font-size:10px}}@media(prefers-reduced-motion:reduce){.panel,.return-path{transition:none}.transformer.active .layers i{animation:none}}