@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; --pulse-beam: 0; --beam-scale: 1; --beam-thickness: 4px; --beam-y: 50vh; --logo-flash-opacity: 0; --logo-aura-opacity: 0; --logo-aura-scale: 1; }
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; height: 100%; margin: 0; }
html { background: #17121e; }
body { display: grid; min-height: 100svh; place-items: center; overflow: hidden; background: #17121e; isolation: isolate; font-family: "Pan Romario", sans-serif; }
.field { position: fixed; inset: 0; z-index: -3; width: 100%; height: 100%; pointer-events: none; }
.pulse-halo { position: fixed; z-index: -2; pointer-events: none; left: 50%; top: var(--beam-y); width: 96vw; height: min(34vh, 300px); transform: translate(-50%, -50%); opacity: calc(var(--pulse-glow) * .38); background: radial-gradient(ellipse, rgba(198,143,245,.42), rgba(120,38,223,.13) 40%, transparent 72%); }
.source-glow { position: fixed; z-index: -1; pointer-events: none; left: 50%; top: var(--beam-y); width: 56vw; height: clamp(38.4px, 7.2vh, 76.8px); transform: translate(-50%, -50%); opacity: calc(var(--pulse-glow) * .3375); background: radial-gradient(ellipse, rgba(255,255,255,.72), rgba(255,255,255,.52) 16%, rgba(238,222,255,.38) 35%, rgba(186,113,255,.16) 55%, transparent 74%); }
.pulse-beam { position: fixed; z-index: -1; pointer-events: none; left: 50%; top: var(--beam-y); width: 94vw; height: var(--beam-thickness); opacity: var(--pulse-beam); transform: translate(-50%, -50%) scaleX(var(--beam-scale)); background: linear-gradient(90deg, transparent, rgba(205,169,255,.28) 12%, rgba(255,255,255,.92) 36%, #fff 50%, rgba(255,255,255,.92) 64%, rgba(205,169,255,.28) 88%, transparent); border-radius: 50%; }
.pulse-beam::before { content: ""; position: absolute; inset: -12px 0; background: radial-gradient(ellipse, rgba(255,255,255,.58) 0%, rgba(220,190,255,.3) 28%, rgba(150,80,223,.13) 52%, transparent 76%); filter: blur(7px); opacity: .9; }
.pulse-beam::after { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, #fff 40%, #fff 60%, transparent); }
.logo-stage { position: relative; isolation: isolate; width: min(88vw, 800px, 130svh); aspect-ratio: 40 / 27; }
.logo-stage::before { content: ""; position: absolute; inset: -13% -12%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse at center, rgba(121,55,212,.32) 0%, rgba(100,43,171,.21) 38%, rgba(84,35,145,.11) 58%, transparent 78%); filter: blur(36px); mix-blend-mode: screen; opacity: var(--logo-aura-opacity, 0); transform: scale(var(--logo-aura-scale, 1)); }
.mark { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.logo-fade { opacity: 1; }
.logo-flash-mark { opacity: var(--logo-flash-opacity); }
.logo-sheen { opacity: .32; pointer-events: none; }
.info-link { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 10; display: grid; place-items: center; width: 44px; height: 44px; color: rgba(180,180,185,.65); border-radius: 50%; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.info-link:hover, .info-link:focus-visible { color: #fff; }
.info-link:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
@media (max-width: 48rem), (max-height: 31.25rem) and (pointer: coarse) {
  .logo-stage { width: min(100vw, 570px, 128svh); }
  .logo-stage::before { filter: blur(24px); }
  .pulse-halo { height: 150px; opacity: calc(var(--pulse-glow) * .28); }
  .source-glow { height: 42px; }
  .pulse-beam::before { inset: -8px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-halo, .source-glow, .pulse-beam { display: none; }
  .logo-flash-mark { opacity: 0; }
}

/* Desktop retains its pre-mobile v25 appearance exactly. */
@media (min-width: 48.0625rem) and ((min-height: 31.3125rem) or (pointer: fine)) {
@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,.86) 27%, #fff 50%, rgba(255,255,255,.86) 73%, rgba(255,255,255,.08) 92%, transparent 100%);
      transition: opacity 70ms linear;
      mix-blend-mode: screen;
    }
    .pulse-beam::before {
      content: "";
      position: absolute;
      inset: -9px -5%;
      background: linear-gradient(90deg, transparent 0%, rgba(244,236,255,.04) 8%, rgba(220,194,255,.38) 27%, rgba(255,255,255,.78) 50%, rgba(220,194,255,.38) 73%, rgba(244,236,255,.04) 92%, transparent 100%);
      filter: blur(8px);
      opacity: .78;
    }
    .pulse-beam::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 8%, rgba(255,255,255,.92) 27%, #fff 50%, rgba(255,255,255,.92) 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; }

.logo-sheen { display: none; }
.pulse-halo { width: auto; height: auto; }
.pulse-beam { border-radius: 0; }
.pulse-beam::after { transform: none; }
}