:root{--bg:#16100e;--side:#1b1310;--pan:#221815;--pan2:#2b1e1a;--ln:#3b2a25;--ln2:#523a33;--tx:#f4e9e3;--mut:#c4b0a7;--co:#ff6f52;--co2:#ff8d75;--ink:#1b0a06;--code:#0f0a09;
--t0:rgba(255,111,82,.26);--t1:rgba(255,178,102,.22);--t2:rgba(255,122,152,.22);--t3:rgba(232,208,172,.17);
--fd:"Funnel Display",system-ui,sans-serif;--fs:"Funnel Sans",system-ui,sans-serif;--fm:"Roboto Mono",ui-monospace,Menlo,monospace;--sw:236px;--r:16px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--tx);font:400 17px/1.65 var(--fs);overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure{margin:0}
a{color:var(--co2);text-underline-offset:3px}
a:hover{color:#ffb3a1}
:focus-visible{outline:2px solid #ffd2c7;outline-offset:3px;border-radius:6px}
code,pre,kbd{font-family:var(--fm)}
.skip{position:absolute;left:12px;top:-80px;z-index:99;background:var(--co);color:var(--ink);padding:12px 18px;border-radius:10px;font-weight:700}
.skip:focus{top:12px;color:var(--ink)}

/* token tape */
.tape{display:flex;gap:4px;height:9px;flex:none}
.tape i{display:block;height:100%;border-radius:3px;background:var(--t0);width:26px}
.tape i:nth-child(4n+2){background:var(--t1);width:14px}
.tape i:nth-child(4n+3){background:var(--t2);width:38px}
.tape i:nth-child(4n){background:var(--t3);width:20px}
.tape i:nth-child(5){width:46px}
.tape i:nth-child(7){width:12px}
.tape.open{width:100%;overflow:hidden}
.tape.open i{flex:none}
.tape.open i:last-child{flex:1;background:linear-gradient(90deg,var(--co),rgba(255,111,82,0));border-radius:3px 0 0 3px}
.tape.dots{height:10px}
.tape.dots i{width:10px!important;border-radius:50%}
.tape.dots i:first-child{background:var(--co)}

/* logo + buttons */
.logo{display:inline-flex;align-items:center;gap:11px;color:var(--tx);text-decoration:none;font:700 1.16rem/1.1 var(--fd);letter-spacing:-.01em;min-height:44px}
.logo:hover{color:var(--tx)}
.mark{flex:none;width:32px;height:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:10px 20px;border-radius:12px;border:1px solid var(--co);background:var(--co);color:var(--ink);font:700 1rem/1.2 var(--fs);text-decoration:none;cursor:pointer;text-align:center;transition:transform .12s,background .12s,box-shadow .12s;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 20px -8px rgba(255,111,82,.7)}
.btn:hover{background:#ff8468;color:var(--ink);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn .ic{width:19px;height:19px;flex:none}
.btn.big{min-height:54px;padding:12px 26px;font-size:1.06rem}
.btn.sm{min-height:44px;padding:8px 14px;font-size:.92rem;border-radius:10px}
.btn.full{width:100%}
.btn.ghost{background:transparent;color:var(--tx);border-color:var(--ln2);box-shadow:none}
.btn.ghost:hover{background:var(--pan2);color:var(--tx);border-color:var(--co)}
.epl{font:500 .7rem/1.2 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:5px}

/* sidebar */
.side{position:fixed;inset:0 auto 0 0;width:var(--sw);background:var(--side);border-right:1px solid var(--ln);display:flex;flex-direction:column;padding:20px 16px 18px;overflow-y:auto;z-index:20}
.side .logo{padding:0 6px;margin-bottom:22px}
.snav{display:flex;flex-direction:column;gap:4px}
.snav a{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:11px;color:var(--mut);text-decoration:none;font-weight:500;border:1px solid transparent}
.snav a:hover{background:var(--pan);color:var(--tx)}
.snav a[aria-current]{background:var(--pan2);color:var(--tx);border-color:var(--ln)}
.snav a[aria-current] .ic{color:var(--co)}
.snav a[aria-current]::after{content:"";margin-left:auto;width:14px;height:8px;border-radius:3px;background:var(--co)}
.side-foot{margin-top:auto;padding-top:20px;display:grid;gap:12px}
.sep{background:var(--code);border:1px solid var(--ln);border-radius:12px;padding:12px}
.sep code,.ep code{display:block;font-size:.76rem;line-height:1.45;color:#ffc7a0;overflow-wrap:anywhere}
.side .btn[aria-current]{box-shadow:0 0 0 3px var(--side),0 0 0 5px var(--co)}
.top,.tabbar{display:none}
.shell{margin-left:var(--sw);min-width:0}
main{display:block;max-width:1204px;margin:0 auto;padding:34px 40px 0}

/* columns + rail */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 316px;column-gap:44px;align-items:start}
.cols>.head{grid-column:1;grid-row:1;min-width:0}
.cols>.rail{grid-column:2;grid-row:1/span 2;align-self:stretch;min-width:0}
.cols>.flow{grid-column:1;grid-row:2;min-width:0}
.rail-in{position:sticky;top:24px;display:grid;gap:14px}
.kcols{grid-template-columns:minmax(0,1fr) 440px}
.rcard{background:var(--pan);border:1px solid var(--ln);border-radius:var(--r);padding:20px}
.rh{font:700 1.08rem/1.25 var(--fd);margin-bottom:8px}
.rp{color:var(--mut);font-size:.95rem;line-height:1.5;margin-bottom:16px}
.meter{padding-top:18px}
.fxs{margin:14px 0 16px}
.fx{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--ln2)}
.fx:last-child{border-bottom:0}
.fx b{font:500 1.28rem/1.1 var(--fm);color:var(--tx);white-space:nowrap}
.fx:first-child b{color:var(--co);font-size:1.7rem}
.fx span{color:var(--mut);font-size:.84rem;line-height:1.3;text-align:right}
.ep{background:var(--code)}
.ep code+.epl{margin-top:12px}
.toc ol{list-style:none;padding:0;margin:0;counter-reset:t;max-height:52vh;overflow-y:auto}
.toc li{counter-increment:t}
.toc a{display:flex;gap:10px;padding:8px 0;color:var(--mut);text-decoration:none;font-size:.93rem;line-height:1.35;border-bottom:1px dashed var(--ln)}
.toc li:last-child a{border-bottom:0}
.toc a::before{content:counter(t,decimal-leading-zero);font:500 .74rem/1.7 var(--fm);color:var(--co2);flex:none}
.toc a:hover{color:var(--tx)}

/* heads */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:500 .78rem/1.3 var(--fm);color:var(--mut);margin-bottom:22px}
.crumbs a{color:var(--mut);text-decoration:none;padding:6px 10px;border:1px solid var(--ln);border-radius:8px;min-height:32px}
.crumbs a:hover{color:var(--tx);border-color:var(--co)}
.crumbs span{padding:6px 10px;border-radius:8px;background:var(--t3);color:var(--tx);overflow-wrap:anywhere}
.crumbs i{width:10px;height:6px;border-radius:2px;background:var(--co);flex:none}
h1{font:800 clamp(2.05rem,4.1vw,3.5rem)/1.22 var(--fd);letter-spacing:-.025em;overflow-wrap:break-word}
.tk{display:inline-block;padding:.02em .2em;margin:.07em -.04em;border-radius:.2em;background:var(--t0)}
.tk1{background:var(--t1)}.tk2{background:var(--t2)}.tk3{background:var(--t3)}
.lead{font-size:1.16rem;line-height:1.6;color:var(--mut);margin-top:20px;max-width:62ch}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font:500 .78rem/1.3 var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--co2);margin-bottom:18px}
.eyebrow::before{content:"";width:22px;height:9px;border-radius:3px;background:var(--co)}
.head{padding-bottom:8px}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.bl{list-style:none;padding:0;margin-top:22px;display:grid;gap:10px}
.bl li{position:relative;padding-left:34px;line-height:1.5}
.bl li::before{content:"";position:absolute;left:0;top:.5em;width:22px;height:9px;border-radius:3px;background:var(--t0)}
.bl li:nth-child(2)::before{background:var(--t1);width:15px}
.bl li:nth-child(3)::before{background:var(--t2);width:19px}

