@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a28;--bg-card: rgba(22, 22, 36, .7);--bg-glass: rgba(30, 30, 50, .4);--bg-hover: rgba(40, 40, 65, .5);--border-subtle: rgba(255, 255, 255, .06);--border-glass: rgba(255, 255, 255, .1);--border-active: rgba(120, 100, 255, .4);--text-primary: #e8e6f0;--text-secondary: #9d9ab0;--text-muted: #6b688a;--text-accent: #b4adff;--accent-primary: #7c6aff;--accent-primary-glow: rgba(124, 106, 255, .15);--accent-secondary: #4ecdc4;--accent-secondary-glow: rgba(78, 205, 196, .15);--accent-warm: #ff6b6b;--accent-warm-glow: rgba(255, 107, 107, .15);--accent-gold: #ffd43b;--status-fits: #4ecdc4;--status-fits-bg: rgba(78, 205, 196, .12);--status-fails: #ff6b6b;--status-fails-bg: rgba(255, 107, 107, .12);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--fs-xs: .75rem;--fs-sm: .8125rem;--fs-base: .9375rem;--fs-md: 1.0625rem;--fs-lg: 1.25rem;--fs-xl: 1.5rem;--fs-2xl: 2rem;--fs-3xl: 2.5rem;--fw-light: 300;--fw-regular: 400;--fw-medium: 500;--fw-semibold: 600;--fw-bold: 700;--fw-extra: 800;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px var(--accent-primary-glow);--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s ease;--transition-spring: .35s cubic-bezier(.34, 1.56, .64, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}body{font-family:var(--font-sans);color:var(--text-primary);background-color:var(--bg-primary);line-height:1.6;min-height:100vh;background-image:radial-gradient(ellipse at 20% 0%,rgba(124,106,255,.04) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(78,205,196,.03) 0%,transparent 50%)}#root{min-height:100vh;display:flex;flex-direction:column}.glass-card{background:var(--bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.glass-card:hover{border-color:var(--border-active);box-shadow:var(--shadow-glow)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}::selection{background:var(--accent-primary);color:#fff}.mono{font-family:var(--font-mono)}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.text-accent{color:var(--text-accent)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes barGrow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}.animate-in{animation:fadeIn var(--transition-slow) ease both}.animate-scale-in{animation:fadeInScale var(--transition-slow) ease both}.selector-bar{display:flex;gap:var(--space-lg);align-items:flex-end;padding:var(--space-md) var(--space-lg);background:var(--bg-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle)}.selector-group{display:flex;flex-direction:column;gap:var(--space-xs);position:relative}.selector-label{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.selector-dropdown-wrapper{position:relative}.selector-button{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--bg-tertiary);border:1px solid var(--border-glass);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--fs-sm);cursor:pointer;transition:all var(--transition-fast);min-width:240px}.selector-button:hover{border-color:var(--border-active);background:var(--bg-hover)}.selector-icon{font-size:var(--fs-md)}.selector-value{font-weight:var(--fw-semibold);flex:1}.selector-badge{font-size:var(--fs-xs);padding:2px 8px;border-radius:var(--radius-full);background:var(--accent-primary-glow);color:var(--text-accent);font-weight:var(--fw-medium)}.selector-chevron{font-size:var(--fs-xs);color:var(--text-muted);transition:transform var(--transition-fast)}.selector-chevron.open{transform:rotate(180deg)}.selector-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;min-width:320px;background:var(--bg-secondary);border:1px solid var(--border-glass);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:100;overflow:hidden}.selector-option{display:flex;flex-direction:column;gap:2px;width:100%;padding:var(--space-sm) var(--space-md);background:transparent;border:none;color:var(--text-primary);font-family:var(--font-sans);text-align:left;cursor:pointer;transition:background var(--transition-fast);border-bottom:1px solid var(--border-subtle)}.selector-option:last-child{border-bottom:none}.selector-option:hover{background:var(--bg-hover)}.selector-option.active{background:var(--accent-primary-glow);border-left:3px solid var(--accent-primary)}.option-main{display:flex;align-items:center;gap:var(--space-sm)}.option-name{font-weight:var(--fw-semibold);font-size:var(--fs-sm)}.option-badge{font-size:var(--fs-xs);padding:1px 6px;border-radius:var(--radius-full);background:var(--accent-primary-glow);color:var(--text-accent)}.option-meta{font-size:var(--fs-xs);color:var(--text-muted)}@media(max-width:640px){.selector-bar{flex-direction:column;gap:var(--space-md)}.selector-button,.selector-menu{min-width:100%}}.verdict-banner{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);border:1px solid;transition:all var(--transition-base)}.verdict-banner.fits{background:var(--status-fits-bg);border-color:#4ecdc433}.verdict-banner.fails{background:var(--status-fails-bg);border-color:#ff6b6b33}.verdict-stats{display:flex;align-items:center;gap:var(--space-sm);flex-shrink:0}.verdict-stat{display:flex;flex-direction:column;align-items:center;gap:1px}.verdict-stat-label{font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap}.verdict-stat-value{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-primary)}.verdict-stat.total .verdict-stat-value{font-size:var(--fs-base);font-weight:var(--fw-bold)}.verdict-divider{color:var(--text-muted);font-size:var(--fs-sm);padding:0 2px}.verdict-bar-container{flex:1;height:20px;background:#ffffff0d;border-radius:var(--radius-full);position:relative;overflow:hidden;min-width:120px}.verdict-bar-fill{height:100%;border-radius:var(--radius-full);transition:width var(--transition-slow);animation:barGrow var(--transition-slow) ease both}.verdict-banner.fits .verdict-bar-fill{background:linear-gradient(90deg,var(--status-fits),rgba(78,205,196,.6))}.verdict-banner.fails .verdict-bar-fill{background:linear-gradient(90deg,var(--status-fails),rgba(255,107,107,.6))}.verdict-bar-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);color:var(--text-primary);font-weight:var(--fw-medium);text-shadow:0 1px 3px rgba(0,0,0,.5)}.verdict-result{display:flex;align-items:center;gap:var(--space-sm);flex-shrink:0}.verdict-icon{font-size:var(--fs-lg)}.verdict-text{font-size:var(--fs-sm);font-weight:var(--fw-medium);white-space:nowrap}.verdict-banner.fits .verdict-text{color:var(--status-fits)}.verdict-banner.fails .verdict-text{color:var(--status-fails)}@media(max-width:768px){.verdict-banner{flex-direction:column;gap:var(--space-sm)}.verdict-bar-container{width:100%}}.chapter-nav{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle);overflow-x:auto;scrollbar-width:none}.chapter-nav::-webkit-scrollbar{display:none}.chapter-tab{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--text-muted);font-family:var(--font-sans);font-size:var(--fs-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;flex-shrink:0}.chapter-tab:hover{color:var(--text-secondary);background:var(--bg-hover);border-color:var(--border-glass)}.chapter-tab.active{color:var(--text-primary);background:var(--accent-primary-glow);border-color:var(--border-active)}.chapter-tab-number{font-weight:var(--fw-bold);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em}.chapter-tab.active .chapter-tab-number{color:var(--accent-primary)}.chapter-tab-title{font-weight:var(--fw-medium)}.chapter-tab-arrow{color:var(--text-muted);font-size:var(--fs-xs);margin-left:var(--space-sm);opacity:.4}@media(max-width:768px){.chapter-tab-title,.chapter-tab-arrow{display:none}.chapter-nav{justify-content:center}}.tutorial-overlay{position:fixed;inset:0;z-index:1000;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;animation:tutorial-fade-in .3s ease}@keyframes tutorial-fade-in{0%{opacity:0}to{opacity:1}}.tutorial-card{background:var(--bg-primary);border:1px solid var(--border-glass);border-radius:var(--radius-lg);padding:var(--space-xl);max-width:420px;width:90%;box-shadow:0 24px 48px #0006;animation:tutorial-slide-up .4s ease}@keyframes tutorial-slide-up{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.tutorial-step-indicator{display:flex;justify-content:center;gap:8px;margin-bottom:var(--space-lg)}.tutorial-dot{width:8px;height:8px;border-radius:50%;background:var(--bg-tertiary);transition:all .3s ease}.tutorial-dot.active{background:var(--accent-primary);transform:scale(1.3)}.tutorial-dot.done{background:var(--accent-secondary)}.tutorial-title{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--text-primary);margin-bottom:var(--space-sm);text-align:center}.tutorial-desc{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.6;text-align:center;margin-bottom:var(--space-lg)}.tutorial-actions{display:flex;justify-content:space-between;align-items:center}.tutorial-skip{padding:var(--space-xs) var(--space-md);background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-full);font-family:var(--font-sans);font-size:var(--fs-xs);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}.tutorial-skip:hover{border-color:var(--border-glass);color:var(--text-primary)}.tutorial-next{padding:var(--space-xs) var(--space-lg);background:var(--accent-primary);border:none;border-radius:var(--radius-full);font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:#fff;cursor:pointer;transition:all var(--transition-fast)}.tutorial-next:hover{background:var(--accent-primary-hover, #6b5ce7);transform:translateY(-1px)}.speed-control{display:inline-flex;gap:2px;background:var(--bg-secondary);border-radius:var(--radius-full);padding:2px}.speed-btn{padding:2px 10px;font-family:var(--font-mono);font-size:11px;font-weight:var(--fw-semibold);border:none;border-radius:var(--radius-full);background:transparent;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}.speed-btn:hover{color:var(--text-primary)}.speed-btn.active{background:var(--accent-primary);color:#fff}.animation-commentary{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:#7c6aff0f;border:1px solid rgba(124,106,255,.12);border-radius:var(--radius-md);margin-top:var(--space-sm);min-height:40px;transition:opacity .2s ease}.animation-commentary.commentary-flash{animation:commentary-pulse .4s ease}@keyframes commentary-pulse{0%{background:#7c6aff26}to{background:#7c6aff0f}}.commentary-icon{font-size:var(--fs-sm);flex-shrink:0;margin-top:1px}.commentary-text{font-size:var(--fs-xs);color:var(--text-secondary);line-height:1.5}.commentary-text strong{color:var(--text-accent)}.small-model-note{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-md);background:#ffd73b0f;border:1px solid rgba(255,215,59,.15);border-radius:var(--radius-md);margin-bottom:var(--space-md)}.small-model-icon{font-size:var(--fs-sm);flex-shrink:0}.small-model-text{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.4}.small-model-text strong{color:var(--text-primary)}.chapter{display:flex;flex-direction:column;gap:var(--space-2xl);padding-bottom:var(--space-3xl)}.chapter-header{text-align:center;padding:var(--space-2xl) 0 var(--space-lg)}.chapter-title{font-size:var(--fs-3xl);font-weight:var(--fw-extra);background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--space-md)}.chapter-hook{font-size:var(--fs-md);color:var(--text-secondary);max-width:640px;margin:0 auto;line-height:1.7}.chapter-section{display:flex;flex-direction:column;gap:var(--space-lg)}.section-label{font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.1em;color:var(--accent-primary);opacity:.7}.section-title{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--text-primary)}.section-desc{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.7;max-width:600px}.prerequisite-notice{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-lg);background:#4ecdc40f;border:1px solid rgba(78,205,196,.12);border-radius:var(--radius-md);margin-bottom:var(--space-md)}.prerequisite-icon{font-size:var(--fs-md);flex-shrink:0}.prerequisite-text{font-size:var(--fs-xs);color:var(--text-secondary);line-height:1.5}.prerequisite-text strong{color:var(--text-primary)}.prerequisite-link{color:var(--accent-secondary);text-decoration:underline;text-underline-offset:2px;transition:opacity var(--transition-fast)}.prerequisite-link:hover{opacity:.8}.arch-flow{padding:var(--space-xl);overflow-x:auto}.arch-flow-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-lg);flex-wrap:wrap}.arch-flow-title{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.arch-flow-controls{display:flex;align-items:center;gap:var(--space-sm)}.arch-pipeline{display:flex;align-items:center;gap:0;justify-content:center;min-height:160px;position:relative}.arch-node{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--space-sm) var(--space-md);background:var(--bg-tertiary);border:1px solid var(--border-glass);border-radius:var(--radius-md);font-size:var(--fs-xs);color:var(--text-secondary);transition:all var(--transition-fast);position:relative;min-width:70px;text-align:center;cursor:default;z-index:1}.arch-node:hover{border-color:var(--accent-primary);background:var(--accent-primary-glow);color:var(--text-primary);z-index:10}.arch-node-label{font-weight:var(--fw-semibold);font-size:var(--fs-xs);white-space:nowrap}.arch-node-dim{font-family:var(--font-mono);font-size:10px;color:var(--text-muted)}.arch-node.embed{border-color:#4ecdc44d}.arch-node.layer{border-color:#7c6aff40}.arch-node.layer.active{border-color:var(--accent-primary);background:var(--accent-primary-glow);box-shadow:0 0 12px var(--accent-primary-glow)}.arch-node.lm-head{border-color:#ffd73b4d}.arch-node.token-out{border-color:#4ecdc466;background:#4ecdc414}.arch-node.stage-active{border-color:var(--accent-primary);background:var(--accent-primary-glow);color:var(--text-primary);box-shadow:0 0 16px #7c6aff4d;animation:stage-pulse 1s ease-in-out infinite;z-index:10}@keyframes stage-pulse{0%,to{box-shadow:0 0 8px #7c6aff33}50%{box-shadow:0 0 20px #7c6aff66}}.arch-node.stage-done{border-color:#4ecdc440;background:#4ecdc40a;color:var(--text-muted)}.arch-node.layers-rest{min-width:100px}.arch-arrow{width:28px;height:2px;background:var(--border-glass);position:relative;flex-shrink:0}.arch-arrow:after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left-color:var(--border-glass)}.arch-arrow.active{background:var(--accent-primary)}.arch-arrow.active:after{border-left-color:var(--accent-primary)}.arch-layers-group{display:flex;align-items:center;gap:0;position:relative}.arch-layers-dots{display:flex;align-items:center;gap:3px;padding:0 6px;color:var(--text-muted);font-size:var(--fs-sm)}.arch-layers-dots span{width:4px;height:4px;background:var(--text-muted);border-radius:50%}.arch-layer-detail{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--bg-secondary);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);font-size:var(--fs-xs);color:var(--text-secondary);white-space:nowrap;z-index:20;box-shadow:var(--shadow-lg);animation:fadeIn .15s ease}.arch-layer-detail .detail-row{display:flex;justify-content:space-between;gap:var(--space-lg)}.arch-layer-detail .detail-label{color:var(--text-muted)}.arch-layer-detail .detail-value{color:var(--text-accent);font-family:var(--font-mono)}.arch-loop{position:absolute;bottom:-40px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-sm);font-size:var(--fs-xs);color:var(--text-muted)}.arch-loop-line{width:80%;min-width:300px;height:2px;background:linear-gradient(90deg,var(--accent-secondary),transparent 10%,transparent 90%,var(--accent-secondary));position:relative;border-radius:1px}@keyframes dotPulse{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 8px var(--accent-secondary)}50%{transform:translate(-50%) scale(1.3);box-shadow:0 0 14px var(--accent-secondary)}}.arch-data-dot.synced{position:absolute;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--accent-secondary);box-shadow:0 0 8px var(--accent-secondary);transition:left .6s cubic-bezier(.4,0,.2,1);transform:translate(-50%);animation:dotPulse 1.5s ease-in-out infinite;z-index:2}.arch-flow-track{position:absolute;top:50%;left:5%;right:5%;height:2px;background:#7c6aff14;z-index:0}.token-stepper{padding:var(--space-lg)}.stepper-controls{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg)}.stepper-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-full);background:var(--bg-tertiary);border:1px solid var(--border-glass);color:var(--text-secondary);font-size:var(--fs-base);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-sans)}.stepper-btn:hover{border-color:var(--accent-primary);color:var(--text-primary)}.stepper-btn:disabled{opacity:.3;cursor:default}.stepper-btn.play{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.stepper-btn.play:hover{background:var(--accent-primary);filter:brightness(1.1)}.stepper-progress{flex:1;font-size:var(--fs-sm);color:var(--text-muted);font-family:var(--font-mono)}.stepper-speed{font-size:var(--fs-xs);color:var(--text-muted);cursor:pointer}.stepper-prompt{display:flex;flex-wrap:wrap;gap:4px;padding:var(--space-md);background:var(--bg-tertiary);border-radius:var(--radius-md);margin-bottom:var(--space-md);min-height:40px;align-items:center}.stepper-token{padding:2px 6px;border-radius:4px;font-size:var(--fs-sm);font-family:var(--font-mono);transition:all var(--transition-fast)}.stepper-token.input{background:#7c6aff1a;color:var(--text-accent);border:1px solid rgba(124,106,255,.15)}.stepper-token.generated{background:#4ecdc41f;color:var(--accent-secondary);border:1px solid rgba(78,205,196,.2);animation:fadeInScale var(--transition-base) ease both}.stepper-token.current{background:#4ecdc440;border-color:var(--accent-secondary);box-shadow:0 0 8px #4ecdc44d}.stepper-cursor{width:2px;height:18px;background:var(--accent-secondary);animation:pulse 1s ease-in-out infinite}.stepper-pipeline{display:flex;align-items:stretch;gap:0;margin-bottom:var(--space-md);overflow-x:auto;padding:var(--space-sm) 0}.pipeline-stage{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--space-sm) var(--space-md);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:10px;color:var(--text-muted);min-width:65px;text-align:center;position:relative;transition:all var(--transition-fast)}.pipeline-stage.active{border-color:var(--accent-primary);background:var(--accent-primary-glow);color:var(--text-primary)}.pipeline-stage.done{border-color:#4ecdc44d;background:#4ecdc40d}.pipeline-stage-name{font-weight:var(--fw-semibold);font-size:var(--fs-xs)}.pipeline-stage-val{font-family:var(--font-mono);font-size:10px;color:var(--text-accent)}.pipeline-arrow{display:flex;align-items:center;color:var(--text-muted);font-size:var(--fs-sm);padding:0 2px;flex-shrink:0}.pipeline-arrow.active{color:var(--accent-primary)}.stepper-kv{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-sm)}.stepper-kv-label{font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap;min-width:70px}.stepper-kv-bar{flex:1;height:22px;background:var(--bg-tertiary);border-radius:var(--radius-sm);overflow:hidden;position:relative}.stepper-kv-fill{height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));border-radius:var(--radius-sm);transition:width var(--transition-base);display:flex;align-items:center;justify-content:flex-end;padding-right:6px;min-width:0}.stepper-kv-fill-text{font-size:10px;font-family:var(--font-mono);color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.5)}.stepper-kv-blocks{display:flex;gap:2px;flex:1;height:22px;align-items:center}.kv-block{width:14px;height:18px;border-radius:3px;transition:all var(--transition-fast)}.kv-block.filled{background:var(--accent-primary);border:1px solid rgba(124,106,255,.5);animation:fadeInScale .2s ease both}.kv-block.empty{background:var(--bg-tertiary);border:1px dashed var(--border-subtle)}.kv-block.current{background:var(--accent-secondary);border:1px solid rgba(78,205,196,.5);box-shadow:0 0 6px #4ecdc44d}.stepper-kv-size{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-accent);white-space:nowrap;min-width:60px;text-align:right}.stepper-layers{font-size:var(--fs-xs);color:var(--text-muted);text-align:center;margin-top:var(--space-xs)}.prefill-decode{padding:var(--space-lg)}.pd-comparison{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}.pd-phase{padding:var(--space-lg);background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--border-subtle);transition:border-color var(--transition-fast)}.pd-phase.highlight{border-color:var(--accent-primary)}.pd-phase-title{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-primary);margin-bottom:var(--space-xs)}.pd-phase-desc{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:var(--space-md);line-height:1.5}.pd-tokens{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:var(--space-md);min-height:28px}.pd-token{width:24px;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;font-family:var(--font-mono);font-weight:var(--fw-semibold)}.pd-token.parallel{background:#7c6aff33;border:1px solid rgba(124,106,255,.3);color:var(--text-accent);animation:fadeInScale .2s ease both}.pd-token.serial{background:#4ecdc426;border:1px solid rgba(78,205,196,.25);color:var(--accent-secondary)}.pd-token.serial.active{background:#4ecdc44d;border-color:var(--accent-secondary);box-shadow:0 0 8px #4ecdc44d}.pd-token.serial.waiting{opacity:.25}.pd-gpu-bar{margin-top:var(--space-sm)}.pd-gpu-label{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:4px}.pd-gpu-track{height:20px;background:var(--bg-secondary);border-radius:var(--radius-sm);overflow:hidden;position:relative}.pd-gpu-fill{height:100%;border-radius:var(--radius-sm);transition:width .6s ease}.pd-gpu-fill.prefill-fill{background:linear-gradient(90deg,var(--accent-primary),#a78bfa);width:92%}.pd-gpu-fill.decode-fill{background:linear-gradient(90deg,rgba(78,205,196,.6),var(--accent-secondary));width:15%}.pd-gpu-fill.decode-fill.active-decode{width:25%}.pd-bandwidth{margin-top:var(--space-md);display:flex;align-items:center;gap:var(--space-sm);font-size:var(--fs-xs);color:var(--text-muted)}.pd-pipe{height:8px;border-radius:4px;flex:1}.pd-pipe.thick{background:linear-gradient(90deg,var(--accent-primary),transparent);height:14px}.pd-pipe.thin{background:linear-gradient(90deg,var(--accent-secondary),transparent);height:4px}.pd-bottleneck-tag{font-size:var(--fs-xs);font-weight:var(--fw-semibold);padding:2px 8px;border-radius:var(--radius-full);white-space:nowrap}.pd-bottleneck-tag.compute{background:#7c6aff1f;color:var(--accent-primary)}.pd-bottleneck-tag.memory{background:#ff6b6b1f;color:var(--accent-warm)}.pd-toggle{display:flex;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-md)}.pd-toggle-btn{padding:var(--space-xs) var(--space-md);background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-full);font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}.pd-toggle-btn:hover{border-color:var(--border-glass);color:var(--text-secondary)}.pd-toggle-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.mem-stack{padding:var(--space-lg)}.mem-stack-title{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-md)}.mem-stack-bar{position:relative;height:56px;background:var(--bg-tertiary);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-subtle)}.mem-stack-segment{position:absolute;top:0;height:100%;display:flex;align-items:center;padding:0 var(--space-sm);transition:width var(--transition-base);overflow:hidden}.mem-stack-segment.weights{left:0;background:#7c6aff40;border-right:2px solid var(--accent-primary);z-index:2}.mem-stack-segment.kv-cache{background:#4ecdc433;border-right:2px solid var(--accent-secondary);z-index:1}.mem-stack-segment.overflow-zone{background:#ff6b6b33!important;border-right-color:var(--accent-warm)!important}.mem-seg-label{font-size:10px;font-family:var(--font-mono);font-weight:var(--fw-semibold);white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.7)}.mem-stack-segment.weights .mem-seg-label{color:var(--text-accent)}.mem-stack-segment.kv-cache .mem-seg-label{color:var(--accent-secondary)}.mem-stack-budget{position:absolute;top:-20px;transform:translate(-50%);font-size:10px;font-family:var(--font-mono);color:var(--text-muted);white-space:nowrap}.mem-stack-budget:after{content:"";position:absolute;bottom:-22px;left:50%;width:1px;height:56px;background:var(--text-muted);opacity:.3}.mem-slider-row{display:flex;align-items:center;gap:var(--space-md);margin-top:var(--space-md)}.mem-slider-label{font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap}.mem-slider{flex:1;appearance:none;height:6px;background:var(--bg-tertiary);border-radius:3px;outline:none}.mem-slider::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-primary);cursor:pointer;box-shadow:0 0 8px var(--accent-primary-glow)}.mem-slider-value{font-size:var(--fs-xs);font-family:var(--font-mono);color:var(--text-accent);min-width:50px;text-align:right}.mem-breakdown{display:flex;gap:var(--space-lg);margin-top:var(--space-md);flex-wrap:wrap}.mem-breakdown-item{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--fs-xs)}.mem-swatch{width:10px;height:10px;border-radius:3px}.mem-swatch.weights-swatch{background:var(--accent-primary)}.mem-swatch.kv-swatch{background:var(--accent-secondary)}.mem-swatch.free-swatch{background:var(--bg-tertiary);border:1px dashed var(--border-glass)}.mem-breakdown-label{color:var(--text-muted)}.mem-breakdown-value{color:var(--text-secondary);font-family:var(--font-mono)}.mem-verdict{margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:var(--fw-semibold);text-align:center}.mem-verdict.fits{background:var(--status-fits-bg);color:var(--status-fits);border:1px solid rgba(78,205,196,.2)}.mem-verdict.fails{background:var(--status-fails-bg);color:var(--status-fails);border:1px solid rgba(255,107,107,.2)}.chapter-next-hook{padding:var(--space-xl);text-align:center}.chapter-next-hook p{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.7;margin-bottom:var(--space-sm)}.chapter-next-question{font-size:var(--fs-lg);font-weight:var(--fw-bold);background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@media(max-width:768px){.pd-comparison{grid-template-columns:1fr}.arch-pipeline{min-height:120px;flex-wrap:wrap;gap:var(--space-sm)}.stepper-pipeline{overflow-x:auto}}.pipeline-commentary-log{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto;padding:var(--space-sm);margin-top:var(--space-sm);background:#7c6aff08;border:1px solid rgba(124,106,255,.08);border-radius:var(--radius-md);scroll-behavior:smooth}.pipeline-commentary-entry{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);transition:opacity .3s ease,background .3s ease}.pipeline-commentary-entry.idle{opacity:.6}.pipeline-commentary-entry.past{opacity:.55;background:transparent}.pipeline-commentary-entry.latest{background:#7c6aff14;border-left:3px solid var(--accent-primary);animation:log-entry-in .4s ease}@keyframes log-entry-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.pipeline-entry-badge{flex-shrink:0;font-size:10px;font-weight:var(--fw-bold);padding:1px 8px;border-radius:var(--radius-full);background:var(--accent-primary);color:#fff;white-space:nowrap;margin-top:2px}.pipeline-commentary-entry.past .pipeline-entry-badge{background:var(--bg-tertiary);color:var(--text-muted)}.qkv-flow{padding:var(--space-lg);overflow-x:auto}.qkv-flow-diagram{display:flex;flex-direction:column;gap:var(--space-lg);align-items:center}.qkv-input-row{display:flex;align-items:center;gap:var(--space-md)}.qkv-token-box{padding:var(--space-sm) var(--space-lg);background:#4ecdc41f;border:1px solid rgba(78,205,196,.3);border-radius:var(--radius-md);font-weight:var(--fw-bold);color:var(--accent-secondary);text-align:center}.qkv-embed-arrow{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--text-muted);font-size:var(--fs-xs)}.qkv-embed-box{padding:var(--space-sm) var(--space-lg);background:var(--bg-tertiary);border:1px solid var(--border-glass);border-radius:var(--radius-md);text-align:center}.qkv-embed-label{font-size:var(--fs-xs);color:var(--text-muted)}.qkv-embed-dim{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-primary)}.qkv-projection{display:flex;gap:var(--space-xl);position:relative}.qkv-branch{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);flex:1;min-width:130px}.qkv-weight-box{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);text-align:center;font-size:var(--fs-xs);transition:all var(--transition-fast)}.qkv-weight-box.q-weight{background:#ff6b6b14;border:1px solid rgba(255,107,107,.2);color:var(--accent-warm)}.qkv-weight-box.k-weight{background:#7c6aff14;border:1px solid rgba(124,106,255,.2);color:var(--text-accent)}.qkv-weight-box.v-weight{background:#4ecdc414;border:1px solid rgba(78,205,196,.2);color:var(--accent-secondary)}.qkv-weight-name{font-weight:var(--fw-bold);font-size:var(--fs-sm);display:block}.qkv-weight-dim{font-family:var(--font-mono);font-size:10px;color:var(--text-muted)}.qkv-times{font-size:var(--fs-sm);color:var(--text-muted)}.qkv-result-box{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);text-align:center;font-weight:var(--fw-bold);font-size:var(--fs-sm);position:relative}.qkv-result-box.q-result{background:#ff6b6b1f;border:2px solid rgba(255,107,107,.35);color:var(--accent-warm)}.qkv-result-box.k-result{background:#7c6aff1f;border:2px solid rgba(124,106,255,.35);color:var(--text-accent)}.qkv-result-box.v-result{background:#4ecdc41f;border:2px solid rgba(78,205,196,.35);color:var(--accent-secondary)}.qkv-result-dim{font-family:var(--font-mono);font-size:10px;display:block;color:var(--text-muted);font-weight:var(--fw-regular)}.qkv-cache-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;background:#7c6aff26;border:1px solid rgba(124,106,255,.25);border-radius:var(--radius-full);font-size:10px;font-weight:var(--fw-semibold);margin-top:4px}.qkv-cache-badge.cached{color:var(--accent-secondary);background:#4ecdc41f;border-color:#4ecdc440}.qkv-cache-badge.not-cached{color:var(--text-muted);background:var(--bg-tertiary);border-color:var(--border-subtle)}.qkv-connectors{display:flex;justify-content:center;gap:var(--space-xl);height:30px;position:relative}.qkv-connector-line{width:2px;height:100%;position:relative}.qkv-connector-line.q-line{background:#ff6b6b4d}.qkv-connector-line.k-line{background:#7c6aff4d}.qkv-connector-line.v-line{background:#4ecdc44d}.qkv-arrows-down{text-align:center;color:var(--text-muted);font-size:var(--fs-sm);margin:var(--space-xs) 0}.attn-score-section{padding:var(--space-lg)}.attn-score-flow{display:flex;flex-direction:column;gap:var(--space-md);align-items:center}.attn-matmul{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;justify-content:center}.attn-matrix{display:flex;flex-direction:column;gap:2px;padding:var(--space-sm);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);min-width:70px}.attn-matrix.q-mat{background:#ff6b6b0f;border-color:#ff6b6b33}.attn-matrix.k-mat{background:#7c6aff0f;border-color:#7c6aff33}.attn-matrix.score-mat{background:#ffd73b0f;border-color:#ffd73b33}.attn-matrix.v-mat{background:#4ecdc40f;border-color:#4ecdc433}.attn-matrix.out-mat{background:#4ecdc41a;border-color:#4ecdc44d}.attn-mat-label{font-size:10px;font-weight:var(--fw-bold);text-align:center;margin-bottom:2px}.attn-mat-label.q-label{color:var(--accent-warm)}.attn-mat-label.k-label{color:var(--text-accent)}.attn-mat-label.score-label{color:var(--accent-gold)}.attn-mat-label.v-label,.attn-mat-label.out-label{color:var(--accent-secondary)}.attn-mat-dim{font-family:var(--font-mono);font-size:9px;color:var(--text-muted);text-align:center}.attn-mat-grid{display:grid;gap:2px}.attn-mat-cell{width:22px;height:18px;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:8px;font-family:var(--font-mono);transition:all var(--transition-fast)}.attn-mat-cell.highlight{box-shadow:0 0 6px currentColor;transform:scale(1.1)}.attn-op{font-size:var(--fs-lg);color:var(--text-muted);font-weight:var(--fw-bold);padding:0 var(--space-xs)}.attn-heatmap{padding:var(--space-lg)}.attn-heatmap-grid{display:flex;flex-direction:column;gap:2px;margin-top:var(--space-sm)}.attn-heatmap-row{display:flex;align-items:center;gap:2px}.attn-heatmap-header{min-width:50px;font-size:10px;font-family:var(--font-mono);color:var(--text-muted);text-align:right;padding-right:6px}.attn-heat-cell{width:44px;height:28px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:9px;font-family:var(--font-mono);font-weight:var(--fw-medium);color:#fff;transition:all var(--transition-fast);cursor:default}.attn-heat-cell:hover{transform:scale(1.08);z-index:2}.kv-stepper{padding:var(--space-lg)}.kv-stepper-controls{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg)}.kv-step-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-full);background:var(--bg-tertiary);border:1px solid var(--border-glass);color:var(--text-secondary);font-size:var(--fs-sm);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-sans)}.kv-step-btn:hover{border-color:var(--accent-primary);color:var(--text-primary)}.kv-step-btn:disabled{opacity:.3;cursor:default}.kv-step-btn.play-btn{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.kv-step-info{font-size:var(--fs-sm);color:var(--text-muted);font-family:var(--font-mono)}.kv-sentence{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:var(--space-md);min-height:36px;align-items:center}.kv-tok{padding:3px 8px;border-radius:4px;font-size:var(--fs-sm);font-family:var(--font-mono);font-weight:var(--fw-medium);transition:all var(--transition-fast)}.kv-tok.processed{background:#7c6aff1f;color:var(--text-accent);border:1px solid rgba(124,106,255,.2)}.kv-tok.current{background:#4ecdc433;color:var(--accent-secondary);border:1px solid rgba(78,205,196,.35);box-shadow:0 0 8px #4ecdc433;animation:fadeInScale .2s ease}.kv-tok.pending{background:var(--bg-tertiary);color:var(--text-muted);border:1px dashed var(--border-subtle);opacity:.4}.kv-cache-table{width:100%;border-collapse:collapse;font-size:var(--fs-xs);margin-top:var(--space-sm)}.kv-cache-table th{text-align:left;padding:var(--space-xs) var(--space-sm);color:var(--text-muted);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.06em;font-size:10px;border-bottom:1px solid var(--border-glass)}.kv-cache-table td{padding:var(--space-xs) var(--space-sm);border-bottom:1px solid var(--border-subtle);font-family:var(--font-mono)}.kv-cache-table tr.current-row{background:#4ecdc40f}.kv-cache-table tr.current-row td{color:var(--accent-secondary);font-weight:var(--fw-semibold)}.kv-row-k{color:var(--text-accent)}.kv-row-v{color:var(--accent-secondary)}.kv-accumulator{display:flex;align-items:center;gap:var(--space-md);margin-top:var(--space-md);padding:var(--space-md);background:var(--bg-tertiary);border-radius:var(--radius-md)}.kv-accum-bar{flex:1;height:18px;background:var(--bg-secondary);border-radius:var(--radius-sm);overflow:hidden}.kv-accum-fill{height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));border-radius:var(--radius-sm);transition:width var(--transition-base)}.kv-accum-text{font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap}.kv-accum-value{font-family:var(--font-mono);font-weight:var(--fw-bold);color:var(--text-accent);white-space:nowrap}.kv-layer-note{margin-top:var(--space-sm);font-size:var(--fs-xs);color:var(--text-muted);text-align:center;line-height:1.5}.head-grid-section{padding:var(--space-lg)}.head-grid{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.head-group{display:flex;flex-direction:column;gap:3px;align-items:center;padding:var(--space-sm);background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--border-subtle)}.head-group-label{font-size:9px;font-family:var(--font-mono);color:var(--text-muted)}.head-q-row{display:flex;gap:3px}.head-dot{width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:var(--fw-bold)}.head-dot.q-dot{background:#ff6b6b33;border:1px solid rgba(255,107,107,.35);color:var(--accent-warm)}.head-dot.kv-dot{background:#7c6aff33;border:1px solid rgba(124,106,255,.35);color:var(--text-accent);width:100%;height:18px;border-radius:4px}.head-grid-legend{display:flex;gap:var(--space-lg);justify-content:center;margin-top:var(--space-md);font-size:var(--fs-xs);color:var(--text-muted)}.head-legend-item{display:flex;align-items:center;gap:4px}.head-legend-dot{width:12px;height:12px;border-radius:3px}.head-legend-dot.q-legend{background:#ff6b6b4d;border:1px solid rgba(255,107,107,.4)}.head-legend-dot.kv-legend{background:#7c6aff4d;border:1px solid rgba(124,106,255,.4)}.formula-block{padding:var(--space-lg);font-family:var(--font-mono);font-size:var(--fs-sm);line-height:2;color:var(--text-secondary)}.formula-line{display:flex;align-items:baseline;gap:var(--space-sm);padding:var(--space-xs) 0}.formula-step-num{width:20px;height:20px;border-radius:var(--radius-full);background:var(--bg-tertiary);border:1px solid var(--border-glass);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:var(--fw-bold);color:var(--text-accent);flex-shrink:0}.formula-expr{color:var(--text-primary)}.formula-annotation{font-family:var(--font-sans);font-size:var(--fs-xs);color:var(--text-muted);font-style:italic}.formula-equals{color:var(--accent-primary);font-weight:var(--fw-bold)}.formula-result{padding:var(--space-sm) var(--space-md);background:var(--accent-primary-glow);border:1px solid rgba(124,106,255,.2);border-radius:var(--radius-md);margin-top:var(--space-sm)}.formula-result .formula-expr{color:var(--text-accent);font-weight:var(--fw-bold)}.model-compare-table{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}.model-compare-table th{text-align:left;padding:var(--space-sm);color:var(--text-muted);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.05em;font-size:10px;border-bottom:1px solid var(--border-glass)}.model-compare-table td{padding:var(--space-sm);border-bottom:1px solid var(--border-subtle);font-family:var(--font-mono);font-size:var(--fs-xs)}.model-compare-table .selected-row{background:var(--accent-primary-glow)}.model-compare-table .selected-row td{color:var(--text-primary);font-weight:var(--fw-semibold)}.model-compare-table .mha-badge{font-size:9px;padding:1px 6px;background:#ff6b6b1a;border:1px solid rgba(255,107,107,.2);border-radius:var(--radius-full);color:var(--accent-warm);font-weight:var(--fw-semibold)}.model-compare-table .gqa-badge{font-size:9px;padding:1px 6px;background:#4ecdc41a;border:1px solid rgba(78,205,196,.2);border-radius:var(--radius-full);color:var(--accent-secondary);font-weight:var(--fw-semibold)}@media(max-width:768px){.qkv-projection{flex-direction:column;gap:var(--space-md)}.attn-matmul{flex-direction:column}.head-grid{gap:4px}}.qkv-controls{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md)}.qkv-branch.dim{opacity:.3;pointer-events:none}.qkv-weight-box.computing{box-shadow:0 0 12px currentColor;animation:stage-pulse .8s ease-in-out infinite}.qkv-result-box.visible,.qkv-cache-badge.visible{animation:fadeInScale .3s ease both}.qkv-token-box.stage-active,.qkv-embed-box.stage-active{box-shadow:0 0 12px #4ecdc44d}.qkv-embed-arrow.active,.qkv-arrows-down.active{color:var(--text-accent)}.attn-heat-cell.cell-animate{animation:cellFlash .2s ease both}@keyframes cellFlash{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}.kv-accum-fill.overflow{background:linear-gradient(90deg,var(--accent-primary),var(--accent-warm))}.kv-accum-value.overflow-text{color:var(--accent-warm)}.overflow-counter{display:flex;flex-direction:column;align-items:center;gap:2px;margin:var(--space-md) 0}.overflow-token-count{font-size:var(--fs-3xl);font-weight:var(--fw-extra);font-family:var(--font-mono);letter-spacing:-.02em;line-height:1;transition:color .3s ease}.attn-mode-section{padding:var(--space-lg)}.attn-mode-toggle{display:flex;gap:var(--space-sm);justify-content:center;margin-bottom:var(--space-lg)}.attn-mode-btn{padding:var(--space-sm) var(--space-lg);background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-full);font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}.attn-mode-btn:hover{border-color:var(--border-glass);color:var(--text-secondary)}.attn-mode-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.attn-mode-info{text-align:center;margin-bottom:var(--space-lg)}.attn-mode-name{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--text-primary);margin-bottom:var(--space-xs)}.attn-mode-explanation{font-size:var(--fs-xs);color:var(--text-muted);max-width:500px;margin:0 auto;line-height:1.5}.attn-mode-heads{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:var(--space-md)}.mode-head-group{display:flex;flex-direction:column;align-items:center;gap:3px;padding:var(--space-xs) var(--space-sm);background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:all var(--transition-fast);animation:fadeInScale .2s ease both}.mode-head-group .q-row{display:flex;gap:2px}.mode-head-dot{width:16px;height:16px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:var(--fw-bold)}.mode-head-dot.q-h{background:#ff6b6b33;border:1px solid rgba(255,107,107,.35);color:var(--accent-warm)}.mode-head-dot.kv-h{background:#7c6aff33;border:1px solid rgba(124,106,255,.35);color:var(--text-accent);width:100%;border-radius:3px}.mode-head-label{font-size:8px;color:var(--text-muted);font-family:var(--font-mono)}.attn-mode-stats{display:flex;gap:var(--space-lg);justify-content:center;flex-wrap:wrap;margin-top:var(--space-md)}.mode-stat{text-align:center}.mode-stat-value{font-size:var(--fs-lg);font-weight:var(--fw-bold);font-family:var(--font-mono);color:var(--text-accent)}.mode-stat-label{font-size:var(--fs-xs);color:var(--text-muted)}.mode-stat-value.savings{color:var(--accent-secondary)}.mode-memory-bars{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-lg)}.mode-mem-row{display:flex;align-items:center;gap:var(--space-sm)}.mode-mem-label{width:50px;font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-align:right}.mode-mem-label.active-mode{color:var(--accent-primary)}.mode-mem-label.mha-ref{color:var(--text-muted)}.mode-mem-track{flex:1;height:22px;background:var(--bg-secondary);border-radius:var(--radius-sm);overflow:hidden}.mode-mem-fill{height:100%;border-radius:var(--radius-sm);transition:width .5s ease;display:flex;align-items:center;padding-left:8px}.mode-mem-fill.mha-fill{background:#ff6b6b4d}.mode-mem-fill.current-fill{background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary))}.mode-mem-fill-text{font-size:10px;font-family:var(--font-mono);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);white-space:nowrap}.paged-section{padding:var(--space-lg)}.paged-comparison{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}.paged-side{padding:var(--space-lg);background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--border-subtle)}.paged-side-title{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-primary);margin-bottom:var(--space-sm)}.paged-side-desc{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:var(--space-md);line-height:1.5}.paged-memory-blocks{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:var(--space-sm)}.paged-block{width:28px;height:22px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:var(--fw-bold);transition:all var(--transition-fast)}.paged-block.used-a{background:#7c6aff4d;border:1px solid rgba(124,106,255,.4);color:var(--text-accent)}.paged-block.used-b{background:#4ecdc44d;border:1px solid rgba(78,205,196,.4);color:var(--accent-secondary)}.paged-block.used-c{background:#ffd73b4d;border:1px solid rgba(255,215,59,.4);color:var(--accent-gold)}.paged-block.wasted{background:#ff6b6b26;border:1px dashed rgba(255,107,107,.3);color:var(--accent-warm)}.paged-block.free{background:var(--bg-secondary);border:1px dashed var(--border-subtle);color:var(--text-muted)}.paged-efficiency{margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-align:center}.paged-efficiency.poor{background:#ff6b6b1a;color:var(--accent-warm)}.paged-efficiency.good{background:#4ecdc41a;color:var(--accent-secondary)}.block-table{width:100%;border-collapse:collapse;font-size:var(--fs-xs);margin-top:var(--space-md)}.block-table th{text-align:left;padding:var(--space-xs) var(--space-sm);color:var(--text-muted);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.05em;font-size:10px;border-bottom:1px solid var(--border-glass)}.block-table td{padding:var(--space-xs) var(--space-sm);border-bottom:1px solid var(--border-subtle);font-family:var(--font-mono);font-size:11px}.kv-opt-section{padding:var(--space-lg)}.kv-opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-md)}.kv-opt-card{padding:var(--space-lg);background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:border-color var(--transition-fast)}.kv-opt-card:hover{border-color:var(--border-glass)}.kv-opt-icon{font-size:var(--fs-xl);margin-bottom:var(--space-sm)}.kv-opt-name{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-primary);margin-bottom:var(--space-xs)}.kv-opt-desc{font-size:var(--fs-xs);color:var(--text-secondary);line-height:1.6;margin-bottom:var(--space-sm)}.kv-opt-detail{font-size:11px;color:var(--text-muted);line-height:1.5;padding-top:var(--space-xs);border-top:1px solid var(--border-subtle)}.kv-opt-badge{display:inline-block;padding:2px 8px;border-radius:var(--radius-full);font-size:10px;font-weight:var(--fw-semibold);margin-right:4px}.kv-opt-badge.quant{background:#7c6aff1f;color:var(--text-accent)}.kv-opt-badge.evict{background:#ff6b6b1f;color:var(--accent-warm)}.kv-opt-badge.offload{background:#4ecdc41f;color:var(--accent-secondary)}@media(max-width:768px){.paged-comparison,.kv-opt-grid{grid-template-columns:1fr}}.mem-hierarchy{padding:var(--space-lg)}.mem-pyramid{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:var(--space-md)}.mem-tier{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);transition:all var(--transition-fast);cursor:default}.mem-tier:hover{transform:scale(1.02)}.mem-tier.sram-tier{background:#ffd73b1a;border:1px solid rgba(255,215,59,.25);width:45%;min-width:280px}.mem-tier.hbm-tier{background:#7c6aff14;border:1px solid rgba(124,106,255,.2);width:70%;min-width:350px}.mem-tier.dram-tier{background:#4ecdc40f;border:1px solid rgba(78,205,196,.15);width:90%;min-width:420px}.mem-tier-icon{font-size:var(--fs-lg)}.mem-tier-info{flex:1}.mem-tier-name{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-primary)}.mem-tier-specs{font-size:var(--fs-xs);color:var(--text-muted);font-family:var(--font-mono)}.mem-tier-speed{font-size:var(--fs-xs);font-weight:var(--fw-bold);text-align:right;white-space:nowrap}.mem-tier.sram-tier .mem-tier-speed{color:var(--accent-gold)}.mem-tier.hbm-tier .mem-tier-speed{color:var(--text-accent)}.mem-tier.dram-tier .mem-tier-speed{color:var(--accent-secondary)}.mem-tier-ratio{font-size:10px;font-weight:var(--fw-regular);color:var(--text-muted)}.attn-compare{padding:var(--space-lg)}.attn-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}.attn-flow-col{padding:var(--space-lg);background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--border-subtle)}.attn-flow-col.flash-col{border-color:#4ecdc440}.attn-flow-title{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-primary);margin-bottom:var(--space-sm);display:flex;align-items:center;gap:var(--space-xs)}.attn-flow-subtitle{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:var(--space-md);line-height:1.5}.flow-steps{display:flex;flex-direction:column;gap:0}.flow-step{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) 0;position:relative}.flow-step-num{width:22px;height:22px;border-radius:var(--radius-full);background:var(--bg-secondary);border:1px solid var(--border-glass);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:var(--fw-bold);color:var(--text-accent);flex-shrink:0}.flow-step-content{flex:1}.flow-step-action{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-primary)}.flow-step-detail{font-size:11px;color:var(--text-muted);margin-top:2px}.flow-step-io{font-family:var(--font-mono);font-size:10px;padding:2px 6px;border-radius:3px;margin-top:2px;display:inline-block}.flow-step-io.read{background:#ff6b6b1a;color:var(--accent-warm)}.flow-step-io.write{background:#4ecdc41a;color:var(--accent-secondary)}.flow-step-io.sram-op{background:#ffd73b1a;color:var(--accent-gold)}.io-counter{margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);font-size:var(--fs-xs);text-align:center}.io-counter.standard-io{background:#ff6b6b14;border:1px solid rgba(255,107,107,.15);color:var(--accent-warm)}.io-counter.flash-io{background:#4ecdc414;border:1px solid rgba(78,205,196,.15);color:var(--accent-secondary)}.io-counter-value{font-size:var(--fs-lg);font-weight:var(--fw-bold);font-family:var(--font-mono)}.io-counter-label{font-size:var(--fs-xs);color:var(--text-muted)}.tile-calc{padding:var(--space-lg)}.tile-calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);align-items:start}.tile-params{display:flex;flex-direction:column;gap:var(--space-sm)}.tile-param-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xs) var(--space-sm);background:var(--bg-tertiary);border-radius:var(--radius-sm)}.tile-param-label{font-size:var(--fs-xs);color:var(--text-muted)}.tile-param-value{font-size:var(--fs-xs);font-weight:var(--fw-bold);font-family:var(--font-mono);color:var(--text-accent)}.tile-result{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:var(--space-lg);background:var(--accent-primary-glow);border:1px solid rgba(124,106,255,.2);border-radius:var(--radius-md)}.tile-result-value{font-size:var(--fs-3xl);font-weight:var(--fw-extra);font-family:var(--font-mono);color:var(--text-accent)}.tile-result-label{font-size:var(--fs-xs);color:var(--text-muted);text-align:center}.tile-visual{display:grid;gap:2px;margin-top:var(--space-sm)}.tile-cell{width:8px;height:8px;border-radius:2px;background:var(--accent-primary);opacity:.5}.tile-cell.active{opacity:1;background:var(--accent-secondary)}.softmax-section{padding:var(--space-lg)}.softmax-comparison{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}.softmax-card{padding:var(--space-lg);background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}.softmax-card-title{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-primary);margin-bottom:var(--space-sm)}.softmax-formula{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-accent);padding:var(--space-sm) var(--space-md);background:var(--bg-secondary);border-radius:var(--radius-sm);margin-bottom:var(--space-sm)}.softmax-steps{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.7}.softmax-steps ol{padding-left:1.2em}.softmax-steps li{margin-bottom:4px}.softmax-steps strong{color:var(--text-secondary)}.paradox-box{padding:var(--space-lg);border-radius:var(--radius-md);text-align:center}.paradox-title{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--text-primary);margin-bottom:var(--space-sm)}.paradox-desc{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.7;max-width:600px;margin:0 auto}@media(max-width:768px){.attn-compare-grid,.tile-calc-grid,.softmax-comparison{grid-template-columns:1fr}.mem-tier{width:100%!important;min-width:unset!important}}.flow-step{transition:all .3s ease;border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-xs)}.flow-step.step-active{background:#7c6aff1a;border-left:3px solid var(--accent-primary);box-shadow:0 0 12px #7c6aff26}.flow-step.step-active .flow-step-num{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}.flow-step.step-done{opacity:.45}.flow-step.step-done .flow-step-num{background:var(--accent-secondary);color:#fff;border-color:var(--accent-secondary)}.precision-section{padding:var(--space-lg)}.precision-ladder{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-md)}.precision-rung{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);transition:all var(--transition-fast);cursor:pointer}.precision-rung:hover{transform:translate(4px)}.precision-rung.selected{box-shadow:0 0 12px var(--accent-primary-glow)}.precision-rung.fp32{background:#ff6b6b14;border:1px solid rgba(255,107,107,.2)}.precision-rung.fp16{background:#7c6aff14;border:1px solid rgba(124,106,255,.2)}.precision-rung.int8{background:#4ecdc414;border:1px solid rgba(78,205,196,.2)}.precision-rung.int4{background:#ffd73b14;border:1px solid rgba(255,215,59,.2)}.precision-bits{width:60px;font-size:var(--fs-lg);font-weight:var(--fw-extra);font-family:var(--font-mono)}.precision-rung.fp32 .precision-bits{color:var(--accent-warm)}.precision-rung.fp16 .precision-bits{color:var(--text-accent)}.precision-rung.int8 .precision-bits{color:var(--accent-secondary)}.precision-rung.int4 .precision-bits{color:var(--accent-gold)}.precision-info{flex:1}.precision-name{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-primary)}.precision-desc{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.4}.precision-size{text-align:right;min-width:90px}.precision-size-value{font-size:var(--fs-sm);font-weight:var(--fw-bold);font-family:var(--font-mono);color:var(--text-accent)}.precision-size-label{font-size:10px;color:var(--text-muted)}.precision-mem-bar{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-md)}.precision-mem-track{flex:1;height:24px;background:var(--bg-secondary);border-radius:var(--radius-sm);overflow:hidden}.precision-mem-fill{height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));border-radius:var(--radius-sm);transition:width .5s ease;display:flex;align-items:center;padding-left:8px}.precision-mem-text{font-size:10px;font-family:var(--font-mono);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);white-space:nowrap}.weight-grid-section{padding:var(--space-lg)}.weight-grid-controls{display:flex;gap:var(--space-sm);margin-bottom:var(--space-md);justify-content:center}.weight-grid-btn{padding:var(--space-xs) var(--space-md);background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-full);font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}.weight-grid-btn:hover{border-color:var(--border-glass)}.weight-grid-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.weight-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;max-width:400px;margin:0 auto}.weight-cell{aspect-ratio:1;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;font-family:var(--font-mono);font-weight:var(--fw-medium);transition:all .3s ease;cursor:default;position:relative}.weight-cell.outlier{box-shadow:0 0 6px #ff6b6b80;border:2px solid var(--accent-warm)!important}.weight-cell.outlier:after{content:"!";position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:var(--accent-warm);color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;font-weight:var(--fw-bold)}.weight-error-display{text-align:center;margin-top:var(--space-md);font-size:var(--fs-xs);color:var(--text-muted)}.weight-error-value{font-family:var(--font-mono);font-weight:var(--fw-bold);color:var(--text-accent)}.ptq-qat-section{padding:var(--space-lg)}.ptq-qat-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}.ptq-qat-card{padding:var(--space-lg);background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}.ptq-qat-title{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-primary);margin-bottom:var(--space-xs)}.ptq-qat-subtitle{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:var(--space-md);line-height:1.5}.ptq-qat-flow{display:flex;flex-direction:column;gap:var(--space-sm)}.ptq-qat-step{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);background:var(--bg-secondary);border-radius:var(--radius-sm);font-size:var(--fs-xs)}.ptq-qat-step-icon{width:24px;text-align:center;font-size:var(--fs-sm)}.ptq-qat-step-text{color:var(--text-secondary)}.ptq-qat-pros{margin-top:var(--space-md);font-size:var(--fs-xs);color:var(--text-muted);line-height:1.6}.ptq-qat-pros strong{color:var(--accent-secondary)}.quant-tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-md)}.quant-tech-card{padding:var(--space-lg);background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:border-color var(--transition-fast)}.quant-tech-card:hover{border-color:var(--border-glass)}.quant-tech-name{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-primary);margin-bottom:var(--space-xs)}.quant-tech-tag{display:inline-block;font-size:10px;padding:1px 8px;border-radius:var(--radius-full);font-weight:var(--fw-semibold);margin-bottom:var(--space-sm)}.quant-tech-tag.ptq-tag{background:#7c6aff1f;color:var(--text-accent)}.quant-tech-tag.both-tag{background:#4ecdc41f;color:var(--accent-secondary)}.quant-tech-desc{font-size:var(--fs-xs);color:var(--text-secondary);line-height:1.6}.fits-section{padding:var(--space-lg);overflow-x:auto}.fits-table{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}.fits-table th{padding:var(--space-sm);text-align:center;font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.04em;font-size:10px;border-bottom:2px solid var(--border-glass);color:var(--text-muted)}.fits-table th.model-col{text-align:left}.fits-table td{padding:var(--space-xs) var(--space-sm);text-align:center;border-bottom:1px solid var(--border-subtle);font-family:var(--font-mono);font-size:11px}.fits-table td.model-name{text-align:left;font-family:var(--font-sans);font-weight:var(--fw-semibold);color:var(--text-primary)}.fits-cell{display:flex;flex-direction:column;align-items:center;gap:1px}.fits-verdict{font-size:14px}.fits-size{font-size:9px;color:var(--text-muted)}.fits-table tr.selected-row{background:var(--accent-primary-glow)}.fits-precision-header{display:flex;flex-direction:column;align-items:center}.fits-precision-label{font-size:10px;color:var(--text-accent)}@media(max-width:768px){.ptq-qat-grid,.quant-tech-grid{grid-template-columns:1fr}.weight-grid{grid-template-columns:repeat(6,1fr);max-width:280px}}.weight-cell.wave-hit{animation:waveFlash .3s ease forwards}@keyframes waveFlash{0%{transform:scale(1);filter:brightness(1)}40%{transform:scale(1.25);filter:brightness(1.6)}to{transform:scale(1);filter:brightness(1)}}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-xl);background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle)}.app-logo{display:flex;flex-direction:column;gap:2px}.app-title{font-size:var(--fs-xl);font-weight:var(--fw-extra);letter-spacing:-.02em;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-subtitle{font-size:var(--fs-xs);color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;font-weight:var(--fw-medium)}.app-main{flex:1;padding:var(--space-xl) var(--space-2xl);max-width:1200px;width:100%;margin:0 auto}.placeholder-chapter{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);min-height:400px;text-align:center}.placeholder-chapter h2{font-size:var(--fs-2xl);font-weight:var(--fw-bold);color:var(--text-primary)}@media(max-width:768px){.app-header{flex-direction:column;gap:var(--space-md);align-items:flex-start}.app-main{padding:var(--space-lg)}}