@font-face {
  font-family: "Pan Romario";
  src: url("../../fonts/PanRomario-500-Roman.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
    :root { color-scheme: dark; --pulse-glow: 0; --logo-flash: 0; --logo-flash-brightness: 1; --beam-y: 50vh; --source-y: 50vh; }
    * { box-sizing: border-box; }
    html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
    body {
      display: grid;
      min-height: 100vh;
      min-height: 100svh;
      place-items: center;
      overflow: hidden;
      background: #17121e;
      isolation: isolate;
    }
    .field {
      position: fixed;
      inset: 0;
      z-index: -2;
      display: block;
      width: 100%;
      height: 100%;
      opacity: .94;
    }
    .pulse-halo {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: var(--pulse-glow, 0);
      background: radial-gradient(ellipse 82% 46% at 50% var(--beam-y), rgba(255,255,255,1) 0%, rgba(255,255,255,.84) 4%, rgba(205,165,255,.76) 12%, rgba(120,38,223,.62) 27%, rgba(120,38,223,.28) 48%, transparent 76%);
      transform: scaleX(1.18);
      mix-blend-mode: screen;
      transition: opacity 90ms linear;
    }
    .source-glow {
      position: fixed;
      z-index: -1;
      left: 50%;
      top: var(--beam-y);
      width: 56vw;
      height: clamp(38.4px, 7.2vh, 76.8px);
      border-radius: 50%;
      pointer-events: none;
      opacity: calc(var(--pulse-glow, 0) * .3375);
      transform: translate(-50%, -50%);
      background: radial-gradient(ellipse at center, rgba(255,255,255,.72) 0%, rgba(255,255,255,.52) 16%, rgba(238,222,255,.38) 35%, rgba(186,113,255,.16) 55%, transparent 74%);
      filter: blur(6px) drop-shadow(0 0 12px rgba(186,113,255,.4));
      mix-blend-mode: screen;
    }
    .pulse-beam {
      position: fixed;
      z-index: -1;
      top: var(--beam-y);
      left: 50%;
      width: 50vw;
      height: 1.1px;
      pointer-events: none;
      opacity: var(--pulse-beam, 0);
      transform: translate(-50%, -50%);
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 8%, rgba(255,255,255,.72) 27%, #fff 50%, rgba(255,255,255,.72) 73%, rgba(255,255,255,.08) 92%, transparent 100%);
      transition: opacity 70ms linear;
      mix-blend-mode: screen;
    }
    .pulse-beam::before {
      content: "";
      position: absolute;
      inset: -2px 0;
      background: linear-gradient(90deg, transparent 0%, rgba(244,236,255,.04) 8%, rgba(220,194,255,.34) 27%, rgba(255,255,255,.48) 50%, rgba(220,194,255,.34) 73%, rgba(244,236,255,.04) 92%, transparent 100%);
      filter: blur(2px);
      opacity: .85;
    }
    .pulse-beam::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 8%, rgba(255,255,255,.72) 27%, #fff 50%, rgba(255,255,255,.72) 73%, rgba(255,255,255,.08) 92%, transparent 100%);
    }
    .logo-stage {
      position: relative;
      isolation: isolate;
      width: min(88vw, 800px, 145svh);
      min-width: min(280px, 90vw);
      max-height: 78svh;
      aspect-ratio: 40 / 27;
      transform-origin: 50% 54%;
      filter: drop-shadow(0 20px 52px rgba(129, 38, 196, .3));
    }
    .mark { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
    .logo-fade { opacity: 1; }
    .mark { max-height: 100%; }
    .logo-mark { filter: none; }
    .logo-flash-mark { opacity: var(--logo-flash-opacity, 0); }
    @media (max-width: 480px) { .logo-stage { width: min(90vw, 145svh); min-width: 0; } }
    @media (prefers-reduced-motion: reduce) {
      .logo-fade, .logo-pulse { animation: none; transition: none; }
      .pulse-halo, .pulse-beam, .source-glow { opacity: 0; }
    }

/* Small, keyboard-accessible Telegram contact. */


.info-link {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 10;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: rgba(180,180,185,.65);
  border-radius: 50%;
  text-decoration: none;
}
.info-link:hover { color: #fff; }
.info-link:focus-visible { color: #fff; outline: 1px solid #fff; outline-offset: 2px; }