@font-face {
  font-family: "DotGothic16";
  src: url("/fonts/DotGothic16.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VT323";
  src: url("/fonts/VT323.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ReenieBeanie";
  src: url("/fonts/ReenieBeanie.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(ellipse at 20% 0%, #ff3ea522 0%, transparent 45%),
    radial-gradient(ellipse at 80% 30%, #5ef7ff14 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, #a78bff22 0%, transparent 50%),
    var(--plum);
  color: var(--cream);
  font-family: var(--f-mono);
  min-height: 100vh;
  font-variant-emoji: text;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  opacity: 0.07; mix-blend-mode: overlay;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px);
  opacity: 0.5;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--cream); text-decoration: underline; }
::selection { background: var(--pink); color: var(--ink); }

.page { max-width: 1200px; margin: 0 auto; padding: 24px 28px 0; position: relative; z-index: 1; }