/* apertus.top - anodised faceplate */
:root{--bg:#e9e6ef;--pl:#f5f3f8;--slot:#ebe7f1;--ink:#1d1428;--mut:#544a62;--ln:#c8c1d3;--edge:#8f86a0;--vi:#7d22b3;--vid:#561680;--lcd:#1a1025;--lci:#ecd6ff;--lcm:#b9a6cf;--led:#f0a020;--th:148px;
--fd:"Sofia Sans Extra Condensed","Arial Narrow",Impact,sans-serif;--fb:Onest,system-ui,-apple-system,"Segoe UI",sans-serif;--fm:"Kode Mono",ui-monospace,Menlo,Consolas,monospace}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg) repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 1px,transparent 1px 4px);color:var(--ink);font:400 17px/1.65 var(--fb);overflow-wrap:break-word}
[hidden]{display:none!important}
img,svg{max-width:100%}
a{color:var(--vi);text-underline-offset:3px}
a:hover{color:var(--vid)}
:focus-visible{outline:3px solid var(--vi);outline-offset:2px;border-radius:3px}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
.skip{position:absolute;left:8px;top:-80px;z-index:99;background:var(--ink);color:#fff;padding:12px 16px;border-radius:4px}
.skip:focus{top:8px}
.deck{max-width:1232px;margin:0 auto;padding:0 16px}
.led{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:#7a6a8c}
.led.on{background:var(--led);box-shadow:0 0 0 3px rgba(240,160,32,.28)}
.lbl,.eyebrow,.meta,.sub{display:flex;align-items:center;gap:10px;font:400 12px/1.4 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}

/* iris */
.iris{display:block;flex:none}
.i-rim{fill:var(--lcd)}
.i-tk{fill:none;stroke:var(--vi);stroke-width:2.2;stroke-dasharray:1 5}
.i-bl path{fill:#d8d1e3;stroke:var(--lcd);stroke-width:.7;stroke-linejoin:round}
.i-bl path:nth-child(even){fill:#c5bcd4}
.i-bl path:nth-child(3n){fill:#e6e0ee}
.i-led{fill:var(--led)}
.i-logo .i-bl path,.i-foot .i-bl path{fill:var(--vi)}
.i-logo .i-bl path:nth-child(even),.i-foot .i-bl path:nth-child(even){fill:#9a48cc}
.i-logo .i-bl path:nth-child(3n),.i-foot .i-bl path:nth-child(3n){fill:#6a1b99}
.i-logo .i-tk,.i-foot .i-tk{stroke:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;font:600 15px/1.2 var(--fb);color:#fff;background:var(--vi);border:0;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 0 var(--vid);text-decoration:none;cursor:pointer;text-align:center;transition:transform .08s,box-shadow .08s,background .15s}
.btn:hover{background:#8d2bc8;color:#fff}
.btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 0 var(--vid)}
.btn.ghost{background:#fcfbfd;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--edge),0 3px 0 #b7afc4}
.btn.ghost:hover{background:#fff;color:var(--vid)}
.btn.ghost:active{box-shadow:inset 0 0 0 1.5px var(--edge),0 1px 0 #b7afc4}
.btn.big{min-height:56px;padding:0 30px;font-size:17px}
.btn.sm{min-height:44px;padding:0 14px;font-size:14px}
.btn[disabled]{opacity:.6;cursor:wait}
.btns{display:flex;flex-wrap:wrap;gap:14px}

/* faceplate header */
.fp{position:sticky;top:calc(var(--th)*-1);z-index:40;background:var(--pl);box-shadow:0 1px 0 var(--ln),0 10px 24px -18px rgba(40,20,60,.7)}
.fp-top{height:var(--th);overflow:hidden;border-bottom:1px solid var(--ln);background:linear-gradient(#faf9fc,#efecf4)}
.fp-topin{display:flex;align-items:center;justify-content:space-between;gap:32px;height:100%}
.plate{display:flex;flex-direction:column;gap:8px;min-width:0}
.plate-n{font:800 clamp(52px,8vw,108px)/.8 var(--fd);text-transform:uppercase;letter-spacing:-.005em;white-space:nowrap}
.plate-t{font:400 12px/1.3 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.fp-lcd{display:none;flex-direction:column;gap:8px;align-items:stretch;padding:10px;border:1px solid var(--ln);border-radius:8px;background:var(--slot)}
.lcd{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--lcd);color:var(--lci);font:400 13px/1.3 var(--fm);border-radius:4px;box-shadow:inset 0 2px 5px #000;white-space:nowrap}
.fp-rail{background:var(--pl)}
.fp-railin{display:flex;align-items:center;gap:12px;height:60px}
.logo{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none;font:600 14px/1 var(--fm)}
.logo:hover{color:var(--vi)}
.i-logo{width:38px;height:38px}
.logo b{display:none;font-weight:600}
.nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:8px 16px 18px;background:var(--pl);border-top:1px solid var(--ln);box-shadow:0 18px 24px -18px rgba(40,20,60,.7)}
.nav.open{display:flex}
.nav a{display:flex;align-items:center;min-height:48px;padding:0 6px;font:600 16px/1.2 var(--fb);color:var(--ink);text-decoration:none;border-bottom:1px dashed var(--ln)}
.nav a[aria-current]{color:var(--vi)}
.nav a[aria-current]::before{content:"";width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--led)}
.btn.key{margin-left:auto;min-height:44px;padding:0 16px}
.burger{flex:none;width:46px;height:44px;padding:0;background:#fcfbfd;border:0;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--edge),0 3px 0 #b7afc4;cursor:pointer}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;margin:0 auto;background:var(--ink);content:"";position:relative}
.burger span::before{position:absolute;top:-6px}
.burger span::after{position:absolute;top:6px}

/* page head */
main.deck{padding-bottom:72px}
.ph{padding:36px 0 24px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:18px;font:400 12px/1.4 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--edge)}
.crumbs a{color:var(--mut);display:inline-block;padding:13px 0;margin:-13px 0}
h1{font:800 clamp(42px,6.2vw,88px)/.92 var(--fd);text-transform:uppercase;letter-spacing:.002em;text-wrap:balance}
.lead{margin-top:18px;max-width:62ch;font-size:19px;line-height:1.55;color:#33283f}
.meta,.sub{margin-top:18px}
h2{font:800 clamp(30px,3.6vw,44px)/1 var(--fd);text-transform:uppercase;letter-spacing:.01em}
h3{font:600 18px/1.3 var(--fb)}

/* hero */
.hero{display:grid;gap:32px;padding:32px 0 8px}
.hero>*{min-width:0}
.eyebrow{margin-bottom:18px}
.chk{margin:22px 0 26px;display:grid;gap:10px}
.chk li{position:relative;padding:0 0 0 30px;font-size:16px;line-height:1.5}
.chk li::before{content:"";position:absolute;left:2px;top:6px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,var(--led) 0 3px,var(--lcd) 3.6px)}
.hero-i{position:relative;padding-top:104px}
.i-hero{position:absolute;top:0;right:0;width:230px;height:230px}
.hero-code{position:relative;z-index:1}
.hero-code .lbl{margin-bottom:10px;max-width:calc(100% - 240px);min-height:34px}

/* code */
.codebox{background:var(--lcd);border-radius:8px;box-shadow:0 0 0 6px var(--pl),0 0 0 7px var(--ln),0 26px 36px -24px rgba(40,20,60,.75);margin:6px}
.codetabs{display:flex;gap:2px;padding:6px 8px 0;border-bottom:1px solid #3b2a4e;overflow-x:auto}
.codetabs button{min-height:44px;padding:0 16px;font:400 13px/1 var(--fm);color:var(--lcm);background:none;border:0;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap}
.codetabs button[aria-selected="true"]{color:#fff;border-color:var(--led)}
.codetabs button:focus-visible,pre.code:focus-visible,.copy:focus-visible,.band :focus-visible,.tk :focus-visible{outline-color:var(--led)}
pre.code{position:relative;margin:22px 0;padding:56px 18px 20px;background:var(--lcd);color:var(--lci);font:400 13.5px/1.65 var(--fm);border-radius:8px;overflow-x:auto;white-space:pre;tab-size:2;max-width:100%;box-shadow:inset 0 2px 8px #000}
.codebox pre.code{margin:0;border-radius:0 0 8px 8px;box-shadow:none}
pre.code code{font:inherit;background:none;padding:0;color:inherit}
pre.code .k{color:#dca8ff}
pre.code .s{color:#ffd28c}
pre.code .c{color:#a898bd}
.copy{position:absolute;top:6px;right:6px;min-width:64px;height:44px;padding:0 12px;font:400 11px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--lci);background:#2a1c3a;border:1px solid #57446c;border-radius:5px;cursor:pointer}
.copy:hover{background:#3a2850}

/* facts as LCD windows */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:36px 0;padding:10px;background:var(--slot);border:1px solid var(--ln);border-radius:10px;box-shadow:inset 0 1px 0 #fff}
.facts div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;min-width:0;padding:14px 14px 12px;background:var(--lcd);border-radius:5px;box-shadow:inset 0 2px 6px #000}
.facts div:last-child{grid-column:1/-1}
.facts dt{font:400 11px/1.35 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--lcm)}
.facts dd{font:600 clamp(24px,6.4vw,34px)/1 var(--fm);color:var(--lci);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* modules */
main{counter-reset:mod}
.mod{position:relative;margin:36px 0;padding:26px 20px 28px;border:1px solid var(--ln);border-radius:10px;counter-increment:mod;box-shadow:inset 0 1px 0 #fff,0 20px 30px -28px rgba(40,20,60,.7);
background:radial-gradient(circle at 13px 13px,#857c93 0 1.1px,#d3cddc 1.5px 3.6px,#9a92a8 4px 4.6px,transparent 5px),radial-gradient(circle at calc(100% - 13px) 13px,#857c93 0 1.1px,#d3cddc 1.5px 3.6px,#9a92a8 4px 4.6px,transparent 5px),radial-gradient(circle at 13px calc(100% - 13px),#857c93 0 1.1px,#d3cddc 1.5px 3.6px,#9a92a8 4px 4.6px,transparent 5px),radial-gradient(circle at calc(100% - 13px) calc(100% - 13px),#857c93 0 1.1px,#d3cddc 1.5px 3.6px,#9a92a8 4px 4.6px,transparent 5px),var(--pl)}
.mh{display:flex;align-items:center;gap:14px;margin:0 0 22px;padding:0 0 16px 8px;border-bottom:1px dashed var(--edge)}
.mh::before{content:counter(mod,decimal-leading-zero);flex:none;padding:5px 8px;font:600 12px/1 var(--fm);color:#fff;background:var(--vi);border-radius:3px}
.slotgrid,.feat,.ex,.ben{display:grid;gap:12px}
.feat li,.ex li,.ben li{min-width:0;padding:24px 18px 18px;background:var(--slot) repeating-linear-gradient(90deg,var(--edge) 0 1px,transparent 1px 9px) 0 0/100% 6px no-repeat;border:1px solid var(--ln);border-radius:6px;box-shadow:inset 0 2px 4px rgba(40,20,60,.08)}
.feat,.ex,.ben,.steps,.uses{counter-reset:it}
.feat li,.ex li,.steps li,.uses li{counter-increment:it}
.feat h3::before,.ex h3::before{content:counter(it,decimal-leading-zero);display:block;margin-bottom:8px;font:600 12px/1 var(--fm);color:var(--vi);letter-spacing:.1em}
.feat p,.ex p,.ben p,.steps p,.uses p{margin-top:8px;font-size:15.5px;line-height:1.6;color:#33283f}
.steps{display:grid;gap:22px}
.steps li{position:relative;min-width:0;padding-left:72px;min-height:56px}
.steps li::before{content:counter(it);position:absolute;left:0;top:0;width:56px;height:56px;display:flex;align-items:center;justify-content:center;font:600 28px/1 var(--fm);color:var(--lci);background:var(--lcd);border-radius:6px;box-shadow:inset 0 2px 6px #000,0 0 0 4px var(--slot),0 0 0 5px var(--ln)}
.uses{display:grid;gap:22px}
.uses li{position:relative;min-width:0;padding-left:46px}
.uses li::before{content:"";position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,var(--lcd) 0 26%,transparent 29%),conic-gradient(var(--vi) 0 14.3%,#a55ad4 0 28.6%,#6a1b99 0 42.9%,var(--vi) 0 57.1%,#a55ad4 0 71.4%,#6a1b99 0 85.7%,#b877de 0)}
.ben{margin-top:8px}
.ben li{padding:22px 16px 16px}
.ben h3{font-size:16.5px}

/* prose */
.m-prose{padding-top:30px}
.m-prose.flat{margin-top:0}
.prose{max-width:780px}
.prose>*+*{margin-top:18px}
.prose h2{margin-top:44px;padding-top:18px;border-top:1px dashed var(--edge);font-size:clamp(28px,3.2vw,38px);scroll-margin-top:84px}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{margin-top:30px;font-size:19px;scroll-margin-top:84px}
.prose ul,.prose ol{padding-left:4px;display:grid;gap:8px}
.prose ul li{position:relative;padding-left:24px}
.prose ul li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;background:var(--vi);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.prose ol{counter-reset:pl}
.prose ol li{position:relative;padding-left:38px;counter-increment:pl}
.prose ol li::before{content:counter(pl,decimal-leading-zero);position:absolute;left:0;top:.28em;font:600 13px/1.4 var(--fm);color:var(--vi)}
.prose code,.keyout code{padding:2px 6px;font:400 .88em var(--fm);background:#e2dbed;border-radius:3px;overflow-wrap:anywhere}
.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:15px;border:1px solid var(--ln);border-radius:6px;background:#fcfbfd}
.prose th,.prose td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--ln);vertical-align:top}
.prose th{font:400 11.5px/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--lci);background:var(--lcd);white-space:nowrap}
.prose td:first-child{font-weight:600}
.prose tr:last-child td{border-bottom:0}
.prose strong{font-weight:600}

/* faq */
.faq details{border-bottom:1px solid var(--ln)}
.faq details:last-child{border-bottom:0}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:60px;padding:12px 4px;font:600 17px/1.35 var(--fb);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;position:relative;width:40px;height:22px;border-radius:11px;background:#cfc8da;box-shadow:inset 0 1px 3px rgba(40,20,60,.45);transition:background .15s}
.faq summary i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.4);transition:transform .15s}
.faq details[open] summary i{background:var(--vi)}
.faq details[open] summary i::after{transform:translateX(18px)}
.faq details p{padding:0 60px 20px 4px;max-width:78ch;color:#33283f}

/* cta band */
.band{display:grid;gap:22px;align-items:center;margin:44px 0 0;padding:28px 22px;background:var(--lcd);color:#fff;border-radius:10px;box-shadow:inset 0 2px 10px #000,0 0 0 6px var(--pl),0 0 0 7px var(--ln)}
.band h2{color:#fff}
.band p{color:#d9cbe8}
.band-t p{margin-top:10px;max-width:56ch}
.i-band{width:96px;height:96px}
.i-band .i-rim{fill:#0d0714}
.band .btn.ghost,.tk .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #8a76a1}
.band .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 0 #3d0f5c}
.band .btn:not(.ghost){background:#9131cc}

/* key + support */
.keygrid{display:grid;gap:24px;padding-bottom:8px}
.keygrid>*{min-width:0}
.keygrid .ph{padding-bottom:0}
.panel{position:relative;padding:24px 18px 22px;background:var(--pl);border:1px solid var(--ln);border-top:5px solid var(--vi);border-radius:10px;box-shadow:inset 0 1px 0 #fff,0 28px 40px -28px rgba(40,20,60,.8)}
.tabs2{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:16px;padding:4px;background:#dcd5e6;border-radius:8px;box-shadow:inset 0 1px 3px rgba(40,20,60,.35)}
.tabs2 button{min-height:44px;padding:0 8px;font:600 14.5px/1.2 var(--fb);color:var(--mut);background:none;border:0;border-radius:5px;cursor:pointer}
.tabs2 button[aria-selected="true"]{color:var(--ink);background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.28),inset 0 -3px 0 var(--vi)}
.msg{margin-bottom:14px;padding:11px 14px;font-size:14.5px;line-height:1.45;background:#ece4f6;border-left:4px solid var(--vi);border-radius:4px}
.msg:empty{display:none}
.msg.err{background:#fde7ea;color:#8a1026;border-left-color:#c2183a}
.row{margin-bottom:14px}
.row label,.calc label{display:block;margin-bottom:6px;font:400 11.5px/1.4 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.row input,.row select,.row textarea,.calc input{display:block;width:100%;min-height:48px;padding:10px 12px;font:400 16px/1.4 var(--fb);color:var(--ink);background:#fff;border:1.5px solid var(--edge);border-radius:6px;box-shadow:inset 0 2px 3px rgba(40,20,60,.1)}
.row textarea{min-height:150px;resize:vertical}
.row input:focus,.row select:focus,.row textarea:focus,.calc input:focus{border-color:var(--vi);outline:3px solid rgba(125,34,179,.3);outline-offset:0}
.note{margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--mut)}
.mut{color:var(--mut)}
form .btn{width:100%;min-height:52px;margin-top:4px}
[data-support] .btn{width:auto;min-width:180px}
[data-support-msg]{font-size:15px;min-height:1.5em}
.keyout{display:none}
.keyout.on{display:block}
.keyout h3{margin-bottom:12px;font:800 30px/1 var(--fd);text-transform:uppercase}
.keybox{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;background:var(--lcd);border-radius:6px;box-shadow:inset 0 2px 6px #000}
.keybox span{flex:1;min-width:0;font:400 13.5px/1.5 var(--fm);color:var(--lci);word-break:break-all}
.keyout p{margin-top:12px;font-size:15px;line-height:1.9}
.keyout strong{font-weight:600}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.i-sup{display:none}

/* calculator */
.calc{display:grid;gap:14px}
.calc>div{min-width:0}
.calc>div:last-child{display:flex;flex-direction:column;padding:14px 16px;background:var(--lcd);border-radius:6px;box-shadow:inset 0 2px 6px #000,0 0 0 4px var(--slot),0 0 0 5px var(--ln);margin:5px}
.calc>div:last-child label{color:var(--lcm)}
.calc output{font:600 clamp(34px,8vw,48px)/1.1 var(--fm);color:var(--lci);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* docs / article columns */
.cols{display:grid;gap:24px}
.cols>*{min-width:0}
.rail{display:grid;gap:18px}
.toc{padding:18px 18px 12px;background:var(--pl);border:1px solid var(--ln);border-radius:10px}
.toc .lbl{padding-bottom:10px;border-bottom:1px dashed var(--edge)}
.toc ol{counter-reset:tc}
.toc li{counter-increment:tc;border-bottom:1px solid #e0dbe8}
.toc li:last-child{border-bottom:0}
.toc a{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;font-size:14.5px;line-height:1.35;color:var(--ink);text-decoration:none}
.toc a::before{content:counter(tc,decimal-leading-zero);flex:none;font:600 12px/1 var(--fm);color:var(--vi)}
.toc a:hover{color:var(--vi)}
.sidecta{display:none;padding:20px 18px;background:var(--slot);border:1px solid var(--ln);border-top:5px solid var(--vi);border-radius:10px}
.sidecta h2{font-size:28px}
.sidecta p{margin:8px 0 14px;font-size:14.5px;line-height:1.5;color:var(--mut)}
.sidecta .btn{width:100%}
.art .rail{order:-1}
.tk{margin:0 0 24px;padding:24px 20px;background:var(--lcd);border-radius:10px;box-shadow:inset 0 2px 10px #000,0 0 0 6px var(--pl),0 0 0 7px var(--ln)}
.tk h2{display:flex;align-items:center;gap:12px;color:#fff;font-size:30px}
.tk h2::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--led);box-shadow:0 0 0 4px rgba(240,160,32,.28)}
.tk ol{margin-top:16px;counter-reset:tk;display:grid;gap:12px}
.tk li{position:relative;padding-left:40px;counter-increment:tk;font-size:16px;line-height:1.55;color:#efe6fa}
.tk li::before{content:counter(tk,decimal-leading-zero);position:absolute;left:0;top:.25em;font:600 13px/1.4 var(--fm);color:var(--led)}
.read .prose{font-size:18px;line-height:1.75}
.read .prose>p,.read .prose>ul,.read .prose>ol{max-width:68ch}
.cols .m-faq{margin-bottom:0}

/* 404 */
.nf{display:grid;gap:28px;justify-items:start;padding:48px 0}
.i-nf{width:180px;height:180px}
.nf .btns{margin-top:26px}
.nf-l{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:22px}
.nf-l a{display:inline-flex;align-items:center;min-height:44px;font:400 13px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase}

/* footer */
.ft{background:var(--pl);border-top:1px solid var(--ln);box-shadow:inset 0 6px 0 var(--slot)}
.ft .ft-in{display:grid;gap:28px;padding-top:44px;padding-bottom:32px}
.ft-b{display:grid;justify-items:start;gap:6px}
.i-foot{width:52px;height:52px;margin-bottom:8px}
.ft-n{font:800 44px/.9 var(--fd);text-transform:uppercase}
.ft-t{margin-bottom:14px;font:400 12px/1.4 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.ft-l{display:grid;align-content:start}
.ft-l a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-size:15.5px;text-decoration:none}
.ft-l a:hover{color:var(--vi);text-decoration:underline}
.ft-legal{padding-top:20px;border-top:1px dashed var(--edge);font:400 12px/1.6 var(--fm);color:var(--mut)}

@media (min-width:600px){
.deck{padding:0 28px}
.facts{grid-template-columns:repeat(6,minmax(0,1fr))}
.facts div{grid-column:span 2}
.facts div:nth-child(-n+2){grid-column:span 3}
.facts div:last-child{grid-column:span 2}
.mod{padding:30px 30px 34px}
.feat,.ex,.ben,.uses{grid-template-columns:repeat(2,minmax(0,1fr))}
.band{padding:36px 34px;grid-template-columns:auto minmax(0,1fr)}
.band .btns{grid-column:1/-1}
.panel{padding:30px 28px 28px}
.calc{grid-template-columns:repeat(2,minmax(0,1fr))}
.calc>div:last-child{grid-column:1/-1}
.ft-in{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}
.ft-legal{grid-column:1/-1}
.i-hero{width:300px;height:300px}
.hero-i{padding-top:140px}
.hero-code .lbl{max-width:calc(100% - 310px)}
.nf{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:48px;padding:72px 0}
.i-nf{width:240px;height:240px}
}
@media (max-width:899px){
:root{--th:92px}
.plate-n{font-size:clamp(46px,14vw,72px)}
.plate-t{font-size:10.5px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (min-width:900px){
.fp-lcd{display:flex}
.logo b{display:inline}
.burger{display:none}
.nav{display:flex;position:static;flex-direction:row;gap:2px;margin-left:auto;padding:0;background:none;border:0;box-shadow:none}
.nav a{min-height:44px;padding:0 14px;font-size:15px;border:0;border-radius:5px;position:relative}
.nav a:hover{background:var(--slot)}
.nav a[aria-current]::before{position:absolute;left:14px;right:14px;bottom:2px;width:auto;height:3px;margin:0;border-radius:2px;background:var(--vi)}
.btn.key{margin-left:10px}
.fp-railin{gap:16px}
.ph{padding:52px 0 30px}
.hero{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:52px;align-items:center;padding:52px 0 16px}
.hero-i{padding-top:190px}
.i-hero{width:380px;height:380px;top:-10px}
.hero-code .lbl{max-width:calc(100% - 390px)}
.facts{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:12px}
.facts div,.facts div:nth-child(-n+2),.facts div:last-child{grid-column:auto}
.facts dd{font-size:clamp(26px,2.9vw,38px)}
.f-big{grid-template-columns:repeat(6,minmax(0,1fr))}
.f-big div,.f-big div:last-child{grid-column:span 2}
.f-big div:nth-child(-n+2){grid-column:span 3;padding:22px 22px 18px}
.f-big div:nth-child(-n+2) dd{font-size:clamp(48px,6vw,76px)}
.feat,.ex{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.steps li:not(:last-child)::after{content:"";position:absolute;left:70px;right:-22px;top:27px;border-top:2px dashed var(--edge)}
.steps h3{padding-top:66px;margin-left:-72px}
.steps p{margin-left:-72px}
.uses{gap:28px 40px}
.band{grid-template-columns:auto minmax(0,1fr) auto;padding:40px 44px;gap:32px}
.band .btns{grid-column:auto;flex-direction:column}
.i-band{width:120px;height:120px}
.keygrid{grid-template-columns:minmax(0,1fr) minmax(0,470px);grid-template-areas:"h f" "b f";gap:28px 56px;align-items:start;padding-top:8px}
.kg-h{grid-area:h}
.kg-f{grid-area:f;padding-top:52px;position:sticky;top:76px}
.kg-b{grid-area:b}
.sup .kg-b{display:flex;justify-content:flex-start}
.i-sup{display:block;width:260px;height:260px;margin-top:12px}
.calc{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);align-items:end;gap:20px}
.calc>div:last-child{grid-column:auto}
.cols{grid-template-columns:270px minmax(0,1fr);gap:40px;align-items:start}
.cols.art{grid-template-columns:minmax(0,1fr) 290px}
.art .rail{order:0}
.rail{position:sticky;top:76px;max-height:calc(100vh - 92px);overflow-y:auto}
.sidecta{display:block}
.m-prose.flat{padding:38px 44px 42px}
.tk{padding:30px 34px}
.tk ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px}
.legal{max-width:920px}
}
@media (min-width:1180px){
main>.mod{width:calc(100% - 168px)}
main>.mod:nth-of-type(odd){margin-left:168px}
main>.mod::after{content:counter(mod,decimal-leading-zero);position:absolute;top:6px;right:-152px;width:136px;text-align:center;font:800 132px/1 var(--fd);color:transparent;-webkit-text-stroke:1.5px #b3a9c2;pointer-events:none}
main>.mod:nth-of-type(odd)::after{right:auto;left:-152px}
main>.mod.legal{width:auto;margin-left:0}
main>.mod.legal::after{content:none}
main>.m-prose:not(.legal) .prose{max-width:820px}
}
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:scroll()){
.logo b{animation:rb linear both;animation-timeline:scroll(root);animation-range:0 150px}
.i-logo .i-bl{transform-origin:50px 50px;animation:rt linear both;animation-timeline:scroll(root);animation-range:0 150px}
}
.i-hero .i-bl,.i-nf .i-bl,.i-sup .i-bl{transform-origin:50px 50px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hero:hover .i-hero .i-bl,.nf:hover .i-nf .i-bl,.sup:hover .i-sup .i-bl{transform:rotate(25.7deg)}
}
@keyframes rb{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes rt{from{transform:rotate(0)}to{transform:rotate(51.43deg)}}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
}