@font-face {
  font-family: "Archivo";
  src: url("/fonts/Archivo-var.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
:root, :root[data-theme="light"] { --bg: #faf9f6; --fg: #1a1a1a; }
:root[data-theme="dark"] { --bg: #141412; --fg: #ece9e2; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { --bg: #141412; --fg: #ece9e2; }
}
body { font-family: "Archivo", system-ui, sans-serif; background: var(--bg); color: var(--fg); max-width: 65ch; margin: 0 auto; padding: 2rem 1rem; }
a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
.note-row { transition: transform .18s ease; }
.note-row:hover { transform: translateX(4px); }
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.reveal.seen { opacity: 1; transform: none; }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .note-row, .note-row:hover { transform: none; }
}
h1 { font-stretch: 110%; letter-spacing: -0.02em; }
:root { color-scheme: light dark; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
a { transition: text-decoration-thickness .15s ease; }
body { transition: background-color .3s ease, color .3s ease; }
time { font-variant-numeric: tabular-nums; }