/* SavingBits: cream paper, ink outlines, tangerine bits. System fonts only. */
:root{
  --bg:#fbf7ef;--paper:#fffdf8;--paper-2:#f5eee1;--ink:#1f1a2b;--ink-2:#3b3448;--muted:#6b6377;--line:#e5dac6;--edge:#1f1a2b;
  --brand:#ff6b2c;--brand-ink:#b33f0c;--brand-soft:#ffe3d3;--mint:#0f9e7b;--mint-ink:#0b7a5f;--mint-soft:#d7f4ea;--sun:#ffc93c;--sun-soft:#fff1c7;
  --zero:#f3e6d2;--zero-ink:#9a8a73;--one:#ff6b2c;--one-ink:#fff;
  --pub:#0b7a5f;--pub-bg:#d7f4ea;--comp:#1e5fbf;--comp-bg:#dde9fb;--est:#9a5b00;--est-bg:#fff0cc;
  --shadow:3px 3px 0 var(--edge);--shadow-sm:2px 2px 0 var(--edge);
  --r:16px;--r-sm:10px;
  --head:ui-rounded,"SF Pro Rounded","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#16131d;--paper:#201c2a;--paper-2:#2a2536;--ink:#f4eee5;--ink-2:#d9d1c6;--muted:#aaa1b5;--line:#3a3448;--edge:#0a0810;
  --brand:#ff8a52;--brand-ink:#ffa476;--brand-soft:#43271b;--mint:#3fd3ae;--mint-ink:#5fe0bf;--mint-soft:#163b33;--sun:#ffd45c;--sun-soft:#3e3418;
  --zero:#3a3346;--zero-ink:#9e93ad;--one:#ff8a52;--one-ink:#1b1220;
  --pub:#6fe3c3;--pub-bg:#143b31;--comp:#9cc2ff;--comp-bg:#1a2b47;--est:#ffcb6b;--est-bg:#3d2e10;
  --shadow:3px 3px 0 #000;--shadow-sm:2px 2px 0 #000;color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#16131d;--paper:#201c2a;--paper-2:#2a2536;--ink:#f4eee5;--ink-2:#d9d1c6;--muted:#aaa1b5;--line:#3a3448;--edge:#0a0810;
  --brand:#ff8a52;--brand-ink:#ffa476;--brand-soft:#43271b;--mint:#3fd3ae;--mint-ink:#5fe0bf;--mint-soft:#163b33;--sun:#ffd45c;--sun-soft:#3e3418;
  --zero:#3a3346;--zero-ink:#9e93ad;--one:#ff8a52;--one-ink:#1b1220;
  --pub:#6fe3c3;--pub-bg:#143b31;--comp:#9cc2ff;--comp-bg:#1a2b47;--est:#ffcb6b;--est-bg:#3d2e10;
  --shadow:3px 3px 0 #000;--shadow-sm:2px 2px 0 #000;color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--body);overflow-x:hidden}
.no-js .js-only,html:not(.js) .js-only{display:none!important}
a{color:var(--brand-ink);text-decoration-thickness:1.5px;text-underline-offset:2px}
a:hover{color:var(--ink)}
h1,h2,h3{font-family:var(--head);line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(1.9rem,4.2vw,2.9rem);margin:.2em 0 .35em;font-weight:800}
h2{font-size:clamp(1.35rem,2.6vw,1.75rem);margin:1.8em 0 .6em;font-weight:800}
h3{font-size:1.1rem;margin:1.2em 0 .4em}
p{margin:.7em 0}
b,strong{font-weight:700}
img,svg{max-width:100%}
.wrap{max-width:1140px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:8px;z-index:9;background:var(--paper);padding:8px 12px;border:2px solid var(--edge)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* header */
.top{background:var(--paper);border-bottom:2px solid var(--edge);position:sticky;top:0;z-index:5}
.bar{display:flex;align-items:center;gap:20px;min-height:60px}
.brand{display:flex;align-items:center;gap:9px;font:800 1.3rem/1 var(--head);color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.brand b{color:var(--brand)}
.top nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.top nav a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.95rem;padding:6px 10px;border-radius:999px}
.top nav a:hover,.top nav a[aria-current]{background:var(--brand-soft);color:var(--ink)}
.unitflip{display:flex;align-items:center;gap:6px;border:2px solid var(--edge);background:var(--paper);color:var(--ink);border-radius:999px;padding:4px 10px;font:700 .85rem var(--mono);cursor:pointer;box-shadow:var(--shadow-sm)}
.unitflip .u-sw{width:26px;height:14px;border-radius:7px;background:var(--zero);position:relative;border:1.5px solid var(--edge)}
.unitflip .u-sw::after{content:"";position:absolute;top:1px;left:1px;width:9px;height:9px;border-radius:50%;background:var(--brand);transition:transform .15s}
.unitflip[aria-pressed="true"] .u-sw::after{transform:translateX(12px);background:var(--mint)}
.unitflip[aria-pressed="false"] .u-dec,.unitflip[aria-pressed="true"] .u-bin{color:var(--brand-ink)}
.unitflip[aria-pressed="true"] .u-bin{color:var(--mint-ink)}
.crumbs{font-size:.88rem;color:var(--muted);padding-top:14px;padding-bottom:0}
.crumbs a{color:var(--muted)}

/* bits */
.bytebar{display:inline-flex;gap:3px;vertical-align:middle}
.bytebar i{width:9px;height:12px;border-radius:3px;background:var(--zero);border:1.5px solid var(--edge)}
.bytebar i.on{background:var(--one)}
.kicker{display:flex;align-items:center;gap:10px;font:700 .82rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);margin:0 0 .4em}
.sec{display:flex;align-items:center;gap:12px}
.sec .bytebar i{width:8px;height:16px}

/* hero */
.hero{background:var(--sun-soft);border-bottom:2px solid var(--edge);background-image:radial-gradient(var(--line) 1.2px,transparent 1.2px);background-size:22px 22px}
.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:32px;align-items:center;padding-top:40px;padding-bottom:44px}
.hero h1{font-size:clamp(2rem,4.6vw,3.3rem);max-width:15em}
.lede{font-size:1.15rem;color:var(--ink-2);max-width:40em}
.hero-art{display:flex;justify-content:center}
.art-jar{width:100%;max-width:400px;height:auto}
.quick{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;background:var(--paper);border:2px solid var(--edge);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow);font-weight:600}
.quick select{font:700 1rem var(--body)}
.qk-out{flex-basis:100%;font:800 clamp(1.8rem,4vw,2.4rem)/1.1 var(--head);color:var(--brand-ink);font-variant-numeric:tabular-nums}

