.engine-webgl .engine-metal-canvas{inset:0;width:100%;height:100%}
.engine-webgl .eng-svg,.engine-webgl .engine-centre-brand{visibility:hidden}
.engine-webgl::before,.engine-webgl::after{display:none}
.engine-preview-controls{position:absolute;z-index:8;top:100px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:12px;color:#a6c3db}
.engine-preview-controls>span{margin-right:18px}
.engine-preview-controls button{padding:9px 15px;border:1px solid #79acd240;border-radius:30px;background:#0b1728;color:#b9cde0}
.engine-preview-controls button[aria-pressed=true]{background:#1b4164;color:#e9f6ff;border-color:#75bafa99}
.engine-preview-controls button:focus-visible{outline:2px solid #a4dfff;outline-offset:3px}
@media(max-width:860px){.engine-preview-controls{top:90px;font-size:10px;gap:6px}.engine-preview-controls>span{display:none}.engine-preview-controls button{padding:7px 12px}}
/* Give the complete engine more of the stage without crowding its description. */
@media(min-width:861px){.eng{width:min(96svh,64vw,960px);left:31%;top:51%}.eng-card{left:63%;width:min(460px,33vw)}}
@media(max-width:860px){.eng{width:min(100vw,52svh)}}

.engine-replay{position:absolute;z-index:8;left:31%;bottom:24px;transform:translateX(-50%);padding:10px 18px;border:1px solid #65b9ee66;border-radius:999px;background:#07182cdd;color:#d7efff;font:500 12px/1.2 var(--sans);cursor:pointer;backdrop-filter:blur(12px)}
.engine-replay:hover{background:#12375a;border-color:#8edbff}.engine-replay:focus-visible{outline:2px solid #a4dfff;outline-offset:4px}
@media(max-width:860px){.engine-replay{left:auto;right:14px;top:94px;bottom:auto;transform:none;font-size:11px}}

/* Stable phone assembly: one caption below a separately sized engine. */
@media(max-width:860px){
  .stage .eng{top:96px;left:50%;width:min(78vw,34svh);transform:translateX(-50%)}
  .stage .eng-legend{display:none}
  .stage .eng-card{top:calc(112px + min(78vw,34svh));bottom:auto;left:16px;width:calc(100% - 32px);transform:none}
  .stage .eng-card .card{min-height:230px;padding:20px;animation:none;background:linear-gradient(145deg,#152844,#080e1b);backdrop-filter:none;-webkit-backdrop-filter:none}
  .stage .eng-card h3{font-size:24px;line-height:1.15;padding-right:48px}
  .stage .eng-card .ico-t{top:18px;right:18px;width:40px;height:40px}
  .stage .eng-card p{font-size:14px;line-height:1.5}
  .stage .stage-ui{bottom:18px}
}
@media(max-width:860px) and (max-height:700px){
  .stage .eng{width:min(68vw,26svh)}
  .stage .eng-card{top:calc(106px + min(68vw,26svh))}
  .stage .eng-card .card{min-height:210px;padding:16px}
  .stage .eng-card h3{font-size:21px}
}

/* Animated content must not become the browser's scroll anchor. */
#steps,#stage,#stage *{overflow-anchor:none}