:root {
  --ink: #191913;
  --paper: #f3f0e6;
  --paper-raised: #fffdf6;
  --paper-muted: #e7e2d4;
  --orange: #ff5a36;
  --lime: #c8f45b;
  --teal: #0b7f79;
  --blue: #235ee7;
  --muted: #69685f;
  --line: var(--ink);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 3px 3px 0 var(--ink);
  --shadow-md: 6px 6px 0 var(--ink);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; color: var(--ink); font-family: var(--sans); line-height: 1.55; }
button, input { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--lime); color: var(--ink); }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  transform: translateY(-160%);
  padding: 10px 14px;
  background: var(--ink);
  color: white;
}

.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

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