:root{--accent:#1F6F4A;--accent-bright:#17573A;--paper:#F7F4EE;--card:#FFFDF9;--ink:#22201C;--clay:#B85C38}
:root{
  --accent:#1F6F4A; --accent-bright:#17573A; --radius:14px;
  /* palette reference */
  --void:#F7F4EE; --void-2:#F2EEE6; --panel:#FFFDF9; --panel-2:#F2EEE6;
  --fg-1:#22201C; --fg-2:#4A4740; --fg-3:#5E5B54; --fg-4:#5E5B54; --fg-5:#6E6A5F;
  --lime:#1F6F4A; --alert:#B04A2F;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#F7F4EE;}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:#22201C;}
::selection{background:rgba(31,111,74,0.28);color:#22201C;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-bright);}
img{max-width:100%;}
button{font:inherit;}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important;}}
html{scroll-behavior:smooth;}

/* ---- doc reader ---- */
.doc-content h1{font-family:'Archivo',sans-serif;font-weight:700;font-size:34px;letter-spacing:-0.02em;margin:0 0 10px;color:#22201C;line-height:1.1;}
.doc-content h2{font-family:'Archivo',sans-serif;font-weight:700;font-size:24px;letter-spacing:-0.01em;margin:44px 0 14px;color:#22201C;padding-top:28px;border-top:1px solid rgba(34,32,28,0.11);scroll-margin-top:84px;}
.doc-content h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;margin:28px 0 10px;color:#22201C;}
.doc-content p{font-size:16px;line-height:1.7;color:#4A4740;margin:0 0 16px;}
.doc-content strong{color:#22201C;font-weight:700;}
.doc-content em{color:#4A4740;font-style:italic;}
.doc-content a{color:var(--accent);}
.doc-content ul,.doc-content ol{margin:0 0 18px;padding-left:22px;}
.doc-content li{font-size:16px;line-height:1.6;color:#4A4740;margin:0 0 8px;}
.doc-content blockquote{margin:0 0 20px;padding:6px 0 6px 20px;border-left:3px solid var(--accent);color:#22201C;font-size:17px;line-height:1.55;}
.doc-content code{font-family:'JetBrains Mono',monospace;font-size:13px;background:#F2EEE6;padding:2px 6px;border-radius:5px;color:#4A4740;}
.doc-content hr{border:none;border-top:1px solid rgba(34,32,28,0.11);margin:34px 0;}
.doc-content table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:14px;}
.doc-content th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent);padding:10px 12px;border-bottom:1px solid rgba(34,32,28,0.22);}
.doc-content td{padding:10px 12px;border-bottom:1px solid rgba(34,32,28,0.08);color:#4A4740;vertical-align:top;line-height:1.5;}
.doc-wrap{display:grid;grid-template-columns:210px minmax(0,1fr);gap:48px;max-width:1000px;margin:0 auto;padding:48px 40px 96px;}
.doc-toc{position:sticky;top:84px;align-self:start;}
.doc-toc .toc-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;color:var(--accent);text-transform:uppercase;margin-bottom:14px;}
.doc-toc a{display:block;font-size:13px;color:#5E5B54;padding:6px 0 6px 14px;border-left:1px solid rgba(34,32,28,0.14);line-height:1.45;}
.doc-toc a:hover{color:var(--accent);border-left-color:var(--accent);}
.doc-pn{display:flex;gap:16px;margin-top:52px;padding-top:32px;border-top:1px solid rgba(34,32,28,0.11);}
.doc-pn a{flex:1;min-width:0;border:1px solid rgba(34,32,28,0.14);border-radius:14px;padding:18px 22px;color:#22201C;}
.doc-pn a:hover{border-color:var(--accent);}
@media (max-width:880px){.doc-wrap{grid-template-columns:1fr;gap:0;}.doc-toc{display:none;}}

/* ---- responsive ---- */
@media (max-width:900px){
  div[style*="grid-template-columns:1.02fr"],div[style*="grid-template-columns:1.05fr"],div[style*="grid-template-columns:1fr 0.85fr"],div[style*="grid-template-columns:auto 1fr"],div[style*="grid-template-columns:1fr 1fr"],div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important;}
  nav[style*="position:sticky"]{padding-left:20px !important;padding-right:20px !important;}
  nav[style*="position:sticky"] > div[style*="gap:34px"]{gap:16px !important;flex-wrap:wrap;justify-content:flex-end;}
}
@media (max-width:640px){
  section > div[style*="padding:"], footer > div[style*="padding:"], main[style*="padding:"]{padding-left:22px !important;padding-right:22px !important;}
  h1[style]{font-size:clamp(38px,10vw,60px) !important;}
  nav[style*="position:sticky"] > div[style*="gap:34px"] a[style*="font-size:14px"]{font-size:13px !important;}
}