@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  :where(ul, ol)[role="list"] { list-style: none; margin: 0; padding: 0; }
  [hidden] { display: none !important; }
}

@layer base {
  html { background: var(--bg); }
  body {
    min-height: 100dvh;
    background: var(--bg);
    color: var(--fg-2);
    font: 400 var(--fs-md) / 1.6 var(--font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3, h4 { color: var(--fg); margin: 0; font-weight: 800; letter-spacing: var(--track-tight); line-height: 1.08; text-wrap: balance; }
  p { margin: 0; text-wrap: pretty; }
  a { color: var(--fg); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
  a:hover { text-decoration-color: currentColor; }
  code, kbd, samp, .mono { font-family: var(--mono); font-size: .9em; }
  ::selection { background: color-mix(in oklch, var(--grad-b) 30%, transparent); }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
  main:focus { outline: none; }
  hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
}

@layer utilities {
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dim { color: var(--muted); }
  .grad-text {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .skip {
    position: fixed; left: 12px; top: -48px; z-index: 100;
    padding: 8px 14px; border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-fg);
    font-weight: 700; text-decoration: none; transition: top var(--t-fast);
  }
  .skip:focus { top: 12px; }
}