@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
  ul, ol { list-style: none; }
  button, input, select, textarea { font: inherit; color: inherit; }
  img, svg { display: block; max-width: 100%; }
  table { border-collapse: collapse; width: 100%; }
  a { color: inherit; text-decoration: none; }
  summary { cursor: pointer; list-style: none; }
  summary::-webkit-details-marker { display: none; }
}

@layer base {
  html, body { height: 100%; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs-md);
    line-height: 1.5;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
  }
  h1 { font-size: var(--fs-2xl); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
  h2 { font-size: var(--fs-xl); line-height: 1.3; font-weight: 600; text-wrap: balance; }
  h3 { font-size: var(--fs-lg); line-height: 1.35; font-weight: 600; }
  h4 { font-size: var(--fs-md); font-weight: 600; }
  /* Visual size classes: card and modal titles are h2 in the outline but h3 in size, below the section headings */
  .h2 { font-size: var(--fs-xl); line-height: 1.3; }
  .h3 { font-size: var(--fs-lg); line-height: 1.35; }
  .h4 { font-size: var(--fs-md); line-height: 1.4; }
  p { text-wrap: pretty; }
  a:not([class]) { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
  a:not([class]):hover { color: var(--primary-hover); }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
  /* Labels that stand in for a visually hidden control show its keyboard focus */
  #ann-hide:focus-visible ~ .app .topbar label[for="ann-hide"], #ann-hide:focus-visible ~ .auth label[for="ann-hide"] { outline: 2px solid var(--focus); outline-offset: 2px; }
  input[type="file"]:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
  code, .mono { font-family: var(--mono); font-size: 0.92em; }
  .num { font-variant-numeric: tabular-nums; }
  .muted { color: var(--muted); }
  .faint { color: var(--faint); }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ph { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
  .ph-sm { width: 1em; height: 1em; }
  .ph-lg { width: 1.5em; height: 1.5em; }
  /* Hover and colour transitions outside the motion block also stop when the person asks for less motion */
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
}