/* Premises Help — article frame + figure runtime styles.
   Tokens fall back to the app palette until the site shell supplies its own. */
:root{/* redress r8 (help 0.14.0, 2026-09-07, his word on board 212):the help centre wears the
   SITE's eight of R1 — site.css is the source;these are its values written literally,
   since /help/ ships its own sheet — and the site's two faces.
   iris #3a6bf5 · sky #5b8cff · ink #060a12 · paid #10a97a · overdue #e5556a · draft #c9a77b */
 --iris:#3A6BF5;--sky:#5B8CFF;--ink:#060A12;--paper:#FFFFFF;--mist:#F5F7FB;--line:#E9E9EA;--mute:#585B60;--paid:#10A97A;--overdue:#E5556A;--draft:#C9A77B;--iris-deep:#325CD3;/* color-mix(iris 85%, ink) in site.css */
 --panel:#0D1526;--line-dark:rgba(255,255,255,.08);--line-dark-2:rgba(255,255,255,.14);--text-dark:#E9EDF5;--muted-dark:#8B95A8;--ease:cubic-bezier(.22,.61,.36,1);--display:"Manrope","Manrope Fallback",system-ui,sans-serif;--body:"Manrope","Manrope Fallback",system-ui,sans-serif;--sans:var(--body);--mono:"IBM Plex Mono",ui-monospace,monospace;--w:760px;--wf:1040px}
*{box-sizing:border-box}html{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font:16px/1.65 var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:var(--iris);text-decoration-thickness:1px;text-underline-offset:3px}
.hlp{max-width:var(--w);margin:0 auto;padding:40px 20px 80px}
.crumb{color:var(--mute);display:flex;gap:8px;flex-wrap:wrap}.crumb a{color:var(--mute)}.crumb b{color:var(--ink);font-weight:500}
.eyebrow{margin:34px 0 6px;font:500 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--iris)}
h1{font:500 clamp(30px,5.2vw,40px)/1.12 var(--display);margin:0 0 14px}
.lede{font-size:19px;line-height:1.55;color:#3B3E4C;margin:0 0 28px}
.outcome{padding:10px 16px;background:var(--mist);margin:0 0 36px;font-size:15px}
.outcome b{display:block;font-weight:600;margin-bottom:2px}
h2{font:500 25px/1.25 var(--display);margin:44px 0 12px}
h3{font:600 16px/1.4 var(--body);margin:26px 0 6px}
p,li{max-width:68ch}ul,ol{padding-left:22px}li{margin:4px 0}
ol.steps{list-style:none;padding:0;counter-reset:s}ol.steps>li{counter-increment:s;position:relative;padding:14px 0 14px 52px;border-top:1px solid var(--line)}
ol.steps>li:last-child{border-bottom:1px solid var(--line)}
ol.steps>li::before{content:counter(s);position:absolute;left:0;top:12px;width:32px;height:32px;color:#fff;font:600 14px/32px var(--body);text-align:center}
ol.steps b{font-weight:600}
.note{background:var(--mist);padding:14px 18px;font-size:15px;margin:22px 0}.note b{font-weight:600}
.warn{border:1px solid color-mix(in srgb,var(--overdue) 40%,white);background:color-mix(in srgb,var(--overdue) 6%,white)}
kbd{font:13px var(--mono);background:var(--mist);border:1px solid var(--line);padding:1px 6px}
.ui{font-weight:600}
.next{margin-top:56px;padding-top:22px;border-top:2px solid var(--ink)}
.next h2{margin-top:0;font-size:20px}.next ul{list-style:none;padding:0;display:grid;gap:10px}
.next a{display:block;padding:14px 16px;border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
.next a:hover{border-color:var(--iris);transform:translateY(-1px)}.next small{display:block;color:var(--mute);font-size:13px;margin-top:2px}
.foot{margin-top:40px;font-size:13px;color:var(--mute)}
/* ---------- figures ---------- */
.fig{position:relative;width:min(var(--wf),calc(100vw - 40px));margin:30px 0 30px calc((var(--w) - var(--wf))/2)}
@media(max-width:1100px){.fig{width:100%;margin-left:0}}
.fig-frame{background:var(--paper);border:1px solid var(--line);overflow:hidden}
.fig-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--mist)}
.fig-head .t{font:600 13px var(--body);text-transform:uppercase;color:var(--mute)}
.fig-head .k{font:500 12px var(--body);color:var(--iris);background:color-mix(in srgb,var(--iris) 10%,white);padding:3px 9px}
.fig-body{padding:22px;position:relative}
.fig-cap{padding:12px 16px 14px;border-top:1px solid var(--line);font-size:14px;color:#3B3E4C;min-height:46px;display:flex;gap:14px;align-items:center;justify-content:space-between}
.fig-cap .c{flex:1}
.fig-ctl{display:flex;gap:6px;align-items:center}
.fig-ctl button{all:unset;cursor:pointer;height:34px;min-width:34px;padding:0 10px;border:1px solid var(--line);background:#fff;font:500 13px var(--body);color:var(--ink);text-align:center;transition:background .15s,border-color .15s}
.fig-ctl button:hover{border-color:var(--iris);color:var(--iris)}.fig-ctl button:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.fig-ctl .dots{display:flex;gap:5px;margin:0 6px}.fig-ctl .dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .2s,transform .2s}.fig-ctl .dots i.on{background:var(--iris);transform:scale(1.25)}
.fig svg{display:block;width:100%;height:auto;font-family:var(--body)}
.fig svg text{font-family:var(--body)}
.fig svg .disp{font-family:var(--display)}
.fig svg .mono{font-family:var(--mono)}
/* stage states */
.st{opacity:0;transition:opacity .12s ease,transform .12s ease}.st.on{opacity:1;transition:opacity .45s ease .1s,transform .45s ease .1s}
.st.rise{transform:translateY(8px)}.st.rise.on{transform:none}
.hl{transition:stroke .3s,fill .3s,stroke-width .3s}
.cursor{opacity:0;transition:transform .7s cubic-bezier(.4,.1,.2,1),opacity .3s;will-change:transform}
.cursor .ring{transform-origin:center;transform-box:fill-box;transform:scale(0);opacity:0}.cursor.click .ring{animation:ring .6s ease-out}
@keyframes ring{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.dash{stroke-dasharray:6 6;animation:dash 1.6s linear infinite}@keyframes dash{to{stroke-dashoffset:-24}}
.draw{stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.2s ease}.draw.on{stroke-dashoffset:0}
.pulse{animation:pulse 2.2s ease-in-out infinite;transform-origin:center;transform-box:fill-box}@keyframes pulse{50%{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.dash,.pulse{animation:none}.st,.cursor,.draw,.hl{transition:none}}
/* quiz */
.quiz{display:grid;gap:16px}.quiz .q{font:500 18px/1.35 var(--display);margin:0 0 6px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.opts button{all:unset;cursor:pointer;padding:14px 16px;border:1px solid var(--line);font:500 15px var(--body);transition:border-color .15s,background .15s;display:flex;flex-direction:column;gap:4px;height:100%}
.opts button small{color:var(--mute);font-weight:400;font-size:13px}
.opts button:hover,.opts button.on{border-color:var(--iris);background:color-mix(in srgb,var(--iris) 6%,white)}.opts button:focus-visible{outline:2px solid var(--sky)}
.result{border:2px solid var(--iris);padding:18px 20px;background:color-mix(in srgb,var(--iris) 4%,white)}
.result h4{margin:0 0 6px;font:500 22px var(--display)}.result p{margin:0 0 8px}.result a{font-weight:600}
/* slider */
.cmp{position:relative;user-select:none;overflow:hidden;border:1px solid var(--line)}
.cmp .a,.cmp .b{display:block;width:100%}.cmp .b{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x,50%))}
.cmp .bar{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--ink);transform:translateX(-1px);pointer-events:none}
.cmp .knob{position:absolute;top:50%;left:var(--x,50%);transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:14px;pointer-events:none;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize}
.cmp .tag{position:absolute;top:12px;font:600 12px var(--body);letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:20px;background:rgba(255,255,255,.9);pointer-events:none}
.cmp .tag.l{left:12px}.cmp .tag.r{right:12px}
/* calc */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:22px}@media(max-width:700px){.calc{grid-template-columns:1fr}}
.calc label{display:block;font-size:13px;font-weight:600;margin:12px 0 4px}.calc label:first-child{margin-top:0}
.calc input[type=range]{width:100%;accent-color:var(--iris)}.calc output{font:500 15px var(--mono);color:var(--iris)}
.calc .out{background:var(--ink);color:#fff;padding:20px 22px;display:flex;flex-direction:column;justify-content:center}
.calc .big{font:500 54px/1 var(--display);letter-spacing:-.02em}.calc .big small{font:400 18px var(--body);opacity:.7;margin-left:6px}
.calc .sub{opacity:.75;font-size:14px;margin-top:10px}
/* map */
.mp{display:grid;grid-template-columns:1.5fr 1fr;gap:22px}@media(max-width:760px){.mp{grid-template-columns:1fr}}
.mp .panel{background:var(--mist);padding:18px;min-height:160px}
.mp .panel h4{margin:0 0 6px;font:500 20px var(--display)}.mp .panel p{margin:0 0 8px;font-size:14px}.mp .panel .k{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
.hot{cursor:pointer}.hot .box{transition:fill .2s,stroke .2s}.hot:hover .box,.hot.on .box{fill:color-mix(in srgb,var(--iris) 14%,white);stroke:var(--iris)}
.hot:focus-visible{outline:none}.hot:focus-visible .box{stroke:var(--sky);stroke-width:2.5}
/* time */
.tl input[type=range]{width:100%;accent-color:var(--iris);margin:12px 0 4px}
.tl .ticks{display:flex;justify-content:space-between;font-size:12px;color:var(--mute)}
.tl .stage{margin-top:14px;padding:16px 18px;background:var(--mist)}.tl .stage h4{margin:0 0 4px;font:500 20px var(--display)}.tl .stage p{margin:0;font-size:14px}
/* lit state for stage/time highlights */
.hl.lit{stroke:var(--iris);stroke-width:2.5}
rect.hl.lit,path.hl.lit{fill:color-mix(in srgb,var(--iris) 10%,white)}
text.hl.lit{fill:var(--iris);font-weight:600}
.chip.lit rect{fill:var(--iris)}.chip.lit text{fill:#fff}

/* tables */
table{border-collapse:collapse;width:100%;font-size:14px;margin:14px 0}th,td{text-align:left;vertical-align:top;padding:10px 12px;border-top:1px solid var(--line)}th{font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}tr:last-child td{border-bottom:1px solid var(--line)}
.gloss h2{font-size:1.05rem;margin:22px 0 4px}.gloss p{margin:0 0 6px}
/* phones: caption above controls, controls on one row (Phase 8 pass 2) */
@media(max-width:560px){.fig-cap{flex-direction:column;align-items:stretch;gap:10px}.fig-cap .c{flex:none}.fig-ctl{justify-content:flex-end}.fig-ctl button{height:32px;min-width:32px;padding:0 9px;font-size:12px}}

/* ================= help 0.11.0 — the chrome, the cards, the rail (boards 55-56) */
.spot{display:block}
.hnav{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1300px;margin:0 auto;padding:18px 24px}
.hlg img{display:block;width:auto;height:32px}
.hlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:var(--mute);flex-wrap:wrap}
.hlinks a{text-decoration:none}
.hlinks a.on{font-weight:600}
.hact{display:flex;gap:10px}
.hbtn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 17px;font-size:13.5px;text-decoration:none}

.hfoot{color:rgba(255,255,255,.55);padding:48px 0 30px;font-size:14px;margin-top:70px}
.hfw{max-width:1160px;margin:0 auto;padding:0 24px}
.hfcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.10)}
.hfb p{margin-top:14px;font-size:13.5px;line-height:1.6;max-width:300px;color:rgba(255,255,255,.5)}
.hfcols .hfk{font:700 11px/1 var(--body);text-transform:uppercase;margin:0 0 12px}
.hfcols div a{display:block;margin-bottom:9px;color:rgba(255,255,255,.55);text-decoration:none}
.hfcols div a:hover{color:#fff}
/* The legal row, one line — the label and its four documents — with the company
   that owns the site under it. Same shape as site.css's .flegal/.fco; the two
   footers are held together by a gate guard. */
.hflegal{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 14px;padding-top:20px}
.hflegal .hfk{font:700 11px/1 var(--body);text-transform:uppercase;margin:0 4px 0 0}
.hflegal a{color:rgba(255,255,255,.55);text-decoration:none;display:inline-block;padding:5px 0;margin:-5px 0}
.hflegal a:hover{color:#fff}
.hflegal a:not(:last-child)::after{content:"\00B7";margin-left:14px;color:rgba(255,255,255,.25)}
.hfco{margin-top:11px;font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.5);max-width:none}
/* align-items:center, so the two lines sit level with the chip between them.
   A flex row with no align-items defaults to STRETCH, which would hang both
   sentences from the top of a chip taller than they are. Same as site.css. */
.hfbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding-top:20px;font-size:13px;color:rgba(255,255,255,.5);flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.10)}
/* THE HOUSE CHIP, ARRANGEMENT G, on the help centre's dark foot (board 95,
   his word 2026-08-29: "there is no seal on the footer of help page can we
   add it"). These are site.css's .hseal rules, not a second design: /help/
   ships its own stylesheet, so the rules are written here literally and a
   gate guard holds the two copies together. Six custom properties carry the
   dark ground — never a second chip. */
