*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--bg); }
body { min-height: 100vh; }
body {
  background: var(--bg);
  color: var(--ink);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; border-radius: 6px; }

.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; 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; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Page-to-page motion: the new view rises in while the old one settles back. */
::view-transition-old(page) { animation: page-out var(--base) var(--ease) both; }
::view-transition-new(page) { animation: page-in var(--slow) var(--ease-out) both; }
@keyframes page-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }