:root{--paper:#fffbe3;--lemon:#fff3ad;--white:#fffef6;--ink:#1b1145;--ink2:#473c78;--night:#1b1145;--night2:#2a1c63;--yel:#f5f000;--pink:#c2136f;--hot:#ff6fb5;--teal:#0a6c74;--aqua:#8eeadf;--line:rgba(27,17,69,.22);
--fd:"Exo 2","Trebuchet MS",system-ui,sans-serif;--ft:"Red Hat Text",system-ui,-apple-system,"Segoe UI",sans-serif;--fm:"Share Tech Mono",ui-monospace,Menlo,Consolas,monospace;
--sky:linear-gradient(180deg,#fffbe3 0%,#fff1b3 40%,#ffd3a8 72%,#ffabc7 100%);--slab:7px 7px 0 0 var(--yel),7px 7px 0 2px var(--ink);--sk:skewX(-10deg)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--ft);overflow-wrap:break-word}
[hidden]{display:none!important}
img,svg{max-width:100%}
a{color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.night :focus-visible,.top :focus-visible,.foot :focus-visible,pre.code:focus-visible,pre.code :focus-visible,.codebox :focus-visible{outline-color:var(--yel)}
h1,h2,h3{font-family:var(--fd);margin:0;line-height:1.1}
h1,h2{font-style:italic;font-weight:800;letter-spacing:-.01em}
h3{font-weight:700;font-size:1.2rem;line-height:1.25}
p{margin:0 0 1em}
code{font-family:var(--fm)}
.wrap{width:100%;max-width:1212px;margin:0 auto;padding:0 28px}
.narrow{max-width:836px}
.skip{position:absolute;left:12px;top:-80px;z-index:99;background:var(--yel);color:var(--ink);padding:12px 18px;font-weight:700;border:2px solid var(--ink)}
.skip:focus{top:12px}

/* chrome type: every text line is split by a hard horizon */
.chrome{background:linear-gradient(180deg,#1b1145 0%,#3f178a 34%,#a3106a 55%,#1b1145 55.5%,#07505a 64%,#0a6c74 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .16em 0 0}
h1{font-size:clamp(2.2rem,4.6vw,3.9rem);filter:drop-shadow(0 2px 0 #fff) drop-shadow(3px 3px 0 var(--yel))}
h1.long{font-size:clamp(1.85rem,3.3vw,2.9rem);line-height:1.14}

/* buttons: skewed plates */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 26px;font:700 1.02rem/1.15 var(--fd);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;text-align:center;color:var(--ink);background:var(--yel);border:2px solid var(--ink);border-radius:0;box-shadow:4px 4px 0 var(--ink);transform:var(--sk);cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{color:var(--ink);transform:var(--sk) translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:var(--sk) translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn[disabled]{opacity:.55;cursor:wait}
.btn.big{min-height:56px;padding:12px 34px;font-size:1.14rem}
.btn.sm{min-height:44px;padding:8px 18px;font-size:.92rem}
.btn.ghost{background:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--ink);color:var(--yel);box-shadow:none}
.top .btn,.night .btn,.foot .btn{box-shadow:4px 4px 0 var(--hot)}
.top .btn:hover,.night .btn:hover{box-shadow:7px 7px 0 var(--hot)}
.acts{display:flex;flex-wrap:wrap;gap:16px 22px;margin:0;padding:0 6px}

/* sunset stripes */
.stripes{height:19px;background:linear-gradient(180deg,var(--yel) 0 6px,transparent 6px 9px,#ffb37a 9px 13px,transparent 13px 15px,var(--hot) 15px 17px,transparent 17px 18px,var(--aqua) 18px 19px)}

/* header */
.top{position:sticky;top:0;z-index:50;background:var(--night);color:var(--paper)}
.top .stripes{background-color:var(--night);border-bottom:2px solid var(--ink)}
.bar{display:flex;align-items:center;gap:22px;min-height:66px}
.logo{display:inline-flex;align-items:center;gap:11px;min-height:44px;text-decoration:none;color:var(--paper);font:italic 800 1.32rem/1 var(--fd);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap}
.logo span{background:linear-gradient(180deg,#fffef6 0 48%,var(--yel) 49% 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.14em}
.logo:hover{color:var(--yel)}
.mark{flex:none;display:block}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;color:var(--paper);text-decoration:none;font:400 1rem/1 var(--fm);text-transform:uppercase;letter-spacing:.06em;border-bottom:3px solid transparent}
.nav a:hover{color:var(--yel)}
.nav a[aria-current]{color:var(--yel);border-bottom-color:var(--yel)}
.top .key{margin:0 6px 0 10px;white-space:nowrap}
.burger{display:none;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;width:46px;height:46px;padding:0 8px;background:none;border:2px solid var(--paper);cursor:pointer}
.burger i{display:block;height:4px;width:100%;background:var(--yel)}
.burger i:nth-child(2){height:3px;width:76%;background:var(--hot)}
.burger i:nth-child(3){height:2px;width:52%;background:var(--aqua)}

/* sky bands, sun, floor */
.sky{position:relative;overflow:hidden;background:var(--sky)}
.sky>.wrap{position:relative}
.sun{position:absolute;left:50%;bottom:0;width:640px;max-width:92vw;aspect-ratio:2/1;transform:translateX(-50%);border-radius:999px 999px 0 0;background:radial-gradient(circle farthest-side at 50% 100%,var(--yel) 0 33%,transparent 33.4% 39%,var(--yel) 39.4% 46%,transparent 46.4% 54%,rgba(245,240,0,.85) 54.4% 59%,transparent 59.4% 68%,rgba(245,240,0,.7) 68.4% 71.5%,transparent 72% 82%,rgba(245,240,0,.55) 82.4% 84%,transparent 84.4%)}
.ground{position:relative;overflow:hidden;background:#d6f5ee;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.ground.thin{height:74px}
.floor{position:absolute;left:50%;top:0;width:3000px;margin-left:-1500px;height:330px;transform-origin:50% 0;transform:perspective(460px) rotateX(63deg);
background:linear-gradient(90deg,rgba(27,17,69,.6) 0 2px,transparent 2px) 50% 0/64px 100%,linear-gradient(180deg,rgba(27,17,69,.6) 0 2px,transparent 2px) 0 0/100% 30px,linear-gradient(90deg,transparent calc(50% - 32px),var(--yel) calc(50% - 32px) calc(50% + 34px),transparent calc(50% + 34px))}
.ground>.wrap{position:relative}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:20px 24px;margin:0;padding:44px 12px 52px}
.fact{background:var(--white);border:2px solid var(--ink);box-shadow:var(--slab);transform:var(--sk);padding:14px 18px 12px;min-width:0}
.fact dd{margin:0;font:700 1.9rem/1.05 var(--fd);color:var(--ink)}
.fact dt{margin-top:6px;font:400 .86rem/1.3 var(--fm);text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}

/* hero */
.hero{padding:64px 0 128px}
.hero-g{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:52px;align-items:center}
.hero-t,.hero-c{min-width:0}
.hero h1{text-transform:uppercase;margin-bottom:22px}
.eyebrow{display:inline-block;margin:0 0 20px 6px;padding:6px 14px;background:var(--ink);color:var(--yel);font:400 .9rem/1.3 var(--fm);text-transform:uppercase;letter-spacing:.1em;transform:var(--sk)}
.lead{font-size:1.2rem;line-height:1.55;color:var(--ink);max-width:40em;margin-bottom:22px}
.ticks{list-style:none;margin:0 0 30px;padding:0}
.ticks li{position:relative;padding:5px 0 5px 34px;font-weight:500}
.ticks li::before{content:"";position:absolute;left:3px;top:.72em;width:18px;height:11px;background:var(--yel);border:2px solid var(--ink);transform:var(--sk)}
.try{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 12px;font:400 .9rem/1.3 var(--fm);text-transform:uppercase;letter-spacing:.08em;color:var(--ink)}
.try code{text-transform:none;letter-spacing:0;background:var(--white);border:2px solid var(--ink);padding:3px 9px;overflow-wrap:anywhere}

/* code */
.codebox{background:var(--night);border:2px solid var(--ink);box-shadow:9px 9px 0 0 var(--hot),9px 9px 0 2px var(--ink);min-width:0}
.codetabs{display:flex;align-items:stretch;gap:0;background:var(--night2);border-bottom:2px solid var(--ink);background-image:linear-gradient(180deg,transparent calc(100% - 3px),var(--yel) 0)}
.codetabs button{min-height:46px;padding:0 20px;background:none;border:0;border-right:2px solid var(--night);color:#d9d2f5;font:400 1rem/1 var(--fm);text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.codetabs button:hover{color:var(--yel)}
.codetabs button[aria-selected="true"]{background:var(--yel);color:var(--ink)}
pre.code{position:relative;margin:1.6em 0;padding:52px 20px 20px;background:var(--night);color:#f1edff;border:2px solid var(--ink);border-left:8px solid var(--yel);font:400 .95rem/1.6 var(--fm);overflow-x:auto;max-width:100%;tab-size:2;-webkit-overflow-scrolling:touch}
pre.code::before{content:"";position:absolute;left:20px;top:16px;width:74px;height:14px;background:linear-gradient(180deg,var(--yel) 0 5px,transparent 5px 8px,var(--hot) 8px 11px,transparent 11px 13px,var(--aqua) 13px 14px)}
pre.code code{display:block;width:max-content;min-width:100%;white-space:pre}
.codebox pre.code{margin:0;border:0;padding-top:50px}
.codebox pre.code::before{opacity:.9}
.code .k{color:var(--yel)}
.code .s{color:#ffa6d0}
.code .c{color:#aaa1d6;font-style:italic}
.copy{position:absolute;right:6px;top:2px;min-width:64px;min-height:44px;padding:0 12px;background:transparent;color:var(--yel);border:0;font:400 .88rem/1 var(--fm);text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.copy:hover{color:#fff;text-decoration:underline}

/* generic band */
.band{padding:78px 0}
.band.paper+.band.paper{padding-top:0}
.lemon{background:var(--lemon);border-top:3px solid var(--ink)}
.dusk{background:linear-gradient(180deg,#ffabc7 0%,#ffd3a8 46%,#fff1b3 100%);border-top:3px solid var(--ink)}
.night{background:var(--night);color:var(--paper);background-image:radial-gradient(ellipse 70% 90% at 50% 120%,#5a1c8c 0,transparent 70%)}
.sh{display:flex;align-items:baseline;gap:16px;margin-bottom:38px;padding-bottom:20px;--r:var(--ink);background:linear-gradient(var(--r),var(--r)) 0 calc(100% - 9px)/100% 4px no-repeat,linear-gradient(var(--r),var(--r)) 0 calc(100% - 4px)/100% 2px no-repeat,linear-gradient(var(--r),var(--r)) 0 100%/100% 1px no-repeat}
.sh h2{font-size:clamp(1.7rem,3.2vw,2.6rem);text-transform:uppercase;min-width:0}
.num{flex:none;font:italic 800 clamp(1.7rem,3.2vw,2.6rem)/1.1 var(--fd);background:linear-gradient(180deg,#a3106a 0 52%,#0a6c74 53% 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.12em}
.night .sh{--r:var(--yel)}
.night .num{background-image:linear-gradient(180deg,#fffef6 0 52%,var(--hot) 53% 100%)}

/* plates */
.plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.plates.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pl{position:relative;min-width:0;background:var(--white);border:2px solid var(--ink);padding:0 24px 22px}
.pl::before{content:"";display:block;height:12px;margin:0 -24px 20px;background:linear-gradient(90deg,var(--yel) 0 62%,#ffb37a 62% 80%,var(--hot) 80% 93%,var(--aqua) 93%);border-bottom:2px solid var(--ink)}
.pl .n{display:block;font:400 .9rem/1 var(--fm);letter-spacing:.1em;color:var(--pink);margin-bottom:10px}
.pl h3{margin-bottom:10px}
.pl p{margin:0;font-size:1rem;line-height:1.6;color:var(--ink2)}
.dusk .pl{border-left-width:8px}
.plates.three .pl p{font-family:var(--fm);font-size:.95rem;color:var(--ink)}

/* route: the single lane with stops */
.route{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.route li{position:relative;min-width:0;padding-top:76px}
.route li::before{content:"";position:absolute;left:0;right:-36px;top:23px;height:8px;background:var(--yel)}
.route li:last-child::before{right:0;background:linear-gradient(90deg,var(--yel) 0 55%,transparent 55% 62%,var(--yel) 62% 78%,transparent 78% 85%,var(--yel) 85% 92%,transparent 92%)}
.stop{position:absolute;left:0;top:0;width:54px;height:54px;display:grid;place-items:center;background:var(--night);border:4px solid var(--yel);border-radius:50%;font:700 1.4rem/1 var(--fd);color:var(--yel);box-shadow:0 0 0 5px var(--night)}
.route h3{color:var(--paper);margin-bottom:10px;font-size:1.3rem}
.route p{margin:0;color:#d9d2f5}

/* calculator */
.calc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:end}
.calc>div{min-width:0}
.calc label{display:block;margin-bottom:8px;font:400 .9rem/1.3 var(--fm);text-transform:uppercase;letter-spacing:.06em;color:#d9d2f5}
.calc input{width:100%;height:58px;padding:0 16px;background:var(--night2);color:var(--paper);border:2px solid var(--yel);border-radius:0;font:400 1.35rem/1 var(--fm)}
.calc output{display:flex;align-items:center;height:58px;padding:0 18px;background:var(--yel);color:var(--ink);border:2px solid var(--yel);font:700 2rem/1 var(--fd);transform:var(--sk);box-shadow:6px 6px 0 var(--hot);overflow:hidden}

/* prose */
.prose{min-width:0}
.prose>:first-child{margin-top:0}
.prose h2{font-size:clamp(1.5rem,2.6vw,2.05rem);margin:2.2em 0 .8em;padding-bottom:14px;background:linear-gradient(var(--ink),var(--ink)) 0 calc(100% - 6px)/100% 3px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1px no-repeat}
.prose h3{margin:1.8em 0 .6em;font-size:1.25rem}
.prose ul,.prose ol{padding-left:1.35em;margin:0 0 1.2em}
.prose li{margin:.35em 0}
.prose ul li::marker{color:var(--pink)}
.prose ol li::marker{font-family:var(--fm);color:var(--pink)}
.prose :not(pre)>code{background:var(--lemon);border:1px solid var(--line);padding:1px 6px;font-size:.94em;overflow-wrap:anywhere}
.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:1.6em 0;font-size:.98rem;-webkit-overflow-scrolling:touch}
.prose th,.prose td{padding:11px 16px;border:2px solid var(--ink);text-align:left;vertical-align:top;min-width:120px}
.prose th{background:var(--night);color:var(--yel);font:400 .92rem/1.3 var(--fm);text-transform:uppercase;letter-spacing:.05em}
.prose td{background:var(--white)}
.prose blockquote{margin:1.6em 0;padding:14px 22px;border-left:8px solid var(--yel);background:var(--white);box-shadow:inset 2px 0 0 var(--ink)}
.prose strong{font-weight:700}
.mut{color:var(--ink2)}

/* FAQ */
.faq{max-width:900px}
.faq details{background:var(--white);border:2px solid var(--ink);margin-bottom:14px}
.faq summary{display:flex;align-items:center;gap:16px;min-height:60px;padding:12px 20px;cursor:pointer;list-style:none;font:700 1.12rem/1.3 var(--fd)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";flex:none;display:grid;place-items:center;width:34px;height:30px;background:var(--yel);border:2px solid var(--ink);font:700 1.25rem/1 var(--fd);transform:var(--sk)}
.faq details[open] summary::before{content:"\2212";background:var(--ink);color:var(--yel)}
.faq details[open] summary{border-bottom:2px solid var(--ink)}
.faq details p{margin:0;padding:18px 22px 20px 70px;color:var(--ink2)}

/* closing band */
.end{padding:84px 0 150px;text-align:center}
.end h2{font-size:clamp(1.9rem,4vw,3.1rem);text-transform:uppercase;margin-bottom:14px}
.end p{max-width:36em;margin:0 auto 26px;font-size:1.15rem}
.end .acts{justify-content:center;margin-bottom:0}
.end .sun{width:520px}

/* page heads */
.phead{padding:44px 0 76px}
.phead .sun{left:auto;right:5%;transform:none;width:440px;max-width:70vw}
.ph-t{min-width:0;max-width:860px}
.phead h1{margin-bottom:18px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:0 0 22px;font:400 .92rem/1.3 var(--fm);text-transform:uppercase;letter-spacing:.06em}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.crumbs span[aria-current]{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(60vw,420px)}
.crumbs .sl{color:var(--pink);font-weight:700}
.ep{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.ep code{background:var(--night);color:var(--yel);padding:8px 14px;font-size:.95rem;overflow-wrap:anywhere;transform:var(--sk)}
.date{display:inline-block;margin:0;padding:6px 14px;background:var(--ink);color:var(--paper);font:400 .9rem/1.3 var(--fm);text-transform:uppercase;letter-spacing:.08em;transform:var(--sk)}
.nf{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0 0 26px}
.nf a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:500}

/* key page */
.keyp{padding-bottom:64px}
.keyp>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:56px;align-items:start}
.keyp .sun{right:auto;left:8%}
.keyp .facts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));padding:14px 12px 0;gap:18px 22px}
.keyp .fact dd{font-size:1.5rem}
.ph-f{min-width:0;background:var(--white);border:2px solid var(--ink);box-shadow:10px 10px 0 0 var(--yel),10px 10px 0 2px var(--ink)}
.f-h{padding:16px 26px 14px;background:var(--night);color:var(--paper);border-bottom:6px solid var(--yel)}
.f-h h2{font-size:1.5rem;text-transform:uppercase;color:var(--yel)}
.f-h p{margin:6px 0 0;font-size:.98rem;color:#e4defa}
.form{padding:22px 26px 26px}
.tabs2{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);margin-bottom:18px}
.tabs2 button{min-height:46px;padding:6px 8px;background:var(--white);color:var(--ink);border:0;font:700 .95rem/1.2 var(--fd);text-transform:uppercase;letter-spacing:.02em;cursor:pointer}
.tabs2 button+button{border-left:2px solid var(--ink)}
.tabs2 button[aria-selected="true"]{background:var(--ink);color:var(--yel)}
.msg:empty{display:none}
.msg{margin-bottom:16px;padding:11px 14px;font-weight:500;background:var(--lemon);border-left:6px solid var(--ink)}
.msg.err{background:#ffe0ec;border-left-color:var(--pink);color:#7d0a45}
.row{margin-bottom:16px}
.row label{display:block;margin-bottom:6px;font:400 .9rem/1.3 var(--fm);text-transform:uppercase;letter-spacing:.07em}
.row input{width:100%;height:52px;padding:0 14px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:0;font:400 1.06rem/1 var(--ft)}
.row input:focus{background:#fff;outline:3px solid var(--pink);outline-offset:2px}
.note{margin:8px 0 0;font-size:.9rem;line-height:1.45;color:var(--ink2)}
.form form .btn{width:calc(100% - 20px);margin:6px 10px 4px;min-height:56px;font-size:1.08rem}
.keyout{display:none}
.keyout.on{display:block}
.keyout h3{margin-bottom:12px;font-size:1.3rem;text-transform:uppercase}
.keybox{display:flex;align-items:center;gap:14px;padding:12px 18px 12px 14px;background:var(--night);border-left:8px solid var(--yel)}
.keybox>span{flex:1;min-width:0;font:400 1rem/1.4 var(--fm);color:var(--yel);word-break:break-all}
.keybox .btn{flex:none;box-shadow:3px 3px 0 var(--hot)}
.keyout p{margin:14px 0 0;line-height:1.75}
.keyout code{background:var(--lemon);padding:1px 6px;overflow-wrap:anywhere}
.keyout .acts{margin-top:18px;gap:12px 16px}

/* docs + article layouts */
.doc-g{display:grid;grid-template-columns:250px minmax(0,1fr);gap:60px;align-items:start}
.art-g{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:60px;align-items:start}
.art-m{min-width:0}
.toc{position:sticky;top:112px;min-width:0;max-height:calc(100vh - 130px);overflow:auto}
.toc-h{margin:0 0 12px;font:400 .9rem/1.3 var(--fm);text-transform:uppercase;letter-spacing:.1em;color:var(--pink)}
.toc ol{list-style:none;margin:0;padding:0;border-left:8px solid var(--yel);box-shadow:inset 2px 0 0 var(--ink),-2px 0 0 var(--ink);counter-reset:t}
.toc li{counter-increment:t}
.toc a{display:flex;gap:10px;align-items:baseline;min-height:44px;padding:10px 0 10px 14px;color:var(--ink);text-decoration:none;font-size:.97rem;line-height:1.35;border-bottom:1px solid var(--line)}
.toc a::before{content:counter(t,decimal-leading-zero);flex:none;font:400 .85rem/1 var(--fm);color:var(--pink)}
.toc a:hover{background:var(--lemon)}
.take{margin:0 0 44px;padding:24px 28px 20px;background:var(--yel);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.take h2{font-size:1.5rem;text-transform:uppercase;margin-bottom:12px}
.take ol{list-style:none;margin:0;padding:0;counter-reset:k}
.take li{position:relative;counter-increment:k;padding:10px 0 10px 46px;border-top:2px solid var(--ink);font-weight:500;line-height:1.5}
.take li::before{content:counter(k,decimal-leading-zero);position:absolute;left:0;top:12px;font:400 1rem/1.4 var(--fm)}

/* footer */
.foot{background:var(--night);color:#e4defa;padding-bottom:30px}
.foot-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;padding-top:46px;padding-bottom:34px}
.tag{margin:12px 0 16px;font:italic 800 1.25rem/1.2 var(--fd);color:var(--paper)}
.foot .ep code{background:var(--night2);transform:none;border-left:6px solid var(--yel)}
.f-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;align-content:start}
.f-l a{display:flex;align-items:center;min-height:44px;color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(255,251,227,.2)}
.f-l a:hover{color:var(--yel)}
.legal{margin:0;padding-top:20px;border-top:1px solid rgba(255,251,227,.2);font:400 .9rem/1.5 var(--fm);color:#cfc8ee}

@media (max-width:1040px){
.hero-g{grid-template-columns:minmax(0,1fr);gap:40px}
.hero{padding:44px 0 118px}
.plates{grid-template-columns:repeat(2,minmax(0,1fr))}
.doc-g,.art-g{grid-template-columns:minmax(0,1fr);gap:34px}
.art-g .toc{order:-1}
.toc{position:static;max-height:none}
.keyp>.wrap{display:flex;flex-direction:column;gap:26px}
.keyp .ph-t{display:contents}
.keyp .crumbs{margin:0}
.keyp h1,.keyp .lead{margin:0}
.keyp .ph-f{order:2;width:100%;max-width:560px}
.keyp .facts{order:3;width:100%;padding-bottom:10px}
}
@media (max-width:860px){
.burger{display:flex}
.bar{gap:10px;min-height:60px}
.top .key{margin-left:auto}
.nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px 20px 18px;background:var(--night);border-bottom:6px solid var(--yel)}
.nav.open{display:flex}
.nav a{min-height:50px;padding:0 6px;border-bottom:1px solid rgba(255,251,227,.2)}
.nav a[aria-current]{border-bottom-color:var(--yel)}
.route{grid-template-columns:minmax(0,1fr);gap:0}
.route li{padding:4px 0 34px 80px;min-height:84px}
.route li::before{left:23px;right:auto;top:0;bottom:0;width:8px;height:auto}
.route li:last-child::before{right:auto;bottom:30%;background:var(--yel)}
.calc{grid-template-columns:minmax(0,1fr)}
.calc output{margin:0 8px}
.foot-g{grid-template-columns:minmax(0,1fr);gap:24px}
.band{padding:56px 0}
}
@media (max-width:620px){
body{font-size:1rem}
.wrap{padding:0 18px}
.plates,.plates.two{grid-template-columns:minmax(0,1fr);gap:22px}
.logo{font-size:1.02rem;gap:8px}
.mark{width:30px;height:30px}
.top .btn.key{padding:8px 12px;font-size:.8rem;margin-right:4px}
.facts,.keyp .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;padding-left:8px;padding-right:12px}
.facts{padding-top:32px;padding-bottom:40px}
.fact{padding:11px 12px 10px}
.fact:last-child:nth-child(odd){grid-column:1/-1}
.fact dd,.keyp .fact dd{font-size:1.35rem}
.fact dt{font-size:.76rem}
.lead{font-size:1.08rem}
.btn.big{min-height:52px;padding:10px 22px;font-size:1rem}
.hero .acts,.end .acts{flex-direction:column;align-items:stretch;padding:0 10px}
.codetabs button{padding:0 14px;font-size:.92rem}
pre.code{font-size:.86rem;padding-left:14px;padding-right:14px}
.codebox{box-shadow:6px 6px 0 0 var(--hot),6px 6px 0 2px var(--ink);margin-right:8px}
.ph-f{box-shadow:6px 6px 0 0 var(--yel),6px 6px 0 2px var(--ink)}
.keyp .ph-f{width:calc(100% - 8px)}
.f-h{padding:14px 18px 12px}
.form{padding:18px 18px 22px}
.faq details p{padding:16px 18px 18px}
.sh{gap:12px;margin-bottom:28px}
.take{padding:20px 18px 14px;box-shadow:5px 5px 0 var(--ink);margin-right:6px}
.phead{padding:26px 0 60px}
.end{padding:60px 0 120px}
.f-l{grid-template-columns:minmax(0,1fr)}
.ground.thin{height:56px}
}
@media (max-width:380px){
.logo{font-size:.9rem}
.top .btn.key{padding:8px 9px;font-size:.74rem}
.bar{gap:7px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
}