@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
  ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
  img, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  a { color: inherit; }
  [hidden] { display: none !important; }
}

@layer base {
  html { background: var(--bg); }
  body {
    min-height: 100dvh;
    font-family: var(--font-ui);
    font-size: var(--fs-md);
    line-height: 1.45;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
  }
  h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
  p { text-wrap: pretty; }
  :focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
  [tabindex='-1']:focus { outline: none; }
  ::selection { background: var(--accent-soft); }

  .app { min-height: 100dvh; }
  .boot { display: grid; place-items: center; min-height: 100dvh; }
  .boot__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); animation: boot 1s var(--ease) infinite alternate; }
  @keyframes boot { from { transform: scale(0.6); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
  .noscript { padding: var(--s5); text-align: center; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  }
}

@layer utilities {
  .sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .muted { color: var(--ink-2); }
  .small { font-size: var(--fs-xs); }
}