:root{--bg-base: #080c16;--bg-panel: #0e1525;--bg-card: #131c2e;--bg-raised: #1a2540;--border: #1e2d47;--border-hi: #2d4268;--text: #e2e8f0;--text-muted: #8899b4;--text-dim: #556a8a;--green: #22c55e;--green-dim: #22c55e30;--blue: #3b82f6;--amber: #f59e0b;--red: #ef4444;--purple: #a855f7;--font: "Inter", system-ui, -apple-system, sans-serif;--mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;--radius: 8px;color-scheme:dark}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font);background:var(--bg-base);color:var(--text);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}#app{height:100vh;display:flex;flex-direction:column;overflow:hidden}.mono{font-family:var(--mono)}.muted{color:var(--text-muted);font-size:.85rem}.hdr{display:flex;align-items:center;gap:16px;padding:0 16px;height:44px;min-height:44px;background:var(--bg-panel);border-bottom:1px solid var(--border);flex-shrink:0}.hdr-brand{display:flex;align-items:center;gap:8px;flex-shrink:0}.hdr-logo{font-size:1.2rem;color:var(--green)}.hdr-title{font-size:.95rem;font-weight:800;letter-spacing:-.02em}.hdr-preset{flex:1;max-width:280px}.hdr-preset select{width:100%;background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:4px 8px;font:inherit;font-size:.82rem;cursor:pointer}.hdr-modes{display:flex;gap:2px;margin-left:auto}.mode-btn{background:transparent;border:1px solid transparent;color:var(--text-dim);padding:5px 12px;border-radius:var(--radius);cursor:pointer;font:inherit;font-size:.78rem;font-weight:600;transition:all .15s}.mode-btn:hover{background:var(--bg-raised);color:var(--text)}.mode-btn.mode-active{background:var(--green);color:#000;border-color:var(--green)}.hdr-help-btn{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);font:inherit;font-weight:700;cursor:pointer;transition:all .15s;flex-shrink:0}.hdr-help-btn:hover{border-color:var(--green);color:var(--green)}.stage{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0}.build-stage{display:flex;flex-direction:column;gap:1px;background:var(--border);min-height:100%}.build-stage>section{background:var(--bg-base)}.input-row{display:flex;gap:1px;background:var(--border)}.input-dial{width:260px;min-height:260px;display:flex;align-items:center;justify-content:center;background:var(--bg-base);flex-shrink:0}.dial-canvas{cursor:crosshair;display:block}.input-info{flex:1;background:var(--bg-base);display:flex;align-items:center;padding:16px 24px}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 24px;width:100%}.info-item{display:flex;flex-direction:column;gap:2px}.info-label{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.info-val{font-size:1.1rem;font-weight:700;font-family:var(--mono)}.info-val.highlight{color:var(--green)}.info-dim{font-size:.75rem;color:var(--text-dim);font-weight:400}.memory-section{padding:12px 16px;min-height:200px}.mem-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.mem-title{font-size:.78rem;font-weight:700}.mem-addr-label{font-size:.78rem;font-family:var(--mono);color:var(--green)}.mem-wrap{position:relative}.mem-gpu{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.mem-grid{display:grid;gap:2px;position:relative;z-index:1}.mem-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 2px;border-radius:4px;cursor:pointer;transition:all .15s;background:var(--bg-card);border:1px solid transparent;min-height:40px;-webkit-user-select:none;user-select:none}.mem-cell:hover{border-color:var(--border-hi);background:var(--bg-raised)}.mem-cell-active{border-color:var(--green)!important;background:var(--green-dim)!important;box-shadow:0 0 8px var(--green-dim)}.mem-cell-addr{font-size:.55rem;color:var(--text-dim);line-height:1}.mem-cell-val{font-family:var(--mono);font-size:.6rem;font-weight:600;color:var(--text-muted);line-height:1}.mem-cell-active .mem-cell-val{color:var(--green)}.output-row{padding:12px 16px}.out-row{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}.out-card-binary{flex-basis:100%;min-width:0;display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}.out-bits-wide{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}.bit-wide{flex:1 0 0;min-width:6px;max-width:24px;height:18px;border-radius:3px;background:var(--bg-raised);transition:background .1s}.bit-wide.bit-on{background:var(--green);box-shadow:0 0 4px var(--green-dim)}.bit-wide.bit-on.bit-q{background:var(--purple);box-shadow:0 0 4px #a855f730}.out-binary-text{font-family:var(--mono);font-size:.85rem;color:var(--text-muted);word-break:break-all;text-align:center;letter-spacing:.15em}.out-card{flex:1;min-width:120px;display:flex;flex-direction:column;gap:4px;padding:10px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}.out-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.out-bits{display:flex;gap:1px;flex-wrap:wrap}.bit{width:8px;height:12px;border-radius:2px;background:var(--bg-raised)}.bit-on{background:var(--green);box-shadow:0 0 3px var(--green-dim)}.bit-on.bit-q{background:var(--purple);box-shadow:0 0 3px #a855f730}.out-nibs{display:flex;gap:4px}.nib{padding:2px 6px;background:var(--bg-raised);border-radius:3px}.nib-hex{font-family:var(--mono);font-size:.85rem;font-weight:700;color:var(--amber)}.out-mono{font-family:var(--mono);font-size:.78rem;color:var(--text-muted);word-break:break-all}.out-val{font-family:var(--mono);font-size:1rem;font-weight:700}.wave-section{height:140px;min-height:140px}.wave-canvas{display:block;width:100%;height:100%}.controls-bar{padding:10px 16px;border-top:1px solid var(--border)}.ctrl-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.ctrl-inline{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text-muted)}.ctrl-inline span:first-child{font-weight:600;color:var(--text-dim);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em}.ctrl-inline input[type=range]{width:80px;accent-color:var(--green);height:3px}.ctrl-inline select{background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:2px 6px;font:inherit;font-size:.78rem}.ctrl-num{font-family:var(--mono);font-size:.78rem;color:var(--green);width:28px;text-align:right}.ctrl-toggle{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text-muted);cursor:pointer}.ctrl-toggle input{accent-color:var(--green)}.learn-stage-v2{height:100%;overflow-y:auto}.learn-card-v2{display:flex;flex-direction:column;min-height:100%}.learn-helper-bar{background:var(--bg-panel);border-bottom:1px solid var(--border);padding:6px 16px;font-size:.75rem;color:var(--text-dim);text-align:center;line-height:1.4}.learn-pipeline-bar{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 16px;background:var(--bg-card);border-bottom:1px solid var(--border);flex-wrap:wrap}.learn-pipe-card{display:inline-block;padding:3px 8px;border-radius:4px;font-size:.72rem;font-weight:600;background:var(--bg-raised);color:var(--text);transition:opacity .15s}.learn-pipe-card.pipe-dim{opacity:.35}.learn-pipe-card.pipe-active{background:var(--green-dim);color:var(--green)}.learn-pipe-arrow{color:var(--text-dim);font-size:.72rem}.learn-progress-v2{display:flex;gap:4px;padding:8px 16px;justify-content:center;background:var(--bg-panel);border-bottom:1px solid var(--border)}.learn-pip-v2{width:28px;height:3px;border-radius:2px;background:var(--bg-raised);transition:all .2s}.pip-v2-active{background:var(--green)}.pip-v2-done{background:var(--green);opacity:.4}.learn-lesson-content{padding:16px 24px;max-width:720px;margin:0 auto;width:100%}.learn-step-label{font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}.learn-title-v2{font-size:1.15rem;font-weight:700;margin-bottom:12px;color:var(--text)}.learn-intro{font-size:.88rem;color:var(--text-muted);line-height:1.7;margin-bottom:14px}.learn-section-heading{font-size:.78rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.04em;margin-top:14px;margin-bottom:4px}.learn-section-body{font-size:.86rem;color:var(--text-muted);line-height:1.7;margin-bottom:10px}.learn-formula,.learn-example{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;font-family:var(--mono);font-size:.8rem;color:var(--text);line-height:1.6;margin:8px 0 12px;overflow-x:auto;white-space:pre}.learn-example{border-left:3px solid var(--green)}.learn-interact-prompt{background:var(--bg-raised);border:1px solid var(--border-hi);border-radius:var(--radius);padding:8px 14px;font-size:.82rem;color:var(--green);font-weight:600;margin:12px 0}.learn-machine-rule{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;margin:8px 0;display:flex;flex-direction:column;gap:4px}.learn-rule-label{font-size:.7rem;font-weight:700;color:var(--amber);text-transform:uppercase;letter-spacing:.04em}.learn-rule-text{font-size:.84rem;color:var(--text);line-height:1.6}.learn-you-know{background:var(--green-dim);border:1px solid var(--green);border-radius:var(--radius);padding:10px 14px;margin:8px 0 12px;display:flex;flex-direction:column;gap:4px}.learn-know-label{font-size:.7rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.04em}.learn-know-text{font-size:.84rem;color:var(--text);line-height:1.5}.learn-footer-line{font-size:.8rem;color:var(--text-dim);font-style:italic;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);line-height:1.5}.learn-interactive-area{min-height:320px;flex:1;margin:0;background:#0c1222}.learn-interactive-area canvas{display:block;width:100%;height:100%}.learn-nav-v2{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid var(--border);background:var(--bg-panel);flex-shrink:0}.learn-nav-step{font-size:.75rem;color:var(--text-dim)}.learn-recap-content{padding-bottom:8px}.learn-recap-list{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}.learn-recap-badge{font-size:.84rem;color:var(--text);padding:4px 0}.learn-recap-badge:first-letter{color:var(--green)}.btn{padding:7px 14px;border-radius:var(--radius);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s;border:1px solid transparent}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-primary{background:var(--green);color:#000;border-color:var(--green)}.btn-primary:hover:not(:disabled){background:#16a34a}.btn-secondary{background:var(--bg-raised);color:var(--text);border-color:var(--border)}.btn-secondary:hover:not(:disabled){background:var(--bg-card);border-color:var(--border-hi)}.wb-root{max-width:1200px;margin:0 auto;padding:12px 20px 32px}.wb-controls{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;margin-bottom:16px}.wb-ctrl-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.wb-ctrl-secondary{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}.wb-ctrl-segment{display:flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;flex-shrink:0}.wb-seg-btn{background:transparent;border:none;color:var(--text-muted);font-size:.72rem;font-weight:600;padding:5px 12px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}.wb-seg-btn:hover{background:var(--bg-raised);color:var(--text)}.wb-seg-active{background:var(--blue);color:#fff}.wb-seg-active:hover{background:var(--blue)}.wb-slider-ctrl{display:flex;align-items:center;gap:8px;flex:1;min-width:180px}.wb-ctrl-label{font-size:.7rem;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;min-width:60px}.wb-slider-ctrl input[type=range]{flex:1;accent-color:var(--green);height:4px}.wb-ctrl-val{font-size:.75rem;color:var(--text);font-weight:600;min-width:80px;text-align:right;font-family:var(--mono)}.wb-ctrl-val small{font-weight:400;color:var(--text-dim)}.wb-select-ctrl{display:flex;align-items:center;gap:8px}.wb-select-ctrl select{background:var(--bg-raised);border:1px solid var(--border);color:var(--text);font-size:.72rem;padding:4px 8px;border-radius:5px;cursor:pointer}.wb-main{display:flex;flex-direction:column;gap:16px;margin-bottom:16px}.wb-stage{display:flex;gap:16px;min-height:380px}.wb-heatmap-area{flex:1;min-width:0}.wb-heatmap-title{font-size:.85rem;font-weight:700;margin-bottom:2px}.wb-heatmap-subtitle{font-size:.7rem;color:var(--text-dim);margin-bottom:8px}.wb-heatmap-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#080c16}.wb-heatmap-canvas{display:block;width:100%;cursor:crosshair}.wb-inspector{width:220px;flex-shrink:0;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px;align-self:flex-start}.wb-inspector-empty{display:flex;align-items:center;justify-content:center;min-height:200px}.wb-inspect-hint{color:var(--text-dim);font-size:.72rem;text-align:center;line-height:1.5}.wb-inspector-pinned{border-color:var(--blue)}.wb-inspect-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.wb-pin-badge{font-size:.68rem;color:var(--text-muted);font-weight:600}.wb-unpin-btn{background:transparent;border:none;color:var(--text-dim);cursor:pointer;font-size:.8rem;padding:2px 4px}.wb-unpin-btn:hover{color:var(--text)}.wb-inspect-grid{display:flex;flex-direction:column;gap:8px}.wb-inspect-item{display:flex;justify-content:space-between;align-items:baseline}.wb-inspect-label{font-size:.68rem;color:var(--text-dim)}.wb-inspect-val{font-size:.78rem;font-weight:600;font-family:var(--mono)}.wb-val-good{color:var(--green)}.wb-val-bad{color:var(--red)}.wb-recommendations{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}.wb-rec-cards{display:flex;gap:12px;margin-bottom:12px}.wb-rec-card{flex:1;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:10px 12px}.wb-rec-none{opacity:.5}.wb-rec-title{font-size:.78rem;font-weight:700;margin-bottom:2px}.wb-rec-subtitle{font-size:.62rem;color:var(--text-dim);margin-bottom:6px}.wb-rec-body{font-family:var(--mono)}.wb-rec-main{font-size:1rem;font-weight:800;color:var(--text);margin-bottom:2px}.wb-rec-detail{font-size:.68rem;color:var(--text-muted);margin-bottom:4px}.wb-rec-miss{font-size:.72rem;font-weight:600}.wb-rec-meta{display:flex;gap:24px;flex-wrap:wrap}.wb-meta-item{display:flex;align-items:center;gap:6px}.wb-meta-icon{font-size:.9rem}.wb-meta-text{font-size:.72rem;color:var(--text-muted)}.wb-detail{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.wb-tab-bar{display:flex;background:var(--bg-panel);border-bottom:1px solid var(--border)}.wb-tab-btn{background:transparent;border:none;color:var(--text-dim);font-size:.72rem;font-weight:600;padding:10px 18px;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}.wb-tab-btn:hover{color:var(--text)}.wb-tab-active{color:var(--text);border-bottom-color:var(--green)}.wb-tab-content{background:var(--bg-panel)}.wb-tab-body{padding:16px 20px}.wb-why-grid{display:flex;gap:12px;margin-bottom:14px}.wb-why-card{flex:1;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:12px}.wb-why-combined{text-align:center}.wb-why-title{font-size:.72rem;font-weight:700;margin-bottom:6px}.wb-why-stat{font-size:1.1rem;font-weight:800;font-family:var(--mono);margin-bottom:4px}.wb-why-desc{font-size:.66rem;color:var(--text-muted);line-height:1.4;margin-bottom:8px}.wb-why-bar{height:4px;background:var(--bg-raised);border-radius:2px;overflow:hidden;margin-bottom:4px}.wb-why-fill{height:100%;border-radius:2px;transition:width .3s}.wb-fill-ok{background:var(--green)}.wb-fill-warn{background:var(--amber)}.wb-why-flag{font-size:.64rem;color:var(--amber);font-weight:600}.wb-why-insight{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:10px 14px;font-size:.72rem;color:var(--text-muted);line-height:1.5}.wb-why-insight strong{color:var(--text)}.wb-world-wrap{display:flex;justify-content:center}.wb-world-canvas{display:block;border-radius:6px;border:1px solid var(--border)}.wb-distance-wrap{width:100%}.wb-dist-canvas{display:block;width:100%;border-radius:6px;border:1px solid var(--border)}.wb-arch-grid{margin-bottom:20px}.wb-arch-row{display:flex;padding:6px 0;border-bottom:1px solid var(--border)}.wb-arch-label{flex:0 0 140px;font-size:.72rem;color:var(--text-dim);font-weight:600}.wb-arch-val{font-size:.72rem;color:var(--text)}.wb-arch-diagram{margin-top:16px}.wb-pipe-flow{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center}.wb-pipe-box{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:8px 12px;text-align:center;min-width:80px}.wb-pipe-sym{border-color:var(--amber)}.wb-pipe-rom{border-color:var(--green)}.wb-pipe-interp{border-color:var(--purple)}.wb-pipe-sign{border-color:var(--amber)}.wb-pipe-out{border-color:var(--blue)}.wb-pipe-lbl{font-size:.68rem;font-weight:700;margin-bottom:2px}.wb-pipe-sub{font-size:.6rem;color:var(--text-dim);font-family:var(--mono)}.wb-pipe-arrow{color:var(--text-dim);font-size:1rem;flex-shrink:0}.wb-advanced-content{max-width:700px}.wb-advanced-content h4{font-size:.78rem;font-weight:700;margin:14px 0 6px;color:var(--text)}.wb-advanced-content h4:first-child{margin-top:0}.wb-advanced-content p{font-size:.72rem;color:var(--text-muted);line-height:1.6;margin-bottom:8px}.wb-advanced-content code{font-family:var(--mono);background:var(--bg-raised);padding:1px 4px;border-radius:3px;font-size:.68rem}@media(max-width:800px){.wb-stage{flex-direction:column}.wb-inspector{width:100%}.wb-rec-cards,.wb-why-grid{flex-direction:column}.wb-ctrl-row{flex-direction:column;align-items:stretch}}.export-container{max-width:800px;margin:0 auto;padding:16px 24px}.export-title{font-size:1.1rem;font-weight:700;margin-bottom:16px}.export-notes{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:16px}.export-notes h3{font-size:.85rem;font-weight:700;margin-bottom:8px}.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}.note-item{display:flex;justify-content:space-between;font-size:.78rem;padding:3px 0;border-bottom:1px solid var(--border)}.note-label{color:var(--text-dim)}.note-value{color:var(--text);font-weight:600}.export-formats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}.btn-export{padding:6px 14px;border-radius:var(--radius);font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .15s;border:1px solid var(--border);background:var(--bg-card);color:var(--text)}.btn-export:hover{border-color:var(--green)}.export-preview{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;overflow-x:auto}.export-preview h3{font-size:.85rem;font-weight:700;margin-bottom:8px}.export-table{width:100%;border-collapse:collapse;font-size:.75rem}.export-table th,.export-table td{padding:4px 8px;text-align:right;border-bottom:1px solid var(--border)}.export-table th{font-weight:700;color:var(--text-dim);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em}.export-table td:first-child,.export-table th:first-child{text-align:left}.drawer{position:fixed;top:44px;right:0;bottom:0;width:320px;background:var(--bg-panel);border-left:1px solid var(--border);z-index:100;display:flex;flex-direction:column;box-shadow:-4px 0 24px #0006}.drawer[hidden]{display:none}.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border)}.drawer-title{font-size:.85rem;font-weight:700}.drawer-close{background:none;border:none;color:var(--text-muted);font-size:1rem;cursor:pointer;padding:4px}.drawer-body{flex:1;overflow-y:auto;padding:16px}.drawer-section{margin-bottom:20px}.drawer-section h3{font-size:.82rem;font-weight:700;margin-bottom:8px}.drawer-card{padding:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:6px}.drawer-card strong{display:block;font-size:.75rem;color:var(--amber);margin-bottom:4px}.drawer-card p{font-size:.78rem;color:var(--text-muted);line-height:1.5}.drawer-tips{list-style:none;display:flex;flex-direction:column;gap:4px}.drawer-tips li{font-size:.78rem;color:var(--text-muted);padding:6px 10px;background:var(--bg-card);border-radius:4px;border-left:2px solid var(--amber)}.flow-svg{position:absolute;inset:0;pointer-events:none;z-index:2}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--border-hi)}@media(max-width:768px){.input-row{flex-direction:column}.input-dial{width:100%;min-height:220px}.info-grid{grid-template-columns:repeat(2,1fr)}.out-row{flex-direction:column}.out-card{min-width:0}.learn-pipeline-bar{gap:2px}.learn-pipe-card{font-size:.65rem;padding:2px 5px}.learn-recap-list{grid-template-columns:1fr}.learn-interactive-area{min-height:240px}.drawer{width:100%}}.opt-page{max-width:960px;margin:0 auto;padding:20px 24px 60px;display:flex;flex-direction:column;gap:24px}.opt-hero{text-align:center;padding:24px 16px 16px}.opt-hero-title{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;margin-bottom:8px}.opt-hero-sub{font-size:.92rem;color:var(--text-muted);line-height:1.6}.opt-hero-sub strong{color:var(--text)}.opt-hero-hint{margin-top:6px;font-size:.8rem;color:var(--text-dim)}.opt-controls{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px}.opt-ctrl-row{display:flex;flex-wrap:wrap;gap:16px}.opt-ctrl{flex:1;min-width:160px;display:flex;flex-direction:column;gap:4px}.opt-ctrl-label{font-size:.75rem;color:var(--text-muted);font-weight:600}.opt-ctrl input[type=range]{width:100%;accent-color:var(--green)}.opt-ctrl-val{font-family:var(--mono);font-size:.85rem;color:var(--green);font-weight:700;text-align:center}.opt-ctrl-selects{align-items:flex-end}.opt-ctrl-sel{display:flex;flex-direction:column;gap:4px;min-width:140px}.opt-ctrl-sel span{font-size:.75rem;color:var(--text-muted);font-weight:600}.opt-ctrl-sel select{background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:4px 8px;font:inherit;font-size:.8rem;cursor:pointer}.opt-ctrl-check{flex-direction:row;align-items:center;gap:6px;min-width:auto}.opt-ctrl-check input[type=checkbox]{accent-color:var(--green)}.opt-summary{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.opt-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:16px}.opt-stat{display:flex;flex-direction:column;gap:2px;padding:8px 12px;background:var(--bg-card);border-radius:6px;border:1px solid var(--border)}.opt-stat-label{font-size:.7rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}.opt-stat-val{font-family:var(--mono);font-size:.95rem;font-weight:700}.opt-dim{font-size:.7rem;color:var(--text-dim);font-weight:400}.opt-tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.72rem;font-weight:700}.opt-tag-balanced{background:#22c55e20;color:var(--green)}.opt-tag-bit{background:#3b82f620;color:var(--blue)}.opt-tag-entry{background:#f59e0b20;color:var(--amber)}.opt-tag-overbuilt{background:#a855f720;color:var(--purple)}.opt-rec{padding:12px;background:var(--bg-card);border-radius:6px;border:1px solid var(--border)}.opt-rec-msg{font-size:.88rem;color:var(--text);line-height:1.5;margin-bottom:8px}.opt-rec-details{display:flex;flex-wrap:wrap;gap:12px;font-size:.75rem;color:var(--text-muted)}.opt-rec-details strong{color:var(--green)}.opt-section{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.opt-section-title{font-size:1rem;font-weight:700;margin-bottom:4px}.opt-section-desc{font-size:.78rem;color:var(--text-muted);margin-bottom:12px;line-height:1.5}.opt-heatmap-wrap{border-radius:6px;overflow:hidden;border:1px solid var(--border)}.opt-heatmap-canvas{display:block;width:100%;cursor:pointer}.opt-breakdown-wrap{border-radius:6px;overflow:hidden;border:1px solid var(--border)}.opt-breakdown-canvas{display:block;width:100%}.opt-dim-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.opt-dim-panel{border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--bg-card)}.opt-dim-label{font-size:.75rem;font-weight:600;color:var(--text-muted);padding:8px 12px 4px}.opt-dim-panel canvas{display:block;width:100%}.opt-target-wrap{border-radius:6px;overflow:hidden;border:1px solid var(--border);max-width:520px;margin:0 auto}.opt-target-canvas{display:block;width:100%}.opt-table-wrap{overflow-x:auto}.opt-table{width:100%;border-collapse:collapse;font-size:.78rem}.opt-table th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--border-hi);color:var(--text-muted);font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em}.opt-table td{padding:7px 10px;border-bottom:1px solid var(--border)}.opt-tbl-ok td:nth-child(3){color:var(--green)}.opt-tbl-fail td:nth-child(3){color:var(--red)}.opt-learn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.opt-learn-card{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:14px}.opt-learn-card h3{font-size:.88rem;font-weight:700;margin-bottom:6px}.opt-learn-card p{font-size:.78rem;color:var(--text-muted);line-height:1.5;margin-bottom:6px}.opt-learn-card em{color:var(--text);font-style:italic}.opt-learn-hint{font-size:.72rem!important;color:var(--green)!important;font-weight:600}.opt-learn-insight{border-color:var(--green-dim);background:linear-gradient(135deg,var(--bg-card),#22c55e08)}@media(max-width:768px){.opt-page{padding:12px 12px 40px;gap:16px}.opt-ctrl{min-width:120px}.opt-dim-row{grid-template-columns:1fr}.opt-summary-grid{grid-template-columns:repeat(2,1fr)}.opt-learn-grid{grid-template-columns:1fr}}.out-ok{color:var(--green)}.out-err{color:var(--red)}.vx-page{display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px 20px 32px;max-width:1200px;margin:0 auto}.vx-hero{text-align:center;padding:8px 0 4px}.vx-title{font-size:1.6rem;font-weight:700;color:var(--text);letter-spacing:-.02em}.vx-subtitle{font-size:.85rem;color:var(--text-muted);margin-top:4px;max-width:560px;margin-inline:auto;line-height:1.5}.vx-canvas-wrap{position:relative;width:100%;max-width:900px;aspect-ratio:4 / 3;border-radius:var(--radius);overflow:hidden;background:var(--bg-base);border:1px solid var(--border)}.vx-canvas,.vx-overlay{position:absolute;inset:0;width:100%;height:100%;display:block}.vx-overlay{pointer-events:none}.vx-canvas{cursor:grab}.vx-canvas:active{cursor:grabbing}.vx-canvas-hint{position:absolute;bottom:10px;left:50%;transform:translate(-50%);font-size:.7rem;color:var(--text-dim);pointer-events:none;opacity:.7}.vx-panel{width:100%;max-width:900px}.vx-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;padding:12px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius)}.vx-ctrl-group{display:flex;flex-direction:column;gap:6px}.vx-ctrl-label{font-size:.7rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}.vx-axis-map{display:flex;flex-direction:column;gap:5px}.vx-axis-item{display:flex;align-items:center;gap:6px}.vx-axis-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;font-size:.7rem;font-weight:700;flex-shrink:0}.vx-axis-item select{flex:1;background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:3px 6px;font-size:.78rem;font-family:var(--font)}.vx-ranges{display:flex;flex-direction:column;gap:5px}.vx-range-item{display:flex;align-items:center;gap:4px;font-size:.78rem;color:var(--text-muted)}.vx-range-item span:first-child{min-width:52px;font-size:.72rem}.vx-range-item input[type=range]{flex:1;accent-color:var(--green);height:20px}.vx-range-val{font-family:var(--mono);font-size:.72rem;min-width:28px;text-align:right;color:var(--text)}.vx-slice-ctrls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.vx-slice-ctrls select{background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:3px 6px;font-size:.78rem;font-family:var(--font)}.vx-slice-pos{display:flex;align-items:center;gap:4px;font-size:.72rem;color:var(--text-muted)}.vx-slice-pos input[type=range]{width:80px;accent-color:var(--blue);height:20px}.vx-visual-ctrls,.vx-config-ctrls{display:flex;flex-wrap:wrap;gap:8px}.vx-visual-ctrls label,.vx-config-ctrls label{display:flex;align-items:center;gap:4px;font-size:.72rem;color:var(--text-muted)}.vx-visual-ctrls input[type=range]{width:70px;accent-color:var(--green);height:20px}.vx-visual-ctrls select,.vx-config-ctrls select{background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:3px 6px;font-size:.78rem;font-family:var(--font)}.vx-legend{margin-top:8px;text-align:center}.vx-legend-title{font-size:.68rem;color:var(--text-dim);margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em}.vx-legend-bar{display:inline-flex;gap:2px;border-radius:4px;overflow:hidden}.vx-legend-stop{padding:4px 16px;font-size:.68rem;font-weight:600;color:#ffffffe6}@media(max-width:700px){.vx-controls{grid-template-columns:1fr}.vx-canvas-wrap{aspect-ratio:1 / 1}}