@font-face {
  font-family: 'Julius Sans One';
  src: url('./type/julius-sans-one.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@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: light; background: #fff; color: #191c25; }
* { box-sizing: border-box; }
html { scrollbar-width: none; overflow-anchor: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: #fff; }
.experience { height: 2200svh; }
.stage { position: sticky; top: 0; width: 100%; height: 100svh; overflow: hidden; isolation: isolate; }
.identity { position: absolute; z-index: 1; top: clamp(42px, 7svh, 100px); left: 0; width: 100%; padding: 0 24px; text-align: center; pointer-events: none; }
h1 { margin: 0; font: 400 clamp(22px, 6.7vw, 88px)/1.2 'Julius Sans One', sans-serif; letter-spacing: .32em; text-indent: .32em; text-transform: uppercase; }
.identity p, .download { font: 300 clamp(17px, 2.15vw, 28px)/1.4 Lato, sans-serif; letter-spacing: .07em; color: #778293; }
.identity p { margin: 24px 0 0; }
.planet { position: absolute; display: block; width: 100%; height: 100%; inset: 0; }
.download { position: absolute; z-index: 1; top: 58%; left: 50%; margin: 0; padding: 12px 26px; min-height: 48px; font-size: 18px; border: 0; border-radius: 999px; background: #000; color: #fff8e7; box-shadow: 0 4px 18px rgb(0 0 0 / .05); appearance: none; cursor: default; white-space: nowrap; visibility: hidden; opacity: 0; transform: translate(-50%, calc(-50% + 6px)); filter: blur(3px); transition: opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease, text-shadow .3s ease; }
.download.is-visible { visibility: visible; opacity: 1; transform: translate(-50%, -50%); filter: blur(0); }
.download:focus-visible { outline: 2px solid #778293; outline-offset: 5px; text-shadow: 0 0 8px rgb(255 248 231 / .38), 0 0 18px rgb(255 248 231 / .18); }
@media (hover: hover) {
  .download:hover { text-shadow: 0 0 8px rgb(255 248 231 / .38), 0 0 18px rgb(255 248 231 / .18); }
}
@media (max-width: 600px) {
  .identity { top: 10svh; padding: 0 16px; }
  h1 { font-size: clamp(22px, 6.8vw, 40px); letter-spacing: .23em; text-indent: .23em; }
  .identity p { margin-top: 25px; font-size: 17px; }
  .download { padding: 12px 24px; font-size: 16px; }
}
@media (max-height: 500px) and (min-width: 601px) {
  .identity { top: 24px; }
  h1 { font-size: 36px; }
  .identity p { margin-top: 12px; font-size: 17px; }
  .download { font-size: 17px; }
}