*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#111516;color:#f2ead9;font:14px Inter,system-ui,sans-serif}
#stage{height:100%;position:relative;overflow:hidden;background:radial-gradient(ellipse at 60% 40%,#424a48 0,#222928 50%,#111516 100%)}
model-viewer{width:100%;height:100%;opacity:0;transition:opacity 1.1s ease;--progress-bar-color:transparent;--progress-bar-height:0}
model-viewer.ready{opacity:1}
.poster{position:absolute;inset:0;z-index:4;background:linear-gradient(90deg,rgba(10,12,12,.88) 0%,rgba(10,12,12,.36) 47%,rgba(10,12,12,.08) 100%),url('../img/model.webp') center/cover no-repeat;transition:opacity 1s ease,visibility 1s step-end}
.poster.out{opacity:0;visibility:hidden}
.poster-copy{position:absolute;left:clamp(22px,5vw,72px);bottom:clamp(58px,10vh,104px);width:min(420px,72vw)}
.poster-copy p{margin:0 0 14px;font-size:10px;letter-spacing:.25em;color:#dba17d}
.poster-copy strong{display:block;font:500 clamp(32px,6vw,68px)/.94 Georgia,serif;letter-spacing:-.045em;text-wrap:balance}
.loadline{width:min(290px,70vw);height:1px;background:#ffffff30;margin:26px 0 11px;overflow:hidden}
.loadline i{display:block;height:100%;width:7%;background:#d47b4d;box-shadow:0 0 12px #d47b4d;transition:width .25s ease}
#loadcopy{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#c9bca4}
.tag{position:absolute;z-index:8;top:20px;left:22px;letter-spacing:.18em;font-size:10px;pointer-events:none;text-shadow:0 1px 8px #000}.tag span{color:#dba17d;margin-left:14px}
button{border:1px solid #ffffff38;background:#151c1de8;color:#f2ead9;border-radius:30px;padding:10px 16px;font:inherit;cursor:pointer;backdrop-filter:blur(10px)}
button:hover,button[aria-pressed=true]{background:#c26a3e;color:#140f09;border-color:#c26a3e}
button:focus-visible{outline:3px solid #f2ead9;outline-offset:3px}
nav{position:absolute;z-index:8;bottom:34px;left:0;right:0;display:flex;justify-content:center;gap:6px;padding:0 12px;flex-wrap:wrap;transition:opacity .5s ease}
nav[hidden]{display:none}nav button{font-size:12px;padding:9px 13px}
.hint{position:absolute;z-index:7;bottom:4px;left:0;right:0;margin:0;text-align:center;font-size:10px;letter-spacing:.06em;color:#c9bca4;pointer-events:none;text-shadow:0 1px 8px #000}
.fallback{position:absolute;z-index:9;left:22px;bottom:20px;max-width:38ch}
.hotspot{width:13px;height:13px;padding:0;border:2px solid #f2ead9;background:#c26a3e;box-shadow:0 0 0 6px #c26a3e33,0 2px 10px #000;border-radius:50%;overflow:visible;backdrop-filter:none}
.hotspot span{position:absolute;left:19px;top:50%;transform:translateY(-50%);width:max-content;max-width:180px;padding:7px 9px;background:#111516e8;border:1px solid #ffffff2c;color:#f2ead9;font-size:10px;line-height:1.25;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .2s;pointer-events:none}
.hotspot:hover span,.hotspot:focus-visible span{opacity:1}
@media(max-width:620px){
  .poster{background-position:58% center}.poster-copy{bottom:86px}.poster-copy strong{font-size:clamp(31px,12vw,48px)}
  .tag{left:15px;top:15px;font-size:9px}.tag span{display:block;margin:5px 0 0}
  nav{bottom:30px;gap:4px}nav button{font-size:10px;padding:8px 10px}
  .hotspot span{display:none}
}
@media(prefers-reduced-motion:reduce){model-viewer,.poster,.loadline i{transition:none!important}}