:root{
  --ink:#221f1b; --paper:#eeece6; --surface:#f8f7f3; --surface-2:#ffffff;
  --line:#cfccc0; --muted:#6b6759;
  --accent:#a8631f; --accent-ink:#5c3610;
  --ok:#3f6b46; --ok-fill:#4b7a52;
  --warn:#8a651c; --warn-fill:#b8862a;
  --bad:#8f2e24; --bad-fill:#b03a2e;
  --gray-fill:#9c988a;
  --mag-n:#b03a2e; --mag-s:#2e5a8f;
  --cu:#b8862a; --fe:#9c988a;
  --face-head:"Bahnschrift","DIN Alternate","Arial Narrow",sans-serif;
  --face-body:system-ui,-apple-system,"Segoe UI",sans-serif;
  --face-mono:"Cascadia Code","Consolas",ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e9e6dd; --paper:#17160f; --surface:#201e17; --surface-2:#262319;
    --line:#3c392c; --muted:#a19c8a;
    --accent:#d6903f; --accent-ink:#f0c793;
    --ok:#8fbb8f; --ok-fill:#5c8a5f;
    --warn:#e0b25b; --warn-fill:#c9962f;
    --bad:#e28073; --bad-fill:#b6453a;
    --gray-fill:#5a5646;
    --mag-n:#d97a6d; --mag-s:#7aa3d9;
    --cu:#c9962f; --fe:#5a5646;
  }
}
*{box-sizing:border-box}
html,body{margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--face-body); font-size:14.5px; line-height:1.55}
h1,h2,h3{font-family:var(--face-head); font-weight:700; margin:0; letter-spacing:.2px}

.titlebar{background:var(--surface); border-bottom:2px solid var(--accent); padding:1.4rem clamp(1rem,3vw,2.4rem)}
.titlebar .eyebrow{font-family:var(--face-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent-ink); margin-bottom:.3rem}
.titlebar h1{font-size:clamp(20px,3vw,26px)}
.titlebar .sub{color:var(--muted); font-size:13px; margin:.4rem 0 0; max-width:64ch}

.tabs{display:flex; gap:0; border-bottom:1px solid var(--line); background:var(--surface); padding:0 clamp(1rem,3vw,2.4rem); overflow-x:auto}
.tab{font-family:var(--face-head); font-size:14.5px; padding:.7rem 1.2rem; background:none; border:none; border-bottom:2px solid transparent; color:var(--muted); cursor:pointer; white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--accent-ink); border-bottom-color:var(--accent)}
.tab:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}

main{padding:1.4rem clamp(1rem,3vw,2.4rem) 2.5rem}
.mod{display:none}
.mod.active{display:block}
.layout{display:grid; grid-template-columns:330px 1fr; gap:1.4rem; align-items:start}
@media (max-width:960px){ .layout{grid-template-columns:1fr} }

/* inputs */
.col-in form{display:flex; flex-direction:column; gap:1rem}
fieldset{border:1px solid var(--line); background:var(--surface-2); padding:.8rem .9rem .9rem; margin:0; min-width:0}
legend{font-family:var(--face-mono); font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:var(--accent-ink); padding:0 .4rem}
.frow{display:grid; grid-template-columns:1fr 92px 52px; gap:.5rem; align-items:center; padding:.18rem 0}
.frow label{font-size:12.8px; color:var(--ink)}
.frow input,.frow select{font-family:var(--face-mono); font-size:13px; padding:.28rem .4rem; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:3px; width:100%}
.frow input:focus,.frow select:focus{outline:2px solid var(--accent); outline-offset:-1px}
.frow .unit{font-family:var(--face-mono); font-size:11.5px; color:var(--muted)}
.hint{font-size:11.5px; color:var(--muted); margin:.3rem 0 0; line-height:1.45}

/* results */
.results{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:1.2rem}
.rcell{background:var(--surface-2); padding:.55rem .7rem; min-width:0}
.rcell .k{font-size:11px; letter-spacing:.4px; color:var(--muted)}
.rcell .v{font-family:var(--face-mono); font-size:17px; margin-top:1px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.rcell .u{font-size:11px; color:var(--muted); margin-left:2px}
.rcell.ok .v{color:var(--ok)}
.rcell.warn .v{color:var(--warn)}
.rcell.bad .v{color:var(--bad)}
.rcell.hd{grid-column:1/-1; background:var(--surface); padding:.35rem .7rem}
.rcell.hd .k{font-family:var(--face-mono); text-transform:uppercase; letter-spacing:.8px; color:var(--accent-ink)}

/* graphics */
.graphics{display:flex; flex-direction:column; gap:1.2rem}
.figcard{border:1px solid var(--line); background:var(--surface-2); padding:.8rem}
.figtitle{font-family:var(--face-mono); font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:var(--accent-ink); margin-bottom:.5rem}
canvas{width:100%; height:auto; display:block}

/* docs */
.doc{margin-top:1.6rem; border:1px solid var(--line); background:var(--surface-2)}
.doc summary{font-family:var(--face-head); font-size:14.5px; padding:.7rem 1rem; cursor:pointer; color:var(--accent-ink)}
.doc summary:hover{background:var(--surface)}
.formula{font-family:var(--face-mono); font-size:12.5px; background:var(--surface); border-top:1px solid var(--line); padding:1rem 1.1rem; margin:0; white-space:pre-wrap; line-height:1.75; overflow-x:auto}

.foot{display:flex; flex-direction:column; gap:.2rem; padding:1rem clamp(1rem,3vw,2.4rem) 2rem; border-top:1px solid var(--line); color:var(--muted); font-size:11.5px}