:root { --bg:#FBF8F4; --surface:#FFFDFA; --ink:#23212B; --ink2:#726E7E; --rule:#EFE9E0; --accent:#5A50BA; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#101426; --surface:#161B30; --ink:#F1EDE5; --ink2:#A8A498; --rule:#2A2F45; --accent:#E4C88F; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
main { max-width:44rem; margin:0 auto; padding:3rem 1.25rem 5rem; }
h1 { font-size:1.9rem; line-height:1.2; margin:0 0 .35rem; letter-spacing:-.01em; }
h2 { font-size:1.15rem; margin:2.4rem 0 .6rem; letter-spacing:-.005em; }
h3 { font-size:1rem; margin:1.8rem 0 .4rem; }
.updated { color:var(--ink2); font-size:.9rem; margin:0 0 2rem; }
p, li { color:var(--ink); }
a { color:var(--accent); }
hr { border:0; border-top:1px solid var(--rule); margin:2.5rem 0; }
nav { font-size:.9rem; margin-bottom:2.5rem; }
nav a { margin-right:1rem; }
.note { background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:1rem 1.15rem; }
footer { color:var(--ink2); font-size:.85rem; margin-top:3.5rem; border-top:1px solid var(--rule); padding-top:1.25rem; }

/* Page transitions: the native cross-document View Transitions API. Every
   page that links this sheet opts in; a browser without it simply loads the
   page. One cross-fade, 520 ms: the old page fades out and the new page
   fades in with the SAME curve and the SAME duration, and nothing moves.
   That is not fussiness — the browser composites the two snapshots with
   plus-lighter, so opacities that sum to one at every instant give a
   constant-brightness dissolve, and any mismatch (a shorter fade-out, a
   slide on the new page) reads as the background flashing darker mid-way,
   which is exactly what the first cut did. The nav keeps its own snapshot
   so the wordmark and links stay put. */
html { background: var(--bg); }
@view-transition { navigation: auto; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
::view-transition-old(root) { animation: vt-out .52s cubic-bezier(.45, 0, .55, 1) both; }
::view-transition-new(root) { animation: vt-in .52s cubic-bezier(.45, 0, .55, 1) both; }
nav { view-transition-name: nav; }
::view-transition-group(nav) { animation-duration: 0s; }
::view-transition-old(nav) { animation: vt-out .52s cubic-bezier(.45, 0, .55, 1) both; }
::view-transition-new(nav) { animation: vt-in .52s cubic-bezier(.45, 0, .55, 1) both; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
}