:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { min-height: 100dvh; display: grid; place-items: center; overflow: hidden; background: #10100f; }
button { -webkit-tap-highlight-color: transparent; }
.stage {
  position: relative;
  isolation: isolate;
  width: min(100vw, 440px, calc(100dvh * .463626));
  aspect-ratio: 1708 / 3684;
  overflow: hidden;
  background: #262626;
  box-shadow: 0 18px 68px rgba(0,0,0,.6);
  container-type: inline-size;
}
.screen-layer { position: absolute; inset: 0; z-index: 1; opacity: 0; transform: translate3d(0, 7px, 0); transition: opacity .24s ease, transform .28s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.screen-layer.active { z-index: 2; opacity: 1; transform: translateZ(0); }
.screen-layer img { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-drag: none; }
#hotspot-root { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.hotspot { position: absolute; display: block; padding: 0; border: 0; background: transparent; color: transparent; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.hotspot:focus-visible { outline: 2px solid #ffe3a0; outline-offset: -2px; border-radius: 12px; background: rgba(251,191,98,.12); }
.hotspot:active { background: rgba(255,196,98,.07); border-radius: 12px; }
.hotspot.tab-hotspot:active { background: rgba(255,196,98,.035); }
#dynamic-root { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
#page-root { position: absolute; inset: 0; z-index: 18; pointer-events: none; }
#page-root > * { pointer-events: auto; }
#modal-root { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
#modal-root > * { pointer-events: auto; }
#toast-root { position: absolute; inset: 0; z-index: 70; pointer-events: none; }
#page-root .x-layer { inset: 5.85% 1.55% 10.75%; border-radius: 0 0 14px 14px; }
#page-root .x-detail-header { min-height: 60px; padding: 8px 48px 11px; align-items: center; }
#page-root .x-detail-back, #page-root .x-detail-action { bottom: 12px; }
#modal-root .x-overlay { inset: 1.2% 1.55% 1.2%; border-radius: 27px; }
#modal-root .x-overlay .x-sheet { max-height: 86%; }
@media (max-width: 480px) { body { background: #262626; } .stage { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .screen-layer { transition-duration: .01ms; transform: none; } }