/* Stationary-vs-autonomous comparison animation (uvc-compare-program.js); same styling as room-program.css. */
    .uvc-compare{background:#f7f8f8;color:#151b1e;font-family:Instrument,Arial,Helvetica,sans-serif;padding:10px 0 0;overflow:hidden}
    .uvc-compare *{box-sizing:border-box}
    .uvc-compare .room-view{position:relative;width:100%;aspect-ratio:1.5;overflow:hidden}
    .uvc-compare canvas{display:block;width:100%;height:100%}
    .uvc-compare .room-message{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#566267;font-size:15px}
    .uvc-compare .room-message[hidden]{display:none}
    .uvc-compare .room-footer{margin:0 24px;border-top:1px solid #d8dfe2;padding:20px 0 22px;display:grid;grid-template-columns:1fr auto;gap:17px 24px;align-items:center}
    .uvc-compare .room-controls{display:flex;gap:16px;grid-column:2;align-self:center}
    .uvc-compare button{appearance:none;cursor:pointer;border:0;background:none;padding:10px 0;min-height:44px;color:#151b1e;font:400 14px/1.5 Instrument,Arial,Helvetica,sans-serif;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#9aa8af}
    .uvc-compare button[data-play]{min-width:44px}
    .uvc-compare button:disabled{cursor:default;opacity:.5}
    .uvc-compare .room-alt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
    @container(max-width:480px){.uvc-compare .room-view{aspect-ratio:1.18}.uvc-compare .room-footer{margin-inline:16px;gap:12px 16px;padding-top:16px}.uvc-compare .room-controls{gap:14px}.uvc-compare .room-toggle{margin-inline:16px}.uvc-compare .room-toggle button{flex:1 1 0;padding-inline:10px}}

.uvc-compare{container-type:inline-size;max-width:780px;margin:auto}
.uvc-compare [hidden]{display:none!important}
.uvc-compare .room-message{text-align:center;padding:24px;max-width:54ch;margin:auto;line-height:1.6}
.uvc-compare button:focus-visible{outline:2px solid #0078a8;outline-offset:4px}

/* A meaningful diagram remains when 3D rendering is unavailable. */
.uvc-compare .room-poster{display:block;width:100%;height:100%;object-fit:contain}
.uvc-compare[data-fallback=true] .room-view{aspect-ratio:auto}
.uvc-compare[data-fallback=true] .room-poster{height:auto}
.uvc-compare[data-fallback=true] .room-message{position:static;display:block;padding:0 20px 20px;font-size:.875rem;line-height:1.6}
.uvc-compare[data-fallback=true] .room-controls{display:none}

/* Scenario toggle above the animation: two joined buttons, the active one filled. */
.uvc-compare .room-toggle{display:flex;margin:10px 24px 4px}
.uvc-compare .room-toggle button{min-height:44px;padding:10px 18px;border:1px solid #c1ced5;background:#fff;color:#151b1e;font-weight:500;text-decoration:none}
.uvc-compare .room-toggle button+button{margin-left:-1px}
.uvc-compare .room-toggle button[aria-pressed=true]{position:relative;background:#151b1e;border-color:#151b1e;color:#fff;cursor:default}
.uvc-compare .room-toggle button[aria-pressed=false]:hover{border-color:#6b7b82}
.uvc-compare[data-fallback=true] .room-toggle{display:none}
/* Tablets: the toggle lines up with the section heading instead of sitting indented and centered (Vivian, 2026-10-05). */
@media(min-width:651px) and (max-width:1000px){.uvc-compare{margin-left:0}.uvc-compare .room-toggle{margin-inline:0}}