:root {
  --bg: #07051a;
  --ink: #f2eefe;
  --ink-2: #b9b0d9;
  --ink-3: #7c74a3;
  --line: rgba(222, 210, 255, 0.16);
  --line-2: rgba(222, 210, 255, 0.32);
  --glass: rgba(18, 12, 44, 0.46);
  --glass-2: rgba(28, 20, 64, 0.62);
  --accent: #8b6cff;
  --accent-2: #b59cff;
  --jade: #3fe0a4;
  --amber: #ffb547;
  --crimson: #ff5d73;
  --azure: #4fb8ff;
  --violet: #b07bff;
  --ash: #b9b3c9;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.7, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--ink); font-family: var(--display); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

.mono { font-family: var(--mono); }
.upper { text-transform: uppercase; letter-spacing: .08em; }

/* ---------- film grain + vignette ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
.vignette { position: fixed; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(4, 2, 14, .75) 100%); }

/* ---------- buttons & pills ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em; height: 40px; padding: 0 18px; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line-2); background: var(--glass); backdrop-filter: blur(12px);
  transition: background .3s, border-color .3s, transform .3s var(--ease-out);
}
.btn:hover { border-color: var(--accent-2); background: var(--glass-2); }
.btn--solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--solid:hover { background: #7a58ff; border-color: #a58cff; }
.btn--icon { width: 40px; padding: 0; justify-content: center; }
.btn svg { width: 14px; height: 14px; }

.ca-pill {
  display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 6px 0 14px;
  border: 1px solid var(--line-2); background: var(--glass); backdrop-filter: blur(12px);
  font-family: var(--mono); font-size: 12px; white-space: nowrap;
}
.ca-pill b { font-weight: 500; letter-spacing: .06em; }
.ca-pill .addr { color: var(--accent-2); }
.ca-pill .copy {
  height: 26px; padding: 0 10px; background: var(--accent); color: #fff; font-family: var(--mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.ca-pill .copy:disabled { background: transparent; color: var(--ink-3); border: 1px dashed var(--line-2); cursor: default; }

.tag {
  display: inline-block; padding: 4px 8px; background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- custom cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; mix-blend-mode: difference; }
.cursor__ring {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid #fff; border-radius: 50%;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), border-radius .35s var(--ease-out);
}
.cursor__dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; }
.cursor--hover .cursor__ring { width: 64px; height: 34px; margin: -17px 0 0 -32px; border-radius: 50% / 50%; }
.cursor--hover .cursor__dot { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
@media (hover: none) { .cursor { display: none; } }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 32px; z-index: 95; transform: translate(-50%, 20px); opacity: 0;
  padding: 10px 16px; background: var(--accent); color: #fff; font-family: var(--mono); font-size: 12px;
  transition: opacity .3s, transform .4s var(--ease-out); pointer-events: none;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- sound toggle ---------- */
.sound { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.sound__bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.sound__bars i { width: 2px; height: 3px; background: currentColor; transition: height .2s; }
.sound.on .sound__bars i { animation: bar 1s ease-in-out infinite; }
.sound.on .sound__bars i:nth-child(2) { animation-delay: -.3s; }
.sound.on .sound__bars i:nth-child(3) { animation-delay: -.6s; }
.sound.on .sound__bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes bar { 0%, 100% { height: 3px; } 50% { height: 12px; } }