/* CLAUDE: Global CSS variables, reset, body, and main layout wrapper.
   Edit here to change the colour scheme (--accent, --bg, etc.) or overall max-width. */

:root {
  --bg: #07080a;
  --bg2: #0d0f13;
  --panel: #12151a;
  --panel-hi: #181c23;
  --line: #23272f;
  --text: #eef0f3;
  --muted: #8b929e;
  --accent: #00e0c6;
  --accent2: #ff3d6e;
  --accent-dim: #0a3d36;
  --radius: 18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

.bgglow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 600px 400px at 20% -5%, rgba(0,224,198,0.10), transparent 60%),
    radial-gradient(ellipse 500px 350px at 90% 10%, rgba(255,61,110,0.07), transparent 60%);
}

.wrap {
  position: relative; z-index: 1;
  max-width: 560px; margin: 0 auto;
  padding: 0 18px 120px;
}