:root { color-scheme: dark; font-family: 'Courier New', monospace; --bezel: 12px; }
* { box-sizing: border-box; }
body { margin: 0; background: #050607; color: #e2e2db; overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid #fff49d; outline-offset: -4px; }
[hidden] { display: none !important; }
#room, #room-interaction, #room-webgl, #screen-renderer, #remote-targets { position: fixed; inset: 0; }
#room { isolation: isolate; overflow: hidden; }
#room-interaction { z-index: 0; cursor: grab; touch-action: none; }
#room-interaction:active { cursor: grabbing; }
#screen-renderer { z-index: 1; pointer-events: none; }
#screen-view, #screen-camera { pointer-events: none; }
#screen-element { position: absolute; overflow: hidden; background: #000; backface-visibility: hidden; pointer-events: auto; }
body[data-presentation="room"] #screen-element::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, #ffffff09, transparent 38%), repeating-linear-gradient(0deg, #0000000b 0 1px, transparent 1px 4px); box-shadow: inset 0 0 20px #0005; }
#storefront { display: block; border: 0; width: 100%; height: 100%; color-scheme: normal; background: #000; }
#screen-entry { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; background: transparent; z-index: 2; }
#screen-entry:focus-visible { box-shadow: inset 0 0 0 5px #fff49d; }
#room-webgl { z-index: 2; pointer-events: none; }
#room-webgl canvas { display: block; width: 100%; height: 100%; }
#remote-targets { z-index: 3; pointer-events: none; }
.remote-hit { position: absolute; padding: 0; border: 0; border-radius: 40%; color: transparent; background: transparent; pointer-events: auto; touch-action: manipulation; }
.remote-hit:focus-visible { outline: 2px solid #fff49d; outline-offset: 3px; background: #fff49d20; }
.remote-hit span, .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#zoom-out { position: fixed; z-index: 10; left: max(0px, calc(env(safe-area-inset-left) - 6px)); top: max(0px, calc(env(safe-area-inset-top) - 6px)); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 0 0 12px; background: linear-gradient(135deg, #363738, #151617); box-shadow: 1px 1px 1px #bbbbbb75, 2px 2px 7px #0008; color: #c7c7c4; }
#zoom-out:hover { color: #fff; background: #38393a; }
#zoom-out:active { padding-top: 3px; }
body[data-presentation="flat"] #room { background: linear-gradient(125deg, #393b3d, #161718 20%, #262729 70%, #090a0b); box-shadow: inset 0 0 0 2px #08090a, inset 0 0 0 3px #525456, inset 0 -6px 8px #000; }
body[data-presentation="flat"] #screen-renderer { inset: max(var(--bezel), env(safe-area-inset-top)) max(var(--bezel), env(safe-area-inset-right)) max(var(--bezel), env(safe-area-inset-bottom)) max(var(--bezel), env(safe-area-inset-left)); width: auto !important; height: auto !important; border-radius: 9px; box-shadow: 0 0 0 1px #111, 0 0 0 2px #a5a7a8, 0 0 0 3px #55595a, 0 0 0 4px #08090a; }
body[data-presentation="flat"] #screen-view, body[data-presentation="flat"] #screen-camera { width: 100% !important; height: 100% !important; transform: none !important; }
body[data-presentation="flat"] #screen-element { inset: 0; width: 100% !important; height: 100% !important; transform: none !important; border-radius: 9px !important; clip-path: none !important; }
body[data-presentation="flat"] #room-webgl, body[data-presentation="flat"] #room-interaction, body[data-presentation="flat"] #remote-targets, body[data-presentation="flat"] #screen-entry { display: none !important; }
body.is-entering #room-interaction, body.is-entering #remote-targets { pointer-events: none; }
body.is-entering .remote-hit { pointer-events: none; }
body.is-blending #room-webgl { display: block !important; animation: entrance-blend 150ms linear both; }
body.is-blending #screen-renderer { animation: storefront-blend 150ms linear both; }
@keyframes entrance-blend { to { opacity: 0; } }
@keyframes storefront-blend { from { opacity: .35; } to { opacity: 1; } }
body.is-booting #screen-element { visibility: hidden; }
#room-error, .room-no-script { position: fixed; z-index: 20; inset: auto 20px 20px; padding: 12px; background: #131415f0; border: 1px solid #626365; font-size: 12px; text-align: center; }
#room-error a, .room-no-script a { color: #fff; }
#phone-entrance { position: fixed; inset: 0; z-index: 5; background: #000; overflow: hidden; }
#phone-picture { container-type: inline-size; position: absolute; width: min(100vw, 72.7273dvh); aspect-ratio: 8 / 11; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: 42.5% 44.5%; }
#phone-still { display: block; width: 100%; height: 100%; mask-image: linear-gradient(#000 82%, transparent); }
#phone-video { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#phone-video.is-playing { display: block; }
#phone-entry { position: absolute; left: 21%; top: 34%; width: 43.5%; height: 21.5%; border: 0; border-radius: 7%; background: transparent; }
#phone-neon { position: absolute; left: 54%; top: 17%; width: 43%; text-align: center; color: #ffb09a; font: 500 clamp(8px, 2.3cqw, 15px)/1.5 monospace; letter-spacing: .04em; text-shadow: 0 0 3px #ff8062, 0 0 10px #f43823, 0 0 22px #f4382355; opacity: 0; transition: opacity 600ms; }
body.has-idle-hint #phone-neon { opacity: 1; }
body.is-phone-entering #phone-picture { animation: phone-push 650ms cubic-bezier(.4,0,.2,1) forwards; }
body.is-blending #phone-entrance { display: block !important; pointer-events: none; animation: entrance-blend 150ms linear both; }
@keyframes phone-push { to { transform: translate(-50%, -50%) scale(4.4); } }
body[data-presentation="phone"] #screen-renderer, body[data-presentation="phone"] #room-webgl, body[data-presentation="phone"] #room-interaction { visibility: hidden; }
@media (max-width: 767px) { :root { --bezel: 7px; } #zoom-out svg { width: 15px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { animation: none !important; transition: none !important; }