/* Scene styles. */
.pe-host { position: relative; display: block; width: 100%; aspect-ratio: 940 / 588; background: var(--muted-surface); overflow: hidden; contain: layout paint; }
.pe-host > svg.pe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.pe { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-io: cubic-bezier(0.77, 0, 0.175, 1); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
.pe text { fill: var(--ink); }
.pe .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.pe .mini { font-size: 9.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--faint); }


.pe .g-bg { fill: var(--muted-surface); }
.pe .g-dot { fill: var(--line-soft); }
.pe .g-tick { stroke: var(--line); stroke-width: 1; fill: none; }
.pe .g-reg { fill: none; stroke: var(--line); stroke-width: 1; }
.pe .g-centre { fill: none; stroke: var(--pf-chart-grid); stroke-width: 1; stroke-dasharray: 14 4 2 4; }
.pe .g-constr { fill: none; stroke: var(--pf-chart-grid); stroke-width: 1; stroke-dasharray: 2 5; }
.pe .g-dim { fill: none; stroke: var(--line-soft); stroke-width: 1; }
.pe .g-dimt { font-size: 9px; fill: var(--line); letter-spacing: 0.04em; }


.pe .pipe { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pe .pipe--tap { stroke-width: 1.25; stroke-dasharray: 2 4; }
.pe .trail { fill: none; stroke: var(--ink-hi); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pe .trail--tap { stroke-width: 1.5; }
.pe .junction { fill: var(--muted-surface); stroke: var(--muted); stroke-width: 1.25; }


.pe .chip rect { fill: var(--surface); stroke: var(--ink-hi); stroke-width: 1.25; }
.pe .chip text { font-size: 11px; }
.pe .chip__v { fill: var(--ink-hi); font-weight: 500; }
.pe .chip__u { fill: var(--muted); }
.pe .chip__id { fill: var(--faint); }


.pe .gate__bar { stroke: var(--ink-2); stroke-width: 2.5; stroke-linecap: round; }
.pe .gate__post { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.pe .gate__hinge { fill: var(--surface); stroke: var(--muted); stroke-width: 1.5; }
.pe .lane-v { font-size: 10.5px; fill: var(--ink-2); }


.pe .fee { --pulse: 0; }
.pe .fee__box { fill: var(--surface); stroke: var(--line); stroke-width: 1; transition: stroke 400ms ease; }
.pe .fee.is-read .fee__box { stroke: var(--faint); }
.pe .fee__ic { color: var(--muted); }
.pe .fee__v { font-size: 10.5px; fill: var(--ink-2); }
.pe .fee__dia { fill: color-mix(in srgb, var(--ink-hi) calc(var(--pulse) * 100%), var(--surface)); stroke: var(--ink-2); stroke-width: 1.5; }


.pe .vault__t { font-size: 10px; fill: var(--faint); letter-spacing: 0.02em; }
.pe .vault__dial { fill: var(--surface); stroke: var(--line); stroke-width: 1.25; }
.pe .vault__ticks { stroke: var(--line); stroke-width: 1; fill: none; }
.pe .vault__chan { fill: none; stroke: var(--line-soft); stroke-width: 12; }
.pe .bolt { fill: var(--ink-2); }
.pe .vault__flash { fill: none; stroke: var(--ink-hi); stroke-width: 1.5; opacity: 0; }
.pe .vault__plate { fill: var(--surface); stroke: var(--line); stroke-width: 1.25; }
.pe .vault__rim { fill: none; stroke: var(--line-soft); stroke-width: 1; }
.pe .vault__lock { color: var(--ink-hi); }
.pe .vault__u { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; fill: var(--ink-hi); }
.pe .vault__e { font-size: 15px; font-weight: 500; fill: var(--ink-2); }
.pe .vault__idx { fill: var(--ink-hi); }


.pe .node__box { fill: var(--surface); stroke: var(--line); stroke-width: 1; transition: stroke 300ms ease; }
.pe .node.is-hot .node__box { stroke: var(--ink-hi); }
.pe .node__ic { color: var(--faint); }
.pe .node__rule { stroke: var(--line-soft); stroke-width: 1; }
.pe .ava__tile { fill: var(--surface-raised); }
.pe .ava__g { color: var(--ink); }
.pe .node__h { font-size: 13px; font-weight: 500; fill: var(--ink-hi); }
.pe .node__a { font-size: 10px; fill: var(--faint); }
.pe .node__v { font-size: 17px; font-weight: 500; fill: var(--muted); transition: fill 300ms ease; }
.pe .node__s { font-size: 11px; fill: var(--muted); }


.pe .up { fill: var(--num-up) !important; }
.pe .down { fill: var(--num-down) !important; }


.pe .panel { fill: var(--surface); stroke: var(--line-soft); stroke-width: 1; }
.pe .panel__rule { stroke: var(--line-soft); stroke-width: 1; }
.pe .strip__n { font-size: 15px; font-weight: 500; fill: var(--ink-hi); }
.pe .strip__m { font-size: 14px; font-weight: 500; fill: var(--ink-hi); }
.pe .strip__c { font-size: 12px; fill: var(--muted); }
.pe .strip__q { font-size: 11px; fill: var(--ink-2); }

.pe .dl__ic { color: var(--faint); }
.pe .dl__clock { font-size: 11px; fill: var(--ink-2); transition: fill 300ms ease; }
.pe .dl.is-over .dl__clock { fill: var(--ink-hi); }
.pe .dl__track { stroke: var(--line); stroke-width: 3; stroke-linecap: round; }
.pe .dl__ticks { stroke: var(--line); stroke-width: 1; fill: none; }
.pe .dl__lab { font-size: 9px; fill: var(--faint); }
.pe .dl__fill { stroke: var(--ink-hi); stroke-width: 3; stroke-linecap: round; }
.pe .dl__fill--over { stroke: var(--faint); stroke-dasharray: 3 3; stroke-linecap: butt; }
.pe .dl__mark { stroke: var(--ink-2); stroke-width: 1.25; }
.pe .dl__marklab { fill: var(--ink-2); }
.pe .dl__cur path { fill: var(--ink-hi); }
.pe .dl__cur line { stroke: var(--ink-hi); stroke-width: 1.25; }
.pe .dl__s { font-size: 10.5px; fill: var(--faint); }

.pe .row__ic { color: var(--faint); }
.pe .row__m { font-size: 10.5px; fill: var(--ink); }
.pe .row__id { font-size: 10.5px; fill: var(--faint); }
.pe .row__v { font-size: 10.5px; font-weight: 500; fill: var(--ink-2); }
.pe .row__n { font-size: 10.5px; fill: var(--muted); }



.pe [data-show] { opacity: 0; transition: opacity 120ms var(--ease-io); }
.pe [data-show].is-on { opacity: 1; transition: opacity 260ms var(--ease-out) 110ms; }
.pe .row[data-show] { transform: translateY(4px); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); }
.pe .row[data-show].is-on { transform: none; transition-delay: 0ms; }
.pe [data-from] { opacity: 0; transition: opacity 320ms var(--ease-out); }
.pe [data-from].is-in { opacity: 1; }
.pe .is-tick { animation: pe-tick 260ms var(--ease-out); }
@keyframes pe-tick { from { opacity: 0.25; } to { opacity: 1; } }


.pe.is-still *, .pe.is-still [data-show],
.pe.is-parked *, .pe.is-parked [data-show] { transition: none !important; animation: none !important; }


@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .pe .row[data-show] { transform: none; }
  html:not([data-motion="full"]) .pe .is-tick { animation: none; }
}
html[data-motion="reduce"] .pe .row[data-show] { transform: none; }
html[data-motion="reduce"] .pe .is-tick { animation: none; }