@font-face { font-family: Lato; src: url('./type/lato-light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
:root { color-scheme:dark; background:#000; color:#fff1d5; }
* { box-sizing:border-box; }
html { scrollbar-width:none; overflow-anchor:none; }
html::-webkit-scrollbar { display:none; }
body { margin:0; background:#000; }
.experience { height:500svh; }
.stage { position:sticky; top:0; width:100%; height:100svh; height:100dvh; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 20% 12%,#d6b2750d,transparent 55%),radial-gradient(ellipse at 88% 85%,#6486b218,transparent 55%),#05080d; }
.star-sky { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.star-sky::before,.star-sky::after { content:'';position:absolute;inset:0; }
.star-sky::before { background-image:radial-gradient(ellipse at 15% 5%,#d6b27513,transparent 45%),radial-gradient(ellipse at 88% 70%,#6486b218,transparent 48%),radial-gradient(circle at 23px 37px,#f8d79e95 0 .7px,transparent 1.2px),radial-gradient(circle at 137px 113px,#b3c8e070 0 .6px,transparent 1.1px),radial-gradient(circle at 71px 193px,#ffeed1a0 0 .75px,transparent 1.25px),radial-gradient(circle at 239px 67px,#b4c9e350 0 .5px,transparent 1px),radial-gradient(circle at 113px 277px,#eed4a780 0 .55px,transparent 1.1px),radial-gradient(circle at 311px 181px,#c4d4e865 0 .6px,transparent 1.1px);background-size:100% 100%,100% 100%,307px 293px,419px 379px,503px 467px,349px 557px,613px 389px,743px 631px;animation:star-breathe 11s ease-in-out -4s infinite alternate; }
.star-sky::after { background-image:radial-gradient(circle at 17px 29px,#eee9dfc0 0 .65px,transparent 1.15px),radial-gradient(circle at 83px 101px,#c6d6ff90 0 .55px,transparent 1.1px),radial-gradient(circle at 149px 53px,#fff9 0 .7px,transparent 1.25px),radial-gradient(circle at 47px 173px,#dae3ff80 0 .5px,transparent 1px),radial-gradient(circle at 211px 127px,#e3e9ff70 0 .6px,transparent 1.1px);background-size:193px 211px,257px 239px,293px 317px,367px 281px,431px 397px;animation:star-shimmer 7s ease-in-out infinite alternate; }
@keyframes star-shimmer { 0% {opacity:.25} 45% {opacity:.8} 100% {opacity:.4} }
@keyframes star-breathe { from {opacity:.55} to {opacity:1} }

.identity { position:absolute; z-index:3; top:calc(22px + env(safe-area-inset-top,0px)); left:0; width:100%; padding:0 24px; text-align:center; pointer-events:none; }
h1 { margin:0; line-height:0; }
h1 img { width:clamp(125px,12vw,170px); height:auto; filter:grayscale(1) brightness(1.035) drop-shadow(0 0 20px #f6f3eb14); }
.planet { position:absolute; display:block; width:100%; height:100%; inset:0; }
.download { position:absolute; z-index:3; bottom:calc(24px + env(safe-area-inset-bottom,0px)); left:50%; margin:0; display:flex; align-items:center; justify-content:center; height:50px; padding:0 30px; border:1px solid #f6f3eb38; border-radius:999px; background:#000; color:#f6f3eb; font:300 15px/1 Lato,sans-serif; -webkit-text-stroke:.25px currentColor; letter-spacing:.08em; white-space:nowrap; transform:translateX(-50%); }
@media (max-width:600px) { h1 img {width:140px;} .download {bottom:calc(22px + env(safe-area-inset-bottom,0px));font-size:14px;} }
@media (max-height:500px) and (min-width:601px) { .identity {top:16px;} h1 img {width:110px;} .download {bottom:16px;height:42px;padding:0 24px;} }
@media (prefers-reduced-motion:reduce) { .star-sky::before,.star-sky::after {animation:none;} }

/* A soft light pool under the particles, without a hard edge or a solid core. */
.stage::before { content:''; position:absolute; z-index:0; pointer-events:none; left:50%; top:50%; width:min(58vw,70svh); aspect-ratio:1.4; transform:translate(-50%,-50%) rotate(16deg); background:radial-gradient(ellipse at center, #fff8e888 0%, #fff3d84a 6%, #f4ddb526 16%, #ecd6ac12 30%, #c2cfe906 46%, transparent 68%); }
.planet { z-index:1; }

/* Lato’s lowercase ink sits below the centre of its typographic line box. */
.download span { transform:translateY(-1px); }

/* Fade the entire scene into the black browser and safe-area background. */
.stage::after { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(to bottom,#000 0%,#000000e6 1%,#0009 3%,#0003 7%,transparent 12%,transparent 74%,#0003 84%,#0009 92%,#000000e6 97%,#000 100%); }