:root{--bg: #fefffe;--surface: #ffffff;--surface-hover: #f8fafc;--text: #0f172a;--text-muted: #475569;--border: #e2e8f0;--primary: #3067df;--primary-hover: #2a55cb;--radius: 10px;--shadow: 0 1px 3px -1px rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .06);--viz-bg: #f8fafc;--viz-node-fill: #ffffff;--viz-node-stroke: #94a3b8;--viz-node-text: #1e293b;--viz-node-sublabel: #64748b;--viz-edge: #94a3b8;--viz-edge-text: #475569;--viz-tooltip-bg: #0f172a;--viz-tooltip-text: #f8fafc;--viz-op-input: #4caf50;--viz-op-output: #4caf50;--viz-op-linear: #1976d2;--viz-op-matmul: #7b1fa2;--viz-op-softmax: #7b1fa2;--viz-op-cross-entropy: #f57c00;--viz-op-scale: #0288d1;--viz-op-reshape: #1976d2;--viz-op-transpose: #7b1fa2;--viz-op-permute: #7b1fa2;--viz-op-add: #4caf50;--viz-op-mul: #4caf50;--viz-op-concat: #f57c00;--viz-op-norm: #4caf50;--viz-op-activation: #d81b60;--viz-op-embedding: #1976d2;--viz-op-router: #d32f2f;--viz-op-gate: #f57c00;--viz-op-expert: #7b1fa2;--viz-op-selective-scan: #009688;--viz-op-state-space: #009688;--viz-op-cache: #f57c00;--viz-op-quantize: #7b1fa2;--viz-op-dropout: #9e9e9e;--viz-op-mask: #9e9e9e;--viz-op-cast: #0288d1;--viz-op-loss: #f57c00;--viz-op-metric: #4caf50;--viz-op-allreduce: #d32f2f;--viz-op-allgather: #d32f2f;--viz-op-reduce-scatter: #d32f2f;--viz-op-all2all: #7b1fa2;--viz-op-p2p: #7b1fa2;--viz-op-split: #1976d2;--viz-op-replicate: #1976d2;--viz-op-conv: #0288d1;--viz-op-pool: #4caf50;--viz-op-fusion: #d81b60;--cat-component: #1976d2;--cat-function: #7b1fa2;--cat-optimization: #e65100;--cat-multimodal: #00838f;--cat-training: #4caf50;--cat-parallelism: #d32f2f}[data-theme=dark]{--bg: #0f172a;--surface: #1e293b;--surface-hover: #334155;--text: #f8fafc;--text-muted: #94a3b8;--border: #334155;--primary: #64a4f2;--primary-hover: #4686ec;--shadow: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -2px rgb(0 0 0 / .3);--viz-bg: #0f172a;--viz-node-fill: #1e293b;--viz-node-stroke: #475569;--viz-node-text: #f8fafc;--viz-node-sublabel: #94a3b8;--viz-edge: #475569;--viz-edge-text: #cbd5e1;--viz-tooltip-bg: #f8fafc;--viz-tooltip-text: #0f172a;--cat-component: #64a4f2;--cat-function: #ce93d8;--cat-optimization: #ffb74d;--cat-multimodal: #4dd0e1;--cat-training: #81c784;--cat-parallelism: #e57373}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}#app{width:100%;height:100%}.home{width:100%;min-height:100%;padding:24px;max-width:1280px;margin:0 auto}.search-bar{margin-bottom:24px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:5;padding:8px 0;background:var(--bg)}.search-input{flex:1;padding:10px 14px;font-size:.95rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);transition:border-color .15s ease,box-shadow .15s ease}.search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)}.search-count{font-size:.8rem;font-variant-numeric:tabular-nums;color:var(--text-muted);white-space:nowrap;min-width:32px;text-align:right}.chip-board{display:flex;flex-direction:column;gap:20px}.category-band{padding:14px 16px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--cat-component);box-shadow:var(--shadow);transition:border-color .2s ease}.category-band:nth-of-type(1){border-left-color:var(--cat-component)}.category-band:nth-of-type(2){border-left-color:var(--cat-function)}.category-band:nth-of-type(3){border-left-color:var(--cat-optimization)}.category-band:nth-of-type(4){border-left-color:var(--cat-training)}.category-band:nth-of-type(5){border-left-color:var(--cat-parallelism)}.category-band:nth-of-type(6){border-left-color:var(--cat-multimodal)}.band-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.band-tag{font-size:.65rem;font-weight:700;letter-spacing:.12em;padding:3px 8px;border-radius:4px;color:#fff;background:var(--cat-component);font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,monospace}.category-band:nth-of-type(1) .band-tag{background:var(--cat-component)}.category-band:nth-of-type(2) .band-tag{background:var(--cat-function)}.category-band:nth-of-type(3) .band-tag{background:var(--cat-optimization)}.category-band:nth-of-type(4) .band-tag{background:var(--cat-training)}.category-band:nth-of-type(5) .band-tag{background:var(--cat-parallelism)}.category-band:nth-of-type(6) .band-tag{background:var(--cat-multimodal)}.band-label{font-size:.85rem;font-weight:600;color:var(--text);letter-spacing:.01em}.band-count{margin-left:auto;font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--text-muted)}.chip-row{display:flex;flex-wrap:wrap;gap:6px}.chip{display:inline-flex;align-items:center;padding:5px 11px;font-size:.82rem;line-height:1.2;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:999px;text-decoration:none;white-space:nowrap;transition:transform .12s ease,background .12s ease,border-color .12s ease,color .12s ease,opacity .15s ease;will-change:transform}.chip:hover{transform:translateY(-1px);background:var(--surface-hover);border-color:var(--primary);color:var(--primary)}.chip:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 40%,transparent)}.chip-hidden{display:none}.chip-name{font-weight:500}@media (max-width: 640px){.home{padding:14px}.category-band{padding:12px}.chip{font-size:.78rem;padding:4px 9px}}.component-view{display:grid;grid-template-columns:280px 1fr;width:100%;height:100%}.sidebar{padding:20px;background:var(--surface);border-right:1px solid var(--border);overflow-y:auto}.sidebar h2{margin:0 0 8px;font-size:1.25rem}.sidebar .description{margin:0 0 24px;color:var(--text-muted);font-size:.9rem;line-height:1.4}.param-form{display:flex;flex-direction:column;gap:16px}.param-control{display:flex;flex-direction:column;gap:6px}.param-control label{font-size:.85rem;font-weight:500;color:var(--text-muted)}.param-control input,.param-control select{padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-size:.95rem}.graph-stage{position:relative;background:var(--viz-bg);overflow:hidden}.graph-svg{width:100%;height:100%}.search-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;padding-top:120px;background:#00000080}.search-modal-content{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.search-modal-input{width:100%;padding:16px;border:none;border-bottom:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1rem}.search-modal-input:focus{outline:none}.search-results{list-style:none;margin:0;padding:0;max-height:320px;overflow-y:auto}.search-results li{padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--border);color:var(--text);font-size:.95rem}.search-results li:last-child{border-bottom:none}.search-results li.selected,.search-results li:hover{background:var(--surface-hover)}.search-results li.empty{color:var(--text-muted);cursor:default}.search-results li.empty:hover{background:transparent}.not-found{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-muted)}.not-found h1{margin:0;font-size:3rem;color:var(--text)}.not-found a{margin-top:16px;color:var(--primary)}@media (max-width: 768px){.component-view{grid-template-columns:1fr;grid-template-rows:auto 1fr}.sidebar{border-right:none;border-bottom:1px solid var(--border)}.home{padding:16px}}.compare-view,.preset-view{width:100%;height:100%;padding:24px;overflow:auto}.compare-header,.preset-header{margin-bottom:20px}.compare-header h1,.preset-header h1{margin:0 0 8px}.compare-header p,.preset-header p{margin:0;color:var(--text-muted)}.compare-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;height:calc(100% - 100px)}.compare-section{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.compare-section h2{margin:0;padding:12px 16px;border-bottom:1px solid var(--border);font-size:1.1rem}.compare-section .description{margin:0;padding:8px 16px;color:var(--text-muted);font-size:.9rem}.compare-section .graph-stage{flex:1;min-height:300px}.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.preset-card{display:block;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .1s ease,background .1s ease}.preset-card:hover{background:var(--surface-hover);transform:translateY(-2px)}.preset-card h3{margin:0 0 8px;font-size:1.1rem}.preset-card p{margin:0 0 12px;color:var(--text-muted);font-size:.9rem;line-height:1.4}.preset-specs{list-style:none;margin:0;padding:0;font-size:.85rem;color:var(--text-muted)}.preset-specs li{padding:2px 0}@media (max-width: 900px){.compare-grid{grid-template-columns:1fr;height:auto}.compare-section .graph-stage{min-height:360px}}.rich-view{display:grid;grid-template-columns:230px 1fr 320px;width:100%;height:100%;overflow:hidden}.rich-step-nav{display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border);overflow-y:auto}.rich-nav-header{padding:20px 16px 12px;border-bottom:1px solid var(--border)}.rich-nav-header h2{margin:0 0 6px;font-size:1.1rem;line-height:1.3}.rich-nav-desc{margin:0;font-size:.82rem;color:var(--text-muted);line-height:1.5}.rich-nav-params{padding:14px 16px;border-bottom:1px solid var(--border)}.rich-params-title{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}.rich-steps-list{padding:14px 16px;flex:1}.rich-step-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:none;border-radius:8px;background:transparent;color:var(--text);cursor:pointer;font-size:.88rem;text-align:left;transition:background .12s ease;margin-bottom:4px}.rich-step-item:hover{background:var(--surface-hover)}.rich-step-item.active{background:color-mix(in srgb,var(--primary) 10%,transparent)}.rich-step-badge{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0}.rich-step-label{line-height:1.3;font-weight:500}.rich-diagram{position:relative;background:var(--viz-bg);overflow:hidden}.rich-diagram .graph-svg{width:100%;height:100%}.rich-detail-panel{background:var(--surface);border-left:1px solid var(--border);overflow-y:auto}.detail-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-muted);gap:12px}.detail-placeholder-icon{font-size:2rem;opacity:.3}.detail-placeholder p{margin:0;font-size:.9rem}.detail-content{padding:20px;display:flex;flex-direction:column;gap:16px}.detail-step-header{padding:12px 14px;border-radius:8px;background:var(--surface-hover);display:flex;flex-direction:column;gap:8px}.detail-step-num{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.75rem;font-weight:700;color:#fff;width:fit-content}.detail-step-title{margin:0;font-size:1rem;font-weight:700;line-height:1.4;color:var(--text)}.detail-formula-block{border:1.5px solid;border-radius:8px;padding:12px 14px}.detail-formula-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}.detail-formula{display:block;font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem;font-weight:600;color:var(--text);white-space:pre-wrap}.detail-explanation{display:flex;flex-direction:column;gap:8px}.detail-section-title{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.detail-icon{font-size:1rem}.detail-text{margin:0;font-size:.9rem;line-height:1.65;color:var(--text)}.detail-code-block{border-radius:10px;overflow:hidden;border:1px solid var(--border)}.detail-code-header{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--surface-hover);font-size:.82rem;font-weight:600;color:var(--text-muted);border-bottom:1px solid var(--border)}.detail-code{margin:0;padding:14px;background:#1e293b;overflow-x:auto}[data-theme=dark] .detail-code{background:#0f172a}.detail-code code{display:block;font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;line-height:1.7;color:#a5f3a0;white-space:pre}.code-blank{display:block;height:.5em}.code-line{display:block}.step-node{transition:opacity .25s ease,filter .25s ease}@media (max-width: 1100px){.rich-view{grid-template-columns:200px 1fr 280px}}@media (max-width: 820px){.rich-view{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;height:auto}.rich-step-nav{border-right:none;border-bottom:1px solid var(--border);max-height:220px}.rich-detail-panel{border-left:none;border-top:1px solid var(--border);min-height:300px}.rich-diagram{min-height:400px}}