/* art */
.a-shadow{fill:var(--line)}
.a-glass{fill:var(--paper);fill-opacity:.55;stroke:var(--edge);stroke-width:3}
.a-lid{fill:var(--mint);stroke:var(--edge);stroke-width:3}
.a-slot{fill:var(--edge)}
.a-one{fill:var(--one);stroke:var(--edge);stroke-width:2}
.a-zero{fill:var(--zero);stroke:var(--edge);stroke-width:2}
.a-mint{fill:var(--mint);stroke:var(--edge);stroke-width:2}
.a-bit{font:800 13px var(--mono);text-anchor:middle}
.a-bit1{fill:var(--one-ink)}.a-bit0{fill:var(--zero-ink)}.a-sm{font-size:11px}
.a-motion{fill:none;stroke:var(--muted);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:3 6}
.a-shine{fill:none;stroke:#fff;stroke-opacity:.7;stroke-width:5;stroke-linecap:round}
.a-tag{fill:var(--sun);stroke:var(--edge);stroke-width:2.5}
.a-tagtext{font:800 12px var(--mono);text-anchor:middle;fill:#1f1a2b;letter-spacing:.04em}
@media (prefers-reduced-motion:no-preference){
  .a-float{animation:bob 4s ease-in-out infinite}
  @keyframes bob{50%{transform:translateY(6px)}}
}
.art-fig{margin:1.4em 0;padding:16px;background:var(--paper);border:2px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);overflow-x:auto}
.art-gib,.art-ladder{display:block;min-width:560px;width:100%;height:auto}
.g-lab{font:600 14px var(--body);fill:var(--ink)}
.g-dec{fill:var(--brand-soft);stroke:var(--brand);stroke-width:2}
.g-bin{fill:var(--mint-soft);stroke:var(--mint);stroke-width:2}
.g-part{fill:var(--mint-soft);stroke:var(--mint);stroke-width:2;stroke-dasharray:4 3}
.g-n{font:800 15px var(--mono);text-anchor:middle;fill:var(--ink)}
.g-sum{font:800 15px var(--head);fill:var(--mint-ink)}.g-sum2{font:600 13px var(--body);fill:var(--muted)}
.l-a{fill:var(--brand-soft);stroke:var(--edge);stroke-width:2}.l-b{fill:var(--mint-soft);stroke:var(--edge);stroke-width:2}.l-bit{fill:var(--sun);stroke:var(--edge);stroke-width:2}
.l-u{font:800 18px var(--head);text-anchor:middle;fill:var(--ink)}
.l-v{font:700 12px var(--mono);text-anchor:middle;fill:var(--ink-2)}
.l-ex{font:500 11px var(--body);text-anchor:middle;fill:var(--muted)}
.l-x{font:800 12px var(--mono);text-anchor:middle;fill:var(--brand-ink)}

/* icons */
.ico{width:44px;height:44px;flex:none}
.ico-sm{width:26px;height:26px;vertical-align:-6px}
.ico-xl{width:150px;height:150px}
.i-bg{fill:var(--paper-2);stroke:var(--edge);stroke-width:2.2}
.i-main{fill:var(--brand);stroke:var(--edge);stroke-width:1.6}
.i-sun{fill:var(--sun);stroke:var(--edge);stroke-width:1.4}
.i-bit{fill:var(--mint);stroke:var(--edge);stroke-width:1.4}
.i-screen{fill:var(--paper)}
.i-stroke{fill:none;stroke:var(--edge);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.i-stroke-thin{fill:none;stroke:var(--edge);stroke-width:2.2;stroke-linecap:round}
.i-txt{font:800 11px var(--mono);text-anchor:middle;fill:var(--ink)}
.i-q{font:900 26px var(--head);text-anchor:middle;fill:var(--brand)}
.i-track{fill:none;stroke:var(--zero);stroke-width:7;stroke-linecap:round}
.i-arc{fill:none;stroke:var(--brand);stroke-width:7;stroke-linecap:round}

/* tool cards */
.toolgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}/* 8 calculators: 4/2/1 (PARK-56) */
@media (max-width:1000px){.toolgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.toolgrid{grid-template-columns:minmax(0,1fr)}}
.toolgrid.small{display:flex;flex-wrap:wrap;justify-content:center}/* "other calculators": 4/3/2/1, short last row centred */
.toolgrid.small>*{flex:0 1 calc((100% - 3*16px)/4);min-width:0}
@media (max-width:919px){.toolgrid.small>*{flex-basis:calc((100% - 2*16px)/3)}}
@media (max-width:693px){.toolgrid.small>*{flex-basis:calc((100% - 16px)/2)}}
@media (max-width:467px){.toolgrid.small>*{flex-basis:100%}}
.toolcard{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;gap:4px 14px;align-items:start;background:var(--paper);border:2px solid var(--edge);border-radius:var(--r);padding:16px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s}
.toolcard .ico{grid-row:1/3;width:48px;height:48px}
.toolcard:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--edge);color:var(--ink)}
.tc-name{font:800 1.12rem/1.2 var(--head)}
.tc-blurb{font-size:.92rem;color:var(--muted);line-height:1.45}
.toolgrid.small .toolcard{padding:12px}.toolgrid.small .tc-blurb{display:none}.toolgrid.small .toolcard .ico{width:36px;height:36px}
.tc-orange{border-top:8px solid var(--brand)}.tc-mint{border-top:8px solid var(--mint)}.tc-sun{border-top:8px solid var(--sun)}

