/* A contained, interactive studio stage for the marine engine. */
.engine-showcase{position:relative;background:radial-gradient(ellipse at 50% 38%,#153b48 0%,#0b2432 48%,#071b28 76%);border:1px solid #29424f;border-radius:16px;overflow:hidden;box-shadow:0 24px 65px #020e1855}
.engine-stage{position:relative;aspect-ratio:1.4;min-width:0;isolation:isolate}
.engine-stage::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 45px 5px #071b2860;pointer-events:none;border-radius:16px}
.engine-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s}
.engine-canvas{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:pan-y;cursor:grab;outline-offset:-5px;z-index:1}
.engine-canvas:active{cursor:grabbing}
.engine-canvas[hidden],.engine-controls[hidden]{display:none}
.engine-stage-label{position:absolute;inset-block-start:22px;inset-inline-start:24px;display:flex;align-items:center;gap:8px;font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#bbd7dd;z-index:2;pointer-events:none;opacity:0}
.engine-live-dot{width:5px;height:5px;background:#7bd5cc;border-radius:50%;box-shadow:0 0 10px #7bd5cc55}
.engine-stage-note{position:absolute;inset-block-start:22px;inset-inline-end:22px;font-size:9px;letter-spacing:.02em;color:#9db3bd;z-index:2;pointer-events:none;opacity:0}
.engine-hint{position:absolute;bottom:16px;inset-inline:0;text-align:center;font-size:10px;color:#abc1cb;z-index:2;pointer-events:none;opacity:0}
.engine-hint i{color:#74c9c1;margin-inline-end:7px;font-size:10px}
.engine-showcase.is-ready .engine-fallback{opacity:0;visibility:hidden}
.engine-showcase.is-ready .engine-stage-label,.engine-showcase.is-ready .engine-stage-note,.engine-showcase.is-ready .engine-hint{opacity:1}
.engine-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;background:#0c2330;border-top:1px solid #28434f}
.engine-view-switch{display:flex;gap:3px;padding:3px;background:#061925;border:1px solid #28434f;border-radius:7px}
.engine-controls button{border:0;font-size:11px;line-height:1.3;font-weight:600;min-height:36px;padding:9px 13px;color:#adc1cd;background:transparent;border-radius:4px;transition:background .2s,color .2s}
.engine-view-switch button[aria-pressed=true]{color:#071b28;background:#7bd5cc;box-shadow:0 2px 8px #0003}
.engine-controls button:hover{color:#fff;background:#214451}
.engine-view-switch button[aria-pressed=true]:hover{color:#071b28;background:#9ae8df}
.engine-motion-controls{display:flex;gap:2px;align-items:center}
.engine-controls .engine-motion{display:flex;gap:7px;align-items:center;padding:9px 8px}
.engine-motion i{font-size:9px;color:#7bd5cc}
.engine-controls .engine-reset{width:34px;padding:8px;color:#7bd5cc}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[dir=rtl] .engine-stage-label{letter-spacing:0;font-size:11px}
[dir=rtl] .engine-controls button{font-size:12px}
@media(max-width:980px) and (min-width:721px){.engine-stage{aspect-ratio:1/1.18}.engine-controls{flex-wrap:wrap;justify-content:center;padding:10px}.engine-stage-label{inset-inline-start:14px}.engine-stage-note{display:none}}
@media(max-width:720px){.hero-grid{gap:30px}.engine-stage{aspect-ratio:1/1}.engine-stage-label{inset-block-start:18px;inset-inline-start:16px;font-size:8px}.engine-stage-note{font-size:8px;inset-block-start:18px;inset-inline-end:16px}.engine-controls{padding:10px;gap:6px}.engine-controls button{font-size:10px;padding:9px 10px;min-height:40px}.engine-hint{font-size:9px}.hero-caption{margin-top:16px}}
@media(max-width:360px){.engine-controls{flex-wrap:wrap;justify-content:center}.engine-stage-note{display:none}}
@media(prefers-reduced-motion:reduce){.engine-fallback,.engine-controls button{transition:none}}