@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Manrope:wght@400;500;600;700&display=swap');

:root{--paper:#fbfaf6;--surface:#f4f3ed;--ink:#242721;--muted:#687066;--line:#dddcd3;--sage:#52684e;--sage-soft:#e8eee4;--coral:#f15a3a;--blue:#0a66c2;--sans:'Manrope',sans-serif;--title:'DM Serif Display',serif;--mono:'Fira Code','Courier New',monospace}
html[data-theme='dark']{--paper:#171a17;--surface:#222722;--ink:#f3f1e9;--muted:#a8b1a4;--line:#353d35;--sage:#b5c8ad;--sage-soft:#253128;--coral:#ff7356;--blue:#66aef3}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--paper)}body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font-family:var(--sans);transition:.25s}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}button,input{font:inherit}
.topbar{position:fixed;inset:0 0 auto 0;height:66px;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font:21px var(--title)}.brand-mark{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:var(--sage);color:var(--paper);font-family:var(--sans);font-weight:700}.actions{display:flex;align-items:center;gap:12px}.actions a,.actions button{border:0;background:none;color:var(--ink);font-size:13px;cursor:pointer}.actions a{padding:7px 9px;border:1px solid var(--line);border-radius:7px}
.sidebar{position:fixed;inset:66px auto 0 0;width:290px;overflow:auto;padding:26px 22px;border-right:1px solid var(--line);background:var(--paper)}.sidebar .label{color:var(--sage);font-size:10px;font-weight:700;letter-spacing:.12em}.sidebar strong{display:block;margin:8px 0 10px;font:21px var(--title)}.progress{height:5px;background:var(--line);border-radius:4px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:var(--sage)}nav{margin-top:24px}nav button{width:100%;border:0;background:none;color:var(--ink);padding:9px 10px;border-radius:7px;text-align:left;font-size:12px;cursor:pointer}nav button:hover,nav button.active{background:var(--sage-soft);color:var(--sage);font-weight:700}.repo-note{margin-top:22px;padding:16px;border-radius:10px;background:var(--surface);font-size:12px;line-height:1.55}.repo-note b{display:block;margin-bottom:5px}
main{margin-left:290px;padding-top:66px}.hero,.flow,.content,footer{width:min(1080px,calc(100% - 70px));margin-inline:auto}.hero{padding:58px 0 32px}.eyebrow{color:var(--sage);font-size:12px;font-weight:700}.hero h1{max-width:920px;margin:14px 0 12px;font:400 clamp(38px,5vw,64px)/1.04 var(--title);letter-spacing:-.025em}.hero p{max-width:800px;margin:0;color:var(--muted);font-size:17px;line-height:1.65}.hero-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.pill{display:inline-flex;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:12px;background:var(--surface)}
.flow{padding:28px 0 34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.flow h2{margin:0 0 18px;color:var(--sage);font:23px var(--title)}.flow-row{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:center}.step{padding:14px;border:1px solid var(--line);border-radius:9px;background:var(--paper);min-height:88px}.step b{display:block;font-size:12px}.step small{display:block;color:var(--muted);font-size:10px;line-height:1.4;margin-top:5px}.arrow{text-align:center;color:var(--coral);font-weight:700}
.content{display:grid;grid-template-columns:minmax(0,760px) 210px;gap:58px;padding:52px 0 80px}.article{font-size:15px;line-height:1.78}.article h2{scroll-margin-top:88px;margin:60px 0 16px;font:30px/1.2 var(--title)}.article h2:first-child{margin-top:0}.article h3{scroll-margin-top:88px;margin:34px 0 11px;color:var(--sage);font:22px/1.25 var(--title)}.article p,.article li{color:color-mix(in srgb,var(--ink) 88%,var(--muted))}.article ul,.article ol{padding-left:1.5rem}.article blockquote{margin:22px 0;padding:14px 18px;border-left:3px solid var(--coral);border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--coral) 6%,var(--paper));color:var(--muted)}.article pre{overflow:auto;padding:18px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}.article code{font-family:var(--mono);font-size:.9em}.article table{width:100%;border-collapse:collapse;margin:24px 0;font-size:13px}.article th,.article td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.article th{color:var(--sage)}.callout{padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:var(--surface);margin:20px 0}.callout b{color:var(--coral)}
.on-page{position:sticky;top:95px;align-self:start;padding-left:20px;border-left:1px solid var(--line)}.on-page span{display:block;color:var(--sage);font-size:10px;font-weight:700;letter-spacing:.1em;margin-bottom:8px}.on-page button{display:block;width:100%;border:0;background:none;color:var(--muted);padding:6px 0;text-align:left;font-size:11px;cursor:pointer}.on-page button.active{color:var(--sage);font-weight:700}
footer{padding:26px 0 48px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;text-align:center}.mobile{display:none}
@media(max-width:980px){.sidebar{transform:translateX(-100%);transition:.25s;z-index:50}.sidebar.open{transform:translateX(0);box-shadow:20px 0 50px #0004}main{margin-left:0}.content{grid-template-columns:1fr}.on-page{display:none}.mobile{display:inline-block}.flow-row{grid-template-columns:1fr}.arrow{transform:rotate(90deg)}.topbar{padding:0 16px}.brand{font-size:18px}.hero,.flow,.content,footer{width:min(100% - 36px,760px)}}
@media(max-width:600px){.hero{padding-top:38px}.hero h1{font-size:38px}.actions a{display:none}.brand small{display:none}.article{font-size:14px}}