/* key numbers */
.numgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}/* 6 numbers: 6/3/2 (PARK-56) */
@media (max-width:1000px){.numgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.numgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.num{display:flex;flex-direction:column;background:var(--paper);border:2px solid var(--edge);border-radius:var(--r);padding:14px 16px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm)}
.num:hover{background:var(--brand-soft);color:var(--ink)}
.n-big{font:900 2.4rem/1 var(--head);color:var(--brand-ink);font-variant-numeric:tabular-nums}
.n-u{font:700 .9rem var(--mono);color:var(--ink-2);margin-top:2px}
.n-t{font-size:.88rem;color:var(--muted);margin-top:6px;line-height:1.35}

/* topics + question lists */
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px 28px}
.topic h3{display:flex;align-items:center;gap:8px}
.qlist{list-style:none;margin:0;padding:0}
.qlist li{border-bottom:1.5px dashed var(--line)}
.qlist a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 2px;color:var(--ink);text-decoration:none}
.qlist a:hover .ql-q{color:var(--brand-ink);text-decoration:underline}
.ql-q{font-weight:600}
.ql-a{font:800 1rem var(--head);color:var(--mint-ink);max-width:45%;font-variant-numeric:tabular-nums;text-align:right}
.ql-a small{font:600 .75rem var(--body);color:var(--muted)}
.more{font-size:.92rem}
.related .qlist{columns:2 340px;column-gap:28px}.related .qlist li{break-inside:avoid}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.jump a{border:2px solid var(--edge);border-radius:999px;padding:3px 12px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.9rem;background:var(--paper)}
.jump a:hover{background:var(--brand-soft)}
.qsec h2{display:flex;align-items:center;gap:10px}
.filterbox{display:flex;align-items:center;gap:10px;margin:10px 0}
.filterbox input{flex:1;max-width:380px}

