/* Tokens from docs/design/DESIGN-TOKENS.md ("Margin Notes, warmed"). System fonts until the self-hosted Noto subsets ship with M3. */
:root {
  --bg: #F8F5EF; --surface: #FFFFFF; --ink: #1D1B18; --ink-2: #46423C; --ink-3: #57524B;
  --accent: #2D3F8C; --rule-strong: #8C857A;
  --font-sans: "Noto Sans", system-ui, Roboto, "Segoe UI", "Nirmala UI", sans-serif;
  --font-serif: "Noto Serif", Georgia, "Nirmala UI", serif;
  --radius-lg: 12px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #131416; --surface: #1B1C1F; --ink: #EDEAE4; --ink-2: #C9C5BE; --ink-3: #ADA9A2; --accent: #A9B8F2; --rule-strong: #6E6A64; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--font-sans); }
a { color: var(--accent); }
.bar { max-width: 46rem; margin: 0 auto; padding: 1.25rem 1rem; }
.wordmark { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); text-decoration: none; font: 600 1.25rem/1 var(--font-serif); letter-spacing: -.01em; }
.mark { width: 1.1rem; height: 1.3rem; color: var(--accent); }
main { max-width: 46rem; margin: 0 auto; padding: 1rem 1rem 3rem; }
.status { display: inline-flex; align-items: center; gap: .5rem; margin: 1.5rem 0 0; color: var(--ink-2); font-weight: 500; font-size: .9375rem; }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); }
h1 { font: 500 clamp(1.875rem, 1.5rem + 2vw, 2.75rem)/1.15 var(--font-serif); letter-spacing: -.01em; margin: .75rem 0 1rem; text-wrap: balance; }
.lead { color: var(--ink-2); font-size: 1.125rem; margin: 0 0 2rem; }
h2 { font: 600 1.125rem/1.3 var(--font-serif); margin: 0 0 .75rem; }
.panel { background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); padding: 1.25rem 1.25rem .5rem; margin: 0 0 2rem; }
.panel ul { margin: 0; padding: 0; list-style: none; }
.panel li { padding: 0 0 .9rem 1.6rem; position: relative; }
.panel li::before { content: ""; position: absolute; left: 0; top: .55em; width: .7rem; height: .4rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.note p { margin: 0 0 2rem; }
.fine { color: var(--ink-3); font-size: .9375rem; font-weight: 500; border-top: 1px solid var(--rule-strong); padding-top: 1rem; }
footer { max-width: 46rem; margin: 0 auto; padding: 0 1rem 2rem; color: var(--ink-3); font-size: .9375rem; font-weight: 500; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }