:root{
  --bg:#111;--panel:rgba(22,22,22,.95);--panel2:rgba(28,28,28,.98);--line:#2e2e2e;
  --text:#e6edf3;--dim:#8a96a1;--amber:#ffb84d;--green:#6fe08a;
  --purple:#8b6cf7;--purple2:#6c4ce0;--glow:rgba(139,108,247,.35);
  --mono:Consolas,"Courier New",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --header-h:60px;
  --footer-h:54px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;overflow-x:hidden}
main{min-height:calc(100vh - var(--header-h) - var(--footer-h) - 1px)}
#bg-canvas{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 20px}

.site-header{position:sticky;top:0;z-index:10;background:rgba(17,17,17,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;justify-self:start;font-family:var(--mono);font-weight:700;font-size:17px}
.brand img{width:28px;height:28px;border-radius:6px}
.crumbs{display:flex;align-items:center;gap:4px;font-size:14px}
.crumbs a{padding:6px 12px;border-radius:8px;color:var(--dim);transition:color .2s,background .2s}
.crumbs a:hover{color:var(--text);background:rgba(255,255,255,.08)}
.crumbs a[aria-current="page"]{color:var(--text);background:rgba(255,255,255,.08)}
.cta{justify-self:end;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:9px;font-size:13px;font-weight:600;color:#fff;background:linear-gradient(135deg,#5865f2,#4752c4);box-shadow:0 0 16px rgba(88,101,242,.4);transition:transform .15s,box-shadow .2s}
.cta:hover{transform:translateY(-1px);box-shadow:0 0 22px rgba(88,101,242,.6)}
.cta svg{width:16px;height:16px;fill:currentColor}

.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 22px;border-radius:12px;font:600 14px var(--sans);color:var(--text);background:var(--panel2);border:1px solid var(--line);cursor:pointer;transition:filter .2s}
.btn.primary{border-color:var(--purple2);background:linear-gradient(135deg,var(--purple),var(--purple2));box-shadow:0 0 22px var(--glow)}
.btn:hover{filter:brightness(1.12)}
.tag{display:inline-block;padding:2px 10px;font-size:12px;border-radius:20px;border:1px solid var(--line);color:var(--dim)}
.tag.on{color:var(--green);border-color:rgba(111,224,138,.4)}

body[data-page="home"] main{padding:56px 0 72px}
.hero{text-align:center}
.hero .tag{margin-bottom:18px}
.hero h1{margin:0 auto 16px;max-width:20ch;font-family:var(--mono);font-size:clamp(30px,5.4vw,48px);line-height:1.15;letter-spacing:-.5px}
.hero p{margin:0 auto 28px;max-width:52ch;color:var(--dim);font-size:17px}
.hero .btns{justify-content:center}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.steps li{position:relative;padding:22px 22px 22px 70px;background:var(--panel);border:1px solid var(--line);border-radius:16px;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:22px;top:22px;width:32px;height:32px;display:grid;place-items:center;font:700 14px var(--mono);color:var(--purple);border:1px solid var(--purple);border-radius:50%}
.steps b{display:block;margin-bottom:4px;font-family:var(--mono);font-size:16px}
.steps span{color:var(--dim);font-size:14px}

.section{margin-top:64px}
.section h2{margin:0 0 16px;font-family:var(--mono);font-size:22px}
.section>p{max-width:64ch;margin:0;color:var(--dim)}
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.faq>div{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:16px}
.faq h3{margin:0 0 6px;font:700 16px var(--mono)}
.faq p{margin:0;color:var(--dim);font-size:14px}

.prose{max-width:760px;padding-top:48px;padding-bottom:72px}
.prose h1{margin:0 0 16px;font-family:var(--mono);font-size:clamp(26px,4.5vw,36px);line-height:1.2}
.prose h2{margin:32px 0 10px;font-family:var(--mono);font-size:20px}
.prose p,.prose li{color:var(--dim);font-size:15px}
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 12px;padding-left:22px}
.prose li{margin-bottom:6px}
.prose li b{color:var(--text)}
.prose a{color:var(--purple);text-decoration:underline;text-underline-offset:3px}
.prose code{padding:2px 6px;font:13px var(--mono);color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:6px}
.prose pre{margin:0 0 14px;padding:14px;overflow-x:auto;background:var(--panel2);border:1px solid var(--line);border-radius:12px}
.prose pre code{padding:0;border:0;background:none}
.prose .btns{margin:20px 0}
.prose h3{margin:18px 0 6px;font-family:var(--mono);font-size:16px}
.prose table{display:block;max-width:100%;overflow-x:auto;margin:0 0 14px;border-collapse:collapse}
.prose th,.prose td{padding:8px 12px;border:1px solid var(--line);text-align:left;vertical-align:top;font-size:14px;color:var(--dim)}
.prose th{color:var(--text);background:var(--panel2);font-family:var(--mono);font-weight:600}
.muted{color:var(--dim);font-size:13px}

.site-footer{border-top:1px solid var(--line);background:rgba(17,17,17,.88)}
.site-footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;min-height:calc(var(--footer-h) - 1px);padding-top:12px;padding-bottom:12px;font-size:13px;color:var(--dim)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.site-footer a{transition:color .2s}
.site-footer a:hover{color:var(--text)}

@media(max-width:800px){
  .steps,.faq{grid-template-columns:1fr}
  .section{margin-top:48px}
}
@media(max-width:640px){
  .nav{grid-template-columns:auto 1fr auto;gap:8px}
  .crumbs{justify-self:end;gap:0;font-size:13px}
  .crumbs a{padding:6px 9px}
  .cta{padding:8px}
  .cta span{display:none}
}
@media(max-width:480px){.brand span{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

html{scrollbar-width:thin;scrollbar-color:#3a3a46 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:#2e2e38;border-radius:10px;border:3px solid var(--bg);transition:background .2s}
::-webkit-scrollbar-thumb:hover{background:var(--purple)}
::-webkit-scrollbar-thumb:active{background:var(--purple2)}