@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; }
  body {
    min-height: 100dvh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--fs-md);
    line-height: var(--lh);
    font-feature-settings: 'cv11', 'ss01', 'tnum' 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
  }
  img, svg, video, canvas { display: block; max-width: 100%; }
  svg { flex-shrink: 0; }
  button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  button:disabled { cursor: not-allowed; }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: 3px; }
  h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; text-wrap: balance; }
  h1 { font-size: var(--fs-xl); }
  h2 { font-size: var(--fs-lg); }
  h3 { font-size: var(--fs-md); }
  p { text-wrap: pretty; }
  code, kbd, pre, samp, .mono { font-family: var(--font-mono); font-size: 0.92em; }
  pre { white-space: pre-wrap; word-break: break-word; }
  [hidden] { display: none !important; }
  ::selection { background: var(--accent-soft); color: var(--text); }
  :focus { outline: none; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
  input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; }
  .icon { width: 16px; height: 16px; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .icon-sm { width: 14px; height: 14px; }
  .icon-lg { width: 20px; height: 20px; }
  * { scrollbar-width: thin; scrollbar-color: var(--gray-6) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--gray-6); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--gray-7); }
  ::-webkit-scrollbar-track { background: transparent; }
  .skip {
    position: fixed; top: calc(var(--safe-t) + 8px); left: 8px; z-index: 1000;
    padding: 8px 12px; border-radius: var(--r-sm); background: var(--primary); color: var(--on-primary);
    transform: translateY(-200%); transition: transform var(--dur) var(--ease);
  }
  .skip:focus { transform: none; }
  .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  @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 base {
  dialog:focus, dialog:focus-visible { outline: none; }
}