:root{color-scheme:dark;--bg:#0b1017;--panel:#111923;--border:#28313e;--muted:#9ba9bb;--mint:#9cf1d1;--purple:#b6a1ff;--text:#edf2f7;font-family:Inter,Segoe UI,Arial,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mint);outline-offset:5px}header{height:79px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 4.5%}.brand{color:var(--text);text-decoration:none;font-size:14px;letter-spacing:2px;font-weight:700;display:flex;align-items:center;gap:13px}.brand-icon{font-size:35px;color:var(--mint)}.brand-sub,.edition{font-size:12px;color:var(--muted);letter-spacing:1.5px;font-weight:400}main{max-width:1600px;margin:auto;padding:37px 4.5% 24px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font-size:12px;letter-spacing:1.8px;color:var(--mint);font-weight:600;margin:0 0 12px}h1{font-size:clamp(32px,3.5vw,54px);font-weight:450;letter-spacing:-2px;line-height:1.12;margin:0}h1 em{font-family:Georgia,serif;font-weight:400;color:var(--mint)}.subtitle{color:var(--muted);font-size:16px;margin:15px 0 0}.model-tag{font-size:12px;letter-spacing:1.3px;border-left:1px solid var(--border);padding:10px 0 10px 24px}.model-tag span{display:block;font-size:14px;letter-spacing:0;color:var(--muted);margin-top:8px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;border:1px solid var(--border);border-radius:12px;overflow:hidden}.viewport{position:relative;background:radial-gradient(ellipse at 50% 45%,#1b2c39 0,#101923 60%,#0d151e 100%);min-width:0;min-height:520px}.scene-top,.scene-bottom{position:absolute;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;z-index:2;gap:10px}.scene-top{top:20px;font-size:12px;letter-spacing:1.4px;color:var(--mint)}.subtle{border:0;background:transparent;color:var(--muted);font-size:13px;padding:8px}.scene-bottom{bottom:19px;font-size:12px;color:var(--muted);pointer-events:none}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin:0 6px 1px 12px}.dot:first-child{margin-left:0}.mint{background:var(--mint)}.purple{background:var(--purple)}#scene{position:absolute;inset:0}#scene canvas{width:100%;height:100%;display:block;touch-action:none}#loading{position:absolute;top:45%;left:10%;right:10%;text-align:center;color:var(--muted)}aside{background:var(--panel);padding:28px;border-left:1px solid var(--border)}.chapter{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:1.5px;color:var(--muted)}.chapter>span:first-child{font-family:Georgia,serif;color:var(--mint);font-size:35px;letter-spacing:-1px}h2{font-size:28px;letter-spacing:-.7px;font-weight:500;margin:20px 0 13px}.explanation{font-size:16px;line-height:1.65;color:#bdc8d5;margin:0 0 22px}.concept{border-left:2px solid var(--mint);padding:2px 0 2px 15px;margin-bottom:23px}.concept .eyebrow{font-size:11px}.concept p{margin:8px 0 0;font-family:Consolas,monospace;font-size:14px;line-height:1.6}.caveat{font-size:12px;line-height:1.5;color:#93a1b2;margin-top:23px}.token-list{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.token{padding:7px 9px;border:1px solid var(--border);border-radius:5px;color:#ccd6e2;background:#0b131e;font-size:14px}.token.selected{border-color:var(--mint);color:var(--mint);background:#17382f}.inspector-label{font-size:13px;color:var(--muted);margin:0 0 8px}.weights{display:grid;gap:7px;margin-top:13px}.weight{display:grid;grid-template-columns:35px 1fr 37px;align-items:center;gap:8px;font-size:12px}.track{background:#283240;height:5px;border-radius:4px;overflow:hidden}.fill{height:100%;background:var(--purple)}.weight span:last-child{text-align:right;color:var(--muted)}.transport{display:flex;align-items:center;gap:18px;padding:22px 0}.play{background:var(--mint);border:0;border-radius:6px;color:#10271e;padding:13px 17px;min-width:147px;font-size:14px;font-weight:600}.arrow{width:36px;height:36px;color:var(--text);background:transparent;border:1px solid var(--border);border-radius:50%;font-size:19px}.arrow:disabled{opacity:.3;cursor:default}.scrubber{flex:1}.scrubber label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:0 2px 5px}input[type=range]{width:100%;accent-color:var(--mint);cursor:pointer;height:15px}.speed-label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}select{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:5px;padding:7px;font-size:14px}#stages{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}#stages button{text-align:left;background:transparent;border:0;border-top:2px solid var(--border);color:var(--muted);padding:14px 7px;font-size:13px}#stages button span{display:block;font-size:11px;letter-spacing:1px;margin-bottom:9px}#stages button.active{border-color:var(--mint);color:var(--mint);background:linear-gradient(#9cf1d10c,transparent)}footer{display:flex;justify-content:space-between;gap:35px;border-top:1px solid var(--border);margin-top:22px;padding-top:21px;font-size:13px;color:var(--muted);line-height:1.6}footer p{max-width:760px;margin:0}footer strong{color:var(--text);margin-right:14px;font-weight:500}footer a{color:var(--muted);white-space:nowrap}button:hover{filter:brightness(1.2)}@media(min-width:1500px){.viewport{min-height:590px}aside{padding:35px}}@media(max-width:1050px){.workspace{grid-template-columns:minmax(0,1fr) 300px}.scene-bottom{flex-direction:column;align-items:flex-start;gap:9px}.model-tag{display:none}.brand-sub{display:none}aside{padding:22px}.viewport{min-height:570px}}@media(max-width:760px){header{height:62px}.edition{font-size:10px}.workspace{grid-template-columns:1fr}.viewport{min-height:400px}aside{border-left:0;border-top:1px solid var(--border)}main{padding-top:25px}.intro{margin-bottom:25px}h1{letter-spacing:-1px}.subtitle{line-height:1.5}.transport{gap:10px;flex-wrap:wrap}.play{min-width:135px}.scrubber{order:5;flex-basis:100%}.speed-label{margin-left:auto}#stages{grid-template-columns:repeat(4,1fr)}#stages button{font-size:12px;padding:12px 3px}footer{flex-direction:column;gap:14px}.scene-top,.scene-bottom{left:16px;right:16px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}