:root{
  --bone:#f8f8f6; --paper:#ffffff; --stone:#efeeeb;
  --ink:#121212; --graphite:#373734; --ashen:#7b7974;
  --pebble:#9c9a92; --mist:#b7b7b5; --chalk:#e7e6e1;
  --black:#000000; --clay:#d97757;
  --serif:'Source Serif 4', ui-serif, Georgia, 'Times New Roman', serif;
  --sans:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --max:820px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

header.nav{position:sticky;top:0;z-index:50;background:rgba(248,248,246,.9);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--chalk)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px;
  max-width:1200px;margin:0 auto;padding:0 24px}
.logo{display:flex;align-items:baseline;gap:8px;font-family:var(--serif);font-size:20px;
  color:var(--ink);text-decoration:none;flex-shrink:0}
.logo .dot{width:7px;height:7px;border-radius:50%;background:var(--clay);display:inline-block}
@media(max-width:520px){.logo{font-size:17px}}
.nav-back{font-size:15px;font-weight:500;color:var(--graphite);text-decoration:none;
  padding:8px 14px;border-radius:8px;transition:background-color .2s ease,color .2s ease}
.nav-back:hover{background:var(--stone);color:var(--ink)}

.doc{padding:72px 0 88px}
.eyebrow{display:block;font-size:11px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ashen);margin-bottom:18px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,5vw,48px);line-height:1.14;margin:0 0 16px}
h2{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.24;
  margin:48px 0 14px;padding-top:28px;border-top:1px solid var(--chalk)}
h2:first-of-type{border-top:0;padding-top:0;margin-top:40px}
h3{font-family:var(--sans);font-size:15px;font-weight:550;margin:26px 0 8px}
p{margin:0 0 14px;color:var(--graphite);font-size:15px}
.updated{font-size:12px;letter-spacing:.04em;color:var(--pebble);margin-bottom:40px}
ul{margin:0 0 16px;padding-left:20px}
li{margin-bottom:8px;color:var(--graphite);font-size:15px}
strong{font-weight:550;color:var(--ink)}
code{font-size:13px;background:var(--stone);padding:1px 5px;border-radius:4px}
a.inline{color:var(--graphite);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--mist);transition:color .2s ease,text-decoration-color .2s ease}
a.inline:hover{color:var(--ink);text-decoration-color:var(--ink)}

dl.data{margin:22px 0 8px;border-top:1px solid var(--chalk)}
dl.data dt{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ashen);padding-top:18px}
dl.data dd{margin:0;font-size:16px;color:var(--ink);padding:6px 0 18px;border-bottom:1px solid var(--chalk)}

.todo{background:#fdf1ec;border-left:2px solid var(--clay);border-radius:0 8px 8px 0;
  padding:14px 18px;margin:10px 0 24px;font-size:13px;color:#7a4630;line-height:1.55}
.todo strong{color:#7a4630;font-weight:550}

footer{background:var(--black);color:var(--pebble);padding:56px 0 32px;margin-top:48px}
footer .wrap{max-width:1200px}
footer .logo{color:#f8f8f6;margin-bottom:14px}
footer p,footer a{font-size:14px;color:var(--pebble);line-height:1.7;text-decoration:none}
footer a:hover{color:#f8f8f6}
.foot-bottom{border-top:1px solid #1c1c1c;margin-top:32px;padding-top:24px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:#6e6c67}

@media(max-width:640px){.doc{padding:52px 0 68px}h2{font-size:23px;margin-top:38px}}