/* tool page head */
.toolhead{background:var(--paper-2);border-bottom:2px solid var(--edge);border-top:none!important;margin-top:12px}
.toolhead.tc-orange{background:var(--brand-soft)}.toolhead.tc-mint{background:var(--mint-soft)}.toolhead.tc-sun{background:var(--sun-soft)}
.th-grid{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding-top:22px;padding-bottom:26px}
.th-art .ico-xl{filter:drop-shadow(4px 4px 0 var(--edge))}

/* calculators */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0;background:var(--paper);border:2px solid var(--edge);border-radius:var(--r);box-shadow:5px 5px 0 var(--edge);margin:28px 0;overflow:hidden}
.calc-in{padding:20px;display:flex;flex-direction:column;gap:16px;border-right:2px solid var(--edge)}
.calc-out{padding:22px;background:var(--bg);background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:18px 18px;min-width:0}
.calc h2{margin:0;font-size:1.25rem}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field>.label,.seg legend{font-weight:700;font-size:.95rem}
.field label output{font:700 .9rem var(--mono);color:var(--brand-ink);margin-left:6px}
.inrow{display:flex;gap:8px;align-items:center;min-width:0}
input[type=number],input[type=search],select,textarea{font:600 1.1rem var(--body);color:var(--ink);background:var(--paper);border:2px solid var(--edge);border-radius:var(--r-sm);padding:9px 11px;min-width:0}
input[type=number]{flex:1;width:100%;font:800 1.35rem var(--head);font-variant-numeric:tabular-nums}
.inrow select{flex:none}
.inrow.dur input{flex:1}
textarea{width:100%;font:500 .95rem/1.45 var(--mono);resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid var(--brand);outline-offset:1px}
input[type=range]{width:100%;accent-color:var(--brand)}
.suffix{font:700 .95rem var(--mono);color:var(--muted)}
.hint{font-size:.85rem;color:var(--muted);margin:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button,.btn-ghost{font:700 .85rem var(--body);color:var(--ink);background:var(--paper-2);border:1.5px solid var(--edge);border-radius:999px;padding:4px 11px;cursor:pointer}
.chips button:hover,.btn-ghost:hover{background:var(--brand-soft)}
.chips button[aria-pressed="true"]{background:var(--brand);color:#fff}
.seg{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.seg legend{padding:0;margin-bottom:6px;width:100%}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg span{display:block;border:2px solid var(--edge);border-radius:var(--r-sm);padding:6px 12px;font-weight:700;font-size:.92rem;background:var(--paper)}
.seg input:checked+span{background:var(--ink);color:var(--paper)}
.seg input:focus-visible+span{outline:3px solid var(--brand);outline-offset:2px}
.big{font:900 clamp(2.4rem,6vw,3.6rem)/1.05 var(--head);margin:0 0 6px;color:var(--brand-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.out-head{margin:0 0 10px;font-weight:600}
.out-sub{margin:4px 0;color:var(--ink-2)}
.formula{font:600 .9rem var(--mono);color:var(--muted);background:var(--paper);border:1.5px dashed var(--line);border-radius:8px;padding:8px 10px}
.fitlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fitlist li{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"n l" "n s";column-gap:14px;align-items:center;background:var(--paper);border:2px solid var(--edge);border-radius:var(--r-sm);padding:9px 12px}
.fl-n{grid-area:n;font:900 1.7rem/1 var(--head);color:var(--brand-ink);font-variant-numeric:tabular-nums;min-width:4.2em}
.fl-l{grid-area:l;font-weight:600;line-height:1.3}
.fl-s{grid-area:s;font:600 .8rem var(--mono);color:var(--muted)}
.pk-photo .fl-n{color:var(--brand-ink)}.pk-video .fl-n{color:var(--mint-ink)}.pk-song .fl-n{color:var(--est)}
.bars{display:grid;gap:8px;margin-top:14px}
.barrow{display:grid;grid-template-columns:7em 1fr auto;gap:10px;align-items:center;font-size:.9rem}
.bt{height:14px;background:var(--paper);border:1.5px solid var(--edge);border-radius:7px;overflow:hidden}
.bt i{display:block;height:100%;background:var(--brand)}
.barrow:nth-child(1) .bt i{background:var(--sun)}.barrow:nth-child(3) .bt i{background:var(--mint)}
.bv{font:700 .85rem var(--mono);white-space:nowrap}
.showas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.showas div{background:var(--paper-2);border:2px solid var(--edge);border-radius:var(--r-sm);padding:10px 12px}
.sa-os{display:block;font-size:.8rem;font-weight:700;color:var(--muted)}
.sa-v{display:block;font:900 1.5rem/1.15 var(--head);font-variant-numeric:tabular-nums}
.unitgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.unitgrid h3{margin:0 0 8px;font-size:.95rem}
.unitgrid dl{margin:0;display:grid;gap:5px}
.unitgrid dl div{display:flex;justify-content:space-between;gap:8px;background:var(--paper);border:1.5px solid var(--edge);border-radius:8px;padding:5px 9px}
.unitgrid dt{font:800 .9rem var(--mono);color:var(--muted)}
.unitgrid dd{margin:0;font:700 .95rem var(--mono);font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere;min-width:0}
.split{display:grid;gap:14px}
.split select{font-size:.9rem;padding:6px 8px}
.stack{display:flex;height:26px;border:2px solid var(--edge);border-radius:8px;overflow:hidden;margin:0 0 12px;background:var(--paper)}
.stack i{display:block;height:100%}
.st-sys{background:var(--zero-ink)}.st-photo{background:var(--brand)}.st-video{background:var(--mint)}.st-song{background:var(--sun)}
.caprows{display:grid;gap:8px}
.caprow{display:grid;grid-template-columns:minmax(0,1fr) 4.6em auto auto;gap:6px;align-items:center}
.caprow select{font-size:.9rem;padding:7px 6px;min-width:0;width:100%}
.caprow input{font-size:1.05rem;padding:7px 6px}
.caprow .rm{border:1.5px solid var(--edge);background:var(--paper-2);border-radius:8px;width:30px;height:30px;font-weight:800;cursor:pointer;color:var(--ink)}
.btn-ghost{align-self:flex-start;margin-top:8px}
.meter{height:18px;border:2px solid var(--edge);border-radius:9px;background:var(--paper);overflow:hidden;margin:10px 0}
.meter i{display:block;height:100%;background:var(--mint);transition:width .2s}
.meter.over i{background:#d9342b}
.caplist{list-style:none;padding:0;margin:8px 0 0;font-size:.9rem}
.caplist li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding:4px 0}
.squeeze{display:grid;gap:6px;margin-top:14px}
.squeeze i{display:block;height:20px;border:2px solid var(--edge);border-radius:6px}
.sq-a{background:var(--zero)}.sq-b{background:var(--brand);max-width:100%}
.demo{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.filepick{font-size:.9rem;font-weight:600}
.filepick input{font-size:.85rem;max-width:100%}

/* tags */
.tag{display:inline-block;font:700 .68rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.04em;padding:0 6px;border-radius:5px;vertical-align:2px;white-space:nowrap}
.tag-published{color:var(--pub);background:var(--pub-bg)}.tag-computed{color:var(--comp);background:var(--comp-bg)}.tag-estimate{color:var(--est);background:var(--est-bg)}

/* answer pages */
.answer{max-width:860px}
.a-head{margin-top:18px}
.answerbox{position:relative;background:var(--paper);border:2px solid var(--edge);border-radius:var(--r);box-shadow:5px 5px 0 var(--edge);padding:22px 24px 20px;margin:12px 0 22px;border-left:12px solid var(--brand)}
.ab-num{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.ab-big{font:900 clamp(2.6rem,8vw,4.4rem)/1 var(--head);color:var(--brand-ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ab-unit{font:800 clamp(1.1rem,2.6vw,1.5rem)/1.2 var(--head);color:var(--ink)}
.ab-sub{margin:10px 0 0;font-size:1.05rem;color:var(--ink-2);max-width:44em}
.ab-bits{position:absolute;top:14px;right:16px}
.work{background:var(--paper-2);border:2px solid var(--edge);border-radius:var(--r);padding:4px 20px 14px;margin:22px 0}
.work h2{margin-top:.8em}
.steps{margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:8px 0 8px 40px;border-bottom:1.5px dashed var(--line);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:7px;width:26px;height:26px;border-radius:7px;background:var(--ink);color:var(--paper);font:800 .85rem/26px var(--mono);text-align:center}
.note{background:var(--sun-soft);border:2px solid var(--edge);border-radius:var(--r-sm);padding:10px 14px;font-size:.95rem}
.cta{margin:26px 0}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--brand);color:#fff;border:2px solid var(--edge);border-radius:999px;padding:10px 18px;font-weight:800;text-decoration:none;box-shadow:var(--shadow)}
.btn:hover{color:#fff;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--edge)}
.btn .i-bg{fill:#fff}
.sources{padding-left:1.1em;font-size:.92rem;color:var(--ink-2)}
.sources li{margin:.45em 0}
.src{color:var(--muted)}

/* tables */
.tablewrap{overflow-x:auto;margin:18px 0;border:2px solid var(--edge);border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow-sm)}
table{border-collapse:collapse;width:100%;font-size:.92rem;font-variant-numeric:tabular-nums}
caption{text-align:left;font:800 1rem var(--head);padding:12px 14px 6px}
th,td{padding:8px 12px;text-align:right;border-top:1.5px solid var(--line);white-space:nowrap}
thead th{background:var(--paper-2);font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2);border-top:2px solid var(--edge);border-bottom:2px solid var(--edge)}
th[scope=row],thead th:first-child{text-align:left;font-weight:600}
th[scope=row]{white-space:normal;min-width:11em}
tbody tr:hover{background:var(--brand-soft)}
.tnote{font-size:.9rem;color:var(--muted);margin-bottom:-6px}
.wide td:last-child{white-space:normal}
.text td:nth-child(n+4){white-space:normal;text-align:left;min-width:16em}.text td:last-child{white-space:nowrap}.text td:nth-child(4):last-child{white-space:normal}

/* prose */
.prose{max-width:46em}
.prose ul{padding-left:1.2em}
.explain{margin-top:10px}
.promise{max-width:52em}

/* footer */
.foot{margin-top:60px;background:var(--ink);color:#d8d0c4;padding:30px 0 24px;font-size:.88rem}
.foot a{color:#ffb38c}
.foot-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:28px}
.foot-brand{display:flex;align-items:center;gap:8px;font:800 1.1rem var(--head);color:#fff}
.foot-brand span{font-weight:500;color:#b8afc2;font-size:.9rem}
.foot-links{border-top:1px solid #3c3449;padding-top:12px;margin-top:16px}
:root[data-theme="dark"] .foot,.foot{border-top:2px solid var(--edge)}
@media (prefers-color-scheme:dark){.foot{background:#0e0c13}}

.lost{text-align:center;padding:60px 0}
.lost-n{font:900 6rem/1 var(--head);color:var(--brand);margin:0}
.lost-b .bytebar i{width:16px;height:22px}

/* phones */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;padding-top:24px;gap:10px}
  .hero-art{order:-1}.art-jar{max-width:230px}
  .calc,.demo{grid-template-columns:1fr}
  .calc-in{border-right:0;border-bottom:2px solid var(--edge)}
  .th-grid{grid-template-columns:1fr auto}.ico-xl{width:84px;height:84px}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .bar{gap:8px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px;min-height:0}
  .top nav{order:3;width:100%;margin:0;justify-content:space-between;gap:0}
  .top nav a{padding:5px 8px;font-size:.9rem}
  .unitflip{margin-left:auto}
  .top{position:static}
  .calc-in,.calc-out{padding:16px}
  .answerbox{padding:18px 16px 16px}
  .ab-bits{display:none}
  .unitgrid{grid-template-columns:1fr}
  .showas{grid-template-columns:1fr 1fr}
  .topics{grid-template-columns:1fr}
  .qlist a{flex-direction:column;gap:0}
  .ql-a{text-align:left}
  .ico-xl{width:64px;height:64px}
  .caprow{grid-template-columns:minmax(0,1fr) 4.2em auto}
  .caprow .suffix{display:none}
  .work{padding:4px 14px 12px}
  .steps li{padding-left:36px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}