:root {
    --bg: #000402;
    --rain: #2bff6a;
    --ink: #d9f7ff;
    --glow: #3aa8ff;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  *, *::before, *::after { box-sizing: inherit; }
  html, body { height: 100%; margin: 0; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
    overflow: hidden;
  }
  canvas {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    display: block;
  }
  .veil {
    position: fixed; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 50% 46%, rgba(0,4,2,.92) 0, rgba(0,4,2,.7) 22vmin, rgba(0,4,2,0) 55vmin);
  }
  main {
    position: relative;
    height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: clamp(20px, 4vmin, 40px);
    padding: 24px;
    text-align: center;
  }
  .mark {
    width: min(62vmin, 420px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: none;
    animation: breathe 6s ease-in-out infinite;
  }
  .mark img { width: 100%; height: 100%; display: block; }
  h1 {
    margin: 0;
    font-weight: 500;
    font-size: clamp(1.4rem, 4.2vmin, 2.4rem);
    letter-spacing: .08em;
    color: var(--ink);
    text-shadow: 0 0 18px rgba(58,168,255,.55);
  }
  h1 .cursor {
    display: inline-block; width: .55em; height: 1em;
    margin-left: .15em; vertical-align: -.12em;
    background: var(--glow);
    animation: blink 1.1s steps(1) infinite;
  }
  @keyframes breathe {
    0%,100% { filter: drop-shadow(0 0 14px rgba(58,168,255,.35)); }
    50%     { filter: drop-shadow(0 0 34px rgba(58,168,255,.7)); }
  }
  @keyframes blink { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .mark, h1 .cursor { animation: none; }
  }