/* minimaxapi.cc - strip-chart recorder: chart paper feeding out of a dark recorder head */
:root{
  --paper:#f2f7f9;--sheet:#fdfeff;--ink:#142226;--ink2:#2d4147;--mut:#4d6168;
  --pen:#275f9b;--pen-d:#1c4b7b;--red:#a718b8;
  --desk:#131c20;--mod:#17262a;--mod2:#223339;--edge:#304950;--lcd:#0c1518;
  --orchid:#aee2ff;--dim:#bcd2db;--hot:#f570ff;
  --line:rgba(39,95,155,.24);--grid:rgba(39,95,155,.06);
  --fd:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --fb:"Barlow","Helvetica Neue",Arial,sans-serif;
  --fm:"B612 Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --focus:#3380c9;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:92px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--desk);color:var(--ink);font:400 17px/1.62 var(--fb);-webkit-font-smoothing:antialiased}
a{color:var(--pen-d);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--pen)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
.head :focus-visible,.mod :focus-visible,pre.code:focus-visible,pre.code :focus-visible{outline-color:var(--orchid)}
h1,h2,h3{font-family:var(--fd);font-weight:700;line-height:1.08;margin:0;overflow-wrap:anywhere}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--orchid);color:var(--desk);padding:12px 16px;border-radius:6px;font:700 14px var(--fm)}
.skip:focus{top:10px}

