:root{
  /* Dark neumorphic tokens */
  --bg0: #050507;
  --bg1: #0b0c10;
  --surface: rgba(14, 15, 20, 0.55);
  --surface-strong: rgba(14, 15, 20, 0.72);

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.66);
  --muted2: rgba(255,255,255,0.44);

  --border: rgba(255,255,255,0.07);

  --shadow-dark: rgba(0,0,0,0.70);
  --shadow-darker: rgba(0,0,0,0.88);
  --shadow-light: rgba(255,255,255,0.055);

  /* Vended-ish accent (safe + subtle) */
  --accent: #ffe700;
  --danger: #ff4d4d;

  --radius: 22px;
  --radius-sm: 14px;
  --max: 1120px;

  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,231,0,.10), transparent 55%),
    radial-gradient(900px 500px at 80% 25%, rgba(0,255,255,.06), transparent 60%),
    radial-gradient(1100px 700px at 50% -15%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(135deg, var(--bg0), var(--bg1));
  color: var(--text);
  font-family: var(--font);
  line-height: 1.35;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

img{ max-width: 100%; display: block; }

.container{
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
}

.center-screen{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2.5rem 0;
}

.smallprint{
  font-size: 0.9rem;
  color: var(--muted);
}

/* optional subtle noise overlay */
.grain{
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}