/* Decorative diagrams have a real HTML poster before any script runs. */
.scene { position: relative; inline-size: 100%; aspect-ratio: 240 / 190; overflow: hidden; color: var(--text); }
.scene picture, .scene-poster, .scene-live { display: block; inline-size: 100%; block-size: 100%; }
.scene-live { position: absolute; inset: 0; visibility: hidden; }
.scene-svg { display: block; inline-size: 100%; block-size: 100%; }
.scene-svg .acc { stroke: var(--accent); }
.scene-svg .car, .scene-svg .dotm { fill: var(--accent); }
.scene[data-scene-state="running"] .scene-live,
.scene[data-scene-state="paused"] .scene-live,
.scene[data-scene-state="finished"] .scene-live { visibility: visible; }
.scene[data-scene-state="running"] .scene-poster,
.scene[data-scene-state="paused"] .scene-poster,
.scene[data-scene-state="finished"] .scene-poster { visibility: hidden; }
.scene-svg .orbit, .scene-svg .pulse, .scene-svg .confirm { transform-box: fill-box; transform-origin: center; }
.scene-panel { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-m); }
.scene-panel .scene { max-inline-size: 520px; margin-inline: auto; }
.scene-meta { display: grid; gap: var(--space-xs); padding-block-start: var(--space-s); border-block-start: 1px solid var(--line); }
.scene-meta .scene-name { font-size: var(--step-2); font-weight: 600; color: var(--text); }
.scene-meta p { margin: 0; font-size: var(--step--1); color: var(--text-soft); }
.exhibit-media { display: grid; gap: var(--space-l); align-items: center; }
.exhibit-media > * { min-inline-size: 0; }
@media (min-width: 900px) { .exhibit-media { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.scene[data-scene="civesto"] .d5, .scene[data-scene="tandem"] .w,
.scene[data-scene="nora"] .dotm { transform-box: fill-box; transform-origin: center; }
.scene[data-scene="nora"] .d5 { transform-box: view-box; transform-origin: 120px 108px; }
.scene[data-scene="makinist"] .material-layer { transform-box: fill-box; transform-origin: left center; }
@media (prefers-reduced-motion: reduce), print {
 .scene[data-scene] .scene-live { visibility: hidden; }
 .scene[data-scene] .scene-poster { visibility: visible; }
}
.exhibit-media:not(.has-screenshot) { display: block; max-inline-size: 760px; }
.exhibit-tandem .exhibit-image img { max-inline-size: 180px; margin-inline: auto; }
.product-proof .wrap > [data-device] { max-inline-size: 680px; margin-inline: auto; }