:root{
  --paper:#F2F4F0; --surface:#FBFCFA; --sunk:#E6EBE5; --ink:#16211D; --muted:#56655D; --line:#CBD5CD;
  --mask:#1F4D3A; --mask-ink:#F3F7F4; --copper:#A8631F; --copper-soft:#F1E1CD; --ok:#2E7D4F; --warn:#A8631F;
  --display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r:6px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1714; --surface:#15221D; --sunk:#1B2B25; --ink:#E4EBE6; --muted:#9AAAA1; --line:#2B3D35;
    --mask:#2F7556; --mask-ink:#F3F7F4; --copper:#DE9A52; --copper-soft:#3A2A19; --ok:#5DBB85; --warn:#DE9A52;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1714; --surface:#15221D; --sunk:#1B2B25; --ink:#E4EBE6; --muted:#9AAAA1; --line:#2B3D35;
  --mask:#2F7556; --mask-ink:#F3F7F4; --copper:#DE9A52; --copper-soft:#3A2A19; --ok:#5DBB85; --warn:#DE9A52;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--body);padding-inline:16px;}
.wrap{max-width:1120px;margin:0 auto;}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.1;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,5.5vw,3.9rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:700}
h3{font-size:1.2rem;font-weight:700}
p{margin:0}
.eyebrow{font:600 .74rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--copper)}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--copper);outline-offset:2px}


/* header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--paper);border-bottom:1px solid var(--line);margin-inline:-16px;padding-inline:16px}
.bar{display:flex;align-items:center;gap:24px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.15rem/1 var(--display);letter-spacing:-.01em}
.brand svg{flex:none}
nav.main{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
nav.main a{text-decoration:none;padding:6px 12px;border-radius:999px;font-size:.95rem;color:var(--muted)}
nav.main a:hover{color:var(--ink);background:var(--sunk)}
nav.main a[aria-current="page"]{color:var(--mask-ink);background:var(--mask)}

main{padding-block:40px 64px}
section.view, .page{display:grid;gap:56px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:700 .95rem/1.2 var(--body);padding:11px 18px;border-radius:var(--r);border:1px solid var(--mask);background:var(--mask);color:var(--mask-ink);cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.small{padding:8px 12px;font-size:.85rem}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero p.lede{font-size:1.2rem;max-width:34ch;margin-top:18px;color:var(--muted)}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:32px}}

/* the "board" – soldermask panel used for live widgets */
.board{background:var(--mask);color:var(--mask-ink);border-radius:10px;padding:24px;position:relative;overflow:hidden;
  background-image:radial-gradient(circle at 12px 12px, rgba(255,255,255,.12) 2.2px, transparent 2.6px);
  background-size:24px 24px;background-position:-4px -4px}
.board > *{position:relative}
.board .silk{font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.board label{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:.9rem;margin-top:16px}
.board input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--copper)}
.board output{font-family:var(--mono);font-weight:600}
.readout{margin-top:22px;padding-top:18px;border-top:1px dashed rgba(255,255,255,.35);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.readout .big{font:800 3rem/1 var(--display);font-variant-numeric:tabular-nums}
.readout .unit{font-family:var(--mono);opacity:.85}

/* section heads */
.shead{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.shead p{max-width:60ch;margin-top:8px}

/* products */
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
#home-products{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.product{background:var(--surface);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;overflow:hidden}
.product .art{aspect-ratio:4/3;max-width:100%;background:var(--sunk);display:grid;place-items:center;border-bottom:1px solid var(--line)}
.product .art svg{width:62%;height:auto}
.product .info{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.product .row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:10px}
.price{font:700 1.15rem/1 var(--mono);font-variant-numeric:tabular-nums}
.tag{font:600 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:4px;background:var(--copper-soft);color:var(--copper);width:max-content}

/* list rows (library, notes, blog) */
.rows{border-top:1px solid var(--line)}
.rowi{display:grid;grid-template-columns:110px 1fr auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.rowi .kind{font:600 .72rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rowi h3{font-size:1.08rem}
.rowi p{color:var(--muted);font-size:.95rem;margin-top:2px}
@media (max-width:640px){.rowi{grid-template-columns:1fr;gap:6px}}

.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media (max-width:860px){.two{grid-template-columns:1fr}}

/* article */
article.note{max-width:720px}
article.note h1{font-size:clamp(1.9rem,4vw,2.7rem)}
article.note .meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font:.82rem var(--mono);color:var(--muted)}
article.note h2{font-size:1.4rem;margin-top:34px}
article.note p, article.note ul{margin-top:14px;max-width:65ch}
pre{background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:16px;overflow-x:auto;font:13.5px/1.55 var(--mono);margin-top:16px}
pre .c{color:var(--muted)} pre .k{color:var(--copper);font-weight:600}
.callout{margin-top:18px;border-left:3px solid var(--copper);padding:10px 16px;background:var(--surface)}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:.75rem/1 var(--mono);padding:5px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:transparent;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* calculators */
.calcs{display:grid;gap:28px}
.calc{background:var(--surface);border:1px solid var(--line);border-radius:10px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.calc .in{padding:24px;display:grid;gap:14px;align-content:start}
.calc .out{padding:24px;background:var(--mask);color:var(--mask-ink);display:grid;gap:16px;align-content:start}
@media (max-width:760px){.calc{grid-template-columns:1fr}}
.field{display:grid;gap:5px}
.field label{font-size:.88rem;font-weight:700}
.field .hint{font-size:.8rem;color:var(--muted)}
.inrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.unitbox{display:flex;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden}
.unitbox input,.unitbox select{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:15px var(--mono);padding:9px 10px}
.unitbox span{font:.8rem var(--mono);color:var(--muted);padding:0 10px;display:grid;place-items:center;border-left:1px solid var(--line);background:var(--sunk)}
select.plain{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink);font:15px var(--body);padding:9px 10px;width:100%}
.stat .l{font:600 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.stat .v{font:800 2.4rem/1.1 var(--display);font-variant-numeric:tabular-nums;margin-top:6px}
.stat .v small{font:600 1rem var(--mono);opacity:.85;margin-left:6px}
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 16px;font-size:.92rem}
.kv dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.kv dt{opacity:.85}
.split{display:flex;height:12px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.15)}
.split i{display:block;height:100%}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;opacity:.9}
.legend b{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.tip{font-size:.88rem;padding:10px 12px;border-radius:6px;background:rgba(255,255,255,.1)}

/* how-to-launch strip */
.launch{border:1px dashed var(--line);border-radius:10px;padding:22px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:14px}
.steps div{display:grid;gap:4px}
.steps b{font-family:var(--display)}

footer{border-top:1px solid var(--line);margin-inline:-16px;padding:28px 16px;font-size:.9rem;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;font-size:.9rem;max-width:calc(100% - 32px);z-index:20}
@media (prefers-reduced-motion:no-preference){ .view{animation:fade .25s ease-out} @keyframes fade{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}} }

/* page title block */
.ptitle h1{font-size:clamp(2rem,4vw,2.8rem);margin-top:8px}
.ptitle p{max-width:60ch;margin-top:10px}
/* empty / coming-soon state */
.empty{border:1px dashed var(--line);border-radius:10px;padding:32px 24px;display:grid;gap:10px;justify-items:start;background:var(--surface)}
.empty h2{font-size:1.5rem}
.empty p{max-width:58ch;color:var(--muted)}
.rowi h3 a{text-decoration:none}
.rowi h3 a:hover{text-decoration:underline}
.mail{font-family:var(--mono);user-select:all}