@font-face{font-family:Syncopate;src:url("fonts/syncopate-regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#000;color:#fdfdfd;font:16px/1.6 Arial,Helvetica,sans-serif;height:100svh;min-height:320px;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}a:hover{color:#c4dd90}a:focus-visible,button:focus-visible{outline:2px solid #c4dd90;outline-offset:6px}
.skip{position:absolute;left:16px;top:-60px;background:#000;padding:10px;z-index:5}.skip:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Background layers and the star mask follow the globe's viewport position. */
.space{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,#080c21 0%,#02030b 43%,#000 75%);z-index:-2}
.space:before,.space:after{content:"";position:absolute;inset:0;will-change:opacity,transform}.space:before{background:radial-gradient(ellipse at 48% 38%,rgba(54,83,139,.28),transparent 57%);animation:space-breathe 16s ease-in-out infinite alternate}.space:after{background:radial-gradient(ellipse at 57% 44%,rgba(128,99,45,.12),transparent 45%);animation:space-breathe 21s -7s ease-in-out infinite alternate-reverse}
#stars{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;mask-image:radial-gradient(ellipse var(--globe-rx,0px) var(--globe-ry,0px) at var(--globe-x,50%) var(--globe-y,40%),transparent 99%,#000 100%)}
.star{position:absolute;border-radius:50%;background:white;animation:drift-twinkle var(--duration) ease-in-out infinite;animation-delay:var(--delay)}body.paused .star,body.paused .space:before,body.paused .space:after{animation-play-state:paused}
header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 4%;width:100%;z-index:1}.brand{display:inline-flex;align-items:center;gap:12px;font-family:Syncopate,Arial,sans-serif;font-weight:400;font-size:13px;letter-spacing:.04em;white-space:nowrap}.brand-icon{display:block;width:48px;height:34px;flex-shrink:0}header nav{display:flex;gap:28px;color:#bcbfc8;font-size:14px}
main{flex:1;min-height:0;width:100%;text-align:center;padding:0 20px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center}.planet{width:min(100%,950px);mix-blend-mode:screen;margin:-10px auto -24px}.planet img{display:block;width:100%;height:auto}
h1{width:min(940px,90vw);max-width:100%;font-family:Syncopate,Arial,sans-serif;font-size:inherit;font-weight:400;line-height:0;letter-spacing:0;white-space:nowrap;padding:0;margin:0;animation:title-arrive 3.8s cubic-bezier(.2,.65,.3,1) both;text-shadow:0 0 35px rgba(141,179,213,.12)}.title-wordmark{display:block;width:100%;height:auto;overflow:visible}
.subtitle{font-weight:400;font-size:clamp(15px,1.6vw,21px);letter-spacing:.12em;margin:24px 0 25px;color:#bfc6d1;animation:subtitle-arrive 2.8s .8s cubic-bezier(.2,.65,.3,1) both}
.apps{display:flex;align-items:center;justify-content:center;gap:28px;font-size:17px;letter-spacing:.06em}.apps a{padding:8px 4px}.apps span{color:#626979}.music{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-top:30px;font-size:12px;color:#9499a7}
footer{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px;padding:20px 4%;color:#8e94a3;font-size:11px}footer>div{display:flex;align-items:center;flex-wrap:wrap;gap:18px}button{font:inherit;color:inherit;background:none;border:1px solid #353b48;padding:5px 10px;cursor:pointer}button[hidden]{display:none}
@keyframes drift-twinkle{0%{transform:translate(0,0);opacity:.2}25%{opacity:.5}50%{transform:translate(12px,18px);opacity:.9}75%{opacity:.5}100%{transform:translate(0,0);opacity:.2}}
@keyframes space-breathe{from{opacity:.35;transform:scale(.96) translateY(0)}to{opacity:.9;transform:scale(1.08) translateY(-10px)}}
@keyframes title-arrive{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}@keyframes subtitle-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-height:900px) and (min-width:700px){.planet{width:min(100%,1050px)}}
@media(max-width:600px){header{padding:18px 5%;gap:12px}.brand{font-size:10px;gap:7px}.brand-icon{width:36px;height:28px}header nav{gap:12px;font-size:11px}main{padding:20px 12px 16px}.planet{width:100%;margin:0 auto 20px}h1{width:94vw}.subtitle{font-size:15px;letter-spacing:.08em;margin:22px 0 24px}.apps{font-size:16px;gap:20px}.music{gap:20px;margin-top:30px}footer{justify-content:center;text-align:center;padding:18px}footer>div{justify-content:center;gap:14px}}
@media(prefers-reduced-motion:reduce){.star{animation:none;opacity:.5}h1,.subtitle{animation:none}.space:before,.space:after{animation:none;opacity:.5}}

.hero-visual{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.bottom-links{width:100%;margin-top:auto;padding-top:12px;flex-shrink:0}

.hero-visual{min-height:0;container-type:size}.planet{flex-shrink:0;width:min(100%,1050px,max(0px,calc((100cqh - 150px)*1.7768)));margin:0 auto}h1{flex-shrink:0;width:min(940px,90vw,160cqh)}.subtitle{flex-shrink:0;margin:16px 0 10px}.music{margin-top:16px}
@media(max-width:600px){.planet{width:min(100%,max(0px,calc((100cqh - 110px)*1.7768)))}.subtitle{margin:14px 0 8px}.music{margin-top:12px}}
@media(max-height:600px){header{padding-top:10px;padding-bottom:10px}main{padding-top:0;padding-bottom:6px}footer{padding-top:8px;padding-bottom:8px;gap:6px}.bottom-links{padding-top:6px}.music{margin-top:6px}.subtitle{font-size:13px;margin:8px 0 4px}.planet{width:min(100%,950px,max(0px,calc((100cqh - 70px)*1.7768)))}h1{width:min(650px,80vw,120cqh)}.apps a{padding:4px}.apps{font-size:14px}}