/* Shared inspection controls for the original educational WebGL exhibits. */
.model-review-controls { display:flex; flex-wrap:wrap; gap:6px; position:relative; z-index:5; }
.model-review-controls button { min-height:44px; padding:8px 12px; border:1px solid #a7b5ad; background:#172b26; color:#fffaf2; font:500 12px/1.3 system-ui,sans-serif; cursor:pointer; }
.model-review-controls button:hover, .model-review-controls button[aria-pressed="true"] { background:#e8e3d7; color:#173c2c; }
.model-review-controls button:focus-visible, .model-layer-control input:focus-visible, canvas:focus-visible { outline:3px solid #ceae72; outline-offset:3px; }
#worldStage > .model-review-controls { position:absolute; left:14px; bottom:12px; }
.model-layer-control { position:absolute; z-index:5; left:14px; bottom:68px; display:flex; align-items:center; gap:12px; padding:8px 12px; color:#fffaf2; background:#172b26e6; font:500 12px/1.4 system-ui,sans-serif; }
.model-layer-control input { width:130px; min-height:28px; accent-color:#dfc08b; }
#worldStage { isolation:isolate; }
.roof__pin, .plank__pin { min-height:0; padding-top:30px; padding-bottom:70px; }
/* Rheem's original stage was absolute inside a scroll-pinned container. */
#tankPin { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.75fr); align-items:center; gap:30px; width:min(1440px,100%); margin-inline:auto; padding-inline:40px; }
#tankPin > .roof__stage { position:relative; inset:auto; height:min(76vh,720px); }
#tankPin > .roof__side { position:relative; inset:auto; transform:none; width:auto; }
#tankPin > .roof__credit { position:relative; inset:auto; grid-column:1/-1; }
@media(max-width:960px) {
 #tankPin { grid-template-columns:1fr; padding-inline:22px; }
 #tankPin > .roof__stage { height:min(58svh,500px); min-height:390px; }
}
@media(max-width:640px) {
  .model-review-controls button { padding-inline:9px; }
  .model-layer-control { right:14px; justify-content:space-between; }
  .model-layer-control input { width:110px; }
  .bench { width:calc(100% - 32px); right:16px; }
}
.model-jump { position:absolute; z-index:4; right:40px; bottom:46px; min-height:44px; display:inline-flex; align-items:center; padding:10px 18px; border:1px solid #bdb5a7; color:#fffaf2; background:#172b26df; text-decoration:none; font:500 13px/1.4 system-ui,sans-serif; letter-spacing:.03em; }
.model-jump:hover { background:#e8e3d7; color:#173c2c; }
@media(max-width:640px) { .model-jump { right:22px; bottom:55px; } #plinth:has(.plinth__world) .model-jump { bottom:15px; } #plinth:has(.plinth__world) .plinth__credit { display:none; } }
.model-jump { opacity:1!important; visibility:visible!important; }
/* On phones, give the model its own unobstructed stage. */
@media(max-width:640px) {
 .living { display:flex; flex-direction:column; min-height:0; }
 .living::after { display:none; }
 .living > .living__intro { position:relative; order:0; inset:auto; width:auto; margin:26px 22px 20px; opacity:1; transform:none; }
 .living .living__title { font-size:44px; max-width:15ch; }
 .living .living__lede { max-width:45ch; }
 .living > .living__world { position:relative; order:1; inset:auto; width:100%; height:420px; }
 .living > .wctl, .living > .bench { position:relative; order:2; inset:auto; width:auto; margin:0 16px 24px; }
 .living > .modecard, .living > .factcard { top:16px; }
}