:root {
  color-scheme: light;
  --page: #F6F5F1;
  --surface: #FFFFFF;
  --ink: #19252A;
  --muted: #526166;
  --forest: #176B58;
  --line: #DAE3DC;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #10191A;
  --surface: #1B282B;
  --ink: #F3F6F1;
  --muted: #B9C9C6;
  --forest: #8ADDC1;
  --line: #344746;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #10191A;
    --surface: #1B282B;
    --ink: #F3F6F1;
    --muted: #B9C9C6;
    --forest: #8ADDC1;
    --line: #344746;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--forest); }
a:focus-visible { outline: 3px solid var(--forest); outline-offset: 4px; }
.wrap { width: min(760px, calc(100% - 40px)); margin: 0 auto; }
.header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 24px; font-weight: 760; letter-spacing: -.065em; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; background: var(--forest); -webkit-mask: url('/assets/mark.svg') center / contain no-repeat; mask: url('/assets/mark.svg') center / contain no-repeat; }
.back { font-size: 14px; font-weight: 650; text-decoration: none; }
main { padding: 74px 0 100px; }
.eyebrow { color: var(--forest); font-size: 12px; font-weight: 790; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 20px 0 15px; font-size: clamp(42px, 7vw, 64px); line-height: 1.06; letter-spacing: -.065em; }
.updated { margin: 0 0 42px; color: var(--muted); font-size: 14px; }
.lead { color: var(--muted); font-size: 20px; line-height: 1.55; }
section { padding: 28px 0; border-top: 1px solid var(--line); }
h2 { margin: 0 0 15px; font-size: 23px; letter-spacing: -.04em; }
p, li { font-size: 16px; line-height: 1.65; }
p { margin: 0 0 14px; }
ul, ol { padding-left: 24px; margin: 0 0 14px; }
li + li { margin-top: 8px; }
.note { padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.note p:last-child, section p:last-child { margin-bottom: 0; }
.footer { padding: 24px 0 35px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
@media (max-width: 560px) { .header { min-height: 75px; } main { padding: 50px 0 75px; } }
