@charset "UTF-8";
:root { color-scheme: dark; --navy: #070e20; --ice: #6ddbf1; --gold: #ffcf23; --white: #f3f9ff; --muted: #a0b6ca; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--navy); color: var(--white); font-family: "Avenir Next", "Trebuchet MS", sans-serif; overflow-x: hidden; }
body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1040px; pointer-events: none; background: radial-gradient(ellipse at 50% 21%, #174261 0, #0c203b 32%, transparent 68%), repeating-linear-gradient(125deg, transparent 0 150px, #73dfff04 150px 151px); }
#snow { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; }
main { position: relative; width: min(1080px, calc(100% - 64px)); margin: 0 auto; }
.hero { text-align: center; padding: 48px 0; }
/* Optical centering balances the lettering against the long, light X tip. */
.logo { display: block; width: min(570px, 87%); height: auto; margin: 0 auto -12px; transform: translateX(4%); filter: drop-shadow(0 16px 26px #0005); }
h1 { font-family: Impact, "Arial Narrow", sans-serif; font-size: clamp(40px, 6vw, 66px); font-weight: 400; font-style: italic; letter-spacing: .018em; line-height: 1; margin: 20px 0 30px; }
.download { display: inline-flex; align-items: center; gap: 13px; justify-content: center; padding: 18px 30px; color: #0b1930; background: var(--gold); font-size: 16px; letter-spacing: .055em; font-weight: 800; text-decoration: none; border-radius: 3px; box-shadow: 0 5px 0 #8e6d09, 0 10px 36px #ffcf2312; transform: skew(-7deg); transition: background .15s, translate .15s; }
.download svg { width: 22px; height: 22px; flex: none; }
.download:hover { background: #ffdf65; translate: 0 -2px; }
.download:active { translate: 0 3px; box-shadow: 0 2px 0 #8e6d09; }
.download:focus-visible, summary:focus-visible { outline: 3px solid var(--ice); outline-offset: 7px; }
.platform { color: #95b5c9; font-size: 10px; line-height: 1.8; letter-spacing: .075em; margin: 19px 0 0; font-weight: 700; }
.platform span { color: #557a93; margin: 0 7px; }
.footage { margin: 0; }
video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #091426; }
video::-webkit-media-controls { display: none !important; }
.install { max-width: 720px; margin: 30px auto 64px; text-align: center; color: var(--muted); font-size: 13px; }
summary { cursor: pointer; display: inline-block; border-bottom: 1px solid #4b6e85; padding-bottom: 3px; }
summary::-webkit-details-marker { display: none; }
.install p { text-align: left; line-height: 1.75; padding: 10px 10px 0; color: #b3c8d8; }
footer { position: relative; padding: 29px 24px 33px; border-top: 1px solid #23364c; text-align: center; background: #050b19; }
.footer-mark { font-family: Impact, "Arial Narrow", sans-serif; font-style: italic; letter-spacing: .07em; font-size: 19px; color: #7095ac; }
footer p { max-width: 790px; margin: 12px auto 0; font-size: 12px; line-height: 1.7; color: #97afc1; }
@media (max-width: 600px) {
  main { width: calc(100% - 32px); }
  .hero { padding: 32px 0 34px; }
  .logo { width: 92%; max-width: 370px; margin-bottom: 0; }
  h1 { margin: 18px 0 26px; font-size: 43px; }
  .download { padding: 16px 22px; font-size: 14px; }
  .platform { font-size: 8px; letter-spacing: .035em; }
  .platform span { margin: 0 3px; }
  .install { font-size: 12px; margin: 25px auto 38px; }
  footer { padding: 24px 22px 30px; }
  footer p { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .download { transition: none; } }