:root {
  color-scheme: dark;
  --paper: #f0f0f0;
  --edge: clamp(24px, 3.333vw, 80px);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #000;
}

body { color: var(--paper); -webkit-tap-highlight-color: transparent; }

.page {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: radial-gradient(ellipse 49% 49% at 50% 50%, #383838 0%, #2b2b2b 31%, #151515 58%, #050505 82%, #000 100%);
}

.brand {
  position: absolute;
  top: max(5.9%, env(safe-area-inset-top));
  left: max(var(--edge), env(safe-area-inset-left));
  width: clamp(148px, 16.45vw, 400px);
  z-index: 2;
}

.brand img { display: block; width: 100%; height: auto; }

.hero {
  position: absolute;
  top: 49.1%;
  left: 50%;
  width: min(42vw, 1030px, 105dvh);
  transform: translate(-50%, -50%);
  text-align: center;
}

.site-heading { margin: 0; padding: 0; font-size: inherit; }

.site-word {
  display: block;
  position: relative;
  width: 94.9%;
  left: -1.6%;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 2px;
  color: inherit;
  background: none;
  font: inherit;
  touch-action: none;
  user-select: none;
  outline: none;
}

.site-word:focus-visible { outline: 1px dashed #aaa; outline-offset: 16px; }
.site-fallback { display: block; width: 100%; height: auto; }
.site-word.is-active .site-fallback { visibility: hidden; }
.particles { position: absolute; pointer-events: none; opacity: 0; }
.site-word.is-active .particles { opacity: 1; }

.tagline { margin: 6.55% 0 0; padding: 0; }
.tagline img { display: block; width: 100%; height: auto; }

.intro {
  margin: clamp(22px, 3.4vh, 38px) auto 0;
  max-width: 640px;
  font-family: Arial, Helvetica, sans-serif;
}

.intro h1 {
  margin: 0;
  font-size: clamp(18px, 1.36vw, 28px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.intro p {
  margin: 12px auto 0;
  max-width: 560px;
  color: #aaa;
  font-size: clamp(13px, 0.9vw, 17px);
  line-height: 1.55;
  text-wrap: pretty;
}

.error-title { font: 500 clamp(32px, 5vw, 72px) / 1.15 Arial, sans-serif; }
.error-link { color: #32dfff; font: 18px / 1.5 Arial, sans-serif; text-underline-offset: 5px; }

.contact {
  position: absolute;
  left: 0;
  bottom: max(9.65%, calc(env(safe-area-inset-bottom) + 20px));
  width: 100%;
  text-align: center;
  font: 400 clamp(22px, 2.604vw, 64px) / 1.15 'Times New Roman', Times, serif;
}

.contact a {
  display: inline-block;
  padding: 6px 4px;
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.16em;
  transition: color 180ms ease;
}

.contact a:hover { color: #32dfff; }
.contact a:focus-visible { outline: 1px solid #32dfff; outline-offset: 5px; }

.pointer-ring {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  width: 52px;
  height: 52px;
  border: 1px solid rgb(240 240 240 / 65%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-100px, -100px);
  transition: opacity 180ms ease;
}

.pointer-ring.is-visible { opacity: 1; }
.pointer-ring::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--paper);
  transform: translate(-50%, -50%);
}

@media (hover: hover) and (pointer: fine) {
  .site-word { cursor: none; }
}

@media (max-width: 700px) {
  .page { background: radial-gradient(ellipse 80% 42% at 50% 49%, #333 0%, #252525 29%, #111 60%, #020202 87%, #000 100%); }
  .brand { top: max(30px, calc(env(safe-area-inset-top) + 16px)); width: clamp(140px, 36vw, 210px); }
  .hero { width: min(86vw, 105dvh); top: 48.8%; }
  .tagline { margin-top: 8%; }
  .intro { margin-top: clamp(22px, 4vh, 32px); }
  .intro h1 { font-size: 20px; }
  .intro p { font-size: 13px; line-height: 1.5; }
  .contact { bottom: max(7.5%, calc(env(safe-area-inset-bottom) + 24px)); font-size: clamp(22px, 5.65vw, 32px); }
  .pointer-ring { display: none; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .brand { top: max(22px, env(safe-area-inset-top)); width: clamp(115px, 17vw, 180px); }
  .hero { width: min(54vw, 126dvh); top: 47%; }
  .site-heading { width: min(70%, 63dvh); margin-inline: auto; }
  .tagline { width: min(75%, 68dvh); margin: 3% auto 0; }
  .intro { margin-top: 16px; }
  .intro h1 { font-size: 17px; }
  .intro p { font-size: 12px; line-height: 1.4; margin-top: 8px; }
  .contact { bottom: max(5%, env(safe-area-inset-bottom)); font-size: clamp(18px, 4.5dvh, 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .contact a, .pointer-ring { transition: none; }
  .pointer-ring { display: none; }
  .site-word { cursor: default; }
}