:root {
  color-scheme: light;
  --ink: #14243c;
  --muted: #4a5e79;
  --accent: #165edb;
  --line: #b9c8dc;
  --surface: #f3f6fb;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font: 1rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-wrap: anywhere;
}
a { color: var(--accent); text-underline-offset: .2em; touch-action: manipulation; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
a:active { color: var(--ink); }
header, main, footer { width: min(100%, 52rem); margin-inline: auto; }
header, footer {
  padding: 1rem max(1.25rem, env(safe-area-inset-right)) 1rem max(1.25rem, env(safe-area-inset-left));
}
header { padding-top: max(1rem, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; min-height: 44px; align-items: center; font-weight: 750; letter-spacing: -.02em; text-decoration: none; color: var(--ink); }
nav { display: flex; gap: .25rem 1.25rem; flex-wrap: wrap; }
nav a { display: inline-flex; align-items: center; min-height: 44px; }
nav a[aria-current="page"] { font-weight: 700; color: var(--ink); text-decoration-thickness: 2px; }
main { padding: 2rem max(1.25rem, env(safe-area-inset-right)) 2.5rem max(1.25rem, env(safe-area-inset-left)); }
h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); line-height: 1.15; letter-spacing: -.035em; margin: 0 0 1rem; text-wrap: balance; }
h2 { font-size: 1.2rem; line-height: 1.3; margin: 2rem 0 .6rem; }
p { margin: .7rem 0; }
ul, ol { padding-left: 1.4rem; }
li { margin-block: .4rem; }
.intro { font-size: 1.15rem; }
.note { padding: 1rem 1.1rem; background: var(--surface); border-left: 3px solid var(--accent); }
.date, footer { color: var(--muted); font-size: .875rem; }
footer { border-top: 1px solid var(--line); padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
.skip { position: absolute; left: 1rem; top: -5rem; padding: .65rem 1rem; background: #fff; z-index: 1; }
.skip:focus { top: 1rem; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-thickness: 2px; } }