:root{
  --o:#FF5A1F; --ink:#14110F; --paper:#FAFAF7;
  --g:clamp(18px,4vw,56px); --cg:clamp(14px,2vw,28px); --rule:2px;
  --disp:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --num:"Archivo","Inter Tight",Impact,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-padding-top:84px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font:400 1rem/1.55 var(--disp);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
ul,ol{padding:0;list-style:none}
a{color:inherit}
h1,h2,h3,summary,.tag,.qs b,.ctl dt{word-spacing:.16em}
:focus-visible{outline:3px solid var(--ring,var(--ink));outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:.8rem 1rem}
.skip:focus{left:0}

/* three colours only */
.on-orange{--bg:var(--o);--fg:var(--ink);--ring:var(--ink)}
.on-paper{--bg:var(--paper);--fg:var(--ink);--ring:var(--ink)}
.on-ink{--bg:var(--ink);--fg:var(--paper);--ring:var(--paper)}
.on-orange,.on-paper,.on-ink{background:var(--bg);color:var(--fg)}

.wrap{width:min(100% - 2 * var(--g),1200px);margin-inline:auto}
.sec{padding-block:clamp(3.5rem,7vw,6rem)}
.small{font-size:.875rem;line-height:1.5}

.btn{--f:transparent;--t:var(--fg);--hf:var(--fg);--ht:var(--bg);
  display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.8rem 1.2rem;
  border:var(--rule) solid var(--fg);background:var(--f);color:var(--t);
  font:700 .95rem/1.1 var(--disp);text-decoration:none;cursor:pointer;border-radius:0}
.btn-solid{--f:var(--fg);--t:var(--bg);--hf:var(--bg);--ht:var(--fg)}
.btn:hover:not(:disabled){background:var(--hf);color:var(--ht)}
.btn svg{width:18px;height:18px;flex:none}

/* nav */
.nav{position:sticky;top:0;z-index:50;border-bottom:var(--rule) solid var(--ink)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.6rem;font:900 1.1rem/1 var(--disp);letter-spacing:-.03em;text-decoration:none}
.brand img{width:30px;height:30px}
.nav nav{display:none}
.nav nav a{font:600 .92rem/1 var(--disp);text-decoration:none;padding:.5rem .1rem;border-bottom:var(--rule) solid transparent}
.nav nav a:hover,.nav nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.nav .btn{min-height:42px;padding:.6rem 1rem}
.hide-s{display:none}

/* intro */
.intro{padding-block:clamp(2.4rem,5vw,4rem)}
.intro h1{font:900 clamp(2rem,6vw,3.2rem)/1.03 var(--disp);letter-spacing:-.045em;text-wrap:balance;max-width:16ch}
.lead{font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.5;font-weight:500;margin-top:1rem;max-width:56ch}
.legend{margin-top:1rem;max-width:62ch}
.qs-h{margin-top:clamp(1.6rem,3.5vw,2.4rem);font:800 .95rem/1.2 var(--disp);letter-spacing:.04em;text-transform:uppercase}
.qs{display:grid;gap:0;margin-top:.7rem;border:var(--rule) solid var(--ink);counter-reset:q}
.qs li{counter-increment:q;padding:1rem 1.1rem 1.1rem;border-top:var(--rule) solid var(--ink)}
.qs li:first-child{border-top:0}
.qs li::before{content:counter(q);display:block;font:900 2rem/1 var(--num);margin-bottom:.5rem}
.qs b{display:block;font:800 1.08rem/1.2 var(--disp);letter-spacing:-.015em;margin-bottom:.3rem}
.qs span{display:block;font-size:.95rem;line-height:1.45}

/* chips */
.key{display:inline;background:var(--ink);color:var(--o);padding:.02em .4em;font-weight:700;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.on-paper .key,.guide .key{color:var(--o)}
code{font:600 .88em/1.4 var(--mono);background:var(--ink);color:var(--paper);padding:.08em .4em;overflow-wrap:anywhere}
kbd{font:700 .85em/1 var(--mono)}

/* layout */
.guide{display:grid;gap:0;padding-block:1.4rem clamp(2rem,5vw,4rem)}
.toc-d{display:none}
.toc-m{border:var(--rule) solid var(--ink);margin-bottom:1.6rem}
.toc-m summary{padding:.9rem 1rem;font:800 1.05rem/1.2 var(--disp)}
.toc-m summary::after{content:"+";flex:none;font:900 1.5rem/1 var(--num);width:1.2em;text-align:center}
.toc-m[open] summary::after{content:"\2212"}
.toc-m[open] summary{border-bottom:var(--rule) solid var(--ink)}
.toc-m ol{padding:.4rem 1rem .9rem}
.toc a{display:flex;align-items:baseline;gap:.7rem;text-decoration:none;padding:.5rem .6rem .5rem .7rem;font-weight:600;font-size:.95rem;line-height:1.3;border-left:var(--rule) solid transparent}
.toc a::before{content:attr(data-n);font:800 .8rem/1 var(--num);min-width:1.4rem}
.toc a:hover{border-left-color:var(--ink)}
.toc a[aria-current="true"]{background:var(--ink);color:var(--paper);border-left-color:var(--ink)}
.toc-t{font:800 .8rem/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.6rem;padding-left:.7rem}
summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}

/* article */
.doc{min-width:0}
.gsec{padding-block:clamp(2.2rem,4.5vw,3.4rem);border-top:var(--rule) solid var(--ink)}
.gsec:first-child{border-top:0;padding-top:0}
.eyebrow{display:flex;align-items:center;gap:.7rem;font:800 .8rem/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.8rem}
.eyebrow b{font:900 1.1rem/1 var(--num);letter-spacing:0;background:var(--ink);color:var(--o);padding:.3em .5em}
.gsec h2{font:900 clamp(1.7rem,3.4vw,2.4rem)/1.05 var(--disp);letter-spacing:-.04em;text-wrap:balance;max-width:22ch}
.gsec h3{font:800 clamp(1.1rem,1.8vw,1.3rem)/1.2 var(--disp);letter-spacing:-.02em;margin-top:2rem;margin-bottom:.6rem;max-width:36ch}
.gsec h2+.what{margin-top:1rem}
.doc p,.doc li,.doc dd{font-size:1.03rem;line-height:1.65}
.doc p{max-width:65ch}
.doc p+p{margin-top:.8rem}
.what{font-size:1.1rem;font-weight:500;max-width:60ch}
.doc a{text-underline-offset:.15em;text-decoration-thickness:2px;font-weight:600}
.doc a:hover{background:var(--ink);color:var(--paper);text-decoration-color:transparent}
.doc ol.steps,.doc ul.bl{max-width:65ch;margin-top:.6rem;display:grid;gap:.6rem}
.steps{counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-left:2.6rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:.12em;width:1.7rem;height:1.7rem;display:grid;place-items:center;background:var(--ink);color:var(--paper);font:800 .9rem/1 var(--num)}
.bl li{position:relative;padding-left:1.4rem}
.bl li::before{content:"";position:absolute;left:.15rem;top:.62em;width:.45rem;height:.45rem;background:var(--ink)}
.doc p+ol,.doc p+ul,.doc ol+p,.doc ul+p{margin-top:.8rem}

/* callouts */
.callout{margin-top:1.4rem;max-width:65ch;border:var(--rule) solid var(--ink);padding:.9rem 1.1rem 1rem}
.callout .tag{display:inline-block;background:var(--ink);color:var(--paper);padding:.1em .55em;font-weight:800;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.5rem}
.callout p{font-size:1rem;line-height:1.55}
.callout.warn{background:var(--o)}
.callout.warn .tag{color:var(--o)}

/* figures */
figure{margin-top:1.5rem;max-width:760px}
figure img{border:var(--rule) solid var(--ink);background:var(--ink);width:100%}
figcaption{margin-top:.55rem;max-width:65ch;font-size:.9rem;line-height:1.5}
figcaption b{font-weight:800}

/* tables */
.tw{margin-top:1.2rem;overflow-x:auto;border:var(--rule) solid var(--ink);max-width:100%}
.tw:focus-visible{outline-offset:2px}
table{border-collapse:collapse;width:100%;min-width:34rem}
th,td{padding:.7rem .9rem;text-align:left;vertical-align:top;font-size:.98rem;line-height:1.5}
thead th{background:var(--ink);color:var(--paper);font-weight:800;font-size:.9rem;letter-spacing:.02em}
tbody tr+tr th,tbody tr+tr td{border-top:1px solid var(--ink)}
tbody th{font-weight:700}
td code,th code{white-space:nowrap}
.tw .nw{white-space:nowrap}

/* how-to panels */
.how{margin-top:1.4rem;border:var(--rule) solid var(--ink);padding:1.1rem 1.2rem 1.3rem}
.how h3{margin-top:.3rem}
.how>.tag{display:inline-block;background:var(--ink);color:var(--o);padding:.1em .55em;font-weight:800;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}

/* control list */
.ctl{margin-top:1rem;max-width:68ch;border-top:var(--rule) solid var(--ink)}
.ctl>div{display:grid;gap:.25rem;padding:.8rem 0;border-bottom:1px solid var(--ink)}
.ctl dt{font-weight:800;font-size:1.03rem}
.ctl dd{margin:0}
.ctl dd p{margin:0;max-width:none}
.ctl dd p+p{margin-top:.5rem}

/* Q&A */
.qa{margin-top:1.4rem;max-width:760px}
.qa details{border-top:var(--rule) solid var(--ink)}
.qa details:last-child{border-bottom:var(--rule) solid var(--ink)}
.qa summary{padding:1rem 0;font:800 clamp(1.05rem,1.7vw,1.22rem)/1.2 var(--disp);letter-spacing:-.02em}
.qa summary::after{content:"+";flex:none;font:900 1.7rem/1 var(--num);width:1.2em;text-align:center}
.qa details[open] summary::after{content:"\2212"}
.qa .ans{padding:0 0 1.3rem}
.qa .ans>*+*{margin-top:.7rem}
.qa .ans p,.qa .ans ul,.qa .ans ol{max-width:65ch}

/* end */
.endb h2{font:900 clamp(1.7rem,4vw,2.6rem)/1.02 var(--disp);letter-spacing:-.04em;max-width:16ch;text-wrap:balance}
.endb p{margin-top:.9rem;max-width:56ch;font-size:1.05rem;line-height:1.55}
.sup-l{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.2rem;font-weight:700;font-size:1.02rem}
.sup-l a{overflow-wrap:anywhere}

footer{padding-block:2rem 2.4rem}
.ft-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.2rem 2rem}
.ft-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.ft-links a{font-weight:700;overflow-wrap:anywhere}
footer small{display:block;max-width:80ch;margin-top:1.3rem;font-size:.8rem;line-height:1.5}
.copy{margin-top:1.3rem}

@media (min-width:620px){
  .hide-s{display:inline}
  .qs{grid-template-columns:repeat(3,1fr)}
  .qs li{border-top:0;border-left:var(--rule) solid var(--ink)}
  .qs li:first-child{border-left:0}
  .ctl>div{grid-template-columns:13rem 1fr;gap:1.2rem}
}
@media (min-width:900px){
  .nav nav{display:flex;gap:1.6rem}
}
@media (min-width:980px){
  .guide{grid-template-columns:240px minmax(0,1fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:start;padding-top:2.4rem}
  .toc-m{display:none}
  .toc-d{display:block;position:sticky;top:88px;max-height:calc(100vh - 110px);overflow-y:auto;padding-bottom:1rem}
  .toc-d ol{border-left:var(--rule) solid var(--ink)}
  .toc-d a{margin-left:calc(var(--rule) * -1)}
}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:background-color .15s,color .15s}
}
/* floating button */
.fab{position:fixed;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);z-index:60;display:inline-flex;align-items:center;gap:.55rem;min-height:48px;padding:.7rem 1.1rem;
  background:var(--paper);color:var(--ink);border:var(--rule) solid var(--ink);font:800 .92rem/1 var(--disp);text-decoration:none;word-spacing:.12em}
.fab:hover{background:var(--ink);color:var(--paper);border-color:var(--paper)}