:root {
  /* === IDE Catppuccin Mocha: editor stays dark === */
  --ed-bg: #1e1e2e;
  --panel-bg: #24273a;
  --panel-bg-2: #1e2030;
  --border: #363a4f;
  --border-soft: #494d64;
  --fg: #cad3f5;
  --kw: #cba6f7;
  --str: #a6e3a1;
  --num: #89b4fa;
  --cmt: #6e738d;
  --meth: #89dceb;
  --field: #f5c2e7;
  --gutter-bg: #181825;
  --gutter-fg: #585b70;
  --line-current: #2a2a3f;
  --sel-blue: #3d4463;
  --run-green: #a6e3a1;
  --run-green-hi: #94e2d5;
  --err-red: #f38ba8;
  --ok-green: #a6e3a1;

  /* === Light dopamine app chrome === */
  --bg-0: #f5f3ff;
  --card-bg: #ffffff;
  --card-border: rgba(109, 40, 217, 0.12);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 14px 42px rgba(109,40,217,0.10);
  --card-fg: #0f0a1e;

  --text-0: #0f0a1e;
  --text-1: #2d2852;
  --text-2: #5f5b7a;
  --text-3: #8f8aa8;

  --accent-violet: #7c3aed;
  --accent-indigo: #6366f1;
  --accent-sky: #0284c7;
  --accent-emerald: #059669;
  --accent-amber: #d97706;
  --accent-rose: #e11d48;

  --accent: #7c3aed;
  --accent-1: #7c3aed;
  --accent-2: #a855f7;
  --accent-3: #0284c7;

  --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  --heading-gradient: linear-gradient(135deg, #1e1b4b 0%, #5b21b6 48%, #7c3aed 100%);

  --accent-gold: #d97706;
  --xp-color: #d97706;

  --success: #059669;
  --error: #e11d48;
  --success-grad: linear-gradient(135deg, #10b981, #059669);

  --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --ui: 'Inter', system-ui, -apple-system, sans-serif;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--ui);
  background: var(--bg-0);
  color: var(--card-fg);
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100vw;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Aurora sutil en claro */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 45% at 5% -5%, rgba(139,92,246,0.15) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 95% 5%, rgba(14,165,233,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 100%, rgba(236,72,153,0.08) 0%, transparent 55%);
  pointer-events: none;
}

main { max-width: 1080px; margin: 0 auto; padding: 0 20px 64px; }