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

:where(h1,h2,h3,p,ul,ol){
  margin:0 0 1rem;
}

img,svg,video{
  display:block;
  max-width:100%;
  height:auto;
}

a{
  color:inherit;
  text-decoration:none;
}

:root{
  --bg:#f7f8fc;
  --tint:#eef2ff;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#5b6474;
  --border:#e5e8f0;
  --primary:#2563eb;
  --primary-contrast:#ffffff;
  --danger:#ef4444;

  --radius:14px;
  --shadow:0 1px 2px rgba(2,6,23,.06), 0 10px 30px rgba(2,6,23,.08);

  --space-1:.25rem; 
  --space-2:.5rem; 
  --space-3:.75rem; 
  --space-4:1rem;
  --space-5:1.25rem; 
  --space-6:1.5rem; 
  --space-8:2rem; 
  --space-10:2.5rem;

  --font: ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;
  --fs: clamp(15px, .9vw + 12px, 18px);
  --lh: 1.6; --fw: 460; --fw-bold: 680;

  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:.18s;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; 
    --tint:#101b35; 
    --surface:#0f182d;
    --text:#e6eaf3; 
    --muted:#9aa6bf; 
    --border:#1f2a45;
    --primary:#3b82f6; 
    --primary-contrast:#0b1220;
    --shadow:0 2px 10px rgba(0,0,0,.45), 0 20px 50px rgba(0,0,0,.35);
  }
}

html{
  color-scheme:light dark;
}

body{
  margin:0; 
  font-family:var(--font); 
  font-size:var(--fs); 
  line-height:var(--lh); 
  color:var(--text);
  background:
    radial-gradient(1200px 600px at -10% -10%, var(--tint), transparent 60%),
    radial-gradient(1200px 600px at 110% 0%, var(--tint), transparent 60%),
    var(--bg);
}

::selection{
  background:rgba(37,99,235,.18);
}

small,.muted{
  color:var(--muted);
}

hr{border:0;
  border-top:1px solid var(--border);
  margin:var(--space-8) 0;
}


.container{
  width:min(1040px, 100% - 2rem); 
  margin-inline:auto;
}

.stack{
  display:grid; 
  gap:var(--space-4);
}

.cluster{
  display:flex; 
  flex-wrap:wrap;
  gap:var(--space-3); 
  align-items:center;
}

.grid{
  display:grid; 
  gap:var(--space-4);
}

.center{
  display:grid; 
  place-items:center;
}

.prose p{
  margin-bottom:var(--space-4)
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}

@media (prefers-reduced-motion: reduce){
  *{
    transition:none!important;
    animation:none!important;
  }
}