:root{color-scheme:dark;--bg:#0a111b;--panel:#111e2e;--text:#e6edf6;--muted:#a8b8ce;--line:#30445e;--accent:#58d7c2;--amber:#f7bb64;--blue:#79aefd}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;line-height:1.65}main{max-width:1280px;margin:auto;padding:28px}header{max-width:900px}h1{font-size:clamp(25px,4vw,40px);line-height:1.25;letter-spacing:-.04em;margin:10px 0 16px}h2{font-size:20px;line-height:1.4;margin:8px 0}h3{font-size:16px;margin:0 0 10px}p{margin:10px 0}.eyebrow{letter-spacing:.12em;font-size:12px;color:var(--accent);font-weight:700}.disclaimer,.hint,.legend,footer,.sub{font-size:13px;color:var(--muted)}.disclaimer{border-left:3px solid var(--amber);padding:8px 14px}.views,.tokens,.transport,.sectionline,.legend,footer{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.views{margin:24px 0 18px}.views button{flex:1}.input{border-block:1px solid var(--line);padding:16px 0}.sectionline{justify-content:space-between;margin-bottom:12px}.sectionline span{color:var(--muted);font:13px ui-monospace,monospace}button{font:inherit;font-size:14px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:8px;min-height:44px;padding:9px 14px;cursor:pointer}button:hover{border-color:var(--accent)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:3px}button[aria-pressed=true],.primary{background:var(--accent);color:#071c1b;border-color:var(--accent);font-weight:700}button:disabled{opacity:.4;cursor:default}.tokens button{display:flex;flex-direction:column;min-width:70px}.tokens small{font:11px ui-monospace,monospace}.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:20px 0 12px}.steps button{position:relative;text-align:left;padding:12px;font-size:13px}.steps button:not(:last-child):after{content:'→';position:absolute;right:-8px;top:50%;color:var(--accent);z-index:1}.steps small{display:block;opacity:.8;font-size:11px}.transport{margin-bottom:22px}.transport span{color:var(--muted);font-size:13px}.explanation{border-top:1px solid var(--line);padding-top:20px;min-height:180px}.explanation code{display:block;color:var(--accent);overflow-wrap:anywhere;font-size:14px;padding:10px 0;white-space:pre-wrap}.explanation p{color:var(--muted);max-width:1000px}.flow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.flow>div{min-width:0;flex:1 1 230px}.arrow{color:var(--accent);font-size:22px;flex:0!important;text-align:center}.tensor{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0;margin:12px 0}.tensor.active{border-color:var(--accent)}.tensor h3 span{float:right;color:var(--muted);font:12px ui-monospace,monospace}.matrix-wrap{overflow-x:auto;max-width:100%;padding-bottom:3px}.matrix{border-collapse:separate;border-spacing:3px;width:100%;font:12px ui-monospace,monospace;font-variant-numeric:tabular-nums}.matrix th{font-size:11px;font-weight:400;color:var(--muted);text-align:center;min-width:25px}.matrix th.rowname{text-align:left;padding-right:5px;white-space:nowrap}.matrix td{padding:0;text-align:center}.matrix button{border:1px solid transparent;border-radius:4px;font:12px ui-monospace,monospace;padding:7px 3px;min-height:36px;width:100%;min-width:41px;background:rgba(94,175,240,var(--heat));color:var(--text)}.matrix tr.chosen button{border-color:var(--accent)}.matrix tr.chosen th{color:var(--accent);font-weight:700}.matrix button.negative{background:rgba(203,138,227,var(--heat))}.matrix button.masked{background:repeating-linear-gradient(135deg,#19212c,#19212c 4px,#253144 4px,#253144 5px);color:var(--muted)}.matrix button:focus-visible{outline:2px solid var(--amber)}.weights{margin:12px 0}.weights summary,details summary{cursor:pointer;min-height:44px;padding:8px 0;color:var(--blue)}.connections{display:grid;gap:9px;margin:12px 0}.connection{display:grid;grid-template-columns:90px minmax(40px,1fr) 64px;gap:12px;align-items:center;font-size:13px}.bartrack{background:#233248;height:12px;border-radius:3px;overflow:hidden}.bar{height:100%;background:var(--accent)}.connection.blocked{color:var(--muted)}.connection.blocked .bartrack{background:repeating-linear-gradient(135deg,#19212c,#19212c 4px,#253144 4px,#253144 5px)}.cell-detail{padding:12px 16px;background:#17283a;border-left:3px solid var(--blue);font:13px/1.6 ui-monospace,monospace;overflow-wrap:anywhere}.legend{gap:18px;margin-bottom:20px}.probability{display:grid;grid-template-columns:65px 1fr 65px;gap:12px;align-items:center;margin:12px 0;font-variant-numeric:tabular-nums}.probability .bartrack{height:20px}.probability.winner{color:var(--accent);font-weight:700}#next-token{padding:14px 0}.gpu-layout{display:grid;grid-template-columns:1.1fr .16fr 1fr;gap:14px;align-items:stretch}.memory,.sm{padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.memory.active,.sm.active{border-color:var(--amber)}.memory h3,.sm h3{color:var(--amber)}.transfer{display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:25px;color:var(--amber)}.transfer small{font-size:11px;writing-mode:vertical-rl;max-height:150px}.cache-rows{display:grid;gap:6px;margin:14px 0}.cache-row{display:flex;gap:8px;justify-content:space-between;padding:9px;background:#173a3a;font:12px ui-monospace,monospace;border-left:3px solid var(--accent)}.cache-row.fresh{background:#3d3020;border-color:var(--amber)}.cache-row.pending{opacity:.5;border-style:dashed}.tile{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:16px 0}.tile span{height:30px;border-radius:3px;background:#26384d}.sm.active .tile span{background:#8f713f}.gpu-note{font-size:13px;color:var(--muted)}.pill{display:inline-block;font-size:12px;padding:3px 9px;border-radius:4px;background:#243348;margin:4px}details{border-top:1px solid var(--line);margin-top:20px;padding-top:10px}details p{font-size:14px;color:var(--muted)}a{color:var(--blue)}footer{justify-content:space-between;border-top:1px solid var(--line);margin-top:24px;padding-top:18px}#gpu-controls[hidden],#next-token[hidden]{display:none}#canvas{min-height:260px}.titlehint{color:var(--muted);font-size:13px;margin-bottom:12px}.row-equation{font:13px/1.8 ui-monospace,monospace;overflow-wrap:anywhere;color:var(--muted)}@media(max-width:700px){main{padding:18px 14px}.steps{grid-template-columns:repeat(3,1fr)}.steps button:nth-child(3):after{content:''}.flow{display:block}.arrow{font-size:22px;transform:rotate(90deg);margin:0}.tensor{padding:12px}.explanation{min-height:0}.gpu-layout{grid-template-columns:1fr}.transfer{flex-direction:row;gap:12px}.transfer small{writing-mode:horizontal-tb}.transfer>span{transform:rotate(90deg)}.matrix button{min-width:38px;min-height:44px}.transport{gap:6px}.transport button{padding:8px 11px}.views button{padding:10px 8px}.legend{gap:7px}.connection{grid-template-columns:78px minmax(35px,1fr) 52px}h2{font-size:18px}.memory,.sm{padding:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}