#visualizer { --viz-ink:#18264a; --viz-muted:#627189; --viz-accent:#4f46e5; color:var(--viz-ink); }
#visualizer * { box-sizing:border-box; }
#visualizer .viz-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px; margin-bottom:18px; border:1px solid #dce3f4; border-radius:18px; background:linear-gradient(120deg,#edf1ff,#f7fbff); }
#visualizer .viz-kicker { font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--viz-accent); }
#visualizer h2 { margin:8px 0; font-size:28px; line-height:1.25; }
#visualizer .viz-hero p { margin:0; max-width:650px; color:var(--viz-muted); line-height:1.65; }
#visualizer .viz-badge { flex-shrink:0; padding:10px 14px; border:1px solid #cdd6f5; border-radius:999px; background:#fff; font-size:12px; font-weight:700; }
#visualizer .viz-picker { display:grid; grid-template-columns:minmax(150px,.7fr) minmax(230px,1fr) minmax(180px,1fr); gap:18px; align-items:end; margin-bottom:18px; }
#visualizer label { display:grid; gap:7px; font-size:12px; font-weight:750; color:#354365; }
#visualizer select { width:100%; min-height:42px; padding:8px 32px 8px 12px; border:1px solid #ced7e6; border-radius:9px; background:#fff; color:var(--viz-ink); font:inherit; font-size:13px; }
#visualizer .viz-picker p { margin:0 0 2px; font-size:12px; line-height:1.6; color:var(--viz-muted); }
#visualizer .viz-controls { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:14px; margin-bottom:18px; background:#fff; border:1px solid #e0e6ef; border-radius:14px; }
#visualizer .viz-controls .btn { min-height:40px; font-size:12px; }
#visualizer .viz-controls label:not(.viz-timeline) { display:flex; align-items:center; gap:8px; margin-left:auto; }
#visualizer .viz-controls select { width:104px; min-height:40px; }
#visualizer button:disabled { opacity:.42; cursor:default; }
#visualizer :is(button,select,input,pre[tabindex]):focus-visible { outline:3px solid #8b85fc; outline-offset:3px; }
#visualizer .viz-position { min-width:95px; color:var(--viz-muted); font-size:12px; font-variant-numeric:tabular-nums; }
#visualizer .viz-timeline { width:100%; }
#visualizer input[type=range] { width:100%; margin:4px 0 0; padding:0; accent-color:var(--viz-accent); min-height:22px; cursor:pointer; }
#visualizer .viz-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
#visualizer .viz-card { min-width:0; overflow:hidden; border:1px solid #dde4ef; border-radius:15px; background:#fff; }
#visualizer .viz-card-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:15px 18px; border-bottom:1px solid #e5eaf2; }
#visualizer h3 { margin:0; font-size:15px; }
#visualizer .viz-card-head>span { font-size:10px; font-weight:650; color:var(--viz-muted); }
#visualizer .viz-code-help { margin:0; padding:12px 18px; font-size:11px; line-height:1.5; color:#a8b8d5; background:#162139; }
#visualizer .viz-source { margin:0; min-height:350px; max-height:540px; padding:16px 0 22px; overflow:auto; border:0; border-radius:0; background:#101a2e; color:#e5edf9; font:12px/1.95 Consolas,'Cascadia Code',monospace; tab-size:4; }
#visualizer .viz-source code { display:block; min-width:max-content; font:inherit; background:transparent; color:inherit; padding:0; }
#visualizer .viz-code-line { display:flex; padding-right:20px; min-height:24px; border-left:3px solid transparent; white-space:pre; }
#visualizer .viz-code-line.is-current { background:#303065; border-left-color:#a5a0ff; color:#fff; }
#visualizer .viz-line-number { display:inline-block; flex-shrink:0; width:47px; padding:0 12px; color:#7f91b0; user-select:none; }
#visualizer .is-current .viz-line-number { color:#c9c6ff; }
#visualizer .viz-source-card { display:flex; flex-direction:column; }
#visualizer .viz-source-card .viz-source { flex:1; }
#visualizer .viz-diagram { padding:9px 10px 0; background:radial-gradient(#dfe6f2 .8px,transparent .8px); background-size:14px 14px; }
#visualizer .viz-diagram svg { display:block; width:100%; height:auto; }
#visualizer .viz-node rect, #visualizer .viz-node polygon { fill:#fff; stroke:#bdcadd; stroke-width:1.7; transition:fill .2s,stroke .2s; }
#visualizer .viz-node-terminal rect { fill:#eef2f9; }
#visualizer .viz-node-decision polygon { fill:#fff8e8; stroke:#d8c795; }
#visualizer .viz-node text { fill:#344564; font:13px Consolas,monospace; }
#visualizer .viz-node.is-current rect, #visualizer .viz-node.is-current polygon { fill:#e9e7ff; stroke:var(--viz-accent); stroke-width:3; }
#visualizer .viz-node.is-current text { fill:#3730a3; font-weight:800; }
#visualizer .viz-edge path { fill:none; stroke:#a6b4c9; stroke-width:2; stroke-linejoin:round; }
#visualizer .viz-edge text { fill:#68758d; font:12px sans-serif; paint-order:stroke; stroke:#fff; stroke-width:4px; }
#visualizer .viz-edge.is-current path { stroke:var(--viz-accent); stroke-width:3; marker-end:url(#vizArrowActive); stroke-dasharray:7 4; }
#visualizer.viz-playing .viz-edge.is-current path { animation:viz-flow .8s linear infinite; }
#visualizer .viz-edge.is-current text { fill:var(--viz-accent); font-weight:750; }
#visualizer .viz-flow-caption { margin:0; padding:10px 18px 14px; color:var(--viz-accent); font-size:12px; font-weight:700; text-align:center; }
#visualizer .viz-explanation { margin:18px 0; padding:18px 22px; background:#eeedff; border:1px solid #d6d3ff; border-left:4px solid var(--viz-accent); border-radius:12px; }
#visualizer .viz-explanation>span { font-size:15px; font-weight:800; color:#3730a3; }
#visualizer .viz-explanation p { margin:6px 0 0; color:#4d5678; font-size:13px; line-height:1.65; }
#visualizer .viz-details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
#visualizer .viz-variables { margin:0; padding:12px 16px; }
#visualizer .viz-variables>div { display:flex; justify-content:space-between; gap:16px; padding:9px 11px; margin-bottom:5px; border-radius:7px; background:#f5f7fb; font:13px Consolas,monospace; }
#visualizer .viz-variables dd { margin:0; font-weight:800; }
#visualizer .viz-variables .is-changed { background:#e9e7ff; color:#3730a3; }
#visualizer .viz-empty { color:var(--viz-muted); font:12px/1.5 sans-serif!important; }
#visualizer .viz-stack { list-style:none; margin:0; padding:12px 16px; }
#visualizer .viz-stack li { padding:10px 12px; margin-bottom:6px; background:#f5f7fb; border:1px solid #e5eaf3; border-radius:7px; font:12px Consolas,monospace; }
#visualizer .viz-stack li:first-child { border-left:3px solid var(--viz-accent); }
#visualizer .viz-output { margin:14px 16px; padding:15px; min-height:80px; background:#101a2e; color:#a7f3d0; border-radius:9px; font:14px/1.7 Consolas,monospace; white-space:pre-wrap; }
#visualizer .viz-output.is-empty { color:#a8b8d5; font-size:12px; }
#visualizer .viz-note { margin:18px 0 4px; color:var(--viz-muted); font-size:12px; line-height:1.6; }
#visualizer .viz-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes viz-flow { to { stroke-dashoffset:-22; } }
@media(min-width:1400px) { #visualizer .viz-diagram svg { max-height:430px; } }
@media(max-width:1050px) { #visualizer .viz-hero { align-items:flex-start; flex-direction:column; gap:14px; } #visualizer .viz-picker { grid-template-columns:1fr 1fr; } #visualizer .viz-picker p { grid-column:1/-1; } #visualizer .viz-workspace { grid-template-columns:1fr; } #visualizer .viz-diagram svg { max-height:440px; } #visualizer .viz-source { min-height:0; } }
@media(max-width:650px) { #visualizer .viz-hero { padding:20px; } #visualizer h2 { font-size:23px; } #visualizer .viz-picker,#visualizer .viz-details { grid-template-columns:1fr; } #visualizer .viz-badge { font-size:11px; } #visualizer .viz-controls { gap:8px; } #visualizer .viz-controls .btn { flex:1 1 42%; padding:9px; } #visualizer .viz-controls label:not(.viz-timeline) { margin-left:0; } #visualizer .viz-position { margin-left:auto; min-width:0; } #visualizer .viz-source { font-size:11px; } #visualizer .viz-card-head { padding:13px; } }
@media(prefers-reduced-motion:reduce) { #visualizer .viz-node rect,#visualizer .viz-node polygon { transition:none; } #visualizer.viz-playing .viz-edge.is-current path { animation:none; } }