/* Real WebGL HERO, progressively replacing the existing DOM composition. */
.hero>.mess-3d-stage{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;overflow:visible}
.hero>.mess-3d-stage canvas{display:block;width:100%!important;height:100%!important;touch-action:pan-y;outline-offset:-5px;cursor:grab}
.hero>.mess-3d-stage canvas.is-dragging{cursor:grabbing}
.hero.mess-3d-wide-ready>.mess-3d-stage{opacity:1;pointer-events:auto}
#portal.mess-3d-ready>.portal-disc,
#portal.mess-3d-ready>.sound-object,
#portal.mess-3d-ready>.orbit,
#portal.mess-3d-ready>.portal-spark,
#portal.mess-3d-ready>.portal-stamp,
#portal.mess-3d-ready>.portal-hint{visibility:hidden;pointer-events:none}
#portal.mess-3d-ready::after{display:none}
#portal .mess-3d-controls{position:absolute;left:0;right:0;bottom:0;z-index:9;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 4px;visibility:hidden;pointer-events:none}
#portal.mess-3d-ready .mess-3d-controls{visibility:visible;pointer-events:auto}
#portal .mess-3d-hint{flex:1 1 100px;font:600 12px/1.4 var(--body,Arial,sans-serif);margin:0;color:var(--ink,#141312);max-width:440px}
#portal .mess-3d-controls .motion-toggle{position:static;right:auto;bottom:auto;flex:0 1 auto;min-height:44px;margin:0;padding:10px 12px;font:600 11px/1.2 var(--body,Arial,sans-serif);background:var(--paper,#f1eee7);color:var(--ink,#141312);border:1.5px solid var(--ink,#141312);box-shadow:2px 2px 0 var(--ink,#141312);white-space:normal}
.hero>.mess-3d-stage .mess-3d-star-button{position:absolute;z-index:3;width:46px;height:46px;min-width:44px;min-height:44px;transform:translate(-50%,-50%);padding:0;border:1px solid transparent;border-radius:50%;background:transparent;cursor:pointer;color:var(--ink,#141312)}
.hero>.mess-3d-stage .mess-3d-star-button:hover{border-color:var(--ink,#141312);background:#ffffff16}
.hero>.mess-3d-stage .mess-3d-star-button:active{background:#ffffff38}
.hero>.mess-3d-stage .mess-3d-star-button:focus-visible,
.hero>.mess-3d-stage canvas:focus-visible{outline:2px dashed var(--ink,#141312);outline-offset:4px}
.hero>.mess-3d-stage .mess-3d-star-button:focus-visible{background:#e4ff4f35}
.mess-3d-stage .mess-3d-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:760px){
  #portal .mess-3d-controls{gap:7px;padding:0}
  #portal .mess-3d-hint{font-size:11px;line-height:1.35}
  #portal .mess-3d-controls .motion-toggle{font-size:10px;padding:10px 8px}
}
@media print{.hero>.mess-3d-stage,#portal .mess-3d-controls{display:none!important}#portal.mess-3d-ready>.portal-disc,#portal.mess-3d-ready>.sound-object{visibility:visible}}

/* Ready-only fit: keep the larger spatial object and controls in the HERO. */
@media(min-width:1101px){#portal.mess-3d-ready{height:520px;top:0}}
@media(max-width:600px){#portal.mess-3d-ready{height:390px}}

/* Keep the instructions and changing pause label for assistive technology only. */
#portal .mess-3d-hint,#portal #motion-label{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap!important;border:0!important}
#portal .mess-3d-controls{justify-content:flex-end}
#portal .mess-3d-controls .motion-toggle{width:44px;min-width:44px;height:44px;min-height:44px;flex:0 0 44px;display:grid;place-items:center;padding:0;font-size:20px;line-height:1}
#portal .motion-toggle #motion-icon{margin:0}
/* Keep the small pause icon clear of the fixed music launcher. */
#portal .mess-3d-controls{right:94px}

/* Hero-wide orbit layer: foreground text/links stay above both space canvases. */
.hero>#portal.mess-3d-ready{z-index:2;pointer-events:none}
.hero .hero-title-block,.hero .hero-bottom{z-index:3}
.hero .hero-title-block a,.hero .hero-title-block button{pointer-events:auto}