/* generated by build.mjs — edit themes/themes.mjs instead */
:root {
  --bg: #0a0514;
  --bg-gradient: radial-gradient(70% 55% at 15% 10%, rgba(255,46,136,0.20), transparent 60%), radial-gradient(70% 55% at 85% 85%, rgba(34,211,238,0.18), transparent 60%);
  --surface: rgba(18,8,32,0.8);
  --ink: #f6ecff;
  --ink-dim: #9a86b8;
  --accent: #ff2e88;
  --accent-2: #22d3ee;
  --on-accent: #150419;
  --line: rgba(255,46,136,0.26);
  --sign-ink: #ff2e88;
  --sign-tracking: 0.04em;
  --sign-shadow: 0 0 28px rgba(255,46,136,0.75), 0 0 60px rgba(34,211,238,0.4);
  --card-radius: 6px;
  --grain-opacity: 0.05;
  --font-display: "Monoton", Georgia, serif;
  --font-body: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
      .tape{position:absolute;left:50%;bottom:-3vh;transform:translateX(-50%);
        width:min(460px,76vw);opacity:.75;filter:drop-shadow(0 0 26px rgba(255,46,136,.2))}
      .grid{position:absolute;inset:0;
        background:linear-gradient(90deg,#ff2e8810 1px,transparent 1px) 0 0/44px 44px,
                   linear-gradient(180deg,#22d3ee10 1px,transparent 1px) 0 0/44px 44px;
        mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent 80%)}