*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  background:
    radial-gradient(1200px 600px at 85% -10%, var(--accent-soft), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-size:15px;
  line-height:1.5;
  transition:background-color .35s var(--ease), color .35s var(--ease);
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, black 40%, transparent 100%);
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;margin:0}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--accent);color:var(--accent-contrast)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--text-faint);border:3px solid transparent;background-clip:padding-box}

.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.muted{color:var(--text-dim)}
.faint{color:var(--text-faint)}
.serif{font-family:var(--font-display)}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.icon{width:1em;height:1em;display:inline-block;vertical-align:-.15em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Respect prefers-reduced-motion: collapse every animation/transition to
   near-zero. State changes still happen, they just stop moving. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}
