/* Converted from the Claude artifact. The artifact host supplied a small
   reset and safe-area padding; standalone, the page brings its own. */
*{box-sizing:border-box}
html{color-scheme:light dark}
:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

:root{
  --ink:#10161f; --ink-2:#2a3442; --mute:#5d6b7d; --faint:#8494a6;
  --page:#f4f2ee; --card:#ffffff; --rule:#dcd9d2; --rule-2:#eceae5;
  --brass:#a8752c; --brass-soft:#f2e6d2; --brass-ink:#7a5320;
  --steel:#2c4a63; --steel-soft:#e2ebf2; --comp:#7d8fa0;
  --over:#a33227; --over-soft:#f7e2de;
  --good:#3d6b45; --good-soft:#e3efe4;
  --shadow:0 1px 2px rgba(16,22,31,.06), 0 4px 14px rgba(16,22,31,.05);
}
:root:not([data-theme="light"]){ @media (prefers-color-scheme: dark){
  --ink:#eef1f4; --ink-2:#c7d0da; --mute:#96a3b2; --faint:#6f7d8c;
  --page:#12161c; --card:#1a2028; --rule:#2c343e; --rule-2:#232a33;
  --brass:#d9a45c; --brass-soft:#3a2d1a; --brass-ink:#e8bd7e;
  --steel:#8fb4d0; --steel-soft:#1e2c39; --comp:#5d7183;
  --over:#e08373; --over-soft:#3b201c;
  --good:#8dbf96; --good-soft:#1e2c21;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
}}
:root[data-theme="dark"]{
  --ink:#eef1f4; --ink-2:#c7d0da; --mute:#96a3b2; --faint:#6f7d8c;
  --page:#12161c; --card:#1a2028; --rule:#2c343e; --rule-2:#232a33;
  --brass:#d9a45c; --brass-soft:#3a2d1a; --brass-ink:#e8bd7e;
  --steel:#8fb4d0; --steel-soft:#1e2c39; --comp:#5d7183;
  --over:#e08373; --over-soft:#3b201c;
  --good:#8dbf96; --good-soft:#1e2c21;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
body{
  background:var(--page); color:var(--ink);
  font:400 15px/1.5 "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px; margin:0 auto; padding:0 16px; padding-block:0 56px}
h1,h2,h3{font-family:"Archivo", ui-sans-serif, system-ui, sans-serif; margin:0; text-wrap:balance}

/* ---- masthead ---------------------------------------------------------- */
.mast{padding-block:28px 18px; border-bottom:2px solid var(--ink); margin-bottom:0}
.kicker{font:600 11px/1 "Archivo",sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass); margin-bottom:9px}
h1{font-size:clamp(28px,5vw,40px); font-weight:700; letter-spacing:-.018em; line-height:1.05}
.sub{color:var(--mute); margin:9px 0 0; max-width:62ch; font-size:14px}

/* ---- sticky scoreboard ------------------------------------------------- */
.board{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:20;
  background:var(--card); border:1px solid var(--rule); border-top:none;
  border-radius:0 0 10px 10px; box-shadow:var(--shadow); margin-bottom:26px;
}
.board-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{padding:13px 16px; border-right:1px solid var(--rule-2); min-width:0}
.stat:last-child{border-right:none}
.stat-l{font:600 10px/1 "Archivo",sans-serif; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint); display:block; margin-bottom:6px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.stat-v{font:700 25px/1 "Archivo",sans-serif; letter-spacing:-.02em; display:block}
.stat-v.lead{color:var(--brass)}
.stat-d{font-size:12px; color:var(--mute); margin-top:5px; display:block}
.up{color:var(--good)} .down{color:var(--over)}

/* ---- sections ---------------------------------------------------------- */
section{margin-bottom:34px}
.sec-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding-bottom:9px; border-bottom:1px solid var(--rule); margin-bottom:16px}
.sec-n{font:700 12px/1 "Archivo",sans-serif; color:var(--brass);
  background:var(--brass-soft); padding:5px 8px; border-radius:4px; letter-spacing:.04em}
h2{font-size:20px; font-weight:600; letter-spacing:-.012em}
.sec-note{color:var(--mute); font-size:13px; flex:1 1 280px; min-width:0}

.card{background:var(--card); border:1px solid var(--rule); border-radius:10px;
  box-shadow:var(--shadow); overflow:hidden}
.card + .card{margin-top:14px}
.card-t{padding:15px 16px 13px; border-bottom:1px solid var(--rule);
  font:700 19px/1.25 "Archivo",sans-serif; letter-spacing:-.012em;
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; flex-wrap:wrap}
.card-t small{font-family:"IBM Plex Sans",sans-serif; font-weight:400;
  color:var(--mute); font-size:12.5px; letter-spacing:0; flex:1 1 220px;
  min-width:0; text-align:right}
@media (max-width:720px){ .card-t{font-size:17px} .card-t small{text-align:left} }

/* ---- driver rows ------------------------------------------------------- */
.rows{display:flex; flex-direction:column}
.row{display:grid; grid-template-columns:1fr 128px 148px; gap:14px; align-items:center;
  padding:11px 16px; border-bottom:1px solid var(--rule-2)}
