:root{--bg-primary:#0d0d12;--bg-secondary:#15151d;--bg-tertiary:#1c1c27;--bg-card:#1f1f2c;--bg-hover:#252535;--text-primary:#e8e8ed;--text-secondary:#a0a0b0;--text-muted:#6a6a7a;--accent-primary:#7c5cff;--accent-secondary:#5c9cff;--accent-glow:rgba(124,92,255,0.3);--color-embedding:#4ecdc4;--color-attention:#5c9cff;--color-ffn:#7cff5c;--color-norm:#ffb05c;--color-moe:#ff5c8a;--color-position:#c45cff;--color-residual:#8a8a9a;--color-input:#6a6a7a;--color-output:#ff9f5c;--block-bg:#252535;--block-border:#35354a;--transformer-bg:rgba(92,156,255,0.08);--border-color:#2a2a3a;--border-light:#35354a;--shadow-sm:0 2px 4px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.4);--shadow-lg:0 8px 24px rgba(0,0,0,0.5);--shadow-glow:0 0 20px var(--accent-glow);--transition-fast:150ms ease;--transition-normal:250ms ease;--transition-slow:400ms ease;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--font-sans:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace;}[data-theme="light"]{--bg-primary:#f5f6f8;--bg-secondary:#ffffff;--bg-tertiary:#eef0f4;--bg-card:#ffffff;--bg-hover:#e8eaef;--text-primary:#1a1a2e;--text-secondary:#4a4a5e;--text-muted:#7a7a8e;--accent-primary:#6b4eff;--accent-secondary:#4a8cff;--accent-glow:rgba(107,78,255,0.2);--color-embedding:#3db8ae;--color-attention:#4a8cff;--color-ffn:#5cd14e;--color-norm:#e69840;--color-moe:#e64d7a;--color-position:#a84de6;--color-residual:#7a7a8e;--color-input:#5a5a6e;--color-output:#e68840;--block-bg:#f0f2f6;--block-border:#d0d4dc;--transformer-bg:rgba(74,140,255,0.08);--border-color:#d8dce4;--border-light:#e4e8f0;--shadow-sm:0 2px 4px rgba(0,0,0,0.06);--shadow-md:0 4px 12px rgba(0,0,0,0.08);--shadow-lg:0 8px 24px rgba(0,0,0,0.1);--shadow-glow:0 0 20px var(--accent-glow);}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}html{font-size:16px;scroll-behavior:smooth;}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden;}.app-container{display:flex;flex-direction:column;min-height:100vh;}.sidebar-header{padding-bottom:var(--spacing-md);margin-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color);}.logo{font-size:1.25rem;font-weight:700;display:flex;align-items:center;gap:var(--spacing-sm);margin:0;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.logo-icon{-webkit-text-fill-color:var(--accent-primary);font-size:0.9rem;animation:pulse 2s ease-in-out infinite;}.attribution{display:flex;align-items:center;gap:var(--spacing-xs);margin-top:6px;font-size:0.68rem;}.author{color:var(--text-secondary);}.attribution-sep{color:var(--text-muted);font-size:0.5rem;}.blog-link{color:var(--accent-secondary);text-decoration:none;transition:color var(--transition-fast);font-weight:500;}.blog-link:hover{color:var(--accent-primary);}@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.7;transform:scale(0.95);}}.main-content{display:flex;flex:1;overflow:hidden;}.center-content{flex:1;display:flex;flex-direction:column;overflow:hidden;}.center-upper{flex:1;display:flex;overflow:hidden;}.controls-panel{width:260px;min-width:260px;background:var(--bg-secondary);border-right:1px solid var(--border-color);padding:var(--spacing-md);overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacing-sm);}.control-section{background:var(--bg-tertiary);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);}.section-title{font-size:0.6rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);margin-bottom:var(--spacing-sm);}.model-dropdown{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-sans);font-size:0.825rem;cursor:pointer;transition:all var(--transition-fast);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0a0b0' d='M6 8L2 4h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}.model-dropdown:hover{border-color:var(--accent-primary);}.model-dropdown:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow);}.model-dropdown option{background:var(--bg-card);color:var(--text-primary);padding:var(--spacing-sm);}.model-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm);margin-top:var(--spacing-md);}.model-stats.hidden{display:none;}.stat-item{background:var(--bg-card);border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-sm);display:flex;flex-direction:column;gap:2px;}.stat-label{font-size:0.525rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);}.stat-value{font-family:var(--font-mono);font-size:0.725rem;font-weight:500;color:var(--accent-secondary);}.theme-toggle{display:flex;gap:var(--spacing-sm);}.toggle-btn{flex:1;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-md);color:var(--text-secondary);font-family:var(--font-sans);font-size:0.725rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);}.toggle-btn:hover{background:var(--bg-hover);border-color:var(--accent-primary);}.toggle-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:white;}.toggle-icon{font-size:0.9rem;}.legend{display:flex;flex-direction:column;gap:var(--spacing-xs);}.legend-item{display:flex;align-items:center;gap:var(--spacing-sm);font-size:0.675rem;color:var(--text-secondary);}.legend-color{width:16px;height:16px;border-radius:var(--radius-sm);flex-shrink:0;}.checkbox-label{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;font-size:0.725rem;color:var(--text-secondary);user-select:none;}.checkbox-label input[type="checkbox"]{display:none;}.checkbox-custom{width:18px;height:18px;border:2px solid var(--border-light);border-radius:var(--radius-sm);background:var(--bg-card);position:relative;transition:all var(--transition-fast);flex-shrink:0;}.checkbox-label:hover .checkbox-custom{border-color:var(--accent-primary);}.checkbox-label input[type="checkbox"]:checked+.checkbox-custom{background:var(--accent-primary);border-color:var(--accent-primary);}.checkbox-label input[type="checkbox"]:checked+.checkbox-custom::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-size:12px;font-weight:bold;}.instructions{background:transparent;border:none;padding:0;}.instructions p{font-size:0.65rem;color:var(--text-muted);line-height:1.4;}.instructions strong{color:var(--accent-primary);}.diagram-area{flex:1;min-width:0;padding:var(--spacing-lg);overflow:auto;display:flex;align-items:flex-start;justify-content:center;background:radial-gradient(circle at 20% 30%,rgba(124,92,255,0.03) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(92,156,255,0.03) 0%,transparent 50%),var(--bg-primary);}.diagrams-wrapper{display:flex;gap:var(--spacing-lg);align-items:flex-start;justify-content:center;flex-wrap:nowrap;width:100%;}.diagram-slot{display:flex;flex-direction:column;align-items:center;}.diagram-slot.hidden{display:none;}.diagram-header{font-size:1rem;font-weight:600;color:var(--accent-primary);margin-bottom:var(--spacing-sm);text-align:center;min-height:24px;}.diagram-container{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);width:380px;min-width:280px;height:550px;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:var(--shadow-lg);padding:var(--spacing-sm);flex-shrink:1;overflow:auto;}.diagrams-wrapper.comparing .diagram-container{width:340px;min-width:260px;height:500px;}.side-details-panel{width:0;min-width:0;background:var(--bg-secondary);border-left:1px solid var(--border-color);overflow:hidden;transition:width var(--transition-normal),min-width var(--transition-normal);display:flex;flex-direction:column;flex-shrink:0;}.side-details-panel.open{width:380px;min-width:380px;}.side-details-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-color);background:var(--bg-tertiary);flex-shrink:0;}.side-details-title{font-size:0.775rem;font-weight:600;color:var(--accent-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.side-details-content{flex:1;padding:var(--spacing-md);overflow-y:auto;}.side-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-muted);text-align:center;padding:var(--spacing-xl);}.side-placeholder-icon{font-size:2.5rem;opacity:0.3;margin-bottom:var(--spacing-md);}.close-btn.small{width:24px;height:24px;font-size:1rem;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}.module-visual-card{background:var(--bg-tertiary);border-radius:var(--radius-lg);border:1px solid var(--border-color);overflow:hidden;margin-bottom:var(--spacing-md);}.module-card-header{padding:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-sm);border-bottom:1px solid var(--border-color);}.module-icon{width:36px;height:36px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:white;flex-shrink:0;}.module-card-title{font-size:0.825rem;font-weight:600;color:var(--text-primary);}.module-card-subtitle{font-size:0.625rem;color:var(--text-muted);}.module-card-body{padding:var(--spacing-md);}.module-flow{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md) 0;}.flow-item{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-md);font-size:0.675rem;color:var(--text-secondary);min-width:120px;text-align:center;}.flow-item.highlight{border-color:var(--accent-primary);color:var(--accent-primary);font-weight:500;}.flow-arrow{color:var(--text-muted);font-size:0.9rem;}.tensor-shapes{display:flex;flex-direction:column;gap:var(--spacing-sm);}.tensor-shape-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--border-color);}.tensor-label{font-size:0.625rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;}.tensor-value{font-family:var(--font-mono);font-size:0.725rem;color:var(--accent-secondary);}.key-params{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm);}.key-param{background:var(--bg-card);border-radius:var(--radius-sm);padding:var(--spacing-sm);text-align:center;border:1px solid var(--border-color);}.key-param-value{font-family:var(--font-mono);font-size:0.975rem;font-weight:600;color:var(--accent-primary);}.key-param-label{font-size:0.525rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-top:2px;}.formula-display{background:var(--bg-primary);border-radius:var(--radius-md);padding:var(--spacing-md);font-family:var(--font-mono);font-size:0.85rem;color:var(--accent-secondary);border-left:3px solid var(--accent-primary);overflow-x:auto;white-space:pre-wrap;line-height:1.6;}.side-section{margin-bottom:var(--spacing-md);}.side-section-title{font-size:0.575rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);margin-bottom:var(--spacing-sm);}.side-section-content{color:var(--text-secondary);font-size:0.725rem;line-height:1.5;}.placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);color:var(--text-muted);}.placeholder-icon{font-size:4rem;opacity:0.3;}.placeholder p{font-size:1rem;}.details-panel{background:var(--bg-secondary);border-top:1px solid var(--border-color);max-height:0;overflow:hidden;display:flex;flex-direction:column;transition:max-height var(--transition-normal);flex-shrink:0;}.details-panel.open{max-height:40vh;}.details-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-xl);border-bottom:1px solid var(--border-color);background:var(--bg-tertiary);flex-shrink:0;}.details-title{font-size:1.1rem;font-weight:600;color:var(--accent-primary);}.close-btn{width:32px;height:32px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:1.25rem;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}.close-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent-primary);}.details-content{padding:var(--spacing-xl);overflow-y:auto;flex:1;}.details-placeholder{text-align:center;color:var(--text-muted);padding:var(--spacing-xl);}.detail-section{margin-bottom:var(--spacing-xl);}.detail-section:last-child{margin-bottom:0;}.detail-section h3{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);margin-bottom:var(--spacing-sm);}.detail-section p{color:var(--text-secondary);line-height:1.6;}.detail-section .purpose{font-size:1rem;color:var(--text-primary);}.math-formula{font-family:var(--font-mono);background:var(--bg-tertiary);padding:var(--spacing-md);border-radius:var(--radius-md);border-left:3px solid var(--accent-primary);color:var(--accent-secondary);white-space:pre-wrap;font-size:0.9rem;overflow-x:auto;}.code-block{background:var(--bg-primary);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-color);}.code-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-tertiary);border-bottom:1px solid var(--border-color);}.code-lang{font-family:var(--font-mono);font-size:0.75rem;color:var(--text-muted);text-transform:uppercase;}.code-content{padding:var(--spacing-md);overflow-x:auto;}.code-content pre{margin:0;font-family:var(--font-mono);font-size:0.85rem;line-height:1.5;color:var(--text-primary);white-space:pre;}.code-content .keyword{color:var(--accent-primary);}.code-content .function{color:var(--color-ffn);}.code-content .string{color:var(--color-embedding);}.code-content .comment{color:var(--text-muted);font-style:italic;}.code-content .number{color:var(--color-norm);}.params-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--spacing-sm);}.param-item{background:var(--bg-tertiary);border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);display:flex;flex-direction:column;gap:2px;border:1px solid var(--border-color);}.param-name{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);}.param-value{font-family:var(--font-mono);font-size:0.9rem;font-weight:500;color:var(--accent-secondary);}.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-xl);}.details-left,.details-right{display:flex;flex-direction:column;gap:var(--spacing-lg);}.diagram-svg{width:100%;height:100%;}.svg-module{cursor:pointer;transition:all var(--transition-fast);}.svg-module:hover{filter:brightness(1.2);}.svg-module.selected{filter:brightness(1.3);}.svg-module rect,.svg-module path{transition:all var(--transition-fast);}.svg-module:hover rect{stroke-width:2;}.svg-label{font-family:var(--font-sans);font-size:12px;pointer-events:none;}.svg-annotation{font-family:var(--font-mono);font-size:11px;fill:var(--text-muted);}.svg-annotation-value{fill:var(--accent-secondary);}@media (max-width:1400px){.side-details-panel.open{width:320px;min-width:320px;}}@media (max-width:1200px){.details-grid{grid-template-columns:1fr;}.side-details-panel.open{width:280px;min-width:280px;}}@media (max-width:900px){.main-content{flex-direction:column;}.center-content{flex-direction:column;}.center-upper{flex-direction:column;}.controls-panel{width:100%;min-width:unset;flex-direction:row;flex-wrap:wrap;padding:var(--spacing-md);border-right:none;border-bottom:1px solid var(--border-color);}.control-section{flex:1;min-width:200px;}.diagram-area{padding:var(--spacing-md);}.diagram-container{min-width:unset;width:100%;}.side-details-panel{width:100% !important;min-width:unset !important;border-left:none;border-top:1px solid var(--border-color);max-height:0;overflow:hidden;transition:max-height var(--transition-normal);}.side-details-panel.open{width:100% !important;min-width:unset !important;max-height:50vh;overflow:auto;}.details-panel{left:0;}}@media (max-width:600px){.controls-panel{flex-direction:column;padding:var(--spacing-sm);gap:var(--spacing-xs);}.control-section{min-width:unset;width:100%;}.sidebar-header{text-align:center;}.logo{justify-content:center;font-size:1.1rem;}.attribution{justify-content:center;}.diagrams-wrapper{flex-direction:column !important;align-items:center;gap:var(--spacing-md);}.diagram-slot{width:100%;}.diagram-container{width:100% !important;min-width:unset !important;height:auto !important;min-height:400px;}.diagrams-wrapper.comparing .diagram-container{width:100% !important;height:auto !important;min-height:350px;}.diagram-header{font-size:0.9rem;}.theme-toggle{flex-direction:row;}.toggle-btn{padding:var(--spacing-xs) var(--spacing-sm);font-size:0.65rem;}.section-title{font-size:0.55rem;}.checkbox-label{font-size:0.65rem;}.instructions p{font-size:0.6rem;text-align:center;}.model-dropdown{padding:var(--spacing-md);font-size:1rem;min-height:48px;}.toggle-btn{min-height:44px;padding:var(--spacing-sm) var(--spacing-md);font-size:0.75rem;}.checkbox-label{padding:var(--spacing-sm) 0;font-size:0.8rem;}.checkbox-custom{width:24px;height:24px;}.details-panel.open{max-height:50vh;}.details-header{padding:var(--spacing-sm) var(--spacing-md);}.details-content{padding:var(--spacing-md);}.close-btn,.close-btn.small{width:44px;height:44px;font-size:1.5rem;}}@media (max-width:400px){.logo{font-size:1rem;}.attribution{font-size:0.6rem;flex-wrap:wrap;justify-content:center;}.diagram-container{min-height:350px;padding:var(--spacing-xs);}.control-section{padding:var(--spacing-xs) var(--spacing-sm);}.section-title{font-size:0.5rem;}.key-params{grid-template-columns:1fr;}.params-grid{grid-template-columns:1fr;}.param-tooltip{max-width:calc(100vw - 20px);left:10px !important;right:10px !important;}}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@keyframes slideUp{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}.fade-in{animation:fadeIn var(--transition-normal) ease forwards;}.slide-up{animation:slideUp var(--transition-normal) ease forwards;}::-webkit-scrollbar{width:8px;height:8px;}::-webkit-scrollbar-track{background:var(--bg-primary);}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:4px;}::-webkit-scrollbar-thumb:hover{background:var(--text-muted);}::selection{background:var(--accent-primary);color:white;}.param-tooltip{position:fixed;z-index:1000;background:var(--bg-tertiary);border:1px solid var(--accent-primary);border-radius:var(--radius-md);padding:var(--spacing-md);min-width:200px;max-width:320px;box-shadow:var(--shadow-lg),0 0 20px rgba(124,92,255,0.2);pointer-events:auto;animation:tooltipFadeIn 150ms ease;}@keyframes tooltipFadeIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}.param-tooltip-header{margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color);}.param-tooltip-title{font-size:0.85rem;font-weight:600;color:var(--accent-primary);}.param-tooltip-formula{font-family:var(--font-mono);font-size:0.8rem;color:var(--text-secondary);margin-bottom:var(--spacing-sm);padding:var(--spacing-sm);background:var(--bg-card);border-radius:var(--radius-sm);text-align:center;}.param-tooltip-values{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--spacing-sm);}.param-tooltip-value-row{display:flex;justify-content:space-between;font-size:0.75rem;}.param-tooltip-value-name{color:var(--text-muted);}.param-tooltip-value-num{font-family:var(--font-mono);color:var(--accent-secondary);}.param-tooltip-result{display:flex;justify-content:space-between;align-items:center;padding-top:var(--spacing-sm);border-top:1px solid var(--border-color);font-weight:600;}.param-tooltip-result-label{font-size:0.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;}.param-tooltip-result-value{font-family:var(--font-mono);font-size:0.95rem;color:var(--color-ffn);}.param-tooltip-note{margin-top:var(--spacing-sm);padding-top:var(--spacing-sm);border-top:1px dashed var(--border-color);font-size:0.7rem;color:var(--text-muted);font-style:italic;}