*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#020914;color:#dce9f2}main{position:relative;isolation:isolate;width:100%;height:100svh;overflow:hidden}.environment,.nebula,.stars{position:absolute;inset:0;pointer-events:none}.environment{background:linear-gradient(0deg,rgba(1,5,13,.35),rgba(1,5,13,.12)),url('assets/cosmic-sky.jpg') center/cover no-repeat}.nebula{background:radial-gradient(ellipse at 12% 45%,#0064a338,transparent 45%),radial-gradient(ellipse at 90% 35%,#639d1526,transparent 42%);animation:breath 16s ease-in-out infinite}.stars{opacity:.3;background-image:radial-gradient(1px 1px at 8% 18%,#9edfff 90%,transparent),radial-gradient(1px 1px at 88% 28%,#c5edff 90%,transparent),radial-gradient(1px 1px at 72% 8%,#c5edff 90%,transparent);background-size:347px 269px;animation:twinkle 8s ease-in-out infinite}.stage{position:absolute;left:50%;top:46%;width:min(100vw,calc((100svh - 116px)*1.7777778),1920px);aspect-ratio:16/9;transform:translate(-50%,-50%);mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)}.stage img,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.stage video{opacity:0}.playing video{opacity:1}.playing .poster{visibility:hidden}h1{position:absolute;left:20px;right:20px;bottom:max(5svh,env(safe-area-inset-bottom));margin:0;text-align:center;font:400 clamp(15px,1.25vw,22px)/1.6 system-ui,sans-serif;letter-spacing:.025em;color:#dfebf5;text-shadow:0 2px 10px #000,0 0 22px #000;z-index:4}.mobile{display:none}@keyframes breath{50%{opacity:.55;transform:translateY(-1.5%)}}@keyframes twinkle{50%{opacity:.12}}@media(min-aspect-ratio:21/9){.stage{top:45%}}@media(max-width:600px){.stage{top:43%;width:100vw}.environment{background-position:50% 50%}.mobile{display:block}h1{bottom:12svh;font-size:16px;line-height:1.65}}@media(prefers-reduced-motion:reduce){.nebula,.stars{animation:none}.stage video{display:none}.playing .poster{visibility:visible}}.stage{mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 91%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 91%,transparent);-webkit-mask-composite:source-in}
.stage{mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 85%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 85%,transparent)}

/* Coming soon update: crisp environment, separate responsive HTML copy. */
.environment{inset:0;filter:none;background:linear-gradient(0deg,rgba(1,5,13,.85),rgba(1,5,13,.65)),url('assets/cosmic-sky.jpg') center/cover no-repeat}
.stage{top:calc((100svh - 210px)/2);width:min(100vw,calc((100svh - 210px)*1.7777778),1920px)}
.message{position:absolute;z-index:4;bottom:max(4svh,env(safe-area-inset-bottom));left:24px;right:24px;text-align:center;color:#e0eaf2;text-shadow:0 2px 12px #010611}
.message .eyebrow{margin:0 0 12px;font:500 11px/1.5 system-ui,sans-serif;letter-spacing:.24em;color:#92b2c4}
.message h1{position:static;margin:0;font:400 clamp(23px,2.4vw,36px)/1.25 system-ui,sans-serif;letter-spacing:-.025em;text-wrap:balance;color:#edf3f6}
.message .description{max-width:650px;margin:14px auto 0;font:400 clamp(13px,1.1vw,15px)/1.65 system-ui,sans-serif;color:#a7bac9;text-wrap:balance}
@media(max-width:600px){.stage{top:34%;width:100vw}.message{left:22px;right:22px;bottom:13svh}.message .eyebrow{font-size:10px;margin-bottom:12px;letter-spacing:.2em}.message h1{font-size:25px;max-width:340px;margin:auto}.message .description{font-size:13px;max-width:330px;margin-top:15px}}
@media(max-height:540px) and (min-width:601px){.stage{top:35%;width:min(65vw,calc((100svh - 135px)*1.7777778))}.message{bottom:14px}.message .eyebrow{margin-bottom:5px}.message h1{font-size:22px}.message .description{margin-top:6px;font-size:12px}}

/* v9: one geometry-matted foreground, one continuous environment. No frame-edge masks. */
.environment{inset:0;filter:none;background:linear-gradient(to bottom,rgba(1,5,13,.18) 0%,rgba(1,5,13,.15) 35%,#03101e 73%,#030910 100%),url('assets/cosmic-sky.jpg') center top/cover no-repeat}
.stage{mask-image:none;-webkit-mask-image:none;isolation:isolate}
.stage video{display:none!important}.stage .foreground{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}.playing .foreground{opacity:1}
main:after{content:"";position:absolute;inset:73% 0 0;pointer-events:none;z-index:-1;background:linear-gradient(105deg,transparent 40%,#087bb810 51%,transparent 66%),linear-gradient(75deg,transparent 42%,#76a82b08 49%,transparent 64%),linear-gradient(#05132000,#020710);border:0}
@media(prefers-reduced-motion:reduce){.stage .foreground{display:none}.playing .poster{visibility:visible}}

/* Compatibility patch: keep the decoding element in layout for WebKit. The visible scene remains canvas/poster. */
.stage video{display:block!important;opacity:.001!important;pointer-events:none;z-index:0}.stage picture .poster{z-index:1}.stage .foreground{z-index:2}
.message{left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));bottom:max(4svh,calc(env(safe-area-inset-bottom) + 12px))}
@media(max-width:600px){.message{left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));bottom:max(13svh,calc(env(safe-area-inset-bottom) + 12px))}}
@media(max-height:540px) and (min-width:601px){.message{bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px))}}

/* WEB-002: accessible legal links; approved scene and message positions unchanged. */
.legal-footer{position:fixed;z-index:6;left:0;right:0;bottom:max(8px,env(safe-area-inset-bottom));text-align:center;font:400 12px/1.5 system-ui,sans-serif}.legal-footer nav{display:flex;justify-content:center;gap:24px}.legal-footer a{color:#a7bac9;text-decoration:underline;text-underline-offset:3px;padding:6px 4px}.legal-footer a:focus-visible{outline:2px solid #42cfff;outline-offset:3px}
@media(max-height:540px) and (min-width:601px){html,body{overflow-y:auto}body{padding-bottom:44px}.legal-footer{position:relative;height:44px;bottom:auto;background:#020914}}

/* Mobile media hotfix: controls appear only when a user gesture/retry is needed. */
.animation-start{position:absolute;z-index:3;left:50%;bottom:4px;transform:translateX(-50%);max-width:90%;padding:9px 18px;border:1px solid #317590;border-radius:5px;background:#041422ed;color:#dce9f2;font:500 14px/1.4 system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
.animation-start:focus-visible{outline:2px solid #42cfff;outline-offset:3px}
.animation-start[hidden],.media-diagnostics[hidden]{display:none!important}
/* Keep the hidden packed decoder at its encoded size; some WebKit backends resize its frame to the CSS box. */
main[data-media-variant="mobile"] .stage video{width:1536px;height:432px;max-width:none;max-height:none;object-fit:fill}
.media-diagnostics{position:fixed;z-index:20;left:4px;top:4px;max-width:calc(100vw - 8px);max-height:45vh;overflow:auto;white-space:pre-wrap;padding:8px;background:#020914eb;color:#dce9f2;font:11px/1.3 monospace;pointer-events:none}
@media(prefers-reduced-motion:reduce){main[data-motion-override="true"] .stage .foreground{display:block}main[data-motion-override="true"].playing .poster{visibility:hidden}}