: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{font-size:1.1rem;-webkit-text-fill-color:var(--gold);filter:drop-shadow(0 0 8px rgba(245,166,35,.6));animation:viz-float 3s ease-in-out infinite}.viz-live-badge{font-family:JetBrains Mono,monospace;font-size:.68rem;letter-spacing:.12em;color:var(--green);background:#10d98a14;border:1px solid rgba(16,217,138,.25);padding:.3rem .75rem;border-radius:100px;display:flex;align-items:center;gap:.4rem}.viz-live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:viz-pulse-dot 1.5s infinite}@keyframes viz-pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}.scenario-bar{position:relative;z-index:9;padding:.85rem 2rem;border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.scenario-label{font-family:JetBrains Mono,monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}.scenario-tabs{display:flex;gap:.5rem;flex-wrap:wrap}.stab{font-family:JetBrains Mono,monospace;font-size:.72rem;padding:.35rem .8rem;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--dim);cursor:pointer;transition:all .2s;white-space:nowrap}.stab:hover{border-color:var(--gold);color:var(--gold)}.stab.active{background:#f5a6231f;border-color:var(--gold);color:var(--gold)}.app{position:relative;z-index:1;display:grid;grid-template-columns:380px 1fr;grid-template-rows:1fr auto;height:calc(100vh - 98px);overflow:hidden}@media(max-width:900px){.app{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;height:auto;overflow:visible}}.code-panel{border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;background:#030610}.panel-header{padding:.75rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.5rem;background:var(--surface2);flex-shrink:0}.panel-title{font-family:JetBrains Mono,monospace;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}.win-dots{display:flex;gap:5px;margin-right:.25rem}.wd{width:10px;height:10px;border-radius:50%}.wd-r{background:#ff5f57}.wd-y{background:#febc2e}.wd-g{background:#28c840}.code-scroll{flex:1;overflow-y:auto;padding:1rem 0}.code-scroll::-webkit-scrollbar{width:4px}.code-scroll::-webkit-scrollbar-track{background:transparent}.code-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}.code-line{display:flex;align-items:stretch;min-height:24px;position:relative;transition:background .2s;font-family:JetBrains Mono,monospace;font-size:.8rem}.code-line.active-line{background:#f5a6231a}.code-line.done-line{background:#10d98a0a}.line-num{min-width:40px;text-align:right;padding:0 .75rem 0 0;color:var(--muted);font-size:.72rem;user-select:none;flex-shrink:0;line-height:24px}.line-indicator{width:3px;flex-shrink:0;background:transparent;transition:background .2s}.code-line.active-line .line-indicator{background:var(--gold)}.code-line.done-line .line-indicator{background:var(--green)}.line-code{padding:0 1rem;line-height:24px;white-space:pre;flex:1}.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{flex-shrink:0;border-top:1px solid var(--border);padding:.9rem 1rem;background:var(--surface2);min-height:80px}.explain-tag{font-family:JetBrains Mono,monospace;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.35rem}.explain-text{font-size:.82rem;color:var(--dim);line-height:1.55}.explain-text strong{color:var(--text)}.explain-text code{font-family:JetBrains Mono,monospace;font-size:.78em;background:#ffffff12;padding:.1rem .3rem;border-radius:3px}.diagram-panel{display:flex;flex-direction:column;overflow:hidden}.diagram-scroll{flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:1rem}.diagram-scroll::-webkit-scrollbar{width:4px}.diagram-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}.diagram-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}@media(max-width:700px){.diagram-grid{grid-template-columns:1fr}}.dbox{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r);overflow:hidden;transition:border-color .3s}.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{padding:.55rem .85rem;display:flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--border)}.dbox-icon{font-size:.9rem}.dbox-name{font-family:JetBrains Mono,monospace;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);flex:1}.dbox-count{font-family:JetBrains Mono,monospace;font-size:.62rem;background:var(--surface3);padding:.1rem .4rem;border-radius:4px;color:var(--muted)}.dbox-body{padding:.6rem;min-height:120px;display:flex;flex-direction:column;gap:.3rem;position:relative}.empty-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:JetBrains Mono,monospace;font-size:.65rem;color:var(--border2);letter-spacing:.1em;text-transform:uppercase;pointer-events:none}.q-item{border-radius:var(--r-sm);padding:.35rem .6rem;font-family:JetBrains Mono,monospace;font-size:.72rem;display:flex;align-items:center;gap:.4rem;animation:viz-itemIn .35s cubic-bezier(.34,1.56,.64,1) forwards;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{background:#10d98a1a;border:1px solid rgba(16,217,138,.3);color:var(--green)}.q-item.stack-item.executing{background:#10d98a2e;border-color:var(--green);animation:viz-execPulse .7s ease-in-out infinite alternate}@keyframes viz-execPulse{0%{box-shadow:0 0 6px #10d98a33}to{box-shadow:0 0 20px #10d98a80}}.q-item.micro-item{background:#a78bfa1a;border:1px solid rgba(167,139,250,.3);color:var(--purple)}.q-item.macro-item{background:#f5a6231a;border:1px solid rgba(245,166,35,.3);color:var(--gold)}.q-item.webapi-item{background:#4f8ef71a;border:1px solid rgba(79,142,247,.3);color:var(--blue)}.item-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}.item-label{flex:1}.webapi-body{display:flex;flex-direction:row;gap:.5rem;padding:.6rem;min-height:60px;flex-wrap:wrap}.loop-ring-wrap{display:flex;align-items:center;justify-content:center;padding:.5rem}.loop-ring{width:90px;height:90px;border-radius:50%;border:3px solid var(--border2);position:relative;transition:border-color .3s}.loop-ring.spinning .loop-spinner{animation:viz-spinLoop 1s linear infinite}.loop-spinner{position:absolute;inset:-3px;border-radius:50%;border:3px solid transparent;border-top-color:var(--gold);border-right-color:var(--saffron)}@keyframes viz-spinLoop{to{transform:rotate(360deg)}}.loop-inner{position:absolute;inset:12px;border-radius:50%;background:var(--surface3);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px}.loop-label{font-family:JetBrains Mono,monospace;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.loop-phase{font-family:var(--font-sans);font-size:.6rem;color:var(--gold);text-align:center;line-height:1.2;padding:0 4px}.console-panel{border-top:1px solid var(--border);background:#020508;flex-shrink:0}.console-header{padding:.5rem 1rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:var(--surface2)}.console-title{font-family:JetBrains Mono,monospace;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:.5rem}.console-clear{font-family:JetBrains Mono,monospace;font-size:.62rem;color:var(--muted);background:transparent;border:none;cursor:pointer;padding:.2rem .5rem;border-radius:4px;transition:color .2s}.console-clear:hover{color:var(--red)}.console-body{padding:.6rem 1rem;max-height:110px;overflow-y:auto;display:flex;flex-direction:column;gap:.2rem}.console-body::-webkit-scrollbar{width:3px}.console-body::-webkit-scrollbar-thumb{background:var(--border2)}.console-line{font-family:JetBrains Mono,monospace;font-size:.76rem;display:flex;align-items:flex-start;gap:.5rem;animation:viz-fadeSlide .25s ease forwards;opacity:0}@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);padding:.85rem 1.25rem;background:var(--surface);display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;grid-column:1 / -1}.btn{font-family:JetBrains Mono,monospace;font-size:.72rem;padding:.5rem 1.1rem;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;transition:all .18s;letter-spacing:.05em;display:flex;align-items:center;gap:.4rem;white-space:nowrap}.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{background:#4f8ef71f;border-color:#4f8ef74d;color:var(--blue)}.btn-step:not(:disabled):hover{background:#4f8ef733;border-color:var(--blue)}.btn-reset{background:transparent;border-color:var(--border2);color:var(--dim)}.btn-reset:hover{border-color:var(--red);color:var(--red)}.speed-ctrl{display:flex;align-items:center;gap:.5rem;margin-left:auto}.speed-label{font-family:JetBrains Mono,monospace;font-size:.62rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}.speed-select{font-family:JetBrains Mono,monospace;font-size:.7rem;background:var(--surface3);border:1px solid var(--border2);color:var(--dim);padding:.3rem .6rem;border-radius:6px;cursor:pointer}.progress-bar{height:2px;background:var(--border);grid-column:1 / -1}.progress-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--gold),var(--saffron));transform:scaleX(0);transform-origin:left;transition:transform .3s ease;border-radius:2px}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}