*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #f8fafc;
  --white: #ffffff;
  --surface: #f1f5f9;
  --surface2: #e8edf3;
  --border: #e2e8f0;
  --border2: #cbd5e1;
  --border3: #94a3b8;
  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --text4: #64748b;
  --accent: #2563eb;
  --accent2: #1d4ed8;
  --accent-soft: #eff6ff;
  --accent-softer: #f0f7ff;
  --success: #059669;
  --success-soft: #ecfdf5;
  --success-bg: #dcfce7;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --danger-bg: #fee2e2;
  --warning: #d97706;
  --warning-soft: #fffbeb;
  --warning-bg: #fef3c7;
  --code-bg: #0f172a;
  --code-surface: #1e293b;
  --sidebar-w: 260px;
  --topbar-h: 60px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { color: inherit; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes scoreCount {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes barGrow {
  from { width: 0; }
}

@keyframes checkPop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes dropBounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.fade-up    { animation: fadeUp 0.5s ease both; }
.fade-up-d1 { animation-delay: 0.1s; }
.fade-up-d2 { animation-delay: 0.2s; }
.fade-up-d3 { animation-delay: 0.3s; }