@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/InterVariable.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  background: #06070d;
  font-family: Inter, Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; min-height: 100%; }

body {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 53% 50%, #111327 0, transparent 49%),
    radial-gradient(ellipse at 19% 24%, #11121f 0, transparent 50%),
    #06070d;
}

#universe, .atmosphere {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.atmosphere {
  background: radial-gradient(ellipse at center, transparent 18%, rgb(3 4 9 / 12%) 65%, rgb(3 4 9 / 48%) 100%);
}

main {
  position: relative;
  display: grid;
  min-height: 100svh;
  min-height: 100dvh;
  place-items: center;
  isolation: isolate;
}

h1 { margin: 0; font-size: inherit; font-weight: inherit; }

button {
  display: grid;
  place-items: center;
  width: min(600px, 94vw);
  height: min(340px, 48svh);
  min-height: 200px;
  padding: 24px 0;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: transparent;
  color: #ecedf5;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  font: inherit;
}

button:focus-visible {
  outline: 1px solid rgb(181 191 235 / 28%);
  outline-offset: 8px;
}

#message {
  display: block;
  white-space: nowrap;
  font-size: clamp(36px, 6vw, 78px);
  font-weight: 350;
  line-height: 1.2;
  letter-spacing: -0.055em;
  text-shadow: 0 0 42px rgb(203 211 255 / 10%);
  user-select: none;
}

@media (max-width: 480px) {
  #message { font-size: clamp(34px, 9.1vw, 44px); letter-spacing: -0.05em; }
}

@media (prefers-reduced-motion: reduce) {
  #message { text-shadow: none; }
}