.db-demo{--scene-dep: var(--slate);--scene-danger: #dc2626;--scene-danger-soft: #fef2f2;--scene-flow: var(--brand-green);--scene-flow-ink: var(--brand-green-deep);--scene-flow-soft: var(--brand-green-soft);--scene-temp: #b45309;--scene-temp-soft: #fff7e6;--scene-hue-blue: #3b82f6;--scene-hue-amber: #f59e0b;--scene-hue-violet: #8b5cf6;--scene-hue-cyan: #0ea5b7;--scene-hue-gray: #64748b;--scene-hue-pink: #ec4899}html.dark .db-demo{--scene-danger: #f87171;--scene-danger-soft: #371a1a;--scene-temp: #fbbf24;--scene-temp-soft: #33280f;--scene-hue-blue: #7aa7ff;--scene-hue-amber: #fbbf24;--scene-hue-violet: #b49cff;--scene-hue-cyan: #4fd1e0;--scene-hue-gray: #9aaba5;--scene-hue-pink: #f9a8d4}.scene-stage{position:relative;border:1px solid var(--hairline);border-radius:12px;background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--slate) 22%,transparent) 1px,transparent 0) 0 0 / 18px 18px,var(--canvas);overflow:hidden}.scene-stage>svg{display:block;width:100%;height:auto;font-family:var(--font-sans)}.scene-boundary{fill:color-mix(in srgb,var(--surface) 70%,transparent);stroke:var(--hairline);stroke-width:1.5;stroke-dasharray:6 5}.scene-zone{fill:none;stroke:color-mix(in srgb,var(--scene-flow) 45%,var(--hairline));stroke-width:1.5;stroke-dasharray:3 5}.scene-caption{fill:var(--slate);font-size:12px;font-weight:700;letter-spacing:.02em}.scene-node-body{transform-box:fill-box;transform-origin:center}.scene-node-card{fill:var(--surface);stroke:var(--hairline);stroke-width:1.5;transition:fill .24s ease,stroke .24s ease}.scene-node-accent{fill:var(--node-hue, var(--slate))}.scene-node-name{fill:var(--ink);font-size:14px;font-weight:750;text-anchor:middle}.scene-node-sub{fill:var(--slate);font-family:var(--font-mono);font-size:10.5px;text-anchor:middle;transition:fill .24s ease}.scene-node.is-done .scene-node-card{stroke:var(--scene-flow);stroke-width:2}.scene-node.is-done .scene-node-sub{fill:var(--scene-flow-ink)}.scene-node.is-error .scene-node-card{fill:var(--scene-danger-soft);stroke:var(--scene-danger);stroke-width:2.5}.scene-node.is-error .scene-node-sub{fill:var(--scene-danger);font-weight:700}.scene-node.is-sans-sub .scene-node-sub{font-family:var(--font-sans);font-size:11px;font-weight:700}.scene-node.is-temp .scene-node-sub{fill:var(--scene-temp);font-weight:700}.scene-node.is-shaking .scene-node-body{animation:scene-shake .42s ease-in-out}.scene-node.is-ok .scene-node-body{animation:scene-pop .52s ease-out}.scene-land-ring{fill:none;stroke:var(--scene-flow);stroke-width:2;pointer-events:none;transform-box:fill-box;transform-origin:center;animation:scene-ring .64s ease-out forwards}.scene-tray-name{font-size:13px;text-anchor:start}.scene-tray-sub{text-anchor:end}.scene-tray-seat{fill:color-mix(in srgb,var(--node-hue) 6%,transparent);stroke:color-mix(in srgb,var(--node-hue) 40%,var(--hairline));stroke-width:1.2;stroke-dasharray:4 4}.scene-gauge-track{fill:var(--surface);stroke:var(--hairline);stroke-width:1.5;transition:stroke .24s ease}.scene-gauge-fill{fill:color-mix(in srgb,var(--scene-flow) 72%,transparent)}.scene-gauge.is-empty .scene-gauge-track{stroke:var(--scene-temp);stroke-dasharray:4 3}.scene-gauge-value{fill:var(--ink);font-family:var(--font-mono);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;transform-box:fill-box;transform-origin:center}.scene-gauge.is-empty .scene-gauge-value{fill:var(--scene-temp)}.scene-gauge-value.is-bump{animation:scene-pop .42s ease-out}.scene-line{fill:none;stroke-width:2.5;stroke-linecap:round}.scene-line.is-flowing{stroke-dasharray:7 6;animation:scene-flow .9s linear infinite}.scene-line.is-flowing-reverse{stroke-dasharray:7 6;animation:scene-flow-reverse .9s linear infinite}.scene-flow{stroke:var(--scene-flow);stroke-width:2;stroke-dasharray:2 7;animation:scene-flow 1.1s linear infinite}.scene-arrow{stroke:none}.scene-label{font-family:var(--font-mono);font-size:11px;font-weight:600;paint-order:stroke;stroke:var(--canvas);stroke-width:5px;stroke-linejoin:round}.scene-label-dep{fill:var(--scene-dep)}.scene-label.is-sans{font-family:var(--font-sans);font-size:11.5px;font-weight:700}.scene-label-danger{fill:var(--scene-danger)}.scene-label-flow{fill:var(--scene-flow-ink)}.scene-pill{fill:var(--canvas);stroke:color-mix(in srgb,var(--scene-danger) 45%,transparent);stroke-width:1}.scene-pill-text{fill:var(--scene-danger);font-size:11px;font-weight:700;text-anchor:middle}.scene-strike{stroke:var(--scene-danger);stroke-width:2;stroke-linecap:round}.scene-break{fill:var(--scene-danger);font-size:18px;font-weight:800;text-anchor:middle;dominant-baseline:central}.scene-block{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--hairline);border-radius:8px;color:var(--ink);background:var(--canvas);box-shadow:var(--shadow-sm);font-size:.82rem;font-weight:750;white-space:nowrap;will-change:transform}.scene-block:before{width:4px;height:14px;border-radius:2px;background:var(--node-hue, var(--slate));content:""}.scene-block.is-muted{border-style:dashed;color:var(--slate);font-family:var(--font-mono);font-size:.74rem;font-weight:600}.scene-block.is-flying{z-index:5;box-shadow:0 12px 28px #0f172a2e}.scene-block.is-landed{animation:scene-land .7s ease-out}.scene-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px;margin:18px 0 14px}.scene-chips-label{margin-right:6px;color:var(--slate);font-size:.8rem;font-weight:700}.scene-chips-sep{color:var(--muted);font-size:.8rem}.db-demo .scene-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--hairline);border-radius:999px;color:var(--charcoal);background:var(--canvas);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background-color .16s ease,color .16s ease}.scene-chip:before{width:8px;height:8px;border-radius:50%;background:var(--node-hue, var(--slate));content:""}.scene-chip.is-plain:before{content:none}.db-demo .scene-chip:hover:not(:disabled){transform:translateY(-2px);border-color:var(--scene-flow)}.scene-chip:focus-visible{outline:3px solid var(--scene-flow);outline-offset:2px}.scene-chip:disabled{cursor:default}.db-demo .scene-chip[data-state=next]{border-color:var(--scene-flow);animation:scene-beckon 1.8s ease-in-out infinite}.db-demo .scene-chip[data-state=ok]{border-color:var(--scene-flow);color:var(--scene-flow-ink);background:var(--scene-flow-soft)}.db-demo .scene-chip[data-state=fail]{border-color:var(--scene-danger);color:var(--scene-danger);background:var(--scene-danger-soft)}.db-demo .scene-chip[data-state=locked]{border-style:dashed;color:var(--slate);opacity:.8}.scene-chip-mark{font-size:.8rem;line-height:1}.db-demo .scene-console{min-height:132px;margin:12px 0 0;padding:12px 14px;border-radius:10px;color:#c9d4d1;background:#0d1312;font-family:var(--font-mono);font-size:.78rem;line-height:1.65;list-style:none;overflow-wrap:anywhere}.scene-console li{display:flex;gap:8px;margin:0;animation:scene-rise .22s ease-out both}.scene-console li:before{flex:none;width:1.1em;content:"›";color:#6b7c77}.scene-console li[data-tone=pending]:before{content:"…";color:#9fb0ab}.scene-console li[data-tone=ok]:before{content:"✓";color:#35d6aa}.scene-console li[data-tone=fail]:before{content:"✕";color:#f87171}.scene-console li[data-tone=warn]:before{content:"!";color:#fbbf24}.scene-console li[data-tone=fail]{color:#fca5a5}.scene-console li[data-tone=warn]{color:#fde68a}.scene-console li[data-tone=trace]{padding-left:1.6em;color:#fca5a5;opacity:.9}.scene-console li[data-tone=trace]:before{content:none}.scene-console .scene-console-idle{color:#6b7c77}.db-demo .scene-note{min-height:3.2em;margin:12px 0 0;padding:11px 13px;border-left:3px solid var(--scene-flow);border-radius:0 8px 8px 0;color:var(--charcoal);background:var(--scene-flow-soft);font-size:.87rem}.scene-note strong{color:var(--ink)}.db-demo .scene-note.is-alert{border-left-color:var(--scene-danger);background:var(--scene-danger-soft)}.scene-note.is-entering{animation:scene-rise .32s ease-out both}.db-demo .scene-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 2px 0;padding:0;color:var(--slate);font-size:.76rem;list-style:none}.scene-legend li{display:inline-flex;align-items:center;gap:7px;margin:0}.scene-legend i{display:inline-block;width:22px;height:0;border-top:2.5px solid}.scene-legend .is-danger{color:var(--scene-danger)}.scene-legend .is-flow{color:var(--scene-flow);border-top-style:dotted}.scene-legend .is-dep{color:var(--scene-dep)}.scene-metrics{position:absolute;top:12px;right:14px;display:flex;gap:14px;pointer-events:none}.scene-metric{display:grid;justify-items:end;line-height:1.1}.scene-metric b{display:inline-block;font-size:1.9rem;font-variant-numeric:tabular-nums;font-weight:800}.scene-metric span{color:var(--slate);font-size:.7rem;font-weight:700}.scene-metric.is-danger b{color:var(--scene-danger)}.scene-metric.is-flow b,.scene-metric b.is-zero{color:var(--scene-flow-ink)}.scene-metric b.is-bump{animation:scene-pop .42s ease-out}@media(max-width:560px){.scene-metrics{position:static;justify-content:flex-end;padding:10px 12px 0}}.scene-timeline{display:grid;grid-template-columns:repeat(var(--steps),minmax(0,1fr)) auto;align-items:stretch;gap:6px;margin:18px 0 14px}.db-demo .scene-timeline-step{position:relative;min-width:0;padding:10px 6px 12px;border:0;border-radius:8px;color:var(--slate);background:transparent;font:inherit;font-size:.76rem;font-weight:700;line-height:1.3;text-align:left;word-break:keep-all;cursor:pointer;transition:color .16s ease,background-color .16s ease}.db-demo .scene-timeline-step:hover{background:var(--canvas)}.scene-timeline-step:focus-visible{outline:3px solid var(--scene-flow);outline-offset:1px}.scene-timeline-step:before,.scene-timeline-fill{position:absolute;inset:0 6px auto;height:4px;border-radius:999px;content:""}.scene-timeline-step:before{background:var(--hairline)}.scene-timeline-fill{width:0;max-width:calc(100% - 12px);background:var(--scene-flow)}.scene-timeline-step.is-past .scene-timeline-fill,.scene-timeline-step[aria-current=step] .scene-timeline-fill{width:100%}.scene-timeline-step.is-timing .scene-timeline-fill{animation:scene-fill var(--dwell) linear both}.db-demo .scene-timeline-step[aria-current=step]{color:var(--ink)}.db-demo .scene-timeline-step.is-new-case{margin-left:12px}.scene-timeline-step.is-new-case:after{position:absolute;top:-2px;bottom:2px;left:-10px;border-left:2px dashed color-mix(in srgb,var(--scene-temp) 60%,var(--hairline));content:""}.scene-timeline-case{display:block;margin:2px 0 3px;font-style:normal;color:var(--scene-temp);font-size:.66rem;font-weight:800;letter-spacing:.02em}.scene-timeline-step small{display:block;margin-top:6px;color:var(--muted);font-size:.7rem;font-variant-numeric:tabular-nums}.scene-timeline-step[aria-current=step] small{color:var(--scene-flow-ink)}.db-demo .scene-timeline-toggle{align-self:center;padding:7px 11px;border:1px solid var(--hairline);border-radius:8px;color:var(--charcoal);background:var(--canvas);font:inherit;font-size:.76rem;font-weight:700;white-space:nowrap;cursor:pointer}.scene-timeline-toggle:focus-visible{outline:3px solid var(--scene-flow);outline-offset:2px}@media(max-width:600px){.scene-timeline{grid-template-columns:repeat(var(--steps),minmax(0,1fr))}.scene-timeline-step>span:not(.scene-timeline-fill){display:none}.scene-timeline-toggle{grid-column:1 / -1;justify-self:end}}.scene-node.is-waiting .scene-node-card{stroke:var(--scene-temp);stroke-dasharray:5 4;animation:scene-march .9s linear infinite}.scene-node.is-waiting .scene-node-sub{fill:var(--scene-temp);font-weight:700}.scene-packet{--packet: var(--scene-dep);pointer-events:none}.scene-packet[data-tone=flow]{--packet: var(--scene-flow)}.scene-packet[data-tone=danger]{--packet: var(--scene-danger)}.scene-packet[data-tone=temp]{--packet: var(--scene-temp)}.scene-packet-body{transform-box:fill-box;transform-origin:center}.scene-packet-pill{fill:color-mix(in srgb,var(--packet) 14%,var(--canvas));stroke:var(--packet);stroke-width:1.4;filter:drop-shadow(0 2px 3px rgba(15,23,42,.12));transition:fill .2s ease,stroke .2s ease}.scene-packet-text{fill:var(--packet);font-family:var(--font-mono);font-size:10px;font-weight:750;text-anchor:middle;transition:fill .2s ease}.scene-packet.is-bump .scene-packet-body{animation:scene-pop .42s ease-out}.scene-packet.is-hit .scene-packet-body{animation:scene-squash .3s ease-out}.scene-packet.is-landed .scene-packet-pill{animation:scene-glow .7s ease-out}.scene-wall-solid{stroke:var(--scene-danger);stroke-width:3.5;stroke-dasharray:7 5;stroke-linecap:round}.scene-wall-ghost{stroke:color-mix(in srgb,var(--scene-dep) 55%,transparent);stroke-width:2.5;stroke-dasharray:2 6;stroke-linecap:round}.scene-wall.is-ghost .scene-wall-caption{fill:var(--scene-temp)}.scene-wall.is-pierced .scene-wall-ghost{animation:scene-pierce .52s ease-out}@keyframes scene-pierce{30%{stroke:var(--scene-temp);stroke-width:5}to{stroke-width:2.5}}.scene-table-chip-card{fill:var(--surface);stroke:color-mix(in srgb,var(--node-hue) 38%,var(--hairline));stroke-width:1.2;transition:fill .24s ease,stroke .24s ease}.scene-table-chip-dot{fill:var(--node-hue)}.scene-table-chip-text{fill:var(--charcoal);font-family:var(--font-mono);font-size:10px;font-weight:650}.scene-table-chip.is-shared .scene-table-chip-card{stroke:var(--scene-temp);stroke-dasharray:4 3}.scene-table-chip.is-swept .scene-table-chip-card{fill:var(--scene-flow-soft);stroke:var(--scene-flow)}.scene-table-chip.is-orphan .scene-table-chip-card{fill:var(--scene-danger-soft);stroke:var(--scene-danger);stroke-dasharray:4 3}.scene-table-chip.is-orphan .scene-table-chip-text{fill:var(--scene-danger)}.scene-table-chip.is-ok .scene-node-body{animation:scene-pop .52s ease-out}.scene-table-chip.is-shaking .scene-node-body{animation:scene-shake .42s ease-in-out}.scene-table-chip.is-copy .scene-table-chip-card{stroke-dasharray:3 3;fill:color-mix(in srgb,var(--node-hue) 10%,var(--canvas))}.scene-table-chip.is-sans .scene-table-chip-text{font-family:var(--font-sans);font-size:11px;font-weight:700}.scene-table-chip.is-empty .scene-table-chip-card{fill:none;stroke-dasharray:3 4}.scene-table-chip.is-empty .scene-table-chip-dot{opacity:0}.scene-table-chip.is-empty .scene-table-chip-text{fill:var(--muted)}.scene-lane-track{fill:color-mix(in srgb,var(--surface) 70%,transparent);stroke:var(--hairline);stroke-width:1;stroke-dasharray:3 4}.scene-lane-bar{fill:color-mix(in srgb,var(--node-hue) 62%,transparent);stroke:var(--node-hue);stroke-width:1.2}.scene-tick-line{stroke:var(--scene-danger);stroke-width:1.5;stroke-dasharray:2 4}.scene-label.is-waiting-label{fill:var(--scene-temp)!important}.scene-instr{fill:var(--ink);font-family:var(--font-mono);font-size:14px;font-weight:750}.scene-mem-card{fill:var(--surface);stroke:var(--hairline);stroke-width:1.5;transition:fill .2s ease,stroke .2s ease}.scene-mem-addr{fill:var(--muted);font-family:var(--font-mono);font-size:10.5px}.scene-mem-value{fill:var(--ink);font-family:var(--font-mono);font-size:12px;font-weight:700;text-anchor:end;transform-box:fill-box;transform-origin:center}.scene-mem-value.is-sans{font-family:var(--font-sans);font-size:12.5px}.scene-mem-value.is-bump{animation:scene-pop .42s ease-out}.scene-mem-slot.is-read .scene-mem-card{fill:color-mix(in srgb,var(--scene-hue-cyan) 12%,var(--surface));stroke:var(--scene-hue-cyan)}.scene-brace{fill:none;stroke:var(--scene-temp);stroke-width:2;stroke-linecap:round}.scene-brace-label{fill:var(--scene-temp);font-family:var(--font-mono);font-size:12px;font-weight:800}.scene-pointer-pill{fill:color-mix(in srgb,var(--scene-hue-cyan) 14%,var(--canvas));stroke:var(--scene-hue-cyan);stroke-width:1.6}.scene-pointer-text{fill:var(--ink);font-family:var(--font-mono);font-size:12px;font-weight:800;text-anchor:middle}.scene-pointer-arrow{fill:none;stroke:var(--scene-hue-cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.scene-code-frame{fill:color-mix(in srgb,var(--surface) 80%,transparent);stroke:var(--hairline);stroke-width:1.5;transition:stroke .24s ease,fill .24s ease}.scene-code.is-running .scene-code-frame{stroke:color-mix(in srgb,var(--node-hue) 55%,var(--hairline));fill:color-mix(in srgb,var(--node-hue) 5%,var(--surface))}.scene-code-line{fill:var(--slate);font-size:12px;font-weight:600;transition:fill .2s ease}.scene-code-line.is-mono{font-family:var(--font-mono);font-size:11.5px}.scene-code-line.is-active{fill:var(--ink);font-weight:800}.scene-exec-band{fill:color-mix(in srgb,var(--scene-hue-cyan) 14%,transparent);stroke:var(--scene-hue-cyan);stroke-width:2}.scene-exec-tether{fill:none;stroke:var(--scene-hue-cyan);stroke-width:1.6;stroke-dasharray:3 4;stroke-linejoin:round;animation:scene-flow 1.1s linear infinite}.scene-badge-card{fill:var(--canvas);stroke:color-mix(in srgb,var(--node-hue, var(--slate)) 55%,var(--hairline));stroke-width:1.5;transition:stroke .24s ease}.scene-badge-dot{fill:var(--node-hue, var(--slate));transition:fill .24s ease}.scene-badge-caption{fill:var(--slate);font-size:11px;font-weight:700}.scene-badge-value{fill:var(--ink);font-size:12.5px;font-weight:800;text-anchor:end;transform-box:fill-box;transform-origin:center}.scene-badge-value.is-bump{animation:scene-pop .42s ease-out}.scene-lens-source{fill:color-mix(in srgb,var(--ink) 6%,transparent);stroke:var(--ink);stroke-width:1.2}.scene-lens-wing{stroke:color-mix(in srgb,var(--ink) 35%,transparent);stroke-width:1;stroke-dasharray:3 3;fill:none}.scene-lens-panel{fill:var(--surface);stroke:color-mix(in srgb,var(--ink) 45%,var(--hairline));stroke-width:1.2;filter:drop-shadow(0 6px 14px rgba(15,23,42,.1))}.scene-range{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin:0 0 14px;color:var(--slate);font-size:.8rem;font-weight:700}.scene-range input{width:100%;accent-color:var(--scene-temp);cursor:grab}.scene-range input:active{cursor:grabbing}.scene-range output{min-width:4.6em;color:var(--ink);font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}.scene-range output.is-bump{display:inline-block;animation:scene-pop .42s ease-out}@keyframes scene-march{to{stroke-dashoffset:-18}}@keyframes scene-squash{30%{transform:scale(.82,1.12)}70%{transform:scale(1.06,.96)}}@keyframes scene-glow{0%{filter:drop-shadow(0 0 0 color-mix(in srgb,var(--packet) 70%,transparent))}40%{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--packet) 70%,transparent))}to{filter:drop-shadow(0 2px 3px rgba(15,23,42,.12))}}@keyframes scene-flow{to{stroke-dashoffset:-26}}@keyframes scene-flow-reverse{to{stroke-dashoffset:26}}@keyframes scene-fill{0%{width:0}to{width:100%}}@keyframes scene-rise{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes scene-pop{40%{transform:scale(1.07)}}@keyframes scene-shake{20%{transform:translate(-6px) rotate(-1.5deg)}40%{transform:translate(5px) rotate(1deg)}60%{transform:translate(-4px)}80%{transform:translate(2px)}}@keyframes scene-beckon{0%,to{box-shadow:0 0 color-mix(in srgb,var(--scene-flow) 40%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--scene-flow) 0%,transparent)}}@keyframes scene-ring{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.12)}}@keyframes scene-land{0%{box-shadow:0 0 color-mix(in srgb,var(--scene-flow) 55%,transparent)}to{box-shadow:0 0 0 10px color-mix(in srgb,var(--scene-flow) 0%,transparent)}}@media(prefers-reduced-motion:reduce){.scene-line.is-flowing,.scene-line.is-flowing-reverse,.scene-flow,.db-demo .scene-chip[data-state=next],.scene-node.is-shaking .scene-node-body,.scene-node.is-ok .scene-node-body,.scene-block.is-landed,.scene-console li,.scene-note.is-entering,.scene-metric b.is-bump,.scene-gauge-value.is-bump,.scene-node.is-waiting .scene-node-card,.scene-packet .scene-packet-body,.scene-packet .scene-packet-pill,.scene-table-chip .scene-node-body,.scene-range output.is-bump,.scene-exec-tether,.scene-badge-value.is-bump,.scene-mem-value.is-bump,.scene-wall.is-pierced .scene-wall-ghost{animation:none}.scene-timeline-step.is-timing .scene-timeline-fill{animation:none;width:100%}}