.app { position: fixed; inset: 0; }
.main { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; background: radial-gradient(ellipse at 50% 40%, #2a1c14, #0a0605 75%); }
.stage-wrap { container-type: size; display: grid; place-items: center; min-height: 0; padding: 0; }
.stage { position: relative; width: min(100cqw, 100cqh * 16 / 9); aspect-ratio: 16 / 9; box-shadow: 0 0 80px rgba(0, 0, 0, .9), 0 0 0 1px var(--line); overflow: hidden; background: #120c09; }
.art, .art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hotspots { position: absolute; inset: 0; }
.hotspot { position: absolute; padding: 0; border: 2px solid transparent; border-radius: 10px; background: transparent; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.hotspot::after { content: attr(data-label); position: absolute; left: 50%; bottom: 8px; transform: translate(-50%, 6px); padding: 4px 12px; border-radius: 999px; background: rgba(10, 6, 4, .88);
  border: 1px solid var(--line); font-size: .95rem; white-space: nowrap; opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.hotspot:hover, .hotspot:focus-visible { border-color: var(--gold); background: rgba(255, 217, 138, .1); box-shadow: 0 0 28px rgba(255, 217, 138, .35) inset, 0 0 22px rgba(255, 217, 138, .25); }
.hotspot:hover::after, .hotspot:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.hs-frame::after, .hs-safe::after { bottom: -34px; }
.flicker { animation: flicker 2.4s ease-in-out infinite; transform-origin: center; }
.swing { animation: swing 3s ease-in-out infinite; transform-origin: 1090px 360px; }
.mote { animation: drift 9s ease-in-out infinite; }
.mote.m1 { animation-duration: 12s; } .mote.m2 { animation-duration: 15s; animation-delay: -4s; }
.main.opened .art { filter: brightness(1.12); }
@keyframes flicker { 0%, 100% { opacity: .85; } 40% { opacity: 1; } 70% { opacity: .7; } }
@keyframes swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes drift { 0%, 100% { transform: translate(0, 0); opacity: .25; } 50% { transform: translate(18px, -26px); opacity: .7; } }
.objects { display: none; }
@media (max-width: 700px) {
  body { overflow: auto; }
  .app { position: static; }
  .main { height: auto; min-height: 100dvh; display: flex; flex-direction: column; }
  .stage-wrap { display: block; container-type: normal; }
  .stage { width: 100%; box-shadow: none; }
  .hotspots { display: none; }
  .objects { display: block; padding: 12px; }
  .objects ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .objects .btn { width: 100%; min-height: 48px; text-align: left; }
}