@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/space-grotesk-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/space-grotesk-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: #071222; }
body { color: #fff; font-family: 'Space Grotesk', sans-serif; }
.backdrop { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; pointer-events: none; }
.brand { position: fixed; z-index: 1; top: max(30px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); font-size: 14px; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
main { position: fixed; inset: 0; display: grid; place-items: center; }
h1 { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 400; letter-spacing: -.02em; }
.cursor { position: fixed; z-index: 10; top: 0; left: 0; width: 18px; height: 18px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  html.custom-cursor, html.custom-cursor * { cursor: none; }
  .cursor.is-visible { opacity: 1; }
}
@media (max-width: 600px) {
  .backdrop { object-position: 55% 50%; }
  .brand { top: max(24px, env(safe-area-inset-top)); font-size: 13px; }
}
@media (forced-colors: active) {
  html.custom-cursor, html.custom-cursor * { cursor: auto; }
  .cursor { display: none; }
}