@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');
*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#070c13;color:#e8edf2;font-family:'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,select{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #f4bc7c;outline-offset:5px}[hidden]{display:none!important}h1,h2,p{margin:0}.header,main{width:min(1400px,calc(100% - 88px));margin:auto}.header{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff17;gap:20px}.brand{font:500 25px 'Space Grotesk',sans-serif;letter-spacing:-1px}.brand span{color:#eabb86}.edition,.back{font-size:10px;letter-spacing:1px;color:#b2bdca}.back:hover{color:#f4bc7c}.intro{display:flex;align-items:end;justify-content:space-between;gap:40px;padding:46px 0 36px}.eyebrow{font:10px/1.7 'Space Grotesk',monospace;letter-spacing:1.8px;color:#daaf7e}h1{font-size:clamp(34px,4vw,55px);line-height:1.06;letter-spacing:-2px;font-weight:500;margin-top:15px}h1 span{color:#8eabbf}.intro-text{font-size:13px;line-height:1.8;color:#a2b0c0;padding-bottom:3px}.experience{border:1px solid #ffffff18;background:#0a111b}.scene{position:relative;height:540px;overflow:hidden;background:radial-gradient(ellipse at 42% 48%,#1b293550,#080e1700 65%)}canvas{display:block;width:100%;height:100%}.scene-top,.scene-bottom{position:absolute;left:26px;right:26px;display:flex;justify-content:space-between;gap:20px;font:9px/1.5 'Space Grotesk',monospace;letter-spacing:1.5px;pointer-events:none;color:#b0bfd0}.scene-top{top:22px}.scene-bottom{bottom:20px;color:#738b9e}.live-indicator{display:flex;align-items:center;gap:9px}.live-indicator i{height:5px;width:5px;border-radius:50%;background:#eabb86;box-shadow:0 0 10px #eabb86}.organic-label{position:absolute;left:9%;bottom:17%;display:flex;flex-direction:column;gap:10px;pointer-events:none}.organic-label span{font-size:13px;color:#e3b784}.organic-label b{display:block;width:90px;border-top:1px solid #d6ae7350}.organic-label small{font-size:10px;color:#8da2b5}.math-label{position:absolute;bottom:14%;left:0;right:0;text-align:center;pointer-events:none}.math-label span,.math-label small{display:block;font-size:11px;color:#8da2b5;line-height:1.8}.math-label strong{font:400 27px 'Space Grotesk',sans-serif;display:block;margin:10px;color:#eac19b}.network-label{position:absolute;left:11%;right:11%;bottom:16%;display:flex;justify-content:space-between;font:9px 'Space Grotesk',monospace;letter-spacing:1.4px;color:#a5c7db}.transformer-overlay{position:absolute;inset:70px 10% 60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.diagram-note,.diagram-output{font:9px/1.8 'Space Grotesk',monospace;letter-spacing:1px;color:#99afc4;text-align:center}.embedding{display:flex;align-items:center;justify-content:center;gap:17px;font-size:10px;color:#c0cbd7}.embedding>div{display:flex;gap:5px}.embedding i{font-style:normal;border:1px solid #e5b98755;background:#0c1520;padding:5px 17px;border-radius:3px;color:#e6bd8b}.transformer-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;width:100%;max-width:790px}.transformer-block{padding:15px;border:1px solid #789bb666;background:#101e2cf0;position:relative;box-shadow:8px 8px 0 #395a7415}.transformer-block:not(:last-child):after{content:'→';position:absolute;right:-22px;top:50%;color:#d8b381}.transformer-block>span{font:9px 'Space Grotesk',monospace;letter-spacing:1.5px;color:#9eb3c9;display:block;margin-bottom:14px}.attention{padding:10px 5px;border:1px solid #77b3c54d;background:#1c384247;font-size:11px;text-align:center;color:#afd2e0}.attention-matrix{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;width:65px;height:49px;margin:10px auto 0}.attention-matrix i{background:#b6dbea;border-radius:1px}.attention-matrix i.masked{background:#56758d11;border:1px solid #56758d18}.transformer-block>b{display:block;text-align:center;font-size:12px;font-weight:400;padding:4px;color:#839ab1}.mlp{padding:10px 4px;border:1px solid #dfb47e50;background:#44342047;color:#e8c397;font-size:11px;text-align:center}.transformer-block small{display:block;text-align:center;font-size:9px;color:#9cb0c3;margin-top:12px}.language-overlay{position:absolute;inset:90px 10% 80px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px}.token-context h2{font-size:clamp(26px,3.2vw,48px);font-weight:400;letter-spacing:-1.8px;margin:18px 0 24px}.caret{color:#eabb86;font-weight:400;font-size:.8em}.token-chips{display:flex;gap:7px}.token-chips span{background:#172a3b;border:1px solid #48627a;padding:10px 19px;border-radius:4px;color:#b6d0e4;font-size:13px}.token-context small{font-size:10px;color:#8499ae;display:block;margin-top:12px}.probabilities{background:#0a131fe8;border:1px solid #7799af30;padding:25px}.probabilities>.eyebrow{margin-bottom:26px;font-size:9px}.prob{display:grid;grid-template-columns:86px 1fr 36px;gap:12px;align-items:center;margin-block:16px;font-size:11px}.prob>b{text-align:right;font-weight:400;color:#b9c9d9}.prob>div{height:7px;background:#26374a}.prob i{display:block;height:100%;width:var(--amount);background:#88bdce}.prob:first-of-type i{background:#eabb86}.example-label{font-size:9px;color:#8ea3b7;margin-top:22px;line-height:1.6}.transport{display:flex;align-items:center;gap:15px;padding:19px 24px;border-top:1px solid #ffffff14}.transport button{color:#becbdb;border:1px solid #5b72874a;background:#14202d;font-size:11px;padding:11px 18px;border-radius:3px;min-width:86px}.transport button:hover{background:#24394a}.transport #play{color:#172333;background:#eabb86;border-color:#eabb86}.transport #restart{min-width:0;font-size:16px;padding:8px 12px}.transport #restart span{font-size:11px;margin-left:5px}.timeline-label{flex:1;min-width:35px}.timeline-label input{width:100%;accent-color:#eabb86;cursor:ew-resize}.speed-label{display:flex;align-items:center;gap:8px;font-size:10px;color:#9fb0c4}.speed-label select{background:#121f2d;color:#c7d3e0;border:1px solid #425d7350;border-radius:3px;padding:8px;font-size:11px}.chapters{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #ffffff14}.chapters button{border:0;border-right:1px solid #ffffff14;background:#0c151f;color:#91a4b9;text-align:left;padding:20px;font-size:12px;position:relative}.chapters button:last-child{border-right:0}.chapters button span{font:10px 'Space Grotesk',monospace;color:#7591a8;margin-right:12px}.chapters button[aria-pressed=true]{background:#1d2b36;color:#f0cfaa;box-shadow:inset 0 2px #eabb86}.chapters button[aria-pressed=true] span{color:#eabb86}.chapters button:hover{background:#1c2a39}.explanation{display:grid;grid-template-columns:1fr 3fr;gap:40px;padding:38px 0}.explanation h2{font-size:24px;font-weight:400;letter-spacing:-.5px;margin-bottom:13px}.explanation div>p{font-size:13px;line-height:1.9;color:#a9b7c8;max-width:770px}footer{border-top:1px solid #ffffff18;padding:22px 0 35px;display:flex;justify-content:space-between;gap:35px;color:#788fa4;font-size:10px;line-height:1.8}footer p{max-width:750px}footer a{white-space:nowrap;color:#aabac9;text-decoration:underline;text-underline-offset:4px}.sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:950px){.header,main{width:calc(100% - 48px)}.edition{display:none}.intro-text{font-size:11px}.scene{height:500px}.language-overlay{inset-inline:6%;gap:30px}.probabilities{padding:18px}.prob{grid-template-columns:80px 1fr 32px;gap:8px;font-size:10px}.transformer-overlay{inset-inline:7%}.transformer-blocks{gap:20px}.transformer-block{padding:10px}.transformer-block:not(:last-child):after{right:-17px}.chapters button{padding:17px 12px;font-size:11px}.chapters button span{margin-right:6px}footer{display:block}footer a{display:block;margin-top:15px}.explanation{grid-template-columns:1fr 3fr;gap:20px}}
@media(max-width:620px){.header,main{width:calc(100% - 28px)}.header{height:75px}.brand{font-size:22px}.back{font-size:9px;letter-spacing:0}.intro{display:block;padding:28px 0}.intro h1{font-size:36px;letter-spacing:-1.3px}.intro-text{margin-top:20px;font-size:12px}.eyebrow{font-size:9px}.scene{height:480px}.scene-top,.scene-bottom{left:15px;right:15px;font-size:7px;letter-spacing:.6px;gap:10px}.scene-top{top:17px}.scene-bottom{bottom:16px}.scene-bottom>span:first-child{max-width:145px;line-height:1.6}.organic-label{left:8%;bottom:18%}.organic-label small{font-size:9px}.math-label strong{font-size:23px}.math-label{bottom:18%}.network-label{font-size:7px;letter-spacing:0;inset-inline:6%;bottom:20%}.transport{padding:14px 12px;gap:10px;flex-wrap:wrap}.transport button{padding:10px 12px;min-width:65px}.transport #restart span{display:none}.speed-label{font-size:0;gap:0}.timeline-label{order:3;flex-basis:100%;padding-top:4px}.speed-label{margin-left:auto}.chapters{grid-template-columns:repeat(5,minmax(0,1fr))}.chapters button{font-size:9px;letter-spacing:-.1px;padding:13px 3px;text-align:center}.chapters button span{display:block;margin:0 0 8px;font-size:9px}.explanation{display:block;padding-block:28px}.explanation h2{margin-top:14px;font-size:23px}.explanation div>p{font-size:12px}.transformer-overlay{inset:65px 5% 60px;gap:10px}.diagram-note{font-size:8px;letter-spacing:.4px}.transformer-blocks{gap:12px}.transformer-block{padding:8px 4px}.transformer-block>span{font-size:7px;letter-spacing:.5px;margin-bottom:10px}.transformer-block:not(:last-child):after{right:-11px;font-size:10px}.attention{font-size:8px;padding:8px 2px;line-height:1.5;min-height:100px}.attention-matrix{width:44px;height:36px;gap:2px}.mlp{font-size:8px;min-height:40px;display:grid;place-items:center;padding:7px 2px}.transformer-block small{font-size:7px;line-height:1.5;margin-top:9px}.embedding{gap:9px;font-size:9px}.embedding i{padding:5px 10px}.diagram-output{font-size:8px;letter-spacing:.3px}.language-overlay{inset:63px 7% 48px;grid-template-columns:1fr;gap:20px}.token-context h2{font-size:30px;margin:10px 0}.token-chips span{padding:6px 14px;font-size:11px}.token-context small{font-size:9px;margin-top:7px}.probabilities{padding:14px 18px}.probabilities>.eyebrow{margin-bottom:15px;font-size:8px}.prob{margin-block:12px}.example-label{margin-top:12px;font-size:8px}.live-indicator{gap:5px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.embedded .header,.embedded .intro,.embedded footer{display:none}.embedded main{width:100%;max-width:none}.embedded .experience{border:0}.embedded .explanation{padding:25px 28px}