:root{
  --bg:#FBF6EE; --paper:#FFFFFF; --ink:#2A2016; --dim:#7C6A54;
  --line:rgba(70,45,20,.12); --accent:#C07726; --accent-h:#A9661C;
  --soft:rgba(192,119,38,.10); --on-accent:#fff;
  --wrap:1080px; --measure:68ch;
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#17130E; --paper:#221B13; --ink:#F3E9DC; --dim:#B0997E;
  --line:rgba(240,190,120,.14); --accent:#F0A93B; --accent-h:#F7BE5E;
  --soft:rgba(240,169,59,.13); --on-accent:#231404;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-h);text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:600}
h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:600;margin-top:0}
h3{font-size:1.12rem;font-weight:600}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}
li{margin:.3em 0}
code{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  font-size:.9em;background:var(--soft);padding:.1em .35em;border-radius:4px}
kbd{font-family:inherit;font-size:.82em;line-height:1;display:inline-block;
  border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;
  padding:.25em .45em;background:var(--paper);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.dim{color:var(--dim)}
.sm{font-size:.9rem}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--paper);padding:8px 14px;border-radius:8px;z-index:9}

.top{position:sticky;top:0;z-index:8;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:18px;height:62px}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:600;font-size:1.15rem}
.brand:hover{text-decoration:none}
.brand-sm{font-size:1rem}
.logo{display:block;flex:0 0 auto}
.l-accent{fill:var(--accent)} .l-ink{fill:var(--ink)} .l-paper{fill:var(--bg)}
.nav{display:flex;gap:18px;margin-left:auto}
.nav a{color:var(--dim);font-size:.95rem}
.nav a:hover{color:var(--ink);text-decoration:none}
.top-act{display:flex;align-items:center;gap:10px}
.lang{color:var(--dim);font-size:.85rem;border:1px solid var(--line);
  border-radius:8px;padding:4px 8px}
.lang:hover{color:var(--ink);text-decoration:none}
@media (max-width:760px){.nav{display:none}.top-act{margin-left:auto}}

.btn{display:inline-block;background:var(--accent);color:var(--on-accent);
  border-radius:12px;padding:13px 22px;font-weight:600;transition:background .15s}
.btn:hover{background:var(--accent-h);color:var(--on-accent);text-decoration:none}
.btn-sm{padding:8px 14px;border-radius:10px;font-size:.92rem}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--soft);color:var(--ink)}

.hero{padding:clamp(48px,9vw,104px) 0 clamp(36px,6vw,64px)}
.hero p.lead{font-size:clamp(1.05rem,2.2vw,1.28rem);color:var(--dim);max-width:34em;margin-bottom:1.6em}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.tag{display:inline-block;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);background:var(--soft);border-radius:99px;padding:5px 12px;margin-bottom:18px}

section{padding:clamp(36px,6vw,68px) 0}
section.alt{background:var(--paper);border-block:1px solid var(--line)}
.lede{max-width:var(--measure);color:var(--dim);margin-bottom:2em}

.steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));counter-reset:s}
.step{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:22px}
section.alt .step{background:var(--bg)}
.step h3{margin-bottom:.35em}
.step .n{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:9px;background:var(--soft);color:var(--accent);font-weight:600;margin-bottom:12px}

.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px}
section.alt .card{background:var(--bg)}
.card h3{margin-bottom:.3em}
.card p{margin:0;color:var(--dim);font-size:.96rem}

.note{border-left:3px solid var(--accent);background:var(--soft);
  border-radius:0 12px 12px 0;padding:14px 18px;margin:1.5em 0}
.note p:last-child{margin:0}

.slab{background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:clamp(22px,4vw,36px);max-width:var(--measure)}

.docs{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding-top:32px}
@media (min-width:1000px){.docs{grid-template-columns:240px minmax(0,1fr);gap:48px}
  .toc{position:sticky;top:86px;align-self:start;max-height:calc(100vh - 110px);overflow:auto}}
.toc ol{list-style:none;margin:0;padding:0;font-size:.94rem}
.toc li{margin:.15em 0}
.toc a{color:var(--dim);display:block;padding:5px 10px;border-radius:8px}
.toc a:hover{background:var(--soft);color:var(--ink);text-decoration:none}
.toc .toc-h{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--dim);padding:0 10px;margin-bottom:8px}
.doc{max-width:var(--measure)}
.doc h2{margin-top:0;padding-top:14px}
.doc section{padding:0 0 34px;scroll-margin-top:80px}
.doc dl{margin:0 0 1em}
.doc dt{font-weight:600;margin-top:.9em}
.doc dd{margin:.15em 0 0;color:var(--dim)}
.doc table{border-collapse:collapse;width:100%;font-size:.95rem;margin:0 0 1em}
.doc th,.doc td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{color:var(--dim);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}

.foot{border-top:1px solid var(--line);padding:34px 0 26px;margin-top:20px}
.foot-in{display:flex;gap:26px;flex-wrap:wrap;justify-content:space-between}
.foot-nav{display:flex;flex-direction:column;gap:6px;font-size:.95rem}
.foot-nav a{color:var(--dim)}
.foot-copy{margin-top:22px}