@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{min-height:100vh;font-family:IBM Plex Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#000}#root{min-height:100vh}button{font-family:inherit;cursor:pointer}input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:root{--bg-primary: #000000;--bg-secondary: #0a0a0a;--bg-tertiary: #141414;--bg-card: #0d0d0d;--bg-hover: #1a1a1a;--accent-primary: #c41e6c;--accent-secondary: #e91e8c;--accent-tertiary: #ff4d9d;--accent-success: #22c55e;--accent-warning: #eab308;--accent-error: #ef4444;--text-primary: #ffffff;--text-secondary: #a1a1a1;--text-muted: #666666;--text-code: #ff8ac4;--border-color: #2a2a2a;--border-subtle: #1a1a1a;--font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "IBM Plex Mono", "Fira Code", monospace;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .5);--shadow-md: 0 4px 12px rgba(0, 0, 0, .6);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .7);--shadow-glow: 0 0 30px rgba(196, 30, 108, .25)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:linear-gradient(180deg,var(--bg-tertiary) 0%,var(--bg-primary) 100%);border-bottom:1px solid var(--border-color);padding:var(--spacing-md) var(--spacing-xl)}.header-content{max-width:1800px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.logo-section{display:flex;align-items:center;gap:var(--spacing-md)}.logo{font-size:2.5rem;color:var(--accent-primary);filter:drop-shadow(0 0 12px var(--accent-primary))}.title-group h1{font-size:1.5rem;font-weight:600;color:var(--text-primary);letter-spacing:-.02em}.logo-accent{color:var(--accent-primary)}.logo-separator{color:var(--text-muted);font-weight:400;margin:0 .25rem}.logo-spacer{display:inline-block;width:1.5rem}.subtitle{font-size:.85rem;color:var(--text-secondary);margin-top:2px}.main{flex:1;display:flex;gap:var(--spacing-lg);padding:var(--spacing-lg);max-width:1800px;margin:0 auto;width:100%}.sidebar{width:360px;flex-shrink:0;display:flex;flex-direction:column;gap:var(--spacing-md)}.content{flex:1;min-width:0}.layer-type-selector{display:flex;gap:var(--spacing-sm)}.layer-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md);background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease}.layer-btn:hover:not(.disabled){background:var(--bg-hover);border-color:var(--accent-primary)}.layer-btn.active{background:linear-gradient(135deg,#c41e6c33,#e91e8c1a);border-color:var(--accent-primary);box-shadow:var(--shadow-glow)}.layer-btn.disabled{opacity:.5;cursor:not-allowed}.layer-icon{font-size:1.75rem;color:var(--accent-primary)}.layer-name{font-size:1rem;font-weight:600;color:var(--text-primary)}.layer-desc{font-size:.75rem;color:var(--text-muted)}.params-panel{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg)}.params-panel h2{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.panel-desc{font-family:var(--font-mono);font-size:.85rem;color:var(--accent-primary);margin-bottom:var(--spacing-lg);padding:var(--spacing-sm) var(--spacing-md);background:#c41e6c1a;border-radius:var(--radius-sm);border:1px solid rgba(196,30,108,.25)}.params-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.params-section{margin-bottom:var(--spacing-lg)}.params-section h3{font-size:.9rem;font-weight:500;color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.param-input{display:flex;flex-direction:column;gap:var(--spacing-xs)}.param-input.disabled{opacity:.4}.param-header{display:flex;flex-direction:column;gap:2px}.param-input label{font-size:.9rem;font-weight:600;color:var(--text-primary)}.param-desc{font-size:.7rem;color:var(--text-muted)}.param-input input{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-mono);font-size:.95rem;transition:all .2s ease}.param-input input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px #c41e6c33}.param-input input:disabled{background:var(--bg-tertiary);cursor:not-allowed}.config-section{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.selector-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.selector-group.disabled{opacity:.4}.selector-group label{font-size:.85rem;font-weight:500;color:var(--text-secondary)}.selector-buttons{display:flex;gap:var(--spacing-xs)}.selector-btn{flex:1;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease}.selector-btn:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}.selector-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--bg-primary)}.selector-btn:disabled{cursor:not-allowed}.tile-info{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-secondary);border-radius:var(--radius-sm);margin-bottom:var(--spacing-lg)}.tile-label{font-size:.85rem;color:var(--text-secondary)}.tile-value{font-family:var(--font-mono);font-size:.9rem;color:var(--text-code);font-weight:500}.compute-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-tertiary) 100%);border:none;border-radius:var(--radius-md);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.compute-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-md),0 0 25px #c41e6c66}.compute-btn:active:not(:disabled){transform:translateY(0)}.compute-btn:disabled{opacity:.6;cursor:not-allowed}.compute-icon{font-size:.85rem}.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.coming-soon-badge{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);background:#f59e0b26;border:1px solid rgba(245,158,11,.3);border-radius:var(--radius-sm);color:var(--accent-warning);font-size:.8rem;font-weight:500;margin-bottom:var(--spacing-lg)}.disabled-panel{opacity:.7}.results-panel{display:flex;flex-direction:column;gap:var(--spacing-lg)}.results-panel.loading,.results-panel.empty{display:flex;align-items:center;justify-content:center;min-height:400px}.loading-content,.empty-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);text-align:center;color:var(--text-secondary)}.loading-spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite}.empty-icon{font-size:3rem;opacity:.5}.empty-content h3{font-size:1.2rem;color:var(--text-primary)}.empty-content p{font-size:.9rem;max-width:300px}.result-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg)}.result-card h3{display:flex;align-items:center;gap:var(--spacing-sm);font-size:1.1rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-lg)}.card-icon{font-size:1.2rem}.mapping-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg)}.mapping-section h4{font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-subtle)}.mapping-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) 0}.mapping-label{font-size:.85rem;color:var(--text-secondary)}.mapping-value{font-family:var(--font-mono);font-size:.9rem;color:var(--text-primary);font-weight:500}.mapping-value.highlight{color:var(--accent-primary)}.mapping-value.code{color:var(--text-code)}.mapping-value.warning{color:var(--accent-warning)}.mapping-value.success{color:var(--accent-success)}.summary-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--border-subtle)}.total-latency{display:flex;flex-direction:column;gap:var(--spacing-xs)}.latency-label{font-size:.85rem;color:var(--text-secondary)}.latency-value{font-family:var(--font-mono);font-size:2rem;font-weight:700;color:var(--accent-primary);letter-spacing:-.02em}.latency-breakdown{display:flex;gap:var(--spacing-lg);font-family:var(--font-mono);font-size:.85rem;color:var(--text-secondary)}.operations-table{font-size:.85rem}.table-header{display:grid;grid-template-columns:2fr .7fr 1fr 1fr 1.5fr;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-secondary);border-radius:var(--radius-sm);font-weight:600;color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.table-row{display:grid;grid-template-columns:2fr .7fr 1fr 1fr 1.5fr;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid var(--border-subtle);transition:background .15s ease}.table-row:hover{background:var(--bg-hover)}.table-row:last-child{border-bottom:none}.col-op{color:var(--text-primary);font-weight:500}.col-count,.col-per,.col-total{font-family:var(--font-mono);color:var(--text-secondary);text-align:right}.col-pct{display:flex;align-items:center}.pct-bar-container{flex:1;display:flex;align-items:center;gap:var(--spacing-sm)}.pct-bar{height:6px;background:linear-gradient(90deg,var(--accent-primary) 0%,var(--accent-tertiary) 100%);border-radius:3px;min-width:4px;transition:width .3s ease}.pct-text{font-family:var(--font-mono);font-size:.8rem;color:var(--text-muted);min-width:50px;text-align:right}.instruction-count{font-size:.85rem;font-weight:400;color:var(--text-muted);margin-left:auto}.instruction-stats{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.stat-chip{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.75rem;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.stat-chip:hover{background:var(--bg-hover);color:var(--text-primary)}.stat-chip.active{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--bg-primary)}.stat-name{font-weight:500}.stat-count{font-family:var(--font-mono);background:#0003;padding:1px 6px;border-radius:4px}.filter-bar{display:flex;gap:var(--spacing-xs);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--border-subtle)}.filter-btn{padding:var(--spacing-xs) var(--spacing-md);background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.8rem;cursor:pointer;transition:all .15s ease}.filter-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.filter-btn.active{background:var(--bg-hover);border-color:var(--accent-primary);color:var(--accent-primary)}.instructions-list{max-height:500px;overflow-y:auto;font-family:var(--font-mono);font-size:.8rem}.instruction-line{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);margin-bottom:2px;transition:background .1s ease}.instruction-line:hover{background:var(--bg-hover)}.instruction-line.comment{color:var(--text-muted);padding-left:var(--spacing-md)}.instruction-line.comment.gemm,.instruction-line.comment.config{margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background:#c41e6c1a;border-left:3px solid var(--accent-primary);color:var(--accent-secondary)}.instruction-line.comment.n_tile{margin-top:var(--spacing-sm);color:var(--accent-primary);font-weight:500}.instruction-line.comment.k_tile{color:var(--accent-tertiary);padding-left:var(--spacing-lg)}.instruction-line.comment.m_tile{color:var(--text-secondary);padding-left:calc(var(--spacing-lg) * 2)}.instruction-line.comment.output{color:var(--accent-success);padding-left:var(--spacing-lg)}.comment-marker{color:var(--text-muted);margin-right:var(--spacing-xs)}.comment-type{font-weight:600;margin-right:var(--spacing-sm)}.comment-text{font-weight:400}.instruction-line.op{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--spacing-xs);padding-left:calc(var(--spacing-lg) * 2 + var(--spacing-md))}.opcode{color:var(--accent-primary);font-weight:600}.instruction-line.ddr-to-sram .opcode{color:#f472b6}.instruction-line.sram-to-q32 .opcode{color:#e91e8c}.instruction-line.q32-weight-program .opcode{color:#c41e6c}.instruction-line.mac .opcode{color:#22c55e}.instruction-line.acc-store .opcode{color:#eab308}.instruction-line.dequant .opcode{color:#fb923c}.instruction-line.q32-to-sram .opcode{color:#e91e8c}.instruction-line.sram-to-ddr .opcode{color:#f472b6}.args{color:var(--text-secondary)}.arg-key{color:var(--text-muted)}.arg-value{color:var(--text-code)}.instr-comment{color:var(--text-muted);margin-left:auto;font-style:italic}.show-more-btn{width:100%;padding:var(--spacing-sm);margin-top:var(--spacing-sm);background:var(--bg-secondary);border:1px dashed var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.85rem;cursor:pointer;transition:all .15s ease}.show-more-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-style:solid}.error-display{margin-bottom:var(--spacing-lg)}.error-content{display:flex;align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-md);background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-md)}.error-icon{font-size:1.2rem}.error-text{flex:1}.error-text strong{display:block;color:var(--accent-error);margin-bottom:var(--spacing-xs)}.error-text p{font-size:.9rem;color:var(--text-secondary)}.error-dismiss{background:none;border:none;color:var(--text-secondary);font-size:1.2rem;cursor:pointer;padding:0;line-height:1}.error-dismiss:hover{color:var(--text-primary)}.footer{padding:var(--spacing-md) var(--spacing-xl);text-align:center;color:var(--text-muted);font-size:.8rem;border-top:1px solid var(--border-subtle)}.footer-accent{color:var(--accent-primary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media(max-width:1200px){.main{flex-direction:column}.sidebar{width:100%}.mapping-grid{grid-template-columns:1fr}}@media(max-width:768px){.params-grid{grid-template-columns:1fr}.table-header,.table-row{grid-template-columns:1fr 1fr;font-size:.75rem}.col-per,.col-pct{display:none}}.conv-presets{margin-bottom:var(--spacing-lg)}.conv-presets .presets-label{display:block;font-size:.85rem;color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.conv-presets .preset-buttons{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.conv-presets .preset-btn{padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.75rem;font-weight:500;cursor:pointer;transition:all .15s ease}.conv-presets .preset-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent-primary)}.conv-mapping-card h3{color:var(--accent-tertiary)}.conv-transform-visual{display:flex;align-items:stretch;gap:var(--spacing-md);margin-bottom:var(--spacing-xl);padding:var(--spacing-lg);background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border-subtle)}.transform-box{flex:1;padding:var(--spacing-md);background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--border-color)}.transform-box h4{font-size:.85rem;font-weight:600;color:var(--text-secondary);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-subtle)}.conv-box h4{color:var(--accent-tertiary);border-color:#f59e0b4d}.gemm-box h4{color:var(--accent-primary);border-color:#c41e6c4d}.tensor-info{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--spacing-md)}.tensor-info:last-child{margin-bottom:0}.tensor-label{font-size:.75rem;color:var(--text-muted);font-weight:500}.tensor-shape{font-family:var(--font-mono);font-size:.9rem;color:var(--text-code);font-weight:600}.tensor-dims{font-size:.7rem;color:var(--text-muted);font-style:italic}.transform-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:60px;color:var(--accent-primary)}.arrow-icon{font-size:2rem;font-weight:700;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.6;transform:translate(0)}50%{opacity:1;transform:translate(4px)}}.arrow-label{font-size:.75rem;font-weight:600;color:var(--accent-primary);text-transform:uppercase;letter-spacing:.05em;margin-top:var(--spacing-xs)}.gemm-box .gemm-formula{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-xs);font-family:var(--font-mono);font-size:.9rem;margin-bottom:var(--spacing-lg);padding:var(--spacing-md);background:#c41e6c1a;border-radius:var(--radius-sm);border:1px solid rgba(196,30,108,.2)}.gemm-box .gemm-formula .matrix{font-weight:700}.gemm-box .gemm-formula .matrix.a{color:#22c55e}.gemm-box .gemm-formula .matrix.b{color:#c41e6c}.gemm-box .gemm-formula .matrix.c{color:#ff4d9d}.gemm-box .gemm-formula .bracket{color:var(--text-muted)}.gemm-box .gemm-formula .dim{color:var(--text-code);font-weight:600}.gemm-box .gemm-formula .comma{color:var(--text-muted)}.gemm-box .gemm-formula .equals{color:var(--text-secondary);margin:0 var(--spacing-xs)}.gemm-box .gemm-formula .times{color:var(--accent-primary);font-weight:700}.gemm-breakdown{display:flex;flex-direction:column;gap:var(--spacing-sm)}.breakdown-item{display:flex;flex-direction:column;gap:2px;padding:var(--spacing-sm);background:var(--bg-card);border-radius:var(--radius-sm)}.breakdown-label{font-family:var(--font-mono);font-size:1rem;font-weight:700;color:var(--accent-primary)}.breakdown-calc{font-size:.75rem;color:var(--text-muted)}.breakdown-value{font-family:var(--font-mono);font-size:.8rem;color:var(--text-code)}.conv-mapping-card .mapping-grid{grid-template-columns:repeat(4,1fr)}@media(max-width:1200px){.conv-transform-visual{flex-direction:column}.transform-arrow{flex-direction:row;min-width:auto;gap:var(--spacing-sm)}.arrow-icon{transform:rotate(90deg);animation:pulse-vertical 2s ease-in-out infinite}@keyframes pulse-vertical{0%,to{opacity:.6;transform:rotate(90deg) translate(0)}50%{opacity:1;transform:rotate(90deg) translate(4px)}}.conv-mapping-card .mapping-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.conv-mapping-card .mapping-grid{grid-template-columns:1fr}}