/* code */
.win{margin-top:34px;background:var(--code);border:1px solid var(--ln);border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px -40px rgba(255,111,82,.45)}
.win-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--pan);border-bottom:1px solid var(--ln)}
.win-bar h2{font:500 .82rem/1.3 var(--fm);color:var(--mut);letter-spacing:.02em}
.codebox{min-width:0}
.codetabs{display:flex;gap:4px;padding:8px 8px 0;border-bottom:1px solid var(--ln);overflow-x:auto}
.codetabs button{min-height:44px;padding:0 16px;border:1px solid transparent;border-bottom:0;border-radius:10px 10px 0 0;background:transparent;color:var(--mut);font:500 .86rem var(--fm);cursor:pointer;white-space:nowrap}
.codetabs button:hover{color:var(--tx)}
.codetabs button[aria-selected=true]{background:var(--code);color:var(--tx);border-color:var(--ln);box-shadow:0 -2px 0 var(--co) inset;margin-bottom:-1px}
.codebox .codetabs{background:var(--pan)}
pre.code{position:relative;margin:0;background:var(--code);color:#f1e3db;border:1px solid var(--ln);border-radius:14px;overflow:hidden;max-width:100%;font-size:.84rem;line-height:1.7}
pre.code code{display:block;overflow-x:auto;padding:18px 18px 20px;padding-right:20px;white-space:pre;-webkit-overflow-scrolling:touch}
.codebox pre.code{border:0;border-radius:0}
pre.code .copy{position:absolute;top:6px;right:6px;min-height:44px;min-width:64px;padding:0 12px;border:1px solid var(--ln2);border-radius:9px;background:var(--pan);color:var(--tx);font:500 .76rem var(--fm);cursor:pointer;z-index:1}
pre.code .copy:hover{border-color:var(--co);color:var(--co2)}
.prose pre.code code,.codebox pre.code code{padding-top:58px}
.k{color:#ff93a8}.s{color:#ffc58c}.c{color:#a39188;font-style:italic}

/* sections */
.sec{margin-top:64px}
.sh{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px;padding-bottom:14px;border-bottom:1px solid var(--ln)}
h2{font:700 clamp(1.45rem,2.3vw,1.9rem)/1.25 var(--fd);letter-spacing:-.015em}
h3{font:700 1.1rem/1.35 var(--fd)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;counter-reset:n}
.cd{min-width:0;background:var(--pan);border:1px solid var(--ln);border-radius:var(--r);padding:22px;counter-increment:n}
.cd p{color:var(--mut);font-size:.98rem;line-height:1.6;margin-top:8px}
.feat .cd::before{content:counter(n,decimal-leading-zero);display:inline-block;font:500 .74rem/1 var(--fm);padding:6px 9px;border-radius:6px;background:var(--t0);color:var(--tx);margin-bottom:14px}
.feat .cd:nth-child(4n+2)::before{background:var(--t1)}
.feat .cd:nth-child(4n+3)::before{background:var(--t2)}
.feat .cd:nth-child(4n)::before{background:var(--t3)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;counter-reset:n;border:1px solid var(--ln);border-radius:var(--r);overflow:hidden;background:var(--pan)}
.steps .cd{border:0;border-radius:0;border-right:1px solid var(--ln);background:transparent;position:relative;padding-top:74px}
.steps .cd:last-child{border-right:0}
.steps .cd::before{content:counter(n);position:absolute;left:22px;top:20px;width:38px;height:38px;border-radius:11px;background:var(--co);color:var(--ink);font:700 1.05rem/38px var(--fd);text-align:center}
.steps .cd::after{content:"";position:absolute;left:70px;right:0;top:35px;height:8px;background:repeating-linear-gradient(90deg,var(--t0) 0 22px,transparent 22px 26px,var(--t1) 26px 38px,transparent 38px 42px,var(--t2) 42px 72px,transparent 72px 76px)}
.steps .cd:last-child::after{background:linear-gradient(90deg,var(--t0),transparent)}
.steps.col{grid-template-columns:1fr}
.steps.col .cd{border-right:0;border-bottom:1px solid var(--ln);padding:20px 22px 20px 78px}
.steps.col .cd:last-child{border-bottom:0}
.steps.col .cd::after{display:none}
.uses .cd{background:transparent;border-style:dashed;border-color:var(--ln2);padding-left:26px;position:relative}
.uses .cd::before{content:"";position:absolute;left:-1px;top:22px;width:5px;height:30px;border-radius:0 4px 4px 0;background:var(--co)}
.bens{margin-top:36px}
.bens .cd{padding:18px 20px}
.bens .cd h3{font-size:1.02rem}
.exs{display:grid;gap:12px;counter-reset:n}
.exs .cd{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 26px;align-items:start}
.exs .cd p{margin-top:0}
.exs .cd h3{position:relative;padding-left:34px}
.exs .cd h3::before{content:"";position:absolute;left:0;top:.45em;width:22px;height:9px;border-radius:3px;background:var(--co)}

/* prose */
.prose{max-width:74ch}
.prose>*+*{margin-top:1.05em}
.prose h2{margin-top:2.1em;padding-top:1.1em;border-top:1px solid var(--ln);scroll-margin-top:24px}
.prose>h2:first-child{margin-top:0}
.prose h3{margin-top:1.8em;font-size:1.18rem}
.prose p,.prose li{color:#e6d8d0}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--co)}
.prose strong{color:var(--tx)}
.prose :not(pre)>code{background:var(--t3);padding:.12em .4em;border-radius:5px;font-size:.88em;overflow-wrap:anywhere}
.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:.93rem;border:1px solid var(--ln);border-radius:12px}
.prose th,.prose td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--ln);vertical-align:top}
.prose th{background:var(--pan2);font:500 .76rem/1.3 var(--fm);letter-spacing:.05em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.prose tr:last-child td{border-bottom:0}
.prose blockquote{margin-left:0;margin-right:0;padding:14px 18px;border-left:4px solid var(--co);background:var(--pan);border-radius:0 12px 12px 0}

/* faq */
.faq{display:grid;gap:10px}
.faq details{background:var(--pan);border:1px solid var(--ln);border-radius:14px}
.faq details[open]{border-color:var(--ln2)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 18px;font:700 1.04rem/1.4 var(--fd)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:9px;background:var(--t0);color:var(--tx);font:500 1.2rem/30px var(--fm);text-align:center}
.faq details[open] summary::after{content:"\2212";background:var(--co);color:var(--ink)}
.faq details p{padding:0 18px 18px;color:var(--mut);max-width:70ch}

/* cta band */
.band{position:relative;margin-top:64px;padding:34px 32px 44px;border-radius:22px;background:var(--pan2);border:1px solid var(--ln2);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;overflow:hidden}
.band-t{min-width:0;flex:1 1 300px}
.band p{color:var(--mut);margin-top:8px}
.band-tape{position:absolute;left:32px;right:0;bottom:16px;height:8px;overflow:hidden}
.band-tape i{flex:none}
.band-tape i:last-child{flex:1;background:linear-gradient(90deg,var(--co),transparent)}

/* key page */
.keyform{background:var(--pan);border:1px solid var(--co);border-radius:22px;padding:20px 24px 26px;box-shadow:0 0 0 6px rgba(255,111,82,.1),0 40px 80px -50px rgba(255,111,82,.8)}
.keyform>.tape{margin-bottom:18px}
.tabs2{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--code);border:1px solid var(--ln);border-radius:13px;margin-bottom:18px}
.tabs2[hidden]{display:none}
.tabs2 button{min-height:44px;border:0;border-radius:9px;background:transparent;color:var(--mut);font:700 .95rem var(--fs);cursor:pointer}
.tabs2 button[aria-selected=true]{background:var(--pan2);color:var(--tx);box-shadow:0 0 0 1px var(--ln2)}
.msg:empty{display:none}
.msg{margin-bottom:14px;padding:11px 14px;border-radius:10px;font-size:.94rem;line-height:1.45}
.msg.err{background:rgba(255,70,70,.14);border:1px solid #ff6b6b;color:#ffd0c8}
.row{margin-bottom:14px}
.row label,.calc label{display:block;font:500 .74rem/1.2 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:7px}
.row input,.calc input{width:100%;min-height:52px;padding:0 15px;border-radius:12px;border:1px solid var(--ln2);background:var(--code);color:var(--tx);font:400 1.02rem var(--fm)}
.row input:focus,.calc input:focus{outline:0;border-color:var(--co);box-shadow:0 0 0 3px rgba(255,111,82,.3)}
.note{font-size:.84rem;line-height:1.45;color:var(--mut);margin-top:8px}
.form form>.btn{width:100%;min-height:54px;margin-top:4px;font-size:1.03rem}
.form form>.note{text-align:center;margin-top:12px}
.keyout{display:none}
.keyout.on{display:block}
.keyout h3{font-size:1.25rem;margin-bottom:12px}
.keybox{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border:1px dashed var(--co);border-radius:12px;background:var(--code)}
.keybox span{flex:1;min-width:0;font:500 .86rem/1.5 var(--fm);color:#ffc7a0;overflow-wrap:anywhere}
.keyout p{margin-top:12px;font-size:.94rem;line-height:1.75}
.keyout code{font-size:.84rem;color:#ffc7a0;overflow-wrap:anywhere}
.mut{color:var(--mut)}
.keyout .acts{margin-top:16px;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chips span{padding:8px 12px;border-radius:9px;background:var(--t3);font-size:.84rem;line-height:1.3;color:var(--tx)}
.chips span:nth-child(4n+1){background:var(--t0)}
.chips span:nth-child(4n+2){background:var(--t1)}
.chips span:nth-child(4n+3){background:var(--t2)}
.chips b{font:500 .9rem var(--fm)}

/* pricing */
.pfs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:30px}
.pf{grid-column:span 2;min-width:0;background:var(--pan);border:1px solid var(--ln);border-radius:var(--r);padding:18px}
.pf:nth-child(-n+2){grid-column:span 3;padding:24px;background:var(--pan2)}
.pf b{display:block;font:500 1.5rem/1.1 var(--fm);letter-spacing:-.02em}
.pf:nth-child(-n+2) b{font-size:clamp(2.3rem,4vw,3.2rem);color:var(--co)}
.pf span{display:block;margin-top:9px;color:var(--mut);font-size:.88rem;line-height:1.35}
.psub{display:flex;align-items:center;gap:12px;margin-top:16px;color:var(--mut);font-size:.95rem}
.calcwrap{background:var(--pan);border:1px solid var(--ln);border-radius:var(--r);padding:22px}
.calc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:end}
.calc>div{min-width:0}
.calc>div:last-child{background:var(--code);border:1px dashed var(--co);border-radius:12px;padding:10px 15px;min-height:76px}
.calc>div:last-child label{margin-bottom:2px}
.calc output{display:block;font:500 1.75rem/1.2 var(--fm);color:var(--co);overflow-wrap:anywhere}

/* article */
.upd{margin-top:18px;font:500 .78rem var(--fm);color:var(--mut)}
.tkw{margin-top:26px;background:var(--pan);border:1px solid var(--ln);border-left:4px solid var(--co);border-radius:6px var(--r) var(--r) 6px;padding:20px 22px}
.tkw ul{list-style:none;padding:0;display:grid;gap:10px}
.tkw li{position:relative;padding-left:32px;line-height:1.5;color:#e6d8d0}
.tkw li::before{content:"";position:absolute;left:0;top:.5em;width:20px;height:9px;border-radius:3px;background:var(--t0)}
.tkw li:nth-child(2n)::before{background:var(--t1);width:14px}
.tkw li:nth-child(3n)::before{background:var(--t2)}
.art .prose{font-size:1.07rem;line-height:1.75;max-width:70ch}
.cols>.flow>.prose:first-child{margin-top:34px}

/* 404 */
.nf{max-width:720px;margin:8vh auto 0;padding:34px;background:var(--pan);border:1px solid var(--ln);border-radius:22px}
.nf .tape{margin-bottom:26px}

/* footer */
.foot{max-width:1204px;margin:80px auto 0;padding:28px 40px 40px;border-top:1px solid var(--ln);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:18px 40px}
.foot-b p{color:var(--mut);font-size:.92rem;margin-top:4px}
.foot-l{display:flex;flex-wrap:wrap;gap:4px 22px;align-content:start;justify-content:flex-end}
.foot-l a{display:inline-flex;align-items:center;min-height:44px;color:var(--mut);text-decoration:none;font-size:.94rem}
.foot-l a:hover{color:var(--tx);text-decoration:underline}
.legal{grid-column:1/-1;color:var(--mut);font-size:.82rem;line-height:1.5}

@media (max-width:1239px){
.cols,.kcols{display:block}
.rail{margin-top:30px}
.rail-in{position:static}
.fxs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.fx{flex-direction:column;align-items:flex-start;gap:4px}
.fx span{text-align:left}
.fx:nth-last-child(-n+2){border-bottom:0}
.toc ol{max-height:none}
.kcols .rail{max-width:560px}
.cols>.flow>.prose:first-child{margin-top:44px}
}
@media (max-width:1023px){
:root{--sw:0px}
html{scroll-padding-top:76px}
body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.side{display:none}
.shell{margin-left:0}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:20;padding:8px 16px;background:rgba(22,16,14,.94);border-bottom:1px solid var(--ln);backdrop-filter:blur(10px)}
.top .logo span{white-space:nowrap}
.tabbar{display:grid;grid-template-columns:1fr 1fr 64px 1fr 1fr 1fr;align-items:end;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:0 6px env(safe-area-inset-bottom);background:var(--side);border-top:1px solid var(--ln)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:62px;min-width:0;color:var(--mut);text-decoration:none;font:500 .7rem/1.2 var(--fs)}
.tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.tabbar a[aria-current]{color:var(--tx)}
.tabbar a[aria-current] .ic{color:var(--co)}
.tabbar a[aria-current]:not(.tkey)::before{content:"";position:absolute;top:0;width:26px;height:4px;border-radius:0 0 4px 4px;background:var(--co)}
.tabbar a:not(.tkey){position:relative}
.tabbar .tkey{width:60px;height:60px;min-height:60px;margin:0 auto 12px;border-radius:19px;background:var(--co);color:var(--ink);box-shadow:0 0 0 6px var(--side),0 10px 24px -6px rgba(255,111,82,.7)}
.tabbar .tkey .ic{width:27px;height:27px;color:var(--ink)}
.tabbar .tkey[aria-current]{box-shadow:0 0 0 6px var(--side),0 0 0 8px var(--co)}
main{padding:24px 28px 0}
.foot{padding:26px 28px 30px}
.kcols{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:28px}
.kcols .rail{margin-top:0}
}
@media (max-width:860px){
.kcols{display:block}
.kcols .rail{margin-top:26px;max-width:none}
}
@media (max-width:700px){
body{font-size:16px}
main{padding:20px 16px 0}
.foot{padding:24px 16px 28px;grid-template-columns:1fr;margin-top:56px}
.foot-l{justify-content:flex-start}
.top .btn.sm{padding:8px 12px;font-size:.86rem}
.lead{font-size:1.05rem;margin-top:16px}
.grid,.steps,.calc{grid-template-columns:1fr}
.steps .cd{border-right:0;border-bottom:1px solid var(--ln);padding:20px 18px 20px 72px}
.steps .cd:last-child{border-bottom:0}
.steps .cd::before{left:18px}
.steps .cd::after{display:none}
.exs .cd{grid-template-columns:1fr}
.sec,.band{margin-top:48px}
.sh .tape i:nth-child(n+4){display:none}
.acts .btn.big{flex:1 1 100%}
.pfs{gap:10px}
.pf{grid-column:span 3}
.pf:nth-child(-n+2){padding:18px}
.pf:last-child:nth-child(odd){grid-column:1/-1}
.band{padding:26px 20px 40px}
.band-tape{left:20px}
.band .btn{width:100%}
.keyform{padding:16px 16px 22px;border-radius:18px}
.cd{padding:18px}
.win{margin-top:28px;border-radius:14px}
pre.code{font-size:.78rem}
.nf{padding:24px 18px;margin-top:3vh}
.crumbs{margin-bottom:16px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
.prose h2,.prose h3{margin-bottom:.7em}
.prose pre.code{margin-top:14px}
.tabbar .tkey[aria-current] .ic{color:var(--ink)}
.psub .tape{align-self:flex-start;margin-top:.45em}