@font-face {
  font-family: Inter;
  src: url("../inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
* { box-sizing: border-box; }
html { color-scheme: dark; background: #060a14; }
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(18px, 5vw, 72px);
  font: 1rem/1.55 Inter, system-ui, sans-serif;
  color: #f4f7ff;
  background:
    radial-gradient(ellipse at 48% 28%, #22487b40, transparent 55%),
    linear-gradient(140deg, #060b18de, #09152bdf 50%, #040711ef),
    url("../space-background.jpg") center / cover;
}
main {
  width: min(100%, 34rem);
  background: linear-gradient(140deg, #17253bf5, #101a2cf7 45%, #0c1424);
  border: 1px solid #8cacde40;
  border-radius: 26px;
  box-shadow: 0 32px 100px #01040c99, 0 0 70px #2366cc16;
  overflow: hidden;
}
.cover { background: #020817; border-bottom: 1px solid #6f9beb45; }
.cover img { display: block; width: 100%; height: auto; }
.content { padding: clamp(26px, 6vw, 46px); }
h1 { font-size: clamp(2rem, 6vw, 2.85rem); line-height: 1.08; letter-spacing: -.055em; margin: 0; overflow-wrap: anywhere; }
p { color: #b8c6dc; margin: .9rem 0 0; max-width: 39ch; overflow-wrap: anywhere; }
strong { color: #e4edff; font-weight: 600; }
form, .content > a { margin-top: 1.65rem; }
button {
  width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center;
  gap: .7rem; padding: .8rem 1rem; border: 1px solid #80acff88; border-radius: 13px;
  background: linear-gradient(180deg, #416fdf, #2954bc); color: #fff;
  box-shadow: inset 0 1px 0 #ffffff1a, 0 6px 20px #0414336b;
  font: inherit; font-weight: 650; cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}
button::after { content: ''; width: .42rem; height: .42rem; border: solid currentColor; border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); }
a { color: #a8c8ff; text-underline-offset: .2em; }
.content > a { display: inline-block; }
:focus-visible { outline: 3px solid #b5daff; outline-offset: 4px; }
hr { border: 0; border-top: 1px solid #365073; margin: 1.8rem 0; }
@media (hover: hover) { button:hover { filter: brightness(1.12); transform: translateY(-1px); } }
@media (prefers-reduced-motion: no-preference) {
  main { animation: arrive .4s ease-out both; }
  @keyframes arrive { from { opacity: .4; transform: translateY(7px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }