:root{
  --bg:#FBF8F2; --surface:#FFFFFF; --surface-2:#F5F0E7;
  --ink:#29241D; --ink-soft:#6A6154; --line:#E7DFD1;
  --primary:#345A6B; --primary-ink:#274653; --primary-soft:#E9F0F1;
  --sage:#5F7E5A; --sage-soft:#EAF1E6;
  --fd:'Newsreader', Georgia, 'Times New Roman', serif;
  --fb:'Instrument Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#16140F; --surface:#201D16; --surface-2:#26221A;
  --ink:#ECE5D8; --ink-soft:#A79E8D; --line:#332E24;
  --primary:#84AABC; --primary-ink:#B7D2DE; --primary-soft:#1E2930;
  --sage:#9DBB93; --sage-soft:#1C2720;
}}
:root[data-theme="dark"]{
  --bg:#16140F; --surface:#201D16; --surface-2:#26221A;
  --ink:#ECE5D8; --ink-soft:#A79E8D; --line:#332E24;
  --primary:#84AABC; --primary-ink:#B7D2DE; --primary-soft:#1E2930;
  --sage:#9DBB93; --sage-soft:#1C2720;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--fb); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
.wrap{max-width:660px; margin:0 auto; padding:0 24px}
h1,h2{font-family:var(--fd); font-weight:500; line-height:1.18; margin:0; letter-spacing:-.012em; text-wrap:balance}
h1{font-size:clamp(28px,4.6vw,40px)}
h2{font-size:21px; font-weight:600; margin-top:38px}
p,ul{margin:14px 0 0}
ul{padding-left:22px}
li{margin-top:8px}
p,li{color:var(--ink); max-width:64ch}
a{color:var(--primary-ink)}
.nav{border-bottom:1px solid var(--line); background:var(--bg)}
.nav-in{max-width:660px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:9px; font-family:var(--fd); font-size:19px; font-weight:600; color:var(--ink); text-decoration:none}
.brand .mk{color:var(--sage); display:grid; place-items:center}
.iconbtn{background:transparent; border:1px solid var(--line); color:var(--ink-soft); width:36px; height:36px; border-radius:9px; cursor:pointer; display:grid; place-items:center}
.iconbtn:hover{color:var(--ink); border-color:var(--ink-soft)}
.head{padding:52px 0 8px}
.updated{color:var(--ink-soft); font-size:14.5px; margin-top:12px}
.callout{background:var(--sage-soft); border:1px solid color-mix(in srgb,var(--sage) 32%,var(--line)); border-radius:12px; padding:20px 22px; margin-top:26px}
.callout p{margin-top:0; font-size:16px}
.callout p + p{margin-top:10px}
.note{background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-top:22px; font-size:15px; color:var(--ink-soft)}
.note p{color:var(--ink-soft); font-size:15px; margin-top:0}
footer{border-top:1px solid var(--line); margin-top:56px; padding:30px 0 60px; color:var(--ink-soft); font-size:14px}
footer a{color:var(--ink-soft); text-decoration:none; margin-right:18px}
footer a:hover{color:var(--ink); text-decoration:underline}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px; border-radius:4px}