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

:root {
  --ink: #0A0A0A;
  --lime: #CDFF00;
  --bone: #F5F3EC;
  --bone-warm: #EFEBDD;
  --moss: #0E3D2F;
  --moss-soft: #1B5942;
  --moss-tint: #E7EFE9;
  --lime-soft: #E9F8B3;
  --graphite: #141414;
  --paper: #FFFFFF;
  --success: #22C55E;
  --danger: #EF4444;
  --line-light: rgba(10,10,10,0.08);
  --line-mid: rgba(10,10,10,0.16);
  --muted: rgba(10,10,10,0.55);
  --muted-strong: rgba(10,10,10,0.7);
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}

.page { padding: 16px; max-width: 100%; }

@media (max-width: 540px) {
  .page { padding: 8px; }
}