:root{--bg:#eef0f5;--surface:#fff;--ink:#1a1e29;--muted:#5f6779;--rule:#d5dae5;--stack:#2b57d6;--webapi:#8440c4;--micro:#0b8266;--macro:#b85f06;--error:#c0283a;--font-ui:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#11131a;--surface:#1a1d27;--ink:#e6e9f0;--muted:#98a0b3;--rule:#2b3040;--stack:#82a0ff;--webapi:#c492f7;--micro:#4fd0a7;--macro:#f0a548;--error:#ff8a94;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#11131a;--surface:#1a1d27;--ink:#e6e9f0;--muted:#98a0b3;--rule:#2b3040;--stack:#82a0ff;--webapi:#c492f7;--micro:#4fd0a7;--macro:#f0a548;--error:#ff8a94;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--font-ui);margin:0}h1,h2,h3,p,ul,ol{margin:0;padding:0}ul,ol{list-style:none}.page{flex-direction:column;gap:16px;max-width:1240px;margin-inline:auto;padding-block:24px 32px;padding-inline:20px;display:flex}.top{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px;display:flex}h1{letter-spacing:-.01em;text-wrap:balance;font-size:26px;font-weight:600}.lede{color:var(--muted)}.loop{--phase:var(--muted);border:1px solid var(--rule);background:var(--surface);border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:13px;display:flex}.loop[data-phase=script]{--phase:var(--stack)}.loop[data-phase=micro]{--phase:var(--micro)}.loop[data-phase=macro]{--phase:var(--macro)}.loop-dot{background:var(--phase);border-radius:50%;width:10px;height:10px;transition:background .2s}.controls{flex-wrap:wrap;align-items:center;gap:10px 14px;display:flex}.buttons{flex-wrap:wrap;gap:6px;display:flex}button,select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:6px 12px}button{cursor:pointer}button:hover:not(:disabled){border-color:var(--stack)}button:disabled{color:var(--muted);opacity:.6;cursor:default}button.primary{background:var(--stack);border-color:var(--stack);min-width:84px;color:var(--surface);font-weight:600}:focus-visible{outline:2px solid var(--stack);outline-offset:2px}.scrubber{min-width:0;accent-color:var(--stack);flex:180px}.counter{font:13px var(--font-mono);font-variant-numeric:tabular-nums;color:var(--muted);min-width:7ch}.speed{color:var(--muted);align-items:center;gap:8px;font-size:13px;display:flex}.narration{border-left:3px solid var(--ink);background:var(--surface);min-height:92px;padding:12px 16px}.narration h2{font:600 15px var(--font-mono)}.narration p{max-width:75ch;color:var(--muted)}.board{grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);grid-template-areas:"code stack webapi""code stack micro""code stack macro""code console console";gap:12px;display:grid}.panel{--hue:var(--muted);background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--hue);flex-direction:column;gap:6px;min-width:0;padding:12px 14px 14px;transition:box-shadow .2s;display:flex}.panel.focused{box-shadow:0 0 0 2px var(--hue)}.code{--hue:var(--ink);grid-area:code}.stack{--hue:var(--stack);grid-area:stack}.webapi{--hue:var(--webapi);grid-area:webapi}.micro{--hue:var(--micro);grid-area:micro}.macro{--hue:var(--macro);grid-area:macro}.console{--hue:var(--ink);grid-area:console}h3{letter-spacing:.08em;text-transform:uppercase;color:var(--hue);font-size:12px;font-weight:600}.panel-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.panel-head button{padding:3px 10px;font-size:13px}.panel-head button.primary{min-width:0}.editor{resize:vertical;border:1px solid var(--rule);background:var(--bg);width:100%;min-height:420px;color:var(--ink);font:13px/1.65 var(--font-mono);tab-size:2;white-space:pre;border-radius:4px;padding:10px 12px}.error,.notice{border-left:3px solid var(--error);background:color-mix(in srgb, var(--error) 10%, var(--surface));color:var(--error);overflow-wrap:anywhere;padding:8px 12px;font-size:13px}.hint,.empty,.keys{color:var(--muted);font-size:13px}.empty{font-style:italic}.code-scroll{max-height:660px;overflow:auto}.code li{font:13px/1.65 var(--font-mono);white-space:pre;border-left:3px solid #0000;gap:12px;padding-inline:6px;display:flex}.code li.active{border-left-color:var(--stack);background:color-mix(in srgb, var(--stack) 14%, var(--surface))}.ln{text-align:right;width:2ch;color:var(--muted);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;flex:none}.code code{font:inherit}.kw{color:var(--webapi)}.num{color:var(--macro)}.frames,.queue{gap:6px;display:flex}.frames{flex-direction:column-reverse;flex:1;justify-content:flex-start;min-height:190px}.queue{flex-direction:column;min-height:34px}.chip{border:1px solid var(--hue);background:color-mix(in srgb, var(--hue) 12%, var(--surface));font:13px/1.5 var(--font-mono);overflow-wrap:anywhere;border-radius:4px;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:5px 10px;display:flex}.chip[data-kind=script]{--hue:var(--muted)}.chip[data-kind=micro]{--hue:var(--micro)}.chip[data-kind=macro]{--hue:var(--macro)}.chip.internal{--hue:var(--muted);font-family:var(--font-ui);border-style:dashed}.tag{background:var(--hue);color:var(--surface);font:600 11px/1.6 var(--font-ui);letter-spacing:.03em;border-radius:3px;padding:0 6px}.output{flex-wrap:wrap;gap:6px;min-height:34px;display:flex}.output li{border:1px solid var(--rule);background:var(--bg);min-width:34px;font:600 15px/1.6 var(--font-mono);text-align:center;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:4px;padding:4px 8px}.output li.error{border-color:var(--error);background:color-mix(in srgb, var(--error) 10%, var(--surface));text-align:left;border-left-width:1px;padding:4px 8px;font-size:13px;font-weight:400}.chip-enter-active,.chip-leave-active{transition:opacity .22s,transform .22s}.chip-enter-from{opacity:0;transform:translateY(-8px)}.chip-leave-to{opacity:0;transform:translate(10px)}.chip-leave-active{position:absolute}@media (width<=900px){.board{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"code code""stack webapi""stack micro""stack macro""console console"}}@media (width<=560px){.page{padding-inline:16px}.board{grid-template-columns:minmax(0,1fr);grid-template-areas:"code""stack""webapi""micro""macro""console"}.frames{min-height:120px}}@media (prefers-reduced-motion:reduce){.chip-enter-active,.chip-leave-active,.panel,.loop-dot{transition:none}}