/* LED */
.led{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:var(--pen);box-shadow:0 0 0 2px rgba(39,95,155,.18)}
.head .led,.mod .led{background:#3b555d;box-shadow:none}
.mod-top .led,.head a[aria-current] .led{background:var(--orchid);box-shadow:0 0 8px var(--orchid)}

/* buttons = push keys */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:6px;background:var(--pen);color:#ffffff;
  font:600 1.06rem/1.1 var(--fd);letter-spacing:.045em;text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer;
  box-shadow:0 3px 0 #12365a;transition:transform .08s,box-shadow .08s,background .15s}
.btn:hover{background:#2f6fb2;color:#ffffff}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #12365a}
.btn.big{min-height:54px;padding:0 28px;font-size:1.18rem}
.btn.sm{min-height:44px;padding:0 16px;font-size:.98rem}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink),0 3px 0 rgba(20,34,38,.22)}
.btn.line:hover{background:rgba(39,95,155,.08);color:var(--ink)}
.head .btn,.mod .btn{background:var(--orchid);color:var(--desk);box-shadow:0 3px 0 #5b91b0}
.head .btn:hover,.mod .btn:hover{background:#c9eaff;color:var(--desk)}
.mod .btn.ghost{background:transparent;color:#eaf3f8;box-shadow:inset 0 0 0 1px #63828c}
.mod .btn.ghost:hover{background:var(--mod2);color:#ffffff}
.btn[disabled]{opacity:.6;cursor:progress}

/* recorder head */
.head{position:sticky;top:0;z-index:50;padding:0 12px}
.head-in{position:relative;max-width:812px;margin:0 auto;height:64px;display:flex;align-items:center;gap:10px;padding:0 14px;
  background:linear-gradient(#1f3035,var(--mod));border:1px solid var(--edge);border-top:0;border-radius:0 0 12px 12px;
  box-shadow:0 12px 26px -6px rgba(0,0,0,.6),inset 0 -3px 0 #0d161a}
.logo{display:inline-flex;align-items:center;gap:9px;min-height:44px;text-decoration:none;color:#eaf3f8;font:700 14px/1 var(--fm);letter-spacing:-.01em}
.logo:hover{color:#ffffff}
.logo span{background:var(--lcd);border:1px solid var(--edge);border-radius:4px;padding:8px 9px;color:var(--orchid)}
.mark{display:block;flex:none;border-radius:6px}
.nav{display:flex;align-items:center;margin-left:auto}
.nav a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 9px;color:var(--dim);text-decoration:none;font:400 12.5px/1 var(--fm);border-radius:5px}
.nav a:hover{color:#ffffff;background:var(--mod2)}
.nav a[aria-current]{color:#ffffff}
.btn.key{min-height:44px;padding:0 15px;font-size:1rem;white-space:nowrap;flex:none}
.burger{display:none;flex:none;width:44px;height:44px;border:1px solid var(--edge);border-radius:6px;background:var(--lcd);cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:var(--orchid);border-radius:1px}
.burger span{position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* desk + paper roll */
.desk{padding:0 0 56px;background:radial-gradient(900px 420px at 50% 0,rgba(39,95,155,.28),transparent 70%);overflow-x:clip}
.paper{position:relative;max-width:760px;margin:-10px auto 0;color:var(--ink);box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
  background:
   radial-gradient(circle at 16px 16px,var(--desk) 5px,transparent 5.7px) 0 0/32px 32px repeat-y,
   radial-gradient(circle at 16px 16px,var(--desk) 5px,transparent 5.7px) 100% 0/32px 32px repeat-y,
   linear-gradient(var(--grid) 1px,transparent 1px) 0 0/100% 24px,
   linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/24px 100%,
   var(--paper)}
.paper::before{content:"";position:absolute;top:130px;bottom:0;left:88px;width:7px;pointer-events:none;
  border-left:1px solid var(--line);background:repeating-linear-gradient(var(--line) 0 1px,transparent 1px 24px)}
.col{position:relative;padding:0 58px 0 114px;min-width:0}
main{display:block;padding-bottom:8px}

/* pen trace between the limit lines */
.trace{position:relative;height:106px;margin:0 32px;padding-top:10px;border-bottom:1px solid var(--line)}
.trace svg{display:block;width:100%;height:96px;overflow:visible}
.trace .lim{stroke:var(--red);stroke-width:1.3;stroke-dasharray:7 5;vector-effect:non-scaling-stroke;opacity:.85}
.trace .pl{fill:none;stroke:var(--pen);stroke-width:2.3;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pen{position:absolute;width:13px;height:13px;margin:4px 0 0 -6px;border-radius:50%;background:var(--pen);box-shadow:0 0 0 4px rgba(39,95,155,.22);animation:pen 2.4s ease-in-out infinite}
.pen::after{content:"";position:absolute;left:5.5px;top:-200px;width:2px;height:200px;background:linear-gradient(transparent,rgba(20,34,38,.5))}
@keyframes pen{50%{box-shadow:0 0 0 8px rgba(39,95,155,.1)}}

/* page top */
.top{padding-top:30px}
.crumbs{display:flex;align-items:center;gap:8px;font:400 12px/1.2 var(--fm);color:var(--mut);white-space:nowrap;overflow:hidden;margin-bottom:14px}
.crumbs a{color:var(--pen-d);display:inline-flex;align-items:center;min-height:44px;flex:none}
.crumbs b{font-weight:400;color:var(--line)}
.crumbs span{overflow:hidden;text-overflow:ellipsis;min-width:0}
h1{font-size:clamp(2.2rem,6.2vw,3.5rem);letter-spacing:-.012em;line-height:1}
.lead{font-size:1.16rem;line-height:1.5;color:var(--ink2);margin:16px 0 0}
.eyebrow{display:flex;align-items:center;gap:9px;margin:6px 0 14px;font:700 12.5px/1.3 var(--fm);letter-spacing:.09em;text-transform:uppercase;color:var(--pen-d)}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.ticks{list-style:none;display:grid;gap:0;margin:26px 0 0;border-top:1px solid var(--line)}
.ticks li{position:relative;padding:11px 0 11px 30px;border-bottom:1px solid var(--line);font:400 14px/1.4 var(--fm);color:var(--ink2)}
.ticks li::before{content:"";position:absolute;left:4px;top:15px;width:12px;height:7px;border-left:2.5px solid var(--pen);border-bottom:2.5px solid var(--pen);transform:rotate(-45deg)}
.dateline{margin:16px 0 0;font:400 12.5px/1.3 var(--fm);color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.endpoint{display:flex;align-items:stretch;margin:22px 0 0;background:var(--mod);border-radius:6px;overflow:hidden;font:400 13.5px/1.3 var(--fm)}
.endpoint .lb{flex:none;padding:13px 12px;background:var(--mod2);color:var(--dim);text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.endpoint code{padding:13px 14px;color:var(--orchid);white-space:nowrap;overflow-x:auto;min-width:0;background:none}
.stampline{display:flex;align-items:center;gap:10px;margin:16px 0 0;font:400 13.5px/1.4 var(--fm);color:var(--ink2)}

/* dark instrument modules */
.mod{position:relative;margin:30px 0 0;background:var(--mod);color:#e6f0f5;border:1px solid var(--edge);border-radius:10px;
  box-shadow:0 3px 0 #081012,0 22px 34px -18px rgba(19,28,32,.7);min-width:0}
.mod-top{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 14px;border-bottom:1px solid var(--edge);
  font:400 12px/1.2 var(--fm);letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.mod-top .lb{flex:none;max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mod-top .ro{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--lcd);border-radius:4px;padding:5px 8px;color:var(--orchid);text-transform:none;letter-spacing:0}

/* code */
code{font-family:var(--fm);font-size:.86em}
.codebox{position:relative;min-width:0}
.codetabs{display:flex;border-bottom:1px solid var(--edge);padding-right:96px}
.codetabs button{min-height:46px;padding:0 15px;border:0;background:none;color:var(--dim);font:400 13px/1 var(--fm);cursor:pointer}
.codetabs button:hover{color:#ffffff}
.codetabs button[aria-selected=true]{color:#ffffff;box-shadow:inset 0 -3px 0 var(--orchid);background:var(--mod2)}
pre.code{position:relative;margin:0;max-width:100%;min-width:0;background:var(--lcd);color:#e3eff5;border-radius:0 0 9px 9px;padding-top:46px}
pre.code code{display:block;overflow-x:auto;padding:4px 16px 18px;font:400 13px/1.7 var(--fm);white-space:pre;tab-size:2}
pre.code .k{color:var(--orchid)}pre.code .s{color:#fe9eff}pre.code .c{color:#99b0b8}
pre.code .copy{position:absolute;top:1px;right:6px;min-height:44px;min-width:64px;padding:0 12px;border:0;background:none;color:var(--orchid);font:700 12px/1 var(--fm);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
pre.code .copy::before{content:"";display:inline-block;width:9px;height:11px;margin-right:7px;border:1.5px solid currentColor;border-radius:2px;vertical-align:-1px}
pre.code .copy:hover{color:#ffffff}
.codebox pre.code{position:static;padding-top:14px}
.codebox pre.code .copy{top:1px;right:6px}
.prose pre.code{margin:22px 0;border-radius:8px;border:1px solid var(--edge);box-shadow:0 3px 0 #081012;
  background:linear-gradient(var(--mod),var(--mod)) 0 0/100% 46px no-repeat,var(--lcd)}

/* range meters (five facts) */
.meters{list-style:none;margin:30px 0 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:rgba(253,254,255,.7)}
.m{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:16px;align-items:center;padding:11px 12px 12px 0;border-bottom:1px dashed var(--line)}
.m:last-child{border-bottom:0}
.m .val{grid-row:1/3;align-self:stretch;display:flex;align-items:center;justify-content:flex-end;padding:0 10px;background:var(--mod);color:var(--orchid);
  font:700 17px/1 var(--fm);font-variant-numeric:tabular-nums;border-radius:0 5px 5px 0;min-height:50px}
.m .lb{font:500 15px/1.3 var(--fb);color:var(--ink2);padding-bottom:7px}
.bar{position:relative;display:block;height:12px;border-left:2px solid var(--red);border-right:2px solid var(--red);
  background:linear-gradient(var(--line),var(--line)) 0 50%/100% 1px no-repeat,repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 10%)}
.bar::before{content:"";position:absolute;left:0;top:4px;height:4px;width:var(--p);background:var(--pen);opacity:.4}
.bar i{position:absolute;left:var(--p);top:-3px;width:8px;height:18px;margin-left:-4px;background:var(--pen);border-radius:2px;box-shadow:0 0 0 2px var(--paper)}
.sub{margin-top:8px}

/* sections on the time axis */
.sec{position:relative;margin-top:68px}
.sh{position:relative;border-top:2px solid var(--ink);padding-top:16px;margin-bottom:22px}
.sh::before{content:"";position:absolute;left:-26px;top:-2px;width:26px;height:2px;background:var(--ink)}
.sh .no{position:absolute;left:-82px;top:-12px;width:50px;text-align:right;font:700 13px/1 var(--fm);color:var(--pen-d);background:var(--paper);padding:5px 6px 5px 0}
h2{font-size:clamp(1.65rem,4.2vw,2.15rem);letter-spacing:-.005em}
h3{font-size:1.24rem;font-weight:600;line-height:1.15}
.ix{display:block;font:700 11.5px/1 var(--fm);color:var(--pen-d);letter-spacing:.05em;margin-bottom:10px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);background:rgba(253,254,255,.72)}
.grid2 .cell{min-width:0;padding:18px 18px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cell p{margin:8px 0 0;font-size:.95rem;line-height:1.52;color:var(--ink2)}
.grid2.ruled{border:0;background:none;gap:26px 28px}
.grid2.ruled .cell{border:0;border-left:3px solid var(--pen);padding:2px 0 2px 16px}
.grid2.benefits{margin-top:34px}
.steps{list-style:none;position:relative}
.steps::before{content:"";position:absolute;left:23px;top:24px;bottom:40px;border-left:2px dashed var(--line)}
.steps .cell{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:18px;padding-bottom:26px}
.steps .cell:last-child{padding-bottom:0}
.steps .ix{grid-row:1/3;width:48px;height:48px;margin:0;display:flex;align-items:center;justify-content:center;background:var(--mod);color:var(--orchid);border-radius:6px;font-size:16px;box-shadow:0 3px 0 #081012}
.steps h3{align-self:end;padding-top:4px}
.steps p{margin-top:6px}
.log{list-style:none;border-top:1px solid var(--line)}
.log li{padding:18px 0 20px;border-bottom:1px solid var(--line)}
.log h3{font:600 1.06rem/1.4 var(--fb)}
.log p{margin:12px 0 0;padding:12px 14px;background:var(--sheet);border-left:3px solid var(--pen);font:400 13.5px/1.6 var(--fm);color:var(--ink)}

/* long-form */
.prose{font-size:1.04rem}
.prose>*{min-width:0}
.prose h2{position:relative;margin:54px 0 16px;padding-top:16px;border-top:1px solid var(--ink);scroll-margin-top:92px}
.prose h2:first-child{margin-top:0}
.prose h2::before{content:"";position:absolute;left:-26px;top:-1px;width:26px;height:1px;background:var(--ink)}
.prose h3{margin:30px 0 10px;scroll-margin-top:92px}
.prose p,.prose li{color:var(--ink2)}
.prose ul,.prose ol{margin:0 0 1.1em;padding-left:1.3em}
.prose li{margin:.35em 0;padding-left:.2em}
.prose li::marker{color:var(--pen);font-family:var(--fm);font-size:.85em}
.prose :not(pre)>code,.faq code,.keyout code{background:rgba(39,95,155,.1);color:var(--pen-d);padding:.12em .38em;border-radius:3px;overflow-wrap:anywhere}
.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:22px 0;font-size:.93rem;background:var(--sheet);border:1px solid var(--line)}
.prose th,.prose td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.prose th{font:700 11.5px/1.3 var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--pen-d);background:rgba(39,95,155,.07);white-space:nowrap}
.prose td:first-child{font-weight:600;color:var(--ink)}
.prose blockquote{margin:22px 0;padding:4px 0 4px 18px;border-left:3px solid var(--red)}
.prose strong{color:var(--ink)}

/* takeaways */
.takeaways{margin:28px 0 0;padding:18px 20px 12px;background:var(--sheet);border:1px solid var(--line);border-top:3px solid var(--pen)}
.tk-h,.toc-h{margin:0 0 8px;font:700 12px/1.3 var(--fm);letter-spacing:.09em;text-transform:uppercase;color:var(--pen-d)}
.takeaways ul{list-style:none}
.takeaways li{position:relative;padding:10px 0 10px 28px;border-top:1px dashed var(--line);font-size:1rem;line-height:1.45}
.takeaways li::before{content:"";position:absolute;left:3px;top:15px;width:12px;height:7px;border-left:2.5px solid var(--pen);border-bottom:2.5px solid var(--pen);transform:rotate(-45deg)}

/* table of contents: inline card, hangs off the roll as a tag on wide screens */
.withtoc{position:relative;margin-top:34px}
.withtoc .sec{margin-top:34px}
.toc-in{padding:16px 18px 8px;background:var(--sheet);border:1px dashed var(--pen)}
.toc ol{list-style:none;counter-reset:t}
.toc li{counter-increment:t;border-top:1px solid var(--line)}
.toc li a{display:flex;gap:10px;align-items:baseline;min-height:44px;padding:11px 0;color:var(--ink);text-decoration:none;font-size:.97rem;line-height:1.3}
.toc li a::before{content:counter(t,decimal-leading-zero);flex:none;font:700 11.5px/1 var(--fm);color:var(--pen-d)}
.toc li a:hover{color:var(--pen)}
.toc-cta{display:none}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;cursor:pointer;list-style:none;font:600 1.1rem/1.3 var(--fb)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:26px;height:26px;border-radius:5px;background:
  linear-gradient(var(--orchid),var(--orchid)) 50% 50%/12px 2px no-repeat,linear-gradient(var(--orchid),var(--orchid)) 50% 50%/2px 12px no-repeat,var(--mod);transition:transform .15s}
.faq details[open] summary::after{background:linear-gradient(var(--orchid),var(--orchid)) 50% 50%/12px 2px no-repeat,var(--pen)}
.faq summary:hover{color:var(--pen-d)}
.faq details p{margin:0;padding:0 44px 18px 0;color:var(--ink2)}

/* closing call */
.cta-mod{margin-top:68px;padding:26px 26px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;border-left:5px solid var(--orchid)}
.cta-in{flex:1 1 300px;min-width:0}
.cta-mod h2{color:#ffffff;font-size:1.75rem}
.cta-mod p{margin:8px 0 0;color:var(--dim);font-size:1rem}

/* signup */
.form-mod{margin-top:24px}
.form{padding:20px 22px 22px}
.form [data-gauth]{width:100%;min-height:48px;text-transform:none;letter-spacing:.01em;font:600 1.02rem/1.1 var(--fb)}
.form .note{margin:8px 0 0;font-size:.86rem;line-height:1.4;color:#b3c9d2}
.form>.note{text-align:center;margin:10px 0 16px}
.tabs2{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 16px;background:var(--lcd);border-radius:8px}
.tabs2 button{min-height:44px;border:0;border-radius:5px;background:none;color:var(--dim);font:600 1rem/1.1 var(--fd);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.tabs2 button[aria-selected=true]{background:var(--edge);color:#ffffff;box-shadow:inset 0 -2px 0 var(--orchid)}
.msg:empty{display:none}
.msg{margin:0 0 14px;padding:11px 14px;border-radius:5px;font-size:.95rem;background:var(--mod2)}
.msg.err{background:#3a0f40;border-left:4px solid var(--hot);color:#fcd0ff}
.row{margin:0 0 14px}
.row label,.calc label{display:block;margin:0 0 6px;font:400 12px/1.3 var(--fm);letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.mod input{display:block;width:100%;min-width:0;height:50px;padding:0 14px;border:1px solid #48636c;border-radius:6px;background:var(--lcd);color:#ffffff;font:400 16px/1 var(--fm)}
.mod input:focus{outline:2px solid var(--orchid);outline-offset:1px;border-color:var(--orchid)}
.form form .btn{width:100%;min-height:54px;margin-top:6px;font-size:1.14rem}
.keyout{display:none}
.keyout.on{display:block}
.keyout h3{color:#ffffff;font-size:1.4rem}
.keybox{display:flex;align-items:center;gap:10px;margin:12px 0 10px;padding:10px 10px 10px 14px;background:var(--lcd);border:1px dashed var(--orchid);border-radius:6px;font:400 14px/1.4 var(--fm);color:var(--orchid);word-break:break-all}
.keybox span{flex:1;min-width:0}
.keybox .btn{flex:none}
.keyout p{margin:14px 0 0;font-size:.97rem;line-height:1.9}
.keyout .note{line-height:1.4;margin-top:8px}
.keyout code{background:var(--lcd);color:var(--orchid)}
.keyout .mut{color:#b3c9d2}
.acts{align-items:center}
.keyout .acts{margin-top:18px;gap:10px}

/* calculator */
.calc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:20px 22px 22px}
.calc>div{min-width:0}
.calc>div:last-child{grid-column:1/-1}
.calc output{display:block;padding:12px 16px;background:var(--lcd);border:1px solid var(--edge);border-radius:6px;color:var(--orchid);font:700 2.3rem/1.15 var(--fm);font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}

/* support form (on paper) */
.support{margin-top:28px;padding:22px;background:var(--sheet);border:1px solid var(--line);border-top:3px solid var(--pen)}
.support .row label{color:var(--mut)}
.support input,.support select,.support textarea{display:block;width:100%;min-width:0;min-height:48px;padding:10px 14px;border:1.5px solid #778f99;border-radius:6px;background:#ffffff;color:var(--ink);font:400 16px/1.4 var(--fb)}
.support textarea{min-height:150px;resize:vertical}
.support input:focus,.support select:focus,.support textarea:focus{outline:3px solid var(--focus);outline-offset:1px}
.support button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border:0;border-radius:6px;background:var(--pen);color:#ffffff;font:600 1.1rem/1.1 var(--fd);letter-spacing:.045em;text-transform:uppercase;cursor:pointer;box-shadow:0 3px 0 #12365a}
.support button:hover{background:#2f6fb2}
.support output,.support .out,.support form>p{display:block;margin:14px 0 0;font:400 13.5px/1.5 var(--fm);color:var(--ink2)}
.support output:empty{display:none}

/* 404 */
.nf-code{margin:0 0 4px;font:700 clamp(4.6rem,22vw,8.5rem)/.95 var(--fm);color:transparent;-webkit-text-stroke:2px var(--pen);letter-spacing:-.04em}
.nf-links{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:34px 0 60px;border-top:1px solid var(--line)}
.nf-links a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--line);font:400 14px var(--fm)}

/* footer = end of roll */
.foot{margin-top:76px}
.endroll{height:14px;margin:0 32px;background:repeating-linear-gradient(-45deg,var(--red) 0 9px,transparent 9px 18px);opacity:.85}
.foot .col{padding-top:26px;padding-bottom:40px}
.foot .logo{color:var(--ink)}
.foot-brand p{margin:6px 0 0;font:400 13px/1.4 var(--fm);color:var(--mut)}
.foot-links{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;margin:20px 0 0;border-top:1px solid var(--line)}
.foot-links a{display:flex;align-items:center;min-height:46px;border-bottom:1px solid var(--line);font:400 13.5px/1.3 var(--fm);color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.foot-links a:hover{color:var(--pen)}
.legal{margin:20px 0 0;font-size:.84rem;line-height:1.5;color:var(--mut)}

/* TOC as a hanging tag in the desk margin */
@media (min-width:1340px){
  .toc{position:absolute;top:0;bottom:0;right:calc(100% + 144px);width:236px}
  .toc-in{position:sticky;top:96px;max-height:calc(100vh - 116px);overflow-y:auto;border:0;border-radius:4px 14px 4px 4px;padding:18px 18px 16px;box-shadow:0 14px 30px -10px rgba(0,0,0,.6)}
  .toc::after{content:"";position:absolute;top:24px;left:100%;width:30px;height:100%;max-height:1px;border-top:2px dotted #7a929c}
  .toc li a{min-height:44px;font-size:.92rem}
  .toc-cta{display:block;margin-top:6px;padding-top:14px;border-top:2px solid var(--ink)}
  .toc-cta p{margin:0 0 10px;font-size:.9rem;line-height:1.4;color:var(--ink2)}
  .toc-cta .side-h{font:700 1.15rem/1.15 var(--fd);color:var(--ink);margin-bottom:4px}
  .toc-cta .btn{width:100%}
  .withtoc .sec:first-of-type,.withtoc .toc+.sec{margin-top:0}
}

/* tablet + mobile: paper fills the screen, no sprocket margins */
@media (max-width:840px){
  .head{padding:0}
  .head-in{border-radius:0;border-left:0;border-right:0;height:60px;padding:0 10px;gap:8px}
  .burger{display:inline-flex}
  .btn.key{margin-left:auto}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;margin:0;padding:8px 10px 12px;flex-direction:column;align-items:stretch;background:var(--mod);border-bottom:1px solid var(--edge);box-shadow:0 18px 30px rgba(0,0,0,.55)}
  .nav.open{display:flex}
  .nav a{min-height:48px;padding:0 10px;font-size:14px;border-bottom:1px solid var(--edge);border-radius:0}
  .nav a:last-child{border-bottom:0}
  .paper{margin-top:0;background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/100% 24px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/24px 100%,var(--paper)}
  .paper::before{display:none}
  .col{max-width:680px;margin:0 auto;padding:0 20px}
  .trace{margin:0;height:84px;padding-top:6px}
  .trace svg{height:78px}
  .endroll{margin:0}
  .sh::before,.prose h2::before{display:none}
  .sh .no{position:static;display:inline-block;width:auto;padding:0;margin-bottom:8px;background:none}
  .sec{margin-top:56px}
  .desk{padding-bottom:0}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .col{padding:0 16px}
  .logo span{padding:7px 7px;font-size:12.5px}
  .logo{gap:7px}
  .btn.key{padding:0 11px;font-size:.92rem;letter-spacing:.03em}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .grid2.ruled{gap:22px}
  .acts .btn{flex:1 1 100%}
  .calc{grid-template-columns:minmax(0,1fr);padding:16px}
  .form{padding:16px}
  .m{grid-template-columns:88px minmax(0,1fr);column-gap:12px}
  .m .val{font-size:15px;padding:0 8px}
  .faq details p{padding-right:0}
  .cta-mod{padding:22px 18px 24px}
  .cta-mod .btn{width:100%}
  .foot-links,.nf-links{grid-template-columns:minmax(0,1fr)}
  .support{padding:16px}
  .codetabs button{padding:0 11px}
  .codetabs{padding-right:84px}
}
@media (max-width:380px){
  .mark{width:24px;height:24px}
  .logo span{font-size:11.5px;padding:7px 5px}
  .btn.key{padding:0 9px;font-size:.86rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}