:root{--bg:#09090b;--fg:#fafafa;--muted:#a1a1aa;--accent:#2563eb;--border:#1f1f22;color-scheme:dark}
*{box-sizing:border-box}
html, body {margin: 0; height: 100%; overflow: hidden}
body{
  min-height:100dvh;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{
  max-width:68ch;
  margin-inline:auto;
  padding-inline:clamp(16px,3vw,24px);
  margin-block-start:min(8rem,12dvh);
  margin-block-end:min(6rem,10dvh);
}

@media (width <= 768px){
  .wrap{margin-block-start:min(3rem,6dvh);margin-block-end:min(3rem,6dvh)}
}

header{display:flex;align-items:center;gap:.6rem;margin-block-end:1.25rem}
h1{margin:0;font-weight:700;letter-spacing:-.01em;font-size:clamp(36px,5vw,48px);text-wrap:balance}

p{margin:0 0 .9rem}
.lede{font-weight:700;font-size:clamp(18px,2.3vw,20px);margin-block-end:1.8rem}
section{margin-block-start:1.8rem}

.muted,footer,.pill{color:var(--muted)}
a{color:inherit;text-underline-offset:2px}
a:hover{text-decoration:underline}
footer{font-size:.9375rem}

.pill{
  display:inline-block;border:1px solid var(--border);border-radius:999px;
  padding:.25rem .6rem;font-size:.875rem
}
.pill--amber{
  color:#f59e0b;
  border-color:color-mix(in srgb,#f59e0b 35%, transparent);
  background:color-mix(in srgb,#f59e0b 8%, transparent);
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

.fade-in{opacity:0;transform:translateY(2px)}
.in .fade-in{animation:fade .6s ease-out forwards}
@keyframes fade{to{opacity:1;transform:none}}