.stage{--trail:#eef2ef;margin:0}.stage-grid{gap:var(--s-4);grid-template-columns:minmax(0,1fr) 300px;align-items:start;display:grid}.stage-frame{--r-a:#3aa3c4;--r-b:#cf7417;border-radius:var(--radius-s);background:var(--stage);width:100%;box-shadow:0 0 0 1px var(--rule), var(--shadow);position:relative;overflow:hidden}.stage-video,.stage-overlay{width:100%;height:100%;position:absolute;inset:0}.stage-video{object-fit:fill;transition:opacity .3s var(--ease)}.stage[data-hide-video] .stage-video{opacity:0}.stage-overlay{overflow:visible}.stage .layer{transition:opacity .2s var(--ease)}.stage[data-hide-scene] .layer-scene,.stage[data-hide-tracks] .layer-tracks,.stage[data-hide-events] .layer-events{opacity:0}.stage .geo{fill:none;stroke-width:2px;vector-effect:non-scaling-stroke}.stage .geo-gate{stroke:var(--g-gate);color:var(--g-gate)}.stage .geo-line{stroke:var(--g-line);color:var(--g-line)}.stage polygon.geo-zone{stroke:var(--g-zone);fill:color-mix(in srgb, var(--g-zone) 13%, transparent);stroke-width:1.6px}.stage polygon.geo-checkpoint{stroke:var(--g-checkpoint);fill:color-mix(in srgb, var(--g-checkpoint) 12%, transparent)}.stage polygon.geo-ignore{stroke:var(--g-ignore);fill:color-mix(in srgb, var(--g-ignore) 22%, transparent);stroke-dasharray:4 4}.stage .geo-dir{stroke:currentColor;stroke-width:1.4px;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.85}.stage .geo-line-group.geo-gate{color:var(--g-gate)}.stage .geo-line-group.geo-line{color:var(--g-line)}.stage .geo-end{fill:currentColor}.stage .geo-label rect{fill:#090c0ac7;stroke-width:1px}.stage .geo-label text{font-family:var(--font-sans);font-size:11.5px;font-weight:560}.stage .geo-label-gate rect{stroke:color-mix(in srgb, var(--g-gate) 70%, transparent)}.stage .geo-label-gate text{fill:var(--g-gate)}.stage .geo-label-line rect{stroke:color-mix(in srgb, var(--g-line) 70%, transparent)}.stage .geo-label-line text{fill:var(--g-line)}.stage .geo-label-zone rect{stroke:color-mix(in srgb, var(--g-zone) 70%, transparent)}.stage .geo-label-zone text{fill:var(--g-zone)}.stage .trail{fill:none;stroke:var(--c,var(--trail));stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.9;filter:drop-shadow(0 0 1.5px #000000b3)}.stage .head{fill:var(--c,var(--trail));stroke:#0009;stroke-width:1px;vector-effect:non-scaling-stroke}.stage .head-label rect{fill:#090c0ac7}.stage .head-label text{fill:#eef2ef;font-family:var(--font-mono);font-size:11px}.stage .pulse{fill:none;stroke-width:2px;vector-effect:non-scaling-stroke;animation:stage-pulse .9s var(--ease) forwards;transform-box:fill-box;transform-origin:50%}.stage .pulse-gate{stroke:var(--g-gate)}.stage .pulse-line{stroke:var(--g-line)}.stage .pulse-zone{stroke:var(--g-zone)}.stage .pulse-route{stroke:var(--g-route)}.stage .fx-label rect{fill:#090c0ad9;stroke:var(--g-route)}.stage .fx-label text{fill:var(--g-route);font-family:var(--font-sans);font-size:12px;font-weight:600}.stage .fx-label{animation:stage-fade-label 2.2s var(--ease) forwards}@keyframes stage-pulse{0%{opacity:1;transform:scale(.35)}to{opacity:0;transform:scale(2.4)}}@keyframes stage-fade-label{0%,75%{opacity:1}to{opacity:0}}.stage[data-intro-state=pending] .layer-scene .geo,.stage[data-intro-state=pending] .layer-scene .geo-label,.stage[data-intro-state=pending] .geo-dir,.stage[data-intro-state=pending] .geo-end{opacity:0}.stage[data-intro-state=drawing] .layer-scene .geo{stroke-dasharray:1;animation:stage-draw .7s var(--ease) both}.stage[data-intro-state=drawing] polygon.geo{animation:stage-draw .9s var(--ease) .35s both, stage-fill-in .6s var(--ease) .9s both}.stage[data-intro-state=drawing] .geo-label,.stage[data-intro-state=drawing] .geo-dir,.stage[data-intro-state=drawing] .geo-end{animation:stage-fade-in .4s var(--ease) .7s both}@keyframes stage-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes stage-fill-in{0%{fill-opacity:0}}@keyframes stage-fade-in{0%{opacity:0}}.stage-clock{color:#cfd6d1;pointer-events:none;background:#090c0ab8;border-radius:2px;margin:0;padding:2px 7px;font-size:12px;position:absolute;top:10px;left:10px}.stage-controls{align-items:center;gap:var(--s-3);margin-top:var(--s-3);display:flex}.stage-controls[hidden],.stage-layers[hidden]{display:none}.stage-play{border:1px solid var(--rule-2);background:var(--ground-2);width:36px;height:36px;color:var(--ink);cursor:pointer;border-radius:50%;flex:none;place-items:center;display:grid}.stage-play:hover{border-color:var(--ink-3)}.stage .i-pause,.stage[data-playing] .i-play{display:none}.stage[data-playing] .i-pause{display:inline}.stage-play span{display:grid}.stage-timeline{flex:1;height:28px;position:relative}.stage-ticks{width:100%;height:10px;position:absolute;top:3px;left:0;right:0}.stage .tick{stroke-width:1.5px;vector-effect:non-scaling-stroke}.stage .tick-gate{stroke:var(--g-gate)}.stage .tick-line{stroke:var(--g-line)}.stage .tick-zone{stroke:var(--g-zone)}.stage .tick-route{stroke:var(--g-route)}.stage-timeline input[type=range]{-webkit-appearance:none;appearance:none;cursor:pointer;background:0 0;width:100%;margin:0;position:absolute;inset:0}.stage-timeline input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(var(--rule-2), var(--rule-2)) center 20px / 100% 2px no-repeat;height:28px}.stage-timeline input[type=range]::-moz-range-track{background:var(--rule-2);height:2px;transform:translateY(6px)}.stage-timeline input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--ink);border-radius:1px;width:3px;height:26px;margin-top:1px}.stage-timeline input[type=range]::-moz-range-thumb{background:var(--ink);border:0;border-radius:1px;width:3px;height:26px}.stage-time{color:var(--ink-2);font-size:var(--fs-13);flex:none}.stage-layers{margin-top:var(--s-3);flex-wrap:wrap;align-items:center;gap:6px;display:flex}.stage .layer-toggle{border:1px solid var(--rule-2);height:30px;color:var(--ink-3);font-size:var(--fs-13);cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:7px;padding:0 11px;display:inline-flex}.stage .layer-toggle:before{content:"";border:1.5px solid;border-radius:50%;width:8px;height:8px}.stage .layer-toggle[aria-pressed=true]{color:var(--ink);border-color:var(--ink-3)}.stage .layer-toggle[aria-pressed=true]:before{background:currentColor}.stage .layer-hint{color:var(--ink-3);font-size:var(--fs-13);margin-left:6px}.stage-panel{gap:var(--s-4);min-width:0;font-size:var(--fs-13);flex-direction:column;display:flex}.stage .panel-block{border:1px solid var(--rule);border-radius:var(--radius-s);background:var(--ground-2)}.stage .panel-title{border-bottom:1px solid var(--rule);font-size:var(--fs-13);justify-content:space-between;padding:8px 12px;font-weight:620;display:flex}.stage .counts{border-collapse:collapse;width:100%}.stage .counts th,.stage .counts td{border-bottom:1px solid var(--rule);vertical-align:top;text-align:left;padding:6px 12px}.stage .counts tr:last-child th,.stage .counts tr:last-child td{border-bottom:0}.stage .counts th{color:var(--ink-2);white-space:nowrap;font-weight:500}.stage .counts td{color:var(--ink-3)}.stage .count-pair{white-space:nowrap;align-items:center;gap:4px;margin-right:10px;display:inline-flex}.stage .count-pair b{color:var(--ink);font-family:var(--font-mono);font-weight:500}.stage .swatch{background:var(--c);border-radius:2px;width:8px;height:8px}.stage .panel-events{min-height:0}.stage .event-log{scrollbar-width:thin;max-height:238px;margin:0;padding:4px 0;list-style:none;overflow-y:auto}.stage .ev{color:var(--ink-2);grid-template-columns:auto 1fr auto;gap:8px;padding:4px 12px;line-height:1.4;display:grid}.stage .ev:before{display:none}.stage .ev-t{color:var(--ink-3);font-size:12px}.stage .ev-what{min-width:0}.stage .ev-obj{color:var(--ink)}.stage .ev-gate .ev-obj{color:var(--g-gate)}.stage .ev-line .ev-obj{color:var(--g-line)}.stage .ev-zone .ev-obj{color:var(--g-zone)}.stage .ev-route .ev-obj{color:var(--g-route)}:root[data-theme=light] .stage .ev-gate .ev-obj{color:#0b7894}:root[data-theme=light] .stage .ev-line .ev-obj{color:#8a5a00}:root[data-theme=light] .stage .ev-zone .ev-obj{color:#237a3b}:root[data-theme=light] .stage .ev-route .ev-obj{color:#a3530c}.stage .ev-dir{color:var(--ink-3)}.stage .ev-track{color:var(--ink-3);font-size:12px}.stage .ev.ev-new{animation:stage-ev-in .7s var(--ease)}@keyframes stage-ev-in{0%{background:color-mix(in srgb, var(--accent) 16%, transparent)}}.stage-caption{margin-top:var(--s-4);max-width:92ch;color:var(--ink-3);font-size:var(--fs-13);line-height:1.55}@media (width<=1080px){.stage-grid{grid-template-columns:minmax(0,1fr)}.stage-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}}@media (width<=680px){.stage-panel{grid-template-columns:minmax(0,1fr)}.stage .event-log{max-height:170px}.stage .layer-hint{width:100%;margin-left:0}}@media (prefers-reduced-motion:reduce){.stage .pulse,.stage .fx-label,.stage .ev.ev-new{opacity:0;animation:none}}
