*,::after,::before{box-sizing:border-box;margin:0;padding:0}:root{--bg:#050505;--s1:#080808;--s2:#0d0d0d;--s3:#141414;--s4:#1c1c1c;--border:rgba(255,255,255,0.07);--border-hi:rgba(255,255,255,0.14);--white:#ffffff;--silver:#a3a3a3;--dim:#525252;--muted:#333;--blue:#60a5fa;--purple:#a78bfa;--green:#4ade80;--amber:#fbbf24;--red:#f87171;--pink:#f472b6;--cyan:#22d3ee;--orange:#fb923c;--mono:'JetBrains Mono',monospace;--display:'Space Grotesk',sans-serif}body,html{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--white);font-family:var(--mono);-webkit-font-smoothing:antialiased}.noise{position:fixed;inset:0;pointer-events:none;z-index:1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.028;mix-blend-mode:overlay}.grid{position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px);background-size:48px 48px}#app{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column}#topbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--border);background:rgba(5,5,5,.97);flex-shrink:0}.brand-tag{font-size:8.5px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}.brand-name{font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:-.02em}.mode-tabs{display:flex;gap:4px}.mode-tab{padding:5px 14px;border-radius:5px;border:1px solid var(--border);font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);cursor:pointer;background:0 0;transition:all .2s}.mode-tab:hover{border-color:var(--border-hi);color:var(--silver)}.mode-tab.on{border-color:rgba(255,255,255,.22);color:var(--white);background:rgba(255,255,255,.05)}.status-pill{display:flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;border:1px solid var(--border);font-size:8px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}.sdot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:bl 1.4s infinite}@keyframes bl{0%,100%{opacity:1}50%{opacity:.25}}#main{flex:1;display:flex;overflow:hidden}#viz{flex:1;overflow-y:auto;overflow-x:hidden}#viz::-webkit-scrollbar{width:3px}#viz::-webkit-scrollbar-thumb{background:var(--s3);border-radius:2px}#panel{width:272px;border-left:1px solid var(--border);background:rgba(5,5,5,.96);overflow-y:auto;flex-shrink:0}#panel::-webkit-scrollbar{width:2px}#panel::-webkit-scrollbar-thumb{background:var(--s3)}.ps{padding:13px 15px;border-bottom:1px solid var(--border)}.ps:last-child{border-bottom:none}.ph{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;display:flex;align-items:center;gap:7px}.ph::after{content:'';flex:1;height:1px;background:var(--border)}.chip-row{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}.chip{padding:3px 9px;border-radius:4px;border:1px solid var(--border);font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);cursor:pointer;background:0 0;transition:all .15s}.chip:hover{border-color:var(--border-hi);color:var(--silver)}.chip.on{border-color:rgba(255,255,255,.22);color:var(--white);background:rgba(255,255,255,.06)}.sl-row{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}.sl-meta{display:flex;justify-content:space-between}.sl-label{font-size:8px;color:var(--dim);letter-spacing:.07em;text-transform:uppercase}.sl-val{font-size:9px;font-weight:500;color:var(--silver)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;border-radius:1px;background:var(--s4);outline:0;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--silver);border:1.5px solid var(--bg);cursor:pointer;transition:all .15s}input[type=range]:hover::-webkit-slider-thumb{background:var(--white);transform:scale(1.2)}.info-box{background:var(--s2);border:1px solid var(--border);border-radius:6px;padding:10px;font-size:8px;line-height:1.75;color:var(--silver)}.info-box b{color:var(--white);font-weight:500}.info-box code{color:var(--blue);background:rgba(96,165,250,.1);padding:0 3px;border-radius:2px;font-size:7.5px}.step-nav{display:flex;align-items:center;gap:7px;padding:9px 18px;background:rgba(5,5,5,.97);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:9;backdrop-filter:blur(8px)}.nav-btn{padding:5px 12px;border-radius:5px;border:1px solid var(--border);font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);cursor:pointer;background:0 0;transition:all .15s;white-space:nowrap}.nav-btn:hover{border-color:var(--border-hi);color:var(--silver)}.nav-btn.go{border-color:rgba(255,255,255,.2);color:var(--white);background:rgba(255,255,255,.05)}.nav-btn.go:hover{background:rgba(255,255,255,.1)}.nav-step-label{flex:1;text-align:center;font-size:8px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-btn.auto{border-color:rgba(74,222,128,.3);color:var(--green)}.nav-btn.auto.on,.nav-btn.auto:hover{background:rgba(74,222,128,.09)}.animate-btn{padding:5px 12px;border-radius:5px;border:1px solid rgba(96,165,250,.3);font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);cursor:pointer;background:0 0;transition:all .15s;white-space:nowrap}.animate-btn:hover{background:rgba(96,165,250,.07)}.viz-section{padding:15px 18px;border-bottom:1px solid var(--border)}.viz-section:last-child{border-bottom:none}.vs-label{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;display:flex;align-items:center;gap:6px}.vs-label span{font-size:7px;color:var(--muted);font-weight:400;letter-spacing:.05em}.formula{font-family:var(--mono);font-size:9px;color:var(--silver);background:var(--s2);border:1px solid var(--border);border-radius:5px;padding:8px 12px;margin-bottom:10px;line-height:1.9;overflow-x:auto;white-space:nowrap}.formula .fk{color:var(--amber)}.formula .fv{color:var(--blue)}.formula .fh{color:var(--green)}.formula .fd{color:var(--dim)}.token-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}.token{display:inline-flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;transition:all .2s}.token-box{padding:5px 9px;border-radius:5px;border:1px solid var(--border);font-family:var(--mono);font-size:11px;font-weight:500;background:var(--s2);color:var(--white);transition:all .2s;white-space:nowrap;min-width:32px;text-align:center}.token.selected .token-box{border-color:var(--blue);background:rgba(96,165,250,.11);color:var(--blue)}.token.predicted .token-box{border-color:var(--green);background:rgba(74,222,128,.09);color:var(--green);box-shadow:0 0 10px rgba(74,222,128,.18);animation:gin .4s ease}@keyframes gin{from{transform:scale(1.1)}to{transform:scale(1)}}.token-id{font-size:7px;color:var(--dim);letter-spacing:.04em}.token-arrow{color:var(--muted);font-size:11px;margin:0 1px}.embed-container{overflow-x:auto;padding-bottom:6px}.embed-grid{display:flex;gap:3px;align-items:flex-start;min-width:max-content}.embed-col{display:flex;flex-direction:column;align-items:center;gap:1px}.embed-token-label{font-size:7px;color:var(--dim);margin-bottom:3px;text-align:center;max-width:46px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.embed-cell{width:13px;height:13px;border-radius:2px;transition:all .3s;cursor:pointer;flex-shrink:0}.embed-cell:hover{transform:scale(1.5);z-index:10;position:relative;border-radius:2px}.embed-dim-label{font-size:6px;color:var(--muted);margin-top:2px}.attn-row{display:flex}.attn-head-tab{padding:3px 9px;border-radius:4px;font-size:8px;border:1px solid var(--border);color:var(--dim);cursor:pointer;font-family:var(--mono);transition:all .15s;text-transform:uppercase;letter-spacing:.06em}.attn-head-tab.on{border-color:rgba(255,255,255,.2);color:var(--white);background:rgba(255,255,255,.05)}.attn-cell{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:600;cursor:pointer;transition:all .2s;border:1px solid transparent;flex-shrink:0}.attn-cell:hover{border-color:rgba(255,255,255,.25);z-index:5;transform:scale(1.18);position:relative;border-radius:3px}.attn-col-label,.attn-row-label{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:7.5px;color:var(--dim);flex-shrink:0}.qkv-grid{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}.qkv-block{flex-shrink:0}.qkv-title{font-size:9px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;font-weight:500}.qkv-matrix{display:flex;flex-direction:column;gap:1.5px}.qkv-row{display:flex;gap:1.5px}.qkv-cell{width:22px;height:20px;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:500;flex-shrink:0}.ffn-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;overflow-x:auto;padding:4px 0}.ffn-layer{display:flex;flex-direction:column;gap:2.5px;flex-shrink:0;align-items:center}.ffn-node{border-radius:50%;border:1px solid;flex-shrink:0;transition:all .3s}.ffn-arrow{color:var(--dim);font-size:15px;flex-shrink:0;text-align:center;line-height:1.4}.ffn-label{font-size:7.5px;color:var(--dim);text-align:center;margin-top:4px;letter-spacing:.05em;text-transform:uppercase;line-height:1.4}.pred-bars{display:flex;flex-direction:column;gap:4px}.pred-bar-row{display:flex;align-items:center;gap:7px}.pred-token{font-size:10px;font-weight:500;width:68px;flex-shrink:0;color:var(--silver);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pred-track{flex:1;height:20px;background:var(--s3);border-radius:3px;overflow:hidden}.pred-fill{height:100%;border-radius:3px;transition:width .55s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;padding-left:6px}.pred-pct{font-size:9px;font-weight:600}.pred-bar-row.winner .pred-token{color:var(--green)}.pe-grid{display:flex;gap:2px}.pe-col{display:flex;flex-direction:column;gap:1px}.pe-cell{width:11px;height:9px;border-radius:1px;transition:all .3s}.layernorm-vis{display:flex;align-items:flex-start;gap:8px;overflow-x:auto;padding:4px 0}.ln-block{display:flex;flex-direction:column;gap:1.5px;flex-shrink:0;align-items:center}.ln-bar{height:7px;border-radius:1px;min-width:3px;transition:all .4s}.cnn-input-grid{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}.cnn-word-btn{padding:5px 11px;border-radius:5px;border:1px solid var(--border);font-family:var(--mono);font-size:9.5px;color:var(--dim);cursor:pointer;background:0 0;transition:all .2s;text-transform:uppercase;letter-spacing:.06em}.cnn-word-btn:hover{border-color:var(--border-hi);color:var(--silver)}.cnn-word-btn.on{border-color:rgba(255,255,255,.22);color:var(--white);background:rgba(255,255,255,.06)}.pixel-grid{display:inline-flex;flex-direction:column;gap:1px}.pixel-row{display:flex;gap:1px}.pixel{width:13px;height:13px;border-radius:1px;transition:all .3s;cursor:crosshair}.filter-display{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px}.filter-block{flex-shrink:0}.filter-label{font-size:7px;color:var(--dim);margin-bottom:3px;text-align:center;letter-spacing:.05em;text-transform:uppercase}.filter-grid{display:flex;flex-direction:column;gap:1.5px}.filter-row{display:flex;gap:1.5px}.filter-cell{width:22px;height:22px;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:600;transition:all .3s;flex-shrink:0;cursor:pointer}.fmap-container{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px}.fmap-block{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:3px}.fmap-label{font-size:6.5px;color:var(--dim);letter-spacing:.05em;text-transform:uppercase}.fmap-grid{display:flex;flex-direction:column;gap:1px}.fmap-row{display:flex;gap:1px}.fmap-cell{width:15px;height:15px;border-radius:1px;display:flex;align-items:center;justify-content:center;transition:all .4s;cursor:pointer}.pool-grid{display:flex;flex-direction:column;gap:1.5px}.pool-row{display:flex;gap:1.5px}.pool-cell{width:22px;height:22px;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:600;transition:all .4s;cursor:pointer}.logit-bars{display:flex;flex-direction:column;gap:3px}.logit-row{display:flex;align-items:center;gap:6px}.logit-label{font-size:9px;font-weight:500;width:48px;flex-shrink:0}.logit-track{flex:1;height:18px;background:var(--s3);border-radius:3px;overflow:hidden}.logit-fill{height:100%;border-radius:3px;transition:width .65s cubic-bezier(.4,0,.2,1)}.logit-val{font-size:8px;color:var(--dim);width:36px;flex-shrink:0;text-align:right}#tooltip{position:fixed;z-index:999;pointer-events:none;padding:8px 11px;border-radius:7px;max-width:230px;background:rgba(5,5,5,.97);border:1px solid var(--border-hi);backdrop-filter:blur(20px);opacity:0;transition:opacity .15s;font-size:8.5px;line-height:1.65;color:var(--silver)}#tooltip.show{opacity:1}#tooltip .tt{color:var(--white);font-weight:500;font-size:9.5px;margin-bottom:4px;font-family:var(--display)}