@view-transition { navigation: auto; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, video { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  a { color: inherit; text-decoration: none; }
  ol[role="list"], ul[role="list"] { list-style: none; padding: 0; }
  :where(h1, h2, h3, h4, p) { overflow-wrap: break-word; }
  fieldset { border: 0; padding: 0; min-inline-size: 0; }
}

@layer base {
  html { scroll-padding-block-start: calc(var(--sb-topbar) + var(--sb-space-4)); }

  body {
    min-block-size: 100dvh;
    font-family: var(--sb-font);
    font-size: var(--sb-fs-md);
    line-height: 1.5;
    color: var(--sb-ink);
    background-color: var(--sb-bg);
    -webkit-font-smoothing: antialiased;
  }

  h1 { font-size: var(--sb-fs-3xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
  h2 { font-size: var(--sb-fs-xl); font-weight: 700; line-height: 1.3; }
  h3 { font-size: var(--sb-fs-lg); font-weight: 700; line-height: 1.35; }

  :focus-visible { outline: 3px solid var(--sb-focus); outline-offset: 2px; }
  ::selection { background: var(--sb-teal-surface); }

  .sb-skip-link {
    position: absolute;
    z-index: 200;
    inset-inline-start: var(--sb-space-4);
    inset-block-start: -100px;
    padding: var(--sb-space-2) var(--sb-space-4);
    border-radius: var(--sb-radius-md);
    background: var(--sb-surface);
    color: var(--sb-ink);
    font-weight: 700;
    box-shadow: var(--sb-shadow-lg);
  }
  .sb-skip-link:focus { inset-block-start: var(--sb-space-4); }
}