:root{--bg:#f4f5f2;--panel:#fff;--line:#d9ddd8;--text:#17201d;--muted:#66706c;--accent:#176b5b;--accent-light:#dcece7}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font:16px/1.45 system-ui,-apple-system,sans-serif}main{max-width:1280px;margin:auto;padding:34px 28px 64px}header{justify-content:space-between;align-items:flex-end;margin-bottom:24px;display:flex}h1{margin:4px 0 10px;font-size:clamp(28px,4vw,46px);line-height:1}h2{margin:0 0 16px;font-size:18px}p{color:var(--muted);margin:4px 0}.eyebrow{letter-spacing:.12em;color:var(--accent);font:12px ui-monospace,monospace}.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;margin-bottom:20px;padding:20px}.section-title{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.section-title h2{margin:0}.section-title span,.shapes{color:var(--muted);font:13px ui-monospace,monospace}.section-title span.active{color:var(--accent);font-weight:700}.shapes{text-align:right}.shapes span{display:block}button,select{height:40px;font:inherit;color:var(--text);background:#fff;border:1px solid #bfc5c1;border-radius:5px;padding:0 12px}button{background:var(--accent);border-color:var(--accent);color:#fff;cursor:pointer;font-weight:600}button.secondary{color:var(--text);background:#fff}button:disabled{opacity:.4;cursor:default}label{color:var(--muted);gap:6px;font-size:13px;display:grid}.control-token-row{flex-wrap:wrap;align-items:flex-end;gap:24px;display:flex}.controls{gap:14px;display:flex}.controls label{min-width:130px}.token-control-group{flex:1;gap:6px;display:grid}.token-control-group>span{color:var(--muted);font-size:13px}.token-actions,.tokens{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.token-actions>.tokens{flex:1}.token{border:1px solid var(--line);width:46px;height:46px;color:var(--text);background:#fff;border-radius:50%;padding:0}.token.selected{background:var(--accent);border-color:var(--accent);color:#fff}.head-panels{grid-template-columns:1fr 1fr;gap:20px;display:grid}.head-panels>.panel{min-width:0}.plot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.plot-grid h2{margin-bottom:16px}.plot-grid svg{aspect-ratio:1;border:1px solid var(--line);background:#fbfcfa;width:100%}.plot-heading{align-items:start;gap:8px;display:flex}.axis{stroke:#ccd1ce;stroke-width:1px}.vector-label{font:13px ui-monospace,monospace}.legend{fill:var(--muted);font:12px system-ui,sans-serif}.hidden-vector{border:1px solid var(--line);background:#fff;border-radius:3px;gap:2px;padding:2px;display:grid}.hidden-vector i{border-radius:1px;width:4px;height:12px;display:block}.live-values{border-top:1px solid var(--line);margin-top:20px;padding-top:16px;overflow-x:auto}table{border-collapse:collapse;border:1px solid var(--line);background:#fff;width:100%;font:14px ui-monospace,SFMono-Regular,monospace}th,td{text-align:center;border:1px solid var(--line);white-space:nowrap;padding:9px 7px}th{color:var(--muted);background:#f7f8f6;font-weight:500}.heat{background:rgba(23,107,91,var(--heat))}.override-controls{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;grid-template-areas:"title title""qx qy""clear clear";align-items:end;gap:16px;margin-top:20px;padding-top:16px;display:grid}.override-controls .section-title{grid-area:title;margin:0}.override-controls label{grid-template-columns:30px 1fr 44px;align-items:center}.override-controls label:first-of-type{grid-area:qx}.override-controls label:last-of-type{grid-area:qy}.override-controls button{grid-area:clear;justify-self:end}.model-pipeline{grid-template-columns:minmax(130px,.6fr) minmax(130px,auto) minmax(300px,330px) minmax(130px,auto) minmax(250px,.9fr) auto minmax(100px,.45fr);align-items:stretch;gap:10px;display:grid;overflow-x:auto}.flow-card{border:1px solid var(--line);border-radius:6px;min-width:130px;padding:12px}.flow-card.active{border-color:var(--accent);background:var(--accent-light)}.flow-card strong,.flow-card small{display:block}.flow-omission{min-width:130px;color:var(--muted);justify-content:center;align-items:center;gap:7px;display:flex}.flow-omission span{font-size:20px}.flow-omission small{white-space:nowrap}.flow-arrow{color:var(--muted);align-self:center;font-size:22px}.flow-tokens{grid-auto-columns:28px;grid-auto-flow:column;justify-content:start;column-gap:10px;display:grid}.flow-chip{border:1px solid var(--line);border-radius:4px;place-items:center;width:28px;height:24px;font:12px ui-monospace,monospace;display:inline-grid}.flow-chip.placeholder{visibility:hidden}.flow-chip.computed{border-color:var(--accent);background:var(--accent-light);color:var(--accent)}.flow-chip.cached{color:var(--muted);background:#eef0ed;border-color:#c9ceca}.flow-chip.selected{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text);font-weight:700}.qkv-lanes{gap:7px;margin-top:10px;display:grid}.qkv-row{grid-template-columns:22px 1fr;align-items:start;gap:6px;display:grid}.qkv-row>b{color:var(--muted);padding-top:4px;font:12px ui-monospace,monospace}.qkv-row.output-row{border-top:1px solid var(--line);margin-top:9px;padding-top:8px}.flow-input-tokens{grid-template-columns:repeat(2,46px);justify-content:center;gap:8px;margin-top:10px;display:grid}.flow-input-tokens.single{grid-template-columns:46px;margin:auto}.input-card,.lm-card,.output-card{flex-direction:column;display:flex}.flow-input-token,.output-token{border:1px solid var(--line);width:46px;height:46px;color:var(--text);background:#fff;border-radius:50%;place-items:center;font:700 13px ui-monospace,monospace;display:grid}.flow-input-token.selected,.output-token{border-color:var(--accent);background:var(--accent);color:#fff}.flow-output-tokens{grid-auto-columns:28px;grid-auto-flow:column;column-gap:10px;display:grid}.flow-output-column{align-content:start;justify-items:center;gap:5px;width:28px;display:grid}.lm-body{grid-template-columns:28px auto minmax(0,1fr);align-items:center;gap:10px;margin:auto 0;display:grid}.lm-arrow{text-align:center;color:var(--muted)}.logits{gap:4px;display:grid}.logit-row{color:var(--muted);grid-template-columns:28px 1fr;align-items:center;gap:6px;font:11px ui-monospace,monospace;display:grid}.logit-row>b{text-align:right;font-weight:500}.logit-track{background:#ffffffb8;border-radius:4px;height:8px;overflow:hidden}.logit-track i{border-radius:inherit;background:#9aa5a0;height:100%;display:block}.logit-row.next{color:var(--accent);font-weight:700}.logit-row.next .logit-track i{background:var(--accent)}.output-card{align-items:center;min-width:100px}.output-card>strong{align-self:flex-start}.output-token{margin:auto}.flow-legend{border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;align-items:center;gap:20px;margin-top:14px;padding-top:12px;font-size:12px;display:flex}.flow-legend span{align-items:center;gap:7px;display:flex}.flow-legend i{border:1px solid var(--line);border-radius:3px;width:17px;height:17px;display:inline-block}.flow-legend i.computed{border-color:var(--accent);background:var(--accent-light)}.flow-legend i.selected{border-color:var(--text);box-shadow:0 0 0 2px var(--text)}.flow-legend i.cached{background:#eef0ed;border-color:#c9ceca}@media (max-width:800px){main{padding:22px 14px}header{display:block}.shapes{text-align:left;margin-top:15px}.control-token-row{align-items:stretch}.controls{width:100%}.controls>*{flex:1}.head-panels,.plot-grid{grid-template-columns:1fr}.override-controls{grid-template-columns:1fr;grid-template-areas:"title""qx""qy""clear"}.model-flow-panel{padding:10px}.model-pipeline{grid-template-columns:minmax(0,1fr);overflow:visible}.flow-omission{flex-direction:column;min-width:0;min-height:72px}.flow-omission span,.model-pipeline>.flow-arrow{transform:rotate(90deg)}.model-pipeline>.flow-arrow{justify-self:center}.flow-input-tokens{grid-template-columns:repeat(3,46px)}.flow-input-tokens.single{grid-template-columns:46px}}