/* Base skeleton. Redesign per project from the logo: change the tokens below first, then fonts, art and layout.
   Performance rules (phones under viral traffic):
   - animate only transform and opacity; never box-shadow, background-position, left/top, width/height, filter
   - no full-screen animated layers (grain, moving grids); keep textures static
   - every looping animation lives in a section that pauseOffscreen() watches (.offscreen pauses it) */
@font-face { font-family: 'Jersey 25'; src: url(/fonts/jersey.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url(/fonts/silkscreen.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url(/fonts/silkscreen-b.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url(/fonts/nunito.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
:root {
  --bg: #0b0516; --bg2: #140a26; --card: #1c0f33; --card2: #2a1648; --line: #46297a; --ink: #06020d;
  --text: #fff3d6; --mute: #b9a6d9; --accent: #ffb52e; --accent-ink: #1c0a02; --fire: #ff6a1a; --pink: #ff3ea5; --teal: #2de2c0; --ok: #5be37d; --warn: #ffb547;
  --r: 0px; --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --f-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --f-display: 'Jersey 25', var(--f-body); --f-ui: 'Silkscreen', ui-monospace, Menlo, monospace; --f-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 var(--f-body); overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
.wrap { width: min(1080px, 100% - 28px); margin-inline: auto; }
.mono { font-family: var(--f-mono); }
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg) url(/media/bg.webp) center top / cover no-repeat; }
.dot { display: inline-block; width: 9px; height: 9px; background: var(--ok); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.offscreen, .offscreen * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
[hidden] { display: none !important; }