/* animation player */
.anim{margin:0}
.anim-svg{display:block;width:100%;height:auto;border-radius:22px;background:#7ca35c}
.anim-svg .grass{fill:#7ca35c}.anim-svg .road{fill:#565b64}.anim-svg .island{fill:#8fb96d;stroke:#d8d8d0;stroke-width:3}
.anim-svg .dash{stroke:#fff;stroke-width:2;stroke-dasharray:14 12;opacity:.85}.anim-svg .edge{stroke:#fff;stroke-width:1.5;opacity:.55}
.anim-svg .yield{stroke:#fff;stroke-width:3;stroke-dasharray:6 5;opacity:.9}
.anim-svg .pavement{fill:#bdbab2}.anim-svg .tarmac{fill:#60646c}.anim-svg .shoulder{fill:#6b6f77}.anim-svg .tramway{fill:#4d5159}
.anim-svg .zebra{fill:#f3f3ee}.anim-svg .kerb{stroke:#e4e2dc;stroke-width:2.5}.anim-svg .bay{stroke:#fff;stroke-width:2;opacity:.85}
.anim-svg .rail{stroke:#aeb2ba;stroke-width:2.5}.anim-svg .sleeper{stroke:#7a6a5a;stroke-width:26;stroke-dasharray:3 10;opacity:.75}
.anim-svg .shelter{fill:#8fb0c4;opacity:.9;rx:3}.anim-svg .prop{filter:drop-shadow(0 3px 3px rgba(0,0,0,.3))}
.anim-svg .lamp{fill:#ffb020}.anim-svg .brake{fill:#ff2a2a}
.anim-bar{display:flex;align-items:center;gap:10px;margin-top:12px}
.anim-btn{width:46px;height:46px;border-radius:50%;border:0;background:var(--btn);color:var(--btn-fg);display:grid;place-items:center;flex:none;cursor:pointer}
.anim-btn[data-a=play]::before{content:"";width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent currentColor;margin-left:3px}
.anim-btn[data-a=play].on::before{width:14px;height:16px;border:0;margin:0;background:linear-gradient(90deg,currentColor 0 36%,transparent 36% 64%,currentColor 64%)}
.anim-btn[data-a=replay]{background:var(--surface-2);color:var(--ink)}
.anim-btn[data-a=replay]::before{content:"\21BB";font-size:22px;line-height:1}
.anim-range{flex:1;accent-color:var(--ink);height:28px}
.anim-time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.85rem;min-width:3.6em;text-align:right}
.anim-cap{margin:12px 2px 0;min-height:3.2em;font-size:1.02rem;line-height:1.45;font-weight:500}
.anim-steps{margin-top:6px;color:var(--muted);font-size:.9rem}.anim-steps summary{cursor:pointer}.anim-steps ol{margin:8px 0 0;padding-left:20px}
.anim-card h2{font-size:1.4rem;margin-bottom:12px}
.anim-svg .actor image{filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.anim-svg .beam{fill:url(#beam-g)}.anim-svg .head{fill:#fffbe8}.anim-svg .head-glow{fill:#ffe9a0;opacity:.5}
.anim-svg .ballast{fill:#8d8a84}.anim-svg .crossplate{fill:#6d6f75;opacity:.9}.anim-svg .cyclelane{fill:#b5594f;opacity:.92}.anim-svg .cone{fill:#f08a24}.anim-svg .edgeline{fill:none;stroke:#fff;stroke-width:1.6;opacity:.6}.anim-svg .shape{stroke:#fff;stroke-width:.8}

.anim-svg .stopline{stroke:#fff;stroke-width:4}.anim-svg .earth{fill:#a98a5f}.anim-svg .signyield{fill:#fff;stroke:#d62b2b;stroke-width:4;stroke-linejoin:round}.anim-svg .teeth{fill:#fff;opacity:.9}.anim-svg .buslane{fill:#8a4a46}.anim-svg .busdash{stroke:#fff;stroke-width:3;stroke-dasharray:22 9;opacity:.9}
.anim-svg .signprio{fill:#ffcf1f;stroke:#fff;stroke-width:4;stroke-linejoin:round}.anim-svg .solidline{stroke:#fff;stroke-width:3;opacity:.9}
.anim-svg .signcirc{fill:#fff;stroke:#d62b2b;stroke-width:4}.anim-svg .signblue{fill:#1a5fb4;stroke:#fff;stroke-width:2}.anim-svg .arrR,.anim-svg .arrK,.anim-svg .arrW{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.anim-svg .arrR{stroke:#d62b2b}.anim-svg .arrK{stroke:#111}.anim-svg .arrW{stroke:#fff}.anim-svg .lightbox{fill:#2b2f36;stroke:#fff;stroke-width:1}.anim-svg .lampred{fill:#ff2a2a;filter:drop-shadow(0 0 3px #ff2a2a)}.anim-svg .arrowg{fill:#22d36b;filter:drop-shadow(0 0 3px #22d36b)}.anim-svg .shape-label{paint-order:stroke;stroke:rgba(255,255,255,.0)}
.anim-svg .hillshade{fill:rgba(0,0,0,.12)}.anim-svg .hillshade2{fill:rgba(0,0,0,.26)}.anim-svg .plate{fill:#fff;stroke:#333;stroke-width:1}.anim-svg .carico{fill:#222}.anim-svg .orangeline{fill:none;stroke:#f08a24;stroke-width:3}.anim-svg .bgtext{pointer-events:none}
.anim-svg .signwarn{fill:#fff;stroke:#d62b2b;stroke-width:4;stroke-linejoin:round}.anim-svg .hillshade3{fill:rgba(0,0,0,.2)}.anim-svg .hillshade4{fill:rgba(0,0,0,.3)}.anim-svg .crestline{stroke:#fff;stroke-width:2;stroke-dasharray:8 6;opacity:.7}