.row:last-child{border-bottom:none}
.row-name{font-weight:500; min-width:0}
.row-sub{display:block; font-size:12px; color:var(--faint); margin-top:2px}
.row-out{text-align:right; font-weight:600; white-space:nowrap}
.row-out small{display:block; font-weight:400; font-size:12px; color:var(--mute)}

input[type=range]{width:100%; accent-color:var(--brass); margin:0}
.ctrl{display:flex; align-items:center; gap:8px}
.num{width:100%; font:600 14px/1 "IBM Plex Sans",sans-serif; font-variant-numeric:tabular-nums;
  padding:7px 8px; border:1px solid var(--rule); border-radius:6px;
  background:var(--page); color:var(--ink); text-align:right; min-width:0}
.num:focus-visible{outline:2px solid var(--brass); outline-offset:1px; border-color:var(--brass)}
/* no spinners: they crowd a narrow field and invite click-stepping a driver */
.num::-webkit-outer-spin-button,.num::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.num[type=number]{-moz-appearance:textfield; appearance:textfield}
.unit{font-size:12px; color:var(--faint); flex:0 0 auto; line-height:1.3}
.conv{display:block; font-weight:600; color:var(--brass); white-space:nowrap}

/* ---- capacity bar ------------------------------------------------------ */
.cap{display:grid; grid-template-columns:1fr; gap:4px; min-width:0}
.cap-bar{height:9px; background:var(--rule-2); border-radius:5px; overflow:hidden; display:flex}
.cap-held{background:var(--steel)}
.cap-comp{background:var(--comp)}
.cap-new{background:var(--brass)}
.cap-left{background:transparent}
.cap-bar.over .cap-new{background:var(--over)}
.cap-bar i{cursor:help}
.cap-txt{font-size:11.5px; color:var(--mute); display:flex; justify-content:space-between; gap:8px}
.cap-txt b{font-weight:600; color:var(--ink-2)}
.cap-txt .warn{color:var(--over); font-weight:600}

/* ---- tables ------------------------------------------------------------ */
.scroll{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:14px; min-width:520px}
th,td{padding:9px 12px; text-align:right; border-bottom:1px solid var(--rule-2); white-space:nowrap}
th{font:600 10px/1.2 "Archivo",sans-serif; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); border-bottom:1px solid var(--rule)}
th:first-child,td:first-child{text-align:left; white-space:normal; min-width:150px}
tbody tr:last-child td{border-bottom:none}
tr.tot td{font-weight:700; border-top:2px solid var(--ink); background:var(--page)}
td.pos{color:var(--good)} td.neg{color:var(--over)}

.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--mute);
  padding:10px 16px; border-top:1px solid var(--rule-2)}
.swatch{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px;
  vertical-align:middle}
.hist{font-size:12px; color:var(--faint)}
.hist b{color:var(--ink-2); font-weight:600}

.save-bar{display:flex; gap:8px; padding:12px 16px; border-bottom:1px solid var(--rule-2);
  flex-wrap:wrap}
.save-bar .num{flex:1 1 220px; text-align:left; min-width:0}
.scen{display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
  padding:11px 16px; border-bottom:1px solid var(--rule-2)}
.scen:last-child{border-bottom:none}
.scen-n{font-weight:600; min-width:0; overflow-wrap:anywhere}
.scen-m{display:block; font-size:12px; color:var(--faint); font-weight:400; margin-top:2px}
.scen-v{font-weight:600; white-space:nowrap}
.scen-a{display:flex; gap:6px}
.scen-a button{font:500 12px "IBM Plex Sans",sans-serif; padding:5px 10px; border-radius:5px;
  border:1px solid var(--rule); background:var(--card); color:var(--mute); cursor:pointer}
.scen-a button:hover{border-color:var(--brass); color:var(--brass)}
.scen-a button:focus-visible{outline:2px solid var(--brass); outline-offset:1px}
.scen-a button.danger:hover{border-color:var(--over); color:var(--over)}
.scen-a button.armed{background:var(--over); border-color:var(--over); color:#fff}
.empty{padding:16px; color:var(--faint); font-size:13px}
@media (max-width:720px){ .scen{grid-template-columns:1fr; gap:6px} }
.bar-actions{display:flex; gap:8px; flex-wrap:wrap; padding:12px 16px; border-top:1px solid var(--rule-2)}
button.act{font:600 13px "IBM Plex Sans",sans-serif; padding:8px 14px; border-radius:6px;
  border:1px solid var(--rule); background:var(--card); color:var(--ink); cursor:pointer}
button.act:hover{border-color:var(--brass); color:var(--brass)}
button.act:focus-visible{outline:2px solid var(--brass); outline-offset:1px}
button.act.on{background:var(--ink); color:var(--page); border-color:var(--ink)}

.foot{margin-top:38px; padding-top:16px; border-top:1px solid var(--rule);
  font-size:12.5px; color:var(--mute); max-width:78ch}
.foot code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  background:var(--rule-2); padding:1px 5px; border-radius:3px}

@media (max-width:720px){
  .row{grid-template-columns:1fr; gap:8px}
  .row-out{text-align:left}
  .stat-v{font-size:21px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}