:root{
  color-scheme: light;
  --ground:#FBF8F3; --paper:#FFFFFF; --ink:#1E2226; --mut:#4A5058; --faint:#6B7178;
  --teal:#1D5C63; --teal-dk:#123E43; --tint:#E6EFEF; --warm:#8A4F10; --warm-tint:#F7EEE3;
  --line:#D6D0C4; --line-dk:#C9C2B4; --ok:#2E6B3A; --bad:#9A2A1E;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Atkinson Hyperlegible', 'Segoe UI', Verdana, sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55}
a{color:var(--teal)} a:hover{color:var(--teal-dk)}
:focus-visible{outline:3px solid var(--warm);outline-offset:2px;border-radius:3px}
[tabindex="-1"]:focus{outline:none}
.wrap{max-width:1080px;margin-inline:auto;padding-inline:20px}
.narrow{max-width:720px}
.sr-only{position:absolute;left:-9999px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--paper);padding:8px 12px;z-index:20}
.skip:focus{left:12px}

/* top bar */
.top{position:sticky;top:0;z-index:10;background:var(--ground);border-bottom:2px solid var(--ink)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding-block:12px}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);margin-right:auto}
.brand small{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teal)}
.brand b{font-family:var(--serif);font-size:21px;line-height:1.1}
nav.main{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;font-size:15px}
nav.main a{text-decoration:none;color:var(--ink);padding:8px 0}
nav.main a:hover{color:var(--teal)}
nav.main a[aria-current="page"]{color:var(--teal);box-shadow:inset 0 -2px 0 var(--teal)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:7px;font:inherit;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;border:1px solid var(--teal);background:var(--teal);color:#fff}
.btn:hover{background:var(--teal-dk);border-color:var(--teal-dk);color:#fff}
.btn.ghost{background:transparent;color:var(--teal)}
.btn.ghost:hover{background:var(--tint);color:var(--teal-dk)}
.btn.small{min-height:36px;padding:6px 12px;font-size:14px}
.btn[disabled]{opacity:.5;cursor:default}
nav.main .btn{padding:6px 14px;min-height:40px;color:#fff}

main{padding-block:10px 60px}
h1,h2,h3{font-family:var(--serif);line-height:1.15;text-wrap:balance}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teal);margin:0}
section.block{padding-block:40px 8px}
section.block+section.block{border-top:1px solid var(--line)}
.block h2{font-size:30px;margin:4px 0 12px}
.block>p,.block .lede{max-width:44em}
.lede{font-size:19px}
.mut{color:var(--mut)}
.small{font-size:14.5px}

/* landing hero */
.hero{padding-block:44px 34px}
.hero h1{font-size:clamp(38px,6vw,60px);margin:8px 0 6px;letter-spacing:-.01em}
.hero .subtitle{font-family:var(--serif);font-size:clamp(20px,2.8vw,27px);color:var(--teal);margin:0 0 18px}
.hero .lede{max-width:36em;margin:0 0 22px}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta .note{font-size:14.5px;color:var(--mut)}

.hero h1{max-width:15em}
.cta-note{margin:14px 0 0;font-size:15.5px;color:var(--mut)}
.more{margin:16px 0 0}
/* situations to tap */
.sits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px}
.sit{display:flex;flex-direction:column;gap:6px;background:var(--paper);border:1px solid var(--line-dk);border-radius:10px;padding:16px 18px;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.sit:hover{border-color:var(--teal);box-shadow:0 3px 12px rgba(29,92,99,.14);transform:translateY(-2px);color:var(--ink)}
.sit b{font-family:var(--serif);font-size:20px;line-height:1.2}
.sit span{font-size:15.5px;color:var(--mut)}
.sit em{margin-top:auto;padding-top:6px;font-style:normal;font-size:14px;font-weight:700;color:var(--teal)}
.sit em::after{content:" \2192"}
/* two ways to start, on the front page */
.ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:10px 0 12px}
.way{display:flex;flex-direction:column;gap:8px;background:var(--paper);border:1px solid var(--line-dk);border-radius:12px;padding:20px 22px;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.way:hover{border-color:var(--teal);box-shadow:0 3px 12px rgba(29,92,99,.14);color:var(--ink)}
.way b{font-family:var(--serif);font-size:22px;line-height:1.2;color:var(--teal-dk, #123E43)}
.way b::after{content:" \2192";color:var(--teal)}
.way span{font-size:16px;color:var(--mut)}
@media (max-width:640px){.ways{grid-template-columns:1fr}}
/* the access request, folded until asked for */
.reqbox{margin-top:18px;border:1px solid var(--line-dk);border-radius:12px;background:var(--paper)}
.reqbox>summary{cursor:pointer;padding:14px 18px;font-weight:700;color:var(--teal)}
.reqbox>summary:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.reqbox[open]>summary{border-bottom:1px solid var(--line-dk)}
.reqbox>p,.reqbox>form{margin:14px 18px}
/* the open sheets, each one a link */
.open-h{font-family:var(--sans);font-size:16px;margin:18px 0 6px;scroll-margin-top:110px}
.openlist{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 18px}
.openlist a{display:flex;gap:8px;padding:6px 0;text-decoration:none;color:var(--ink);border-bottom:1px dotted var(--line-dk)}
.openlist a:hover{color:var(--teal)}
/* the four parts of the guide */
.parts{list-style:none;margin:14px 0 16px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.parts li{background:var(--paper);border:1px solid var(--line-dk);border-left:5px solid var(--teal);border-radius:8px;padding:12px 16px}
.parts b{display:block;font-family:var(--serif);font-size:19px}
.parts span{font-size:15px;color:var(--mut)}
.parts small{display:block;margin-top:4px;font-size:13px;font-weight:700;color:var(--teal)}
@media (prefers-reduced-motion:reduce){.sit{transition:none}.sit:hover{transform:none}}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:6px}
.three>div{border-top:3px solid var(--teal);padding-top:10px}
.three b{font-family:var(--serif);font-size:19px}
.three p{margin:6px 0 0;font-size:15.5px;color:var(--mut)}

.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:10px}
.card{background:var(--paper);border:1px solid var(--line-dk);border-radius:10px;padding:16px 18px}
.card h3{font-size:19px;margin:0 0 6px}
.card p{margin:0;font-size:15.5px;color:var(--mut)}

/* model flow (static copy of the guide's diagram) */
.flow{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.flow::before{content:"";position:absolute;left:8%;right:8%;top:25px;border-top:3px solid var(--tint)}
.fl-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:0 8px}
.fl-num{width:50px;height:50px;border-radius:50%;background:var(--paper);border:3px solid var(--teal);color:var(--teal);font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;position:relative}
.fl-step.last .fl-num{background:var(--teal);color:#fff}
.fl-name{font-family:var(--serif);font-weight:700;font-size:18px}
.fl-txt{font-size:15px;color:var(--mut);max-width:14em}

/* table of contents */
.layers{display:grid;gap:14px;margin-top:14px}
.layer{border-radius:12px;padding:14px 16px;border:1px solid var(--line-dk);background:var(--paper)}
.layer.personal{background:var(--tint);border-color:#BFD3D3}
.layer.mgmt{background:#FCF7F0;border-color:#E3CFB6}
.layer-tag{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.layer.mgmt .layer-tag{color:var(--warm)}
.layer>p{margin:4px 0 10px;font-size:15px;color:var(--mut)}
.sers{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
details.ser{background:var(--paper);border:1px solid var(--line-dk);border-radius:8px}
details.ser summary{cursor:pointer;padding:10px 12px;list-style:none;min-height:44px}
details.ser summary::-webkit-details-marker{display:none}
details.ser summary b::before{content:"+";display:inline-block;width:16px;color:var(--teal)}
details.ser[open] summary b::before{content:"\2212"}
details.ser summary span{display:block;font-size:13px;color:var(--teal);font-weight:700;padding-left:16px}
details.ser ul{margin:0;padding:6px 14px 12px 30px;border-top:1px solid var(--line);font-size:14.5px}
details.ser li{padding:2px 0}
.code{font-weight:700;color:var(--teal);font-variant-numeric:tabular-nums}
.draft{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--warm);background:var(--warm-tint);border:1px solid #E3CFB6;border-radius:10px;padding:1px 8px;margin-left:6px;vertical-align:2px}

.care{background:var(--warm-tint);border:1px solid #E3CFB6;border-radius:10px;padding:16px 20px;max-width:46em}
.care h3{margin:0 0 6px;font-size:19px;color:var(--warm)}
.care ul{margin:6px 0 0;padding-left:20px}
.care li{margin:4px 0}

.starter{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:center}
.starter ul{margin:8px 0 18px;padding-left:20px}

/* forms */
form.req{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;max-width:720px;margin-top:14px}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1 / -1}
.field label,.field legend{font-weight:700;font-size:15px}
.field .hint{font-size:13.5px;color:var(--mut);font-weight:400}
.field .err{font-size:14px;font-weight:700;color:var(--bad)}
.field [aria-invalid=true]{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.field[hidden]{display:none}
.req-done{grid-column:1 / -1;margin:0;font-size:16px}
/* short captioned videos */
.vid video,.vgrid video{display:block;width:100%;height:auto;aspect-ratio:16 / 9;background:#123E43;border:1px solid var(--line-dk);border-radius:10px}
.vid video{max-width:820px}
.vnote{font-size:14.5px;color:var(--mut);margin:8px 0 0}
.vids{max-width:980px;margin:44px auto 0;padding-top:24px;border-top:1px solid var(--line);scroll-margin-top:120px}
.vids h2{font-family:var(--serif);font-size:24px;margin:0 0 4px}
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:14px}
.vgrid figure{margin:0}
.vgrid figcaption{font-size:14.5px;color:var(--mut);margin-top:6px}
.vgrid figcaption b{display:block;color:var(--ink);font-size:15.5px}
@media (max-width:760px){.vgrid{grid-template-columns:1fr}}
/* a signed-in reader is not asked to request access again */
.wfg-signed nav.main a.btn[href="/#access"]{display:none}
input[type=text],input[type=email],select,textarea{font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line-dk);border-radius:7px;background:var(--paper);color:var(--ink);min-height:46px;width:100%}
textarea{min-height:96px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.check input{width:20px;height:20px;margin-top:3px;flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{font-size:15px;min-height:1.3em}
.status.ok{color:var(--ok);font-weight:700}
.status.bad{color:var(--bad);font-weight:700}

.author{max-width:46em}

footer.site{border-top:1px solid var(--line);padding-block:22px 36px;color:var(--mut);font-size:14px}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}
footer.site a{color:var(--mut)}

/* text pages */
.prose h1{font-size:40px;margin:30px 0 8px}
.prose h2{font-size:24px;margin:30px 0 8px}
.prose p,.prose li{max-width:40em}
.log h2{font-size:22px;border-top:1px solid var(--line);padding-top:22px}

@media (max-width:760px){
  body{font-size:16.5px}
  .three,.who,.starter,.sits,.parts,.openlist{grid-template-columns:1fr}
  form.req{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;gap:10px}
  .flow::before{left:24px;right:auto;top:20px;bottom:20px;border-top:0;border-left:3px solid var(--tint)}
  .fl-step{display:grid;grid-template-columns:50px minmax(0,1fr);column-gap:12px;text-align:left;align-items:center;padding:0}
  .fl-num{grid-row:1 / span 2}
  .fl-txt{max-width:none}
  .top{position:static}
  nav.main{gap:2px 14px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* the naming question, the topic list and the style grid: shared by the public pages */
.poll{margin:22px 0 6px;padding:16px 18px;border:1px dashed var(--line-dk);border-radius:12px;background:var(--paper);max-width:46em}
.poll h3{font-size:19px;margin:0 0 6px}
.poll p{margin:0 0 10px}
.poll-opts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.poll-opts .opt{font:inherit;font-size:15.5px;font-weight:700;min-height:44px;padding:8px 16px;border:1px solid var(--line-dk);border-radius:22px;background:var(--ground);color:var(--ink);cursor:pointer;display:inline-flex;flex-direction:row;align-items:center}
.poll-opts .opt:hover{border-color:var(--teal)}
.poll-opts .opt[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:none}
.poll-opts .opt:disabled{opacity:.6;cursor:default}
.poll-other label{display:block;font-size:15px;font-weight:700;margin-bottom:4px}
.poll-other div{display:flex;gap:8px;flex-wrap:wrap}
.poll-other input{flex:1 1 220px;font:inherit;padding:9px 12px;border:1px solid var(--line-dk);border-radius:8px;min-height:44px}
.poll .fine{font-size:14px;color:var(--mut);margin:6px 0 0}
.topics{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.topics a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border:1px solid var(--line-dk);border-radius:20px;background:var(--paper);text-decoration:none;color:var(--ink);font-size:15.5px}
.topics a:hover{border-color:var(--teal);color:var(--teal)}
.topics .lk{display:inline-block;width:9px;height:8px;border-radius:2px;background:var(--mut);position:relative;margin-left:1px;opacity:.7}
.topics .lk::before{content:"";position:absolute;left:1.5px;top:-5px;width:4px;height:5px;border:1.5px solid var(--mut);border-bottom:0;border-radius:3px 3px 0 0}
.stylesq{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;max-width:520px}
.stylesq div{border:1px solid var(--line-dk);border-radius:9px;padding:9px 12px;background:var(--ground);font-size:14.5px;color:var(--mut)}
.stylesq b{display:block;color:var(--ink);font-size:15.5px}
.stylesq div.on{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal) inset;background:var(--tint)}
.baseline{font-family:var(--serif);font-size:19px;line-height:1.35;margin:12px 0;padding-left:14px;border-left:4px solid var(--teal);max-width:30em}
@media (max-width:760px){.topics{gap:6px}.topics a{min-height:36px;padding:4px 11px;font-size:14.5px}}
@media print{.poll{display:none !important}}

.ways.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.ways.three{grid-template-columns:1fr}}
.way.course{background:var(--tint);border-color:var(--teal)}
/* notes: newsletter issues and articles */
.notelist{list-style:none;padding:0;margin:20px 0;display:grid;gap:12px}
.notelist a{display:block;border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:var(--paper);text-decoration:none;color:var(--ink)}
.notelist a:hover{border-color:var(--teal)}
.notelist small{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--teal-dk)}
.notelist b{display:block;font-family:var(--serif);font-size:21px;margin:2px 0 4px}
.notelist span{display:block;color:var(--mut);font-size:15.5px}
.notes .kind{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--teal-dk);margin:24px 0 0}
.notes blockquote{margin:14px 0;padding:10px 18px;border-left:4px solid var(--teal);background:var(--tint);border-radius:0 10px 10px 0}
.notes blockquote p{margin:0;font-style:italic}
.notes sup{font-size:.7em}
.notes .endnote{border-top:1px solid var(--line);padding-top:14px;margin-top:30px}
.notes .draftnote{background:var(--warm-tint);border:1px solid var(--warm);border-radius:10px;padding:10px 14px;font-size:15px}

/* help videos on Stream: poster with a play button until pressed */
.vstream{position:relative;width:100%;aspect-ratio:16 / 9;background:#123E43;border:1px solid var(--line-dk);border-radius:10px;overflow:hidden}
.vid .vstream{max-width:820px}
.vstream .vplay{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;position:relative}
.vstream img{display:block;width:100%;height:100%;object-fit:cover}
.vstream .vbtn{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(18,62,67,.88);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.vstream .vbtn::after{content:"";position:absolute;left:27px;top:21px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff}
.vstream .vplay:hover .vbtn,.vstream .vplay:focus-visible .vbtn{background:#1D5C63}
.vstream .vplay:focus-visible{outline:3px solid var(--warm);outline-offset:-3px}
.vstream iframe{display:block;width:100%;height:100%;border:0}

/* ---- more room (14 Oct 2026): a heading font, and more space between things ---- */
@font-face{font-family:'Fraunces';src:url(/assets/fonts/fraunces.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--serif:'Fraunces', 'Source Serif 4', Georgia, 'Times New Roman', serif}
h1,h2,h3,.brand b,.sit b,.way b,.parts b,.three b,.fl-name,.notelist b,.hero .subtitle{font-weight:600;font-optical-sizing:auto;letter-spacing:-.005em}
.hero .subtitle{font-weight:500}
body{line-height:1.65}
.top{line-height:1.55}
p{margin-block:0 1em}
.hero{padding-block:64px 52px}
.hero h1{margin:12px 0 14px;line-height:1.08}
.hero .lede{margin-bottom:30px}
section.block{padding-block:64px 24px}
.block h2{font-size:34px;margin:8px 0 18px}
.block>p,.block .lede{max-width:40em}
.sits{gap:18px;margin-top:16px}
.sit{padding:22px 24px;gap:10px}
.ways{gap:20px;margin:18px 0 22px}
.way{padding:26px 28px;gap:10px}
.parts{gap:16px}
.parts li{padding:16px 20px}
.three{gap:28px;margin-top:14px}
.card{padding:22px 24px}
.who{gap:20px}
.prose h1{margin:40px 0 14px}
.prose h2{margin:44px 0 12px}
.prose p,.prose li{max-width:38em}
.vids{margin-top:64px;padding-top:36px}
.vgrid{gap:24px;margin-top:20px}
footer.site{padding-block:32px 48px}
@media (max-width:760px){.hero{padding-block:40px 32px}section.block{padding-block:44px 16px}.block h2{font-size:28px}}

/* The eight drift patterns on four axes. One row per domain. Push grows left from the centre,
   pull back grows right. The centre is "reading true", and it names the two intangibles that hold there.
   Shared by the guide and the public pages. */
.axes{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.ax-key,.ax-row{display:grid;grid-template-columns:128px minmax(0,1fr) 158px minmax(0,1fr);gap:10px}
.ax-key{align-items:end;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.ax-key .l{text-align:right}
.ax-key .c{text-align:center;color:var(--teal);font-size:11.5px;letter-spacing:.05em;line-height:1.15}
.ax-key small{display:block;font-weight:400;letter-spacing:0;text-transform:none;font-size:12.5px}
.ax-row{align-items:stretch}
.ax-dom{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.ax-dom b{font-family:var(--serif);font-size:18px;color:var(--teal);display:flex;align-items:center;gap:4px}
.ax-dom span{font-size:13px;color:var(--mut)}
/* the centre of each line: a true reading, and the two intangibles that hold there */
.ax-mid{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:44px;padding:6px 8px;text-align:center;
  border-inline:2px solid var(--ink);background:var(--paper)}
.ax-int{font-size:12.5px;font-weight:700;line-height:1.2;color:var(--teal-dk,#123E43)}
a.ax-int{text-decoration:none}
a.ax-int:hover{text-decoration:underline}
.ax-ml{display:none;font-size:12.5px;color:var(--mut)}
.ax-row.dim .ax-mid{background:transparent}
.axes .pt{min-height:0}
.axes .pt:not(.pull){text-align:left}
/* plain tiles, for pages that explain the picture without linking anywhere */
.ax-tile{background:var(--paper);border:1px solid var(--line-dk);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.ax-tile.pull{background:var(--tint);border-color:#BFD3D3}
.ax-tile b{font-size:15.5px}
.ax-tile span{font-size:14px;color:var(--mut)}
.ax-row.dim{opacity:.5}
.ax-tile.on{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal) inset}
/* a reader's own result: bars in three wide bands, never a fine scale */
.ax-bar{display:flex;flex-direction:column;gap:4px;justify-content:flex-end;min-width:0;padding-block:4px}
.ax-bar .nm{font-weight:700;font-size:15px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.ax-bar .bd{font-weight:400;font-size:13px;color:var(--mut)}
.ax-bar.push .nm{justify-content:flex-end;text-align:right}
.ax-mkey{display:none;margin:0;font-size:13.5px;color:var(--mut)}
.ax-track{display:flex;height:22px;border-radius:6px;background:var(--paper);border:1px solid var(--line-dk);overflow:hidden}
.ax-bar.push .ax-track{justify-content:flex-end}
.ax-track i{display:block;background:var(--teal);height:100%}
.ax-bar.pull .ax-track i{background:#6E9FA5}
.ax-bar.hi .nm{color:var(--teal-dk,#123E43)}
.ax-bar.hi .ax-track{box-shadow:0 0 0 2px var(--ink)}
@media (max-width:760px){
  .ax-key{display:none}
  .ax-mkey{display:block}
  .ax-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 8px}
  .ax-dom{grid-column:1 / -1;order:-2;flex-direction:row;align-items:baseline;gap:8px;justify-content:flex-start;flex-wrap:wrap;padding-top:6px}
  .ax-mid{grid-column:1 / -1;order:-1;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:baseline;gap:2px 10px;min-height:0;text-align:left;
    border-inline:0;border-left:3px solid var(--ink);padding:3px 0 3px 9px;background:transparent}
  .ax-ml{display:inline}
  .ax-int{font-size:13.5px}
  .ax-int + .ax-int::before{content:"· ";font-weight:400;color:var(--mut)}
  .axes .pt-s{position:static;margin-top:4px}
  .axes .pt{padding:10px 10px 8px}
  .ax-bar .nm{font-size:14px}
}