:root{--bg:#04070f;--surface:#080e1c;--surface2:#0d1526;--surface3:#111d33;--border:#1a2740;--border2:#243554;--gold:#f5a623;--saffron:#ff6b1a;--blue:#4f8ef7;--cyan:#00d4ff;--purple:#a78bfa;--green:#10d98a;--red:#ff4d6d;--yellow:#fbbf24;--text:#dde5f4;--muted:#4a5f80;--dim:#7a93bc;--r:12px;--r-sm:8px}.viz-brand-om{-webkit-text-fill-color:var(--gold);filter:drop-shadow(0 0 8px #f5a62399);font-size:1.1rem;animation:3s ease-in-out infinite viz-float}.viz-live-badge{letter-spacing:.12em;color:var(--green);background:#10d98a14;border:1px solid #10d98a40;border-radius:100px;align-items:center;gap:.4rem;padding:.3rem .75rem;font-family:JetBrains Mono,monospace;font-size:.68rem;display:flex}.viz-live-dot{background:var(--green);border-radius:50%;width:6px;height:6px;animation:1.5s infinite viz-pulse-dot}@keyframes viz-pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}.scenario-bar{z-index:9;border-bottom:1px solid var(--border);background:var(--surface);flex-wrap:wrap;align-items:center;gap:1rem;padding:.85rem 2rem;display:flex;position:relative}.scenario-label{letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap;font-family:JetBrains Mono,monospace;font-size:.68rem}.scenario-tabs{flex-wrap:wrap;gap:.5rem;display:flex}.stab{border:1px solid var(--border2);color:var(--dim);cursor:pointer;white-space:nowrap;background:0 0;border-radius:6px;padding:.35rem .8rem;font-family:JetBrains Mono,monospace;font-size:.72rem;transition:all .2s}.stab:hover{border-color:var(--gold);color:var(--gold)}.stab.active{border-color:var(--gold);color:var(--gold);background:#f5a6231f}.app{z-index:1;grid-template-rows:1fr auto;grid-template-columns:380px 1fr;height:calc(100vh - 98px);display:grid;position:relative;overflow:hidden}@media (width<=900px){.app{grid-template-rows:auto 1fr auto;grid-template-columns:1fr;height:auto;overflow:visible}}.code-panel{border-right:1px solid var(--border);background:#030610;flex-direction:column;display:flex;overflow:hidden}.panel-header{border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0;align-items:center;gap:.5rem;padding:.75rem 1rem;display:flex}.panel-title{letter-spacing:.15em;text-transform:uppercase;color:var(--dim);font-family:JetBrains Mono,monospace;font-size:.7rem}.win-dots{gap:5px;margin-right:.25rem;display:flex}.wd{border-radius:50%;width:10px;height:10px}.wd-r{background:#ff5f57}.wd-y{background:#febc2e}.wd-g{background:#28c840}.code-scroll{flex:1;padding:1rem 0;overflow-y:auto}.code-scroll::-webkit-scrollbar{width:4px}.code-scroll::-webkit-scrollbar-track{background:0 0}.code-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}.code-line{align-items:stretch;min-height:24px;font-family:JetBrains Mono,monospace;font-size:.8rem;transition:background .2s;display:flex;position:relative}.code-line.active-line{background:#f5a6231a}.code-line.done-line{background:#10d98a0a}.line-num{text-align:right;min-width:40px;color:var(--muted);user-select:none;flex-shrink:0;padding:0 .75rem 0 0;font-size:.72rem;line-height:24px}.line-indicator{background:0 0;flex-shrink:0;width:3px;transition:background .2s}.code-line.active-line .line-indicator{background:var(--gold)}.code-line.done-line .line-indicator{background:var(--green)}.line-code{white-space:pre;flex:1;padding:0 1rem;line-height:24px}.code-line.active-line .line-code{color:#fff}.kw{color:#c792ea}.fn{color:#82aaff}.str{color:#c3e88d}.num{color:#f78c6c}.cmt{color:#3d5166;font-style:italic}.cl{color:#ffcb6b}.prp,.op,.pun{color:#89ddff}.step-explain{border-top:1px solid var(--border);background:var(--surface2);flex-shrink:0;min-height:80px;padding:.9rem 1rem}.explain-tag{letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.35rem;font-family:JetBrains Mono,monospace;font-size:.62rem}.explain-text{color:var(--dim);font-size:.82rem;line-height:1.55}.explain-text strong{color:var(--text)}.explain-text code{background:#ffffff12;border-radius:3px;padding:.1rem .3rem;font-family:JetBrains Mono,monospace;font-size:.78em}.diagram-panel{flex-direction:column;display:flex;overflow:hidden}.diagram-scroll{flex-direction:column;flex:1;gap:1rem;padding:1.25rem;display:flex;overflow-y:auto}.diagram-scroll::-webkit-scrollbar{width:4px}.diagram-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}.diagram-grid{grid-template-columns:1fr 1fr 1fr;gap:1rem;display:grid}@media (width<=700px){.diagram-grid{grid-template-columns:1fr}}.dbox{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r);transition:border-color .3s;overflow:hidden}.dbox.glow-gold{border-color:var(--gold);box-shadow:0 0 20px #f5a62326}.dbox.glow-green{border-color:var(--green);box-shadow:0 0 20px #10d98a1f}.dbox.glow-purple{border-color:var(--purple);box-shadow:0 0 20px #a78bfa1f}.dbox.glow-blue{border-color:var(--blue);box-shadow:0 0 20px #4f8ef71f}.dbox-head{border-bottom:1px solid var(--border);align-items:center;gap:.5rem;padding:.55rem .85rem;display:flex}.dbox-icon{font-size:.9rem}.dbox-name{letter-spacing:.15em;text-transform:uppercase;color:var(--dim);flex:1;font-family:JetBrains Mono,monospace;font-size:.65rem}.dbox-count{background:var(--surface3);color:var(--muted);border-radius:4px;padding:.1rem .4rem;font-family:JetBrains Mono,monospace;font-size:.62rem}.dbox-body{flex-direction:column;gap:.3rem;min-height:120px;padding:.6rem;display:flex;position:relative}.empty-state{color:var(--border2);letter-spacing:.1em;text-transform:uppercase;pointer-events:none;justify-content:center;align-items:center;font-family:JetBrains Mono,monospace;font-size:.65rem;display:flex;position:absolute;inset:0}.q-item{border-radius:var(--r-sm);align-items:center;gap:.4rem;padding:.35rem .6rem;font-family:JetBrains Mono,monospace;font-size:.72rem;animation:.35s cubic-bezier(.34,1.56,.64,1) forwards viz-itemIn;display:flex;position:relative;overflow:hidden}@keyframes viz-itemIn{0%{opacity:0;transform:translate(-16px)scale(.9)}to{opacity:1;transform:translate(0)scale(1)}}.q-item.stack-item{color:var(--green);background:#10d98a1a;border:1px solid #10d98a4d}.q-item.stack-item.executing{border-color:var(--green);background:#10d98a2e;animation:.7s ease-in-out infinite alternate viz-execPulse}@keyframes viz-execPulse{0%{box-shadow:0 0 6px #10d98a33}to{box-shadow:0 0 20px #10d98a80}}.q-item.micro-item{color:var(--purple);background:#a78bfa1a;border:1px solid #a78bfa4d}.q-item.macro-item{color:var(--gold);background:#f5a6231a;border:1px solid #f5a6234d}.q-item.webapi-item{color:var(--blue);background:#4f8ef71a;border:1px solid #4f8ef74d}.item-dot{background:currentColor;border-radius:50%;flex-shrink:0;width:6px;height:6px}.item-label{flex:1}.webapi-body{flex-flow:wrap;gap:.5rem;min-height:60px;padding:.6rem;display:flex}.loop-ring-wrap{justify-content:center;align-items:center;padding:.5rem;display:flex}.loop-ring{border:3px solid var(--border2);border-radius:50%;width:90px;height:90px;transition:border-color .3s;position:relative}.loop-ring.spinning .loop-spinner{animation:1s linear infinite viz-spinLoop}.loop-spinner{border:3px solid #0000;border-top-color:var(--gold);border-right-color:var(--saffron);border-radius:50%;position:absolute;inset:-3px}@keyframes viz-spinLoop{to{transform:rotate(360deg)}}.loop-inner{background:var(--surface3);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:2px;display:flex;position:absolute;inset:12px}.loop-label{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:JetBrains Mono,monospace;font-size:.55rem}.loop-phase{font-family:var(--font-sans);color:var(--gold);text-align:center;padding:0 4px;font-size:.6rem;line-height:1.2}.console-panel{border-top:1px solid var(--border);background:#020508;flex-shrink:0}.console-header{border-bottom:1px solid var(--border);background:var(--surface2);justify-content:space-between;align-items:center;padding:.5rem 1rem;display:flex}.console-title{letter-spacing:.15em;text-transform:uppercase;color:var(--dim);align-items:center;gap:.5rem;font-family:JetBrains Mono,monospace;font-size:.65rem;display:flex}.console-clear{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:.2rem .5rem;font-family:JetBrains Mono,monospace;font-size:.62rem;transition:color .2s}.console-clear:hover{color:var(--red)}.console-body{flex-direction:column;gap:.2rem;max-height:110px;padding:.6rem 1rem;display:flex;overflow-y:auto}.console-body::-webkit-scrollbar{width:3px}.console-body::-webkit-scrollbar-thumb{background:var(--border2)}.console-line{opacity:0;align-items:flex-start;gap:.5rem;font-family:JetBrains Mono,monospace;font-size:.76rem;animation:.25s forwards viz-fadeSlide;display:flex}@keyframes viz-fadeSlide{to{opacity:1}}.cl-prompt{color:var(--muted);user-select:none}.cl-text{color:var(--green)}.cl-text.cl-note{color:var(--blue)}.cl-text.cl-warn{color:var(--yellow)}.cl-text.cl-phase{color:var(--gold);font-style:italic}.controls-bar{border-top:1px solid var(--border);background:var(--surface);flex-wrap:wrap;grid-column:1/-1;align-items:center;gap:.75rem;padding:.85rem 1.25rem;display:flex}.btn{border-radius:var(--r-sm);cursor:pointer;letter-spacing:.05em;white-space:nowrap;border:1px solid #0000;align-items:center;gap:.4rem;padding:.5rem 1.1rem;font-family:JetBrains Mono,monospace;font-size:.72rem;transition:all .18s;display:flex}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-run{background:linear-gradient(135deg, var(--gold), var(--saffron));color:#000;font-weight:700}.btn-run:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 16px #f5a62359}.btn-step{color:var(--blue);background:#4f8ef71f;border-color:#4f8ef74d}.btn-step:not(:disabled):hover{border-color:var(--blue);background:#4f8ef733}.btn-reset{border-color:var(--border2);color:var(--dim);background:0 0}.btn-reset:hover{border-color:var(--red);color:var(--red)}.speed-ctrl{align-items:center;gap:.5rem;margin-left:auto;display:flex}.speed-label{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-family:JetBrains Mono,monospace;font-size:.62rem}.speed-select{background:var(--surface3);border:1px solid var(--border2);color:var(--dim);cursor:pointer;border-radius:6px;padding:.3rem .6rem;font-family:JetBrains Mono,monospace;font-size:.7rem}.progress-bar{background:var(--border);grid-column:1/-1;height:2px}.progress-fill{background:linear-gradient(90deg, var(--gold), var(--saffron));transform-origin:0;border-radius:2px;width:100%;height:100%;transition:transform .3s;transform:scaleX(0)}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}