.hseal{--hs-line:rgba(255,255,255,.16);--hs-lock:color-mix(in srgb,var(--paid) 76%,#fff);--hs-title:#fff;--hs-sub:rgba(255,255,255,.5);--hs-logo:#fff;display:inline-flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;padding:9px 16px 8px;line-height:normal;border:1px solid var(--hs-line);border-radius:10px;background:transparent}
.hseal-logo{display:block;color:var(--hs-logo)}
.hseal-logo img{display:block;height:15px;width:auto;max-width:130px}
.hseal-logo b{font:700 11.5px var(--sans);letter-spacing:.02em;color:var(--hs-logo)}
.hseal-claim{display:inline-flex;align-items:center;gap:6px;color:var(--hs-lock)}
.hseal-claim b{font:600 11.5px var(--sans);color:var(--hs-title);letter-spacing:.01em}
.hseal-lock{display:block}
.hseal-date{font:400 9px var(--mono),ui-monospace,monospace;color:var(--hs-sub);letter-spacing:.08em;border-top:1px solid var(--hs-line);padding-top:5px;margin-top:1px;width:100%;text-align:center}
a.hseal:hover{border-color:rgba(255,255,255,.34)}
/* the lock opens then closes — on load, and REPLAYED by help.js the moment
   the foot is actually reached, because a footer animation nobody scrolls to
   is an animation that does not exist */
.hseal-shackle{transform-origin:12px 10px;animation:hseal-close 1.6s cubic-bezier(.4,1.4,.5,1) .4s 1 both}
@keyframes hseal-close{0%{transform:translateY(-3.5px) rotate(-16deg)}
  55%{transform:translateY(-3.5px) rotate(-16deg)}100%{transform:translateY(0) rotate(0)}}
@media (prefers-reduced-motion: reduce){.hseal-shackle{animation:none}}

.hheroin{max-width:820px;margin:0 auto;padding:44px 20px 40px;text-align:center}
.hheroin h1{margin-bottom:22px}
.hsearch{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;padding:6px 18px;text-align:left}
.hsearch input{flex:1;border:0;outline:none;font:inherit;font-size:16px;background:none;min-width:0}

#hsr{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;max-height:330px;overflow:auto;z-index:20;text-align:left}
#hsr a{display:block;padding:11px 16px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--mist)}
#hsr a:last-child{border-bottom:0}
#hsr a:hover,#hsr a.sel{background:var(--mist)}
#hsr b{display:block;font-weight:600;font-size:14.5px}
#hsr small{color:var(--mute);font-size:12.5px}
#hsr .none{padding:14px 16px;color:var(--mute);font-size:14px}
.hquick{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.hquick a{font-size:13px;padding:7px 14px;text-decoration:none}
.hlp.hwide{max-width:1160px}
.hrail{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 6px}
.hpill{font-size:13px;background:#fff;padding:8px 15px;text-decoration:none}

.hsec{margin-top:38px}
.hsechead{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.hsechead h2{margin:0;font-size:22px}
.hsechead a{font-size:13.5px;text-decoration:none}
.hcards{display:grid;gap:16px;margin-top:16px}
.hcards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.hcard{display:flex;flex-direction:column;background:#fff;padding:10px 16px 16px;text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}

.hart{display:grid;place-items:center;padding:12px 0;margin:0 -6px}
.hmeta{font:700 10.5px/1 var(--body);text-transform:uppercase;color:var(--mute);margin-top:12px}
.hcard b{font-weight:600;font-size:15px;line-height:1.35;margin-top:6px}
.hcard s{text-decoration:none;font-size:13px;line-height:1.5;color:var(--mute);margin-top:4px;flex:1}
.hcard u{text-decoration:none;font-size:12.5px;font-weight:700;color:var(--iris-deep);margin-top:10px}
/* the article page: main + rail */
.apage{max-width:1140px;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;align-items:start}
.amain{min-width:0}
.amain .fig{width:100%;margin-left:0}
.ameta{display:flex;align-items:center;gap:12px;margin:30px 0 8px}
.acat{font:700 10.5px/1 var(--body);text-transform:uppercase;border:1px solid color-mix(in srgb,var(--iris) 22%,white);padding:6px 11px}
.ameta span:not(.acat){font-size:13px;color:var(--mute)}
.abanner{display:flex;gap:20px;align-items:center;padding:16px 20px;margin:0 0 30px}
.abanner .spot{flex:none}
.abanner .outcome{background:none;border-left:0;padding:0;border-radius:0}
.arail{position:sticky;top:20px;display:flex;flex-direction:column;gap:16px}
.toc{background:#fff;border:1px solid var(--line);padding:16px 18px}
.toc b{display:block;font:700 10.5px/1 var(--body);text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.toc a{display:block;font-size:13.5px;line-height:1.4;color:var(--mute);text-decoration:none;padding:5px 8px}
.toc a:hover{background:var(--mist);color:var(--ink)}
.toc-m{display:none;border:1px solid var(--line);padding:12px 16px;margin:0 0 24px}
.toc-m summary{font-weight:600;cursor:pointer}
.toc-m a{display:block;padding:6px 4px;font-size:14px;text-decoration:none}
.stuck{color:#fff;padding:18px 20px}
.stuck b{display:block;font:700 10.5px/1 var(--body);text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:8px}
.stuck p{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.85)}
.rel{margin-top:52px;padding-top:20px;border-top:2px solid var(--ink)}
.rel h2{margin-top:0;font-size:20px}
.nminis{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.nmini{font-size:13px;color:var(--mute);background:#fff;border:1px solid var(--line);padding:7px 13px;text-decoration:none}
.pnrow{display:flex;justify-content:space-between;gap:14px;margin-top:22px;border:1px solid var(--line);border-radius:12px;padding:13px 18px;font-size:14px}
.pnrow a{text-decoration:none;color:var(--mute)}
.pnrow a:hover{color:var(--ink)}
@media(max-width:1100px){
  .apage{display:block}
  .arail .toc{display:none}
  .toc-m{display:block}
  .arail{position:static;margin-top:34px}
  .hcards.three{grid-template-columns:1fr 1fr}
  .hfcols{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .hcards.three{grid-template-columns:1fr}
  .hnav{flex-wrap:wrap}
  .hlinks{order:3;width:100%;gap:14px}
  .hfcols{grid-template-columns:1fr}
  .hflegal,.hfbar{justify-content:center;text-align:center}
  .hflegal a:not(:last-child)::after{content:none}
  .hfco{text-align:center}
}

/* ---- help 0.12.0: the article badge on the category base (board 61) ---- */
.hart{position:relative}
.hbadge{position:absolute;right:10px;bottom:6px;width:27px;height:27px;background:#fff;border:2px solid;display:grid;place-items:center;box-shadow:0 2px 6px rgba(15,23,38,.14)}
.hbadge svg{display:block}
.hbm-draft{border-color:var(--draft);color:color-mix(in srgb,var(--draft) 72%,var(--ink))}
.hbm-paid{border-color:var(--paid);color:color-mix(in srgb,var(--paid) 72%,var(--ink))}
.hbm-sky{border-color:var(--sky);color:color-mix(in srgb,var(--sky) 60%,var(--ink))}
.hbm-over{border-color:var(--overdue);color:color-mix(in srgb,var(--overdue) 70%,var(--ink))}
.abanner .hart{flex:none}

/* ======================================================================
   REDRESS R8 — THE HELP CENTRE IN THE DRESS (help 0.14.0, 2026-09-07, his
   word on board 212). The rules of boards/dress4/help4.css, laid over the
   sheet above the way the board was rendered: the bar dark and bleeding,
   the hero band with the atom, the mono eyebrow, the search a hairline box,
   the chips and cards squared with the blue rule, the article's crumb and
   category in mono, the figures drawn in the eight by build.py. The rules
   above that these override are on ORPHANS.md for R9.
   ====================================================================== */
@keyframes pulse{50%{opacity:.35}}
body{font-family:var(--body)}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-.03em}
h1{font-size:clamp(34px,5vw,48px)}
/* the bar: navy, like every page of the site since R2 */
.hnav{background:var(--ink);border-bottom:1px solid var(--line-dark)}
.hlinks a{color:var(--muted-dark)}.hlinks a.on,.hlinks a:hover{color:#fff}
.hbtn{border-radius:6px;font-weight:500}.hbtn.g{background:var(--sky);color:#fff;border:1px solid var(--sky)}.hbtn.o{background:transparent;border:1px solid var(--line-dark-2);color:#fff}
/* the hero: the navy band with the atom, the mono eyebrow with the dot, the search as a hairline box */
.hhero{background:linear-gradient(180deg,var(--ink),var(--panel));border-bottom:0;color:var(--text-dark);position:relative;overflow:hidden}
.hhero>*{position:relative;z-index:2}
.hhero .eyebrow{font-family:var(--mono);font-weight:500;letter-spacing:.08em;color:var(--muted-dark);display:inline-flex;align-items:center;gap:10px}
.hhero .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sky);box-shadow:0 0 12px var(--sky);animation:pulse 2.4s ease-in-out infinite}
.hhero h1{color:#fff}
.hsearch{border-radius:6px;border:1px solid var(--line-dark-2);background:var(--panel);box-shadow:none;color:var(--text-dark)}
.hsearch input{color:#fff}.hsearch input::placeholder{color:var(--muted-dark)}.hsearch svg{stroke:var(--muted-dark)}
#hsr{border-radius:6px;border:1px solid var(--line);box-shadow:0 24px 50px -24px rgba(6,10,18,.5)}
#hsr a b{font-family:var(--body);font-weight:500}#hsr a small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.hquick a{border-radius:6px;background:transparent;border:1px solid var(--line-dark-2);color:var(--text-dark)}
.atom{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* the rail and the cards: hairline, 8px, the blue rule that draws on hover; the badge in mono */
.hpill{border-radius:6px;border:1px solid var(--line);font-weight:500;color:var(--mute)}.hpill:hover,.hpill.on{border-color:var(--iris);color:var(--iris)}
.hcard{border-radius:8px;border:1px solid var(--line);box-shadow:none;position:relative;overflow:hidden}
.hcard::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--sky);transition:width .6s var(--ease)}
.hcard:hover{transform:none;border-color:var(--line);box-shadow:none}.hcard:hover::before{width:100%}
.hart{background:var(--mist);border:1px solid var(--line);border-radius:6px}
.hmeta,.acat,.toc b,.stuck b,.hfk,.fig-head .t{font-family:var(--mono);font-weight:500;letter-spacing:.08em}
.hsechead h2{font-weight:500}
.hsechead a{color:var(--iris);font-weight:500}
/* the article: the crumb and the category in mono, the banner a paper panel with the hairline, the toc and the note squared */
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.acat{background:color-mix(in srgb,var(--sky) 10%,#fff);color:var(--iris-deep);border-radius:4px}
.ameta{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--mute)}
.abanner{background:var(--mist);border:1px solid var(--line);border-radius:8px}
.outcome{border-left:3px solid var(--sky);border-radius:0 6px 6px 0}
.toc,.toc-m,.note,.next a,.stuck,.result,.cmp,.mp .panel,.tl .stage,.calc .out{border-radius:8px}
.toc a{border-radius:4px}
.stuck{background:var(--panel);border:1px solid var(--line-dark-2)}
.nmini{border-radius:6px}
kbd{border-radius:4px}
.fig-frame{border-radius:8px;box-shadow:none}
.fig-head .k{border-radius:4px;font-family:var(--mono);font-size:11px;letter-spacing:.04em}
.fig-ctl button{border-radius:6px}
.opts button{border-radius:6px}
ol.steps>li::before{background:var(--sky);border-radius:6px;font-family:var(--mono)}
.hbadge{border-radius:6px}
/* the foot: the navy with the hairline and the mono labels, the site's own since R1 */
.hfoot{background:var(--ink);border-top:1px solid var(--line-dark)}
.hfcols .hfk,.hflegal .hfk{font-family:var(--mono);font-weight:500;letter-spacing:.08em;color:var(--muted-dark)}
/* the bar is a max-width box on help pages: its navy bleeds to the edges */
.hnav{box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax);border-bottom:0}
.hhero{border-top:1px solid var(--line-dark)}
/* board 213 (help 0.16.0): the terrain under the hub's atom, as on the site */
.hhero .terrain{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 18%,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 18%,#000 60%,transparent 100%)}

/* ======================================================================
   BOARD 217 (help 0.21.0, 2026-09-07), his word: "all the other pages to
   have the same colour … everything has to be symmetric. Consistency."
   The help centre wears the site's red dress: the same tokens the site's
   body.red block names, the bar white under the 3px stripe with the ink
   lockup, the hero white with the constellation in ink, the search a
   hairline box, the foot white under the same stripe. Every help page's
   body wears .red (build.py writes it); the navy rules above stay on the
   sheet and are listed on ORPHANS.md. The figures are drawn in the same
   red by build.py and the sixteen article modules.
   ====================================================================== */
.red{
  --iris:#025F43;--sky:#026E4E;--ink:#111318;--panel:#1B1E25;--mist:#F3F3F1;--iris-deep:#025F43;   /* 1.85.0 (help 0.25.0): his green, the pair site.css's .red names */
  --line:#E4E5E7;--mute:#4F5054;   /* the site's --line (11% ink) and --muted (74% ink) on white, written literally: this sheet has no colour-mix */
  --text-dark:#fff;--muted-dark:rgba(255,255,255,.82);
  background:#fff;color:var(--ink)}
.red::before{content:"";display:block;height:3px;background:var(--sky)}
/* the bar: white, bleeding to the edges as before, a hairline under it; Support a ghost, Start free in ink */
.red .hnav{background:#fff;box-shadow:0 0 0 100vmax #fff;border-bottom:1px solid var(--line)}
.red .hlinks a{color:var(--mute)}.red .hlinks a.on,.red .hlinks a:hover{color:var(--ink)}
.red .hbtn.g{background:var(--ink);border-color:var(--ink);color:#fff}.red .hbtn.g:hover{background:var(--sky);border-color:var(--sky)}
.red .hbtn.o{border:1px solid #6B6D72;color:var(--ink);background:#fff}.red .hbtn.o:hover{border-color:var(--ink)}
/* the hub's hero: white, the words in ink, the eyebrow in the sans, the search and the quick doors in the hairline */
.red .hhero{background:#fff;color:var(--ink);border-top:0;border-bottom:1px solid var(--line)}
.red .hhero h1{color:var(--ink)}
.red .hhero .eyebrow{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.red .hhero .eyebrow::before{background:var(--sky);box-shadow:none}
.red .hhero .terrain{opacity:.45}
.red .hsearch{background:#fff;border:1px solid #6B6D72;color:var(--ink);box-shadow:0 12px 32px rgba(17,19,24,.08)}
.red .hsearch input{color:var(--ink)}.red .hsearch input::placeholder{color:var(--mute)}.red .hsearch svg{stroke:var(--mute)}
.red .hquick a{background:var(--mist);border:1px solid var(--line);color:var(--ink)}.red .hquick a:hover{border-color:var(--ink)}
/* the article's "still stuck" box: stone, not the panel */
.red .stuck{background:var(--mist);border:1px solid var(--line);color:var(--ink)}
.red .stuck b{color:var(--mute)}.red .stuck p{color:var(--ink)}
/* the foot: white under the stripe, the heads in the sans, the seal in its hairline card */
.red .hfoot{background:#fff;color:var(--mute);border-top:3px solid var(--sky)}
.red .hfcols{border-bottom:1px solid var(--line)}
.red .hfb p{color:var(--mute)}
.red .hfcols .hfk,.red .hflegal .hfk{font-family:var(--body);font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--ink)}
.red .hfcols div a,.red .hflegal a{color:var(--mute)}.red .hfcols div a:hover,.red .hflegal a:hover{color:var(--sky)}
.red .hflegal a:not(:last-child)::after{color:#B9BABD}
.red .hfco{color:var(--mute)}
.red .hfbar{color:var(--mute);border-top:1px solid var(--line)}
.red .hseal{--hs-line:#D6D7DA;--hs-lock:var(--paid);--hs-title:var(--ink);--hs-sub:var(--mute);--hs-logo:var(--ink);border-color:#D6D7DA}
.red a.hseal:hover{border-color:var(--ink)}