:root{--mist:#f3f2ed;--paper:#fbfaf8;--ink:#222310;--soft:#56563f;--teal:#636812;--line:#d3d1c3;--strip:#373b0c;--glass:#f0eebf;--pale:#d9d7b9;--straw:#d6a3d9;--code:#272a0b;
--disp:"Hina Mincho","Hiragino Mincho ProN","Yu Mincho",Georgia,serif;--body:"Gothic A1","Helvetica Neue",Arial,sans-serif;--mono:"Noto Sans Mono",ui-monospace,Menlo,Consolas,monospace;--gut:112px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mist);color:var(--ink);font:400 17px/1.7 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--teal);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.strip :focus-visible,.foot :focus-visible,pre :focus-visible,.codebox :focus-visible{outline-color:var(--glass)}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0}
.skip{position:absolute;left:-999px;top:0;z-index:20;background:var(--ink);color:#ffffff;padding:12px 18px}
.skip:focus{left:12px;top:12px}

/* wind streaks */
.wind{display:inline-block;flex:none;width:60px;height:13px;vertical-align:middle;
background:linear-gradient(var(--teal),var(--teal)) 0 0/38px 1px no-repeat,linear-gradient(var(--teal),var(--teal)) 14px 6px/46px 1px no-repeat,linear-gradient(var(--teal),var(--teal)) 6px 12px/26px 1px no-repeat}
.gust{position:relative;height:40px;margin:80px 0 0}
.gust i{position:absolute;height:1px;background:var(--teal);opacity:.55}
.gust i:nth-child(1){left:0;width:46%;top:4px}
.gust i:nth-child(2){left:18%;width:70%;top:16px}
.gust i:nth-child(3){left:8%;width:30%;top:28px}
.gust i:nth-child(4){left:54%;width:38%;top:38px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;background:var(--teal);color:#ffffff;border:1px solid var(--teal);border-radius:2px;font:700 15.5px/1.2 var(--body);letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#ffffff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#ffffff}
.btn.sm{min-height:44px;padding:0 16px;font-size:14px}
.btn[disabled]{opacity:.6;cursor:wait}
.acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* header: everything hangs under one eave line */
.top{position:relative;z-index:2;max-width:1288px;margin:0 auto;padding:0 24px}
.eave{display:flex;align-items:flex-start;gap:30px;margin-top:20px;padding-bottom:18px;border-top:1px solid var(--ink)}
.logo{display:flex;align-items:flex-start;gap:10px;color:var(--ink);text-decoration:none;min-height:44px;min-width:0}
.mark{flex:none;width:34px;height:34px}
.mark .th,.bell .th{stroke:var(--ink);stroke-width:1;fill:none}
.mark .gl,.bell .gl{fill:rgba(240,238,191,.6);stroke:var(--teal);stroke-width:1.5}
.mark .tz{fill:var(--strip)}
.wm{display:flex;align-items:baseline;margin-top:13px;min-width:0}
.wm b{font:700 16px/1.2 var(--body);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis}
.wm i{font:400 11.5px/1.2 var(--mono);font-style:normal;color:var(--soft);letter-spacing:.06em}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{position:relative;display:flex;align-items:flex-end;min-height:48px;padding:26px 0 2px;color:var(--ink);font:500 14.5px/1.3 var(--body);text-decoration:none;white-space:nowrap}
.nav a::before{content:"";position:absolute;left:0;top:0;width:1px;height:12px;background:var(--ink)}
.nav small{position:absolute;left:8px;top:1px;font:400 10px/1 var(--mono);letter-spacing:.1em;color:var(--soft)}
.nav a:hover{color:var(--teal)}
.nav a[aria-current]{color:var(--teal);font-weight:700}
.nav a[aria-current]::before{height:20px;background:var(--teal)}
.nav a[aria-current]::after{content:"";position:absolute;left:-2px;top:18px;width:5px;height:5px;border-radius:50%;background:var(--teal)}
.btn.key{position:relative;margin:14px 0 0 42px;flex:none}
.btn.key::before{content:"";position:absolute;left:50%;top:-15px;width:1px;height:14px;background:var(--ink)}
.burger{display:none;position:relative;flex:none;width:44px;height:44px;margin-top:6px;padding:0;background:none;border:0;cursor:pointer}
.burger span,.burger span::after{position:absolute;left:10px;width:24px;height:1.5px;background:var(--ink);content:""}
.burger span{top:17px}
.burger span::after{left:8px;width:16px;top:9px}

/* sheet */
.sheet{max-width:1288px;margin:0 auto;padding:44px 24px 96px;display:grid;grid-template-columns:minmax(0,1fr)}
.intro,.flow,.rail{min-width:0}
.intro{position:relative}
.vert{display:none}
h1{font:400 clamp(34px,4.2vw,54px)/1.14 var(--disp);letter-spacing:-.012em;margin-bottom:26px;text-wrap:balance;overflow-wrap:break-word}
h2{font:400 clamp(27px,2.8vw,34px)/1.2 var(--disp);text-wrap:balance}
h3{font:700 17px/1.4 var(--body);margin-bottom:6px}
.lead{font-size:19px;line-height:1.65;max-width:58ch;color:var(--soft)}
.tiny,.eyebrow{font:400 11.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.date{margin:-8px 0 22px}
.crumbs{display:flex;align-items:center;gap:0 12px;margin:-8px 0 10px;font:400 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--teal)}
.crumbs a{flex:none}
.crumbs i{flex:none;width:22px;height:1px;background:var(--soft)}
.crumbs span{flex:0 1 auto;min-width:0;max-width:30ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bul{list-style:none;margin-top:26px}
.bul li{position:relative;padding-left:36px;margin-top:10px;font-size:16px;line-height:1.6}
.bul li::before,.take li::before{content:"";position:absolute;left:0;top:.72em;width:22px;height:7px;background:linear-gradient(var(--teal),var(--teal)) 0 0/22px 1px no-repeat,linear-gradient(var(--teal),var(--teal)) 8px 6px/12px 1px no-repeat}
.try{margin-top:52px}
.try .tiny{margin-bottom:12px}

/* rail: the bell and its paper strip */
.rail{margin:40px 0 0}
.hang{position:relative}
.bell{display:block;width:60px;height:78px;margin:0 auto}
.bell .hl{stroke:#ffffff;stroke-width:1.5;fill:none;stroke-linecap:round}
.bell .bead{fill:var(--teal)}
.bell .dome{transform-origin:40px 24px;animation:sway 7s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(0)}30%{transform:rotate(3deg)}70%{transform:rotate(-2.5deg)}}
.strip{position:relative;background:var(--strip);color:#f2f1e6;padding:40px 26px 30px;border-radius:2px;box-shadow:0 22px 40px -28px rgba(55,59,12,.7)}
.strip::before{content:"";position:absolute;left:50%;top:0;width:1px;height:14px;background:var(--straw)}
.strip::after{content:"";position:absolute;left:50%;top:12px;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:var(--mist);box-shadow:0 0 0 1.5px var(--straw)}
.strip-h{font:400 25px/1.25 var(--disp);color:#ffffff;margin-bottom:10px}
.rail-calc .strip-h{margin-bottom:16px}
.strip-p{font-size:14.5px;line-height:1.55;color:var(--pale);margin-bottom:18px}
.strip a{color:var(--glass)}
.strip .btn{width:100%;background:var(--glass);border-color:var(--glass);color:#222306}
.strip .btn:hover{background:#ffffff;border-color:#ffffff;color:#222306}
.strip .btn.ghost{background:transparent;border-color:#a6a56f;color:#f2f1e6}
.strip .btn.ghost:hover{background:rgba(240,238,191,.14);color:#ffffff}
.strip .btn.sm{width:auto;flex:1 1 auto}
.facts-v{list-style:none;margin-top:24px}
.facts-v li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid rgba(240,238,191,.22)}
.facts-v b{font:400 25px/1.2 var(--disp);color:var(--glass);white-space:nowrap}
.facts-v span{font:400 10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:right;color:var(--pale)}
.toc{list-style:none;counter-reset:t;margin:6px 0 22px}
.toc li{counter-increment:t;border-top:1px solid rgba(240,238,191,.22)}
.toc a{display:flex;align-items:baseline;gap:12px;min-height:44px;padding:11px 0;color:#f2f1e6;font-size:14.5px;line-height:1.4;text-decoration:none}
.toc a::before{content:counter(t,decimal-leading-zero);font:400 10.5px/1 var(--mono);color:var(--glass);letter-spacing:.08em}
.toc a:hover{color:#ffffff;text-decoration:underline}

/* forms */
label{display:block;margin-bottom:6px;font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
input,select,textarea{display:block;width:100%;min-height:46px;padding:10px 12px;font:400 16px/1.4 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--soft);border-radius:2px}
textarea{min-height:150px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal);outline-offset:1px}
.strip label{color:var(--pale)}
.strip input{border-color:transparent}
.strip input:focus{outline-color:var(--glass);outline-offset:2px}
.row{margin-bottom:14px}
.note{font-size:13px;line-height:1.5;color:var(--soft);margin-top:8px}
.strip .note{color:var(--pale)}
.mut{color:var(--pale)}
.form>.note{margin:10px 0 16px}
.tabs2{display:flex;margin-bottom:18px;border-bottom:1px solid rgba(240,238,191,.3)}
.tabs2 button{flex:1;min-height:46px;margin-bottom:-1px;padding:0 6px;background:none;border:0;border-bottom:2px solid transparent;color:var(--pale);font:500 15px/1.2 var(--body);cursor:pointer}
.tabs2 button[aria-selected="true"]{color:#ffffff;border-bottom-color:var(--glass);font-weight:700}
.msg:empty{display:none}
.msg{margin-bottom:14px;font-size:14.5px;line-height:1.5}
.msg.err{padding:10px 12px;border-left:3px solid #caa8ff;background:rgba(202,168,255,.13);color:#eadcff}
.form form .btn{margin-top:6px}
.keyout{display:none}
.keyout.on{display:block}
.keyout h3{font:400 23px/1.25 var(--disp);color:#ffffff;margin-bottom:12px}
.keybox{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px;background:#242507;border:1px dashed rgba(240,238,191,.45);border-radius:2px}
.keybox span{flex:1 1 170px;min-width:0;font:400 13.5px/1.5 var(--mono);color:var(--glass);word-break:break-all}
.keyout p{margin-top:12px;font-size:14.5px;line-height:1.75;overflow-wrap:anywhere}
.keyout code{font:400 13px var(--mono);color:var(--glass)}
.keyout .acts{gap:8px;margin-top:16px}
.calc{display:grid;gap:14px;margin:8px 0 18px}
.calc>div:last-child{padding-top:12px;border-top:1px solid rgba(240,238,191,.3)}
.calc output{display:block;font:400 46px/1.1 var(--disp);color:var(--glass)}

/* code */
pre.code{position:relative;margin:0;padding:4px 20px 22px;max-width:100%;overflow-x:auto;background:var(--code);color:#ecebd8;border-radius:2px;font:400 13.5px/1.7 var(--mono);-webkit-overflow-scrolling:touch}
pre.code code{display:block;font:inherit;background:none;padding:0;color:inherit;white-space:pre}
pre.code .k{color:#e0e07f}
pre.code .s{color:#eda0f0}
pre.code .c{color:#b3b28f}
.copy{position:sticky;left:0;display:inline-flex;align-items:flex-end;min-height:44px;min-width:44px;margin-bottom:4px;padding:18px 0 8px;background:none;border:0;color:var(--glass);font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.copy:hover{color:#ffffff}
.codebox{background:var(--code);border-radius:2px;box-shadow:0 22px 40px -28px rgba(55,59,12,.7)}
.codebox pre.code{border-top:1px solid rgba(240,238,191,.2)}
.codetabs{display:flex;gap:26px;padding:0 20px}
.codetabs button{position:relative;min-height:48px;min-width:44px;padding:22px 0 8px;background:none;border:0;color:#cfcea9;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:left;cursor:pointer}
.codetabs button::before{content:"";position:absolute;left:0;top:0;width:1px;height:10px;background:#cfcea9}
.codetabs button[aria-selected="true"]{color:#ffffff}
.codetabs button[aria-selected="true"]::before{height:17px;width:2px;background:var(--glass)}

/* sections */
.sec{position:relative;margin-top:84px}
.sec-plain{margin-top:56px}
.sec-head{position:relative;margin-bottom:28px}
.sec-head .no{font:400 11px/1 var(--mono);letter-spacing:.16em;color:var(--soft);margin-right:12px}
.sec-head h2{margin-top:14px}
.feat{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.feat li{padding:20px 0 22px;border-top:1px solid var(--line)}
.feat p,.uses p,.steps p,.ex p{font-size:15.5px;line-height:1.65;color:var(--soft)}
.steps{list-style:none}
.steps li{position:relative;display:grid;grid-template-columns:68px minmax(0,1fr);padding-bottom:34px}
.steps li:last-child{padding-bottom:0}
.steps .num{font:400 46px/1 var(--disp);color:var(--teal)}
.steps li::before{content:"";position:absolute;left:13px;top:58px;bottom:8px;width:1px;background:var(--line)}
.steps li:last-child::before{display:none}
.uses{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 48px}
.uses li{padding-left:20px;border-left:1px solid var(--ink)}
.uses li:nth-child(even){margin-top:44px;margin-bottom:-44px}
.sec:has(.uses){padding-bottom:44px}
.ex{list-style:none;counter-reset:x}
.ex li{counter-increment:x;display:grid;grid-template-columns:68px minmax(0,1fr);padding:22px 0;border-top:1px solid var(--line)}
.ex li::before{content:counter(x);grid-row:1/3;font:400 40px/1 var(--disp);color:var(--teal)}
.ex h3,.ex p{grid-column:2}
.facts-h{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:40px;border-top:1px solid var(--ink)}
.facts-h li{padding:18px 12px 2px 14px;border-left:1px solid var(--line)}
.facts-h li:first-child{padding-left:0;border-left:0}
.facts-h b{display:block;font:400 30px/1.15 var(--disp);white-space:nowrap}
.facts-h span{display:block;margin-top:6px;font:400 10.5px/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.take{margin-top:34px;padding:26px 28px 24px;background:var(--paper);border-left:1px solid var(--ink)}
.take h2{display:flex;align-items:center;gap:14px;font-size:23px;margin-bottom:10px}
.take ul{list-style:none}
.take li{position:relative;padding-left:36px;margin-top:10px;font-size:16px;line-height:1.6}

/* long-form */
.prose{margin-top:52px;max-width:70ch;overflow-wrap:break-word}
.flow>.prose:first-child{margin-top:44px}
.prose>:first-child{margin-top:0}
.prose h2{margin:64px 0 18px;scroll-margin-top:24px}
.prose h2::before{content:"";display:block;width:60px;height:13px;margin-bottom:18px;background:linear-gradient(var(--teal),var(--teal)) 0 0/38px 1px no-repeat,linear-gradient(var(--teal),var(--teal)) 14px 6px/46px 1px no-repeat,linear-gradient(var(--teal),var(--teal)) 6px 12px/26px 1px no-repeat}
.prose h3{font-size:19px;margin:34px 0 10px;scroll-margin-top:24px}
.prose p{margin-bottom:18px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px}
.prose li{margin-bottom:7px}
.prose li::marker{color:var(--teal)}
.prose pre.code{margin:22px 0 26px}
.prose :not(pre)>code{font:400 .88em var(--mono);padding:1px 5px;background:rgba(99,104,18,.1);border-radius:2px;overflow-wrap:anywhere}
.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:24px 0 28px;font-size:15px;line-height:1.5;-webkit-overflow-scrolling:touch}
.prose th,.prose td{padding:11px 16px 11px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);min-width:110px}
.prose th{font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);border-bottom-color:var(--ink)}
.prose blockquote{margin:24px 0;padding-left:20px;border-left:1px solid var(--ink);color:var(--soft)}
.support form{max-width:560px}
.support button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;background:var(--teal);color:#ffffff;border:1px solid var(--teal);border-radius:2px;font:700 15.5px/1.2 var(--body);cursor:pointer}
.support button:hover{background:var(--ink);border-color:var(--ink)}
.support output,.support form>p{display:block;margin-top:14px;font-size:15px;color:var(--soft)}

/* faq */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:58px;padding:14px 0;font-weight:700;font-size:16.5px;line-height:1.45;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:15px;height:15px;background:linear-gradient(var(--teal),var(--teal)) 50% 50%/15px 1px no-repeat,linear-gradient(var(--teal),var(--teal)) 50% 50%/1px 15px no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--teal)}
.ans p{max-width:64ch;padding-bottom:22px;font-size:16px;color:var(--soft)}

.endcta{margin-top:26px;padding:42px 40px 44px;background:var(--paper);border-top:1px solid var(--ink)}
.endcta p{margin-top:12px;color:var(--soft);max-width:52ch}
.endcta .acts{margin-top:26px}
.nf{list-style:none;margin-top:36px;border-top:1px solid var(--ink)}
.nf a{display:flex;align-items:baseline;gap:18px;min-height:60px;padding:14px 0;border-bottom:1px solid var(--line);font:400 26px/1.2 var(--disp);color:var(--ink);text-decoration:none}
.nf a:hover{color:var(--teal)}
.nf small{font:400 11px var(--mono);letter-spacing:.14em;color:var(--soft)}

/* footer */
.foot{background:var(--strip);color:#f2f1e6}
.foot-in{max-width:1288px;margin:0 auto;padding:56px 24px 36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:36px 64px}
.foot .logo{color:#ffffff}
.foot .mark .th{stroke:var(--pale)}
.foot .mark .gl{stroke:var(--glass);fill:rgba(240,238,191,.25)}
.foot .mark .tz{fill:var(--glass)}
.foot .wm i{color:var(--pale)}
.foot-b p{margin-top:10px;font:400 21px/1.35 var(--disp);color:var(--glass);max-width:22ch}
.foot-l{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.foot-l a{display:flex;align-items:center;min-height:46px;padding:6px 0;border-top:1px solid rgba(240,238,191,.2);color:#f2f1e6;font-size:15px;line-height:1.35;text-decoration:none}
.foot-l a:hover{color:#ffffff;text-decoration:underline}
.legal{grid-column:1/-1;padding-top:22px;border-top:1px solid rgba(240,238,191,.2);font-size:13px;line-height:1.6;color:var(--pale)}

/* desktop: asymmetric sheet with the sticky strip */
@media (min-width:1080px){
.sheet{padding:56px 24px 120px calc(24px + var(--gut));grid-template-columns:minmax(0,1fr) 336px;column-gap:96px;grid-template-areas:"intro rail" "flow rail";align-items:start}
.intro{grid-area:intro}
.flow{grid-area:flow}
.rail{grid-area:rail;position:sticky;top:-70px;margin:-138px 0 0;max-height:100vh;overflow-y:auto;scrollbar-width:none;padding-bottom:30px}
.rail::-webkit-scrollbar{display:none}
.bell{width:80px;height:104px}
.hang{padding-top:82px}
.hang::before{content:"";position:absolute;left:50%;top:0;width:1px;height:83px;background:var(--ink)}
.vert{display:block;position:absolute;left:calc(-1 * var(--gut));top:8px;writing-mode:vertical-rl;font:400 10.5px/1 var(--mono);letter-spacing:.34em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.vert::after{content:"";display:block;width:1px;height:72px;margin:14px 5px 0 0;background:var(--line)}
.sec-head .no{position:absolute;left:calc(-1 * var(--gut));top:16px;margin:0}
.sec-head .wind{position:absolute;left:calc(26px - var(--gut));top:15px}
.sec-head h2{margin-top:0}
.gust{margin-left:calc(-1 * var(--gut))}
.page-home .intro{padding-bottom:4px}
}
@media (min-width:1080px) and (max-width:1239px){
:root{--gut:84px}
.sheet{grid-template-columns:minmax(0,1fr) 312px;column-gap:60px}
.sec-head .wind{width:46px}
.nav{gap:22px}
.btn.key{margin-left:26px}
}
@media (min-width:1080px) and (max-height:760px){
.bell{width:56px;height:73px}
.strip{padding:34px 24px 24px}
.row{margin-bottom:10px}
}

/* tablet and phone */
@media (max-width:1079px){
.sheet{max-width:760px;margin-left:0;padding-left:max(24px,6vw);padding-right:24px}
.top{padding-left:max(24px,6vw)}
.foot-in{padding-left:max(24px,6vw)}
.rail{max-width:460px}
.uses li:nth-child(even){margin-top:0;margin-bottom:0}
.sec:has(.uses){padding-bottom:0}
}
@media (max-width:959px){
.eave{flex-wrap:wrap;gap:8px;padding-bottom:10px}
.logo{flex:1 1 0}
.btn.key{margin:6px 0 0;min-height:44px;padding:0 14px;font-size:14px}
.btn.key::before{top:-7px;height:6px}
.burger{display:block}
.nav{display:none;order:9;flex:0 0 100%;flex-direction:column;gap:0;margin:8px 0 0;border-top:1px solid var(--line)}
.nav.open{display:flex}
.nav a{align-items:center;gap:16px;min-height:50px;padding:0;border-bottom:1px solid var(--line);font-size:16px}
.nav a::before,.nav a[aria-current]::after{display:none}
.nav small{position:static}
}
@media (max-width:640px){
body{font-size:16.5px}
.sheet{padding:28px 16px 72px}
.top,.foot-in{padding-left:16px;padding-right:16px}
.lead{font-size:17.5px}
.feat,.uses{grid-template-columns:minmax(0,1fr)}
.sec{margin-top:64px}
.gust{margin-top:60px}
.facts-h{grid-template-columns:minmax(0,1fr)}
.facts-h li,.facts-h li:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:10px 0;border-left:0;border-bottom:1px solid var(--line)}
.facts-h b{font-size:25px}
.facts-h span{margin:0;text-align:right}
.steps li,.ex li{grid-template-columns:52px minmax(0,1fr)}
.steps .num{font-size:38px}
.steps li::before{left:10px;top:50px}
.endcta{padding:32px 22px 34px}
.take{padding:22px 20px}
.foot-in{grid-template-columns:minmax(0,1fr);padding-top:44px}
.strip{padding:38px 20px 26px}
.rail{margin-top:32px}
pre.code{padding:4px 16px 18px;font-size:12.5px}
.codetabs{padding:0 16px;gap:22px}
}
@media (max-width:480px){
.wm{flex-direction:column;margin-top:8px}
.wm b{font-size:13px}
.wm i{font-size:10px}
.mark{width:28px;height:28px}
.logo{gap:6px}
.eave{gap:6px}
.btn.key{padding:0 10px;font-size:13.5px}
.foot-l{grid-template-columns:minmax(0,1fr)}
.acts .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}