:root{
  --bg:#0f1116; --panel:#171a22; --panel2:#1d212b; --ink:#e8eaf0; --dim:#9aa1b2;
  --line:#2c313f; --accent:#e8b566; --sand:#dfc089; --flow:#6fb7ff; --liquid:#ff8f6b; --wallc:#a98bff;
  --ok:#7ddc9a; --warn:#ff7a7a; --plate:#20242f;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
  font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
header.top{padding:18px 20px 10px;border-bottom:1px solid var(--line);background:var(--panel)}
.brand h1{margin:0;font-size:26px;letter-spacing:.2px}
.tag{margin:6px 0 0;color:var(--dim);max-width:76ch}
.tag em{color:var(--accent);font-style:normal}
nav.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tab{background:var(--panel2);color:var(--dim);border:1px solid var(--line);border-radius:7px;
  padding:7px 13px;font:inherit;font-size:14px;cursor:pointer}
.tab:hover{color:var(--ink)}
.tab[aria-pressed="true"]{background:var(--accent);color:#1a1405;border-color:var(--accent);font-weight:600}
main{display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px;padding:16px 20px 28px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px}
.controls{position:sticky;top:12px}
.ctl{margin-bottom:12px}
.ctl label{display:block;font-size:12.5px;color:var(--dim);margin-bottom:4px;letter-spacing:.2px}
.ctl output{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.ctl input[type=range]{width:100%;accent-color:var(--accent)}
.knob input[type=range]{accent-color:var(--flow)}
.ctl select{width:100%;background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:6px;padding:6px;font:inherit}
.buttons{display:flex;flex-wrap:wrap;gap:6px}
.buttons button{flex:1 1 46%;background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:6px;padding:7px 6px;font:inherit;font-size:12.5px;cursor:pointer}
.buttons button:hover{border-color:var(--accent);color:var(--accent)}
.buttons button.on{background:var(--accent);color:#1a1405;border-color:var(--accent)}
.view{min-width:0}
.canvas-wrap{width:100%;overflow-x:auto;display:flex;justify-content:center}
.canvas-wrap.two{gap:14px;flex-wrap:wrap;align-items:flex-start}
canvas{display:block;max-width:100%;height:auto;background:var(--plate);border-radius:8px}
.readout{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.card .k{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px}
.card .v{font-size:19px;font-variant-numeric:tabular-nums;margin-top:3px}
.card .n{font-size:12px;color:var(--dim);margin-top:3px}
.card.hot .v{color:var(--accent)}
.card.flow .v{color:var(--flow)}
.card.liquid .v{color:var(--liquid)}
.card.wall .v{color:var(--wallc)}
.card.sand .v{color:var(--sand)}
/* WHEN THE CONTROL COLUMN IS HIDDEN, THE GRID MUST COLLAPSE TO ONE TRACK. Hiding the
   controls removes their grid item, and without this the remaining view is laid out inside
   the 270px first track: 30 characters wide with the whole right-hand side empty. Every
   offline assertion passes while that is true. The smoke test measures the rendered width
   of every view for exactly this reason. */
main.nocontrols{grid-template-columns:minmax(0,1fr)}

/* THE PROSE PANELS MUST SPAN BOTH GRID TRACKS. When the control column is hidden on
   these two views its grid item disappears, and without this the prose becomes the first
   item and is laid out inside the 270px control track — 30 characters wide with the whole
   right-hand side empty. Every offline assertion passed while that was true; a screenshot
   is what showed it. */
#view-findings,#view-help{grid-column:1 / -1}
.prose{line-height:1.62;max-width:none}
.prose h2{font-size:19px;margin:22px 0 8px;color:var(--accent)}
.prose h2:first-child{margin-top:2px}
.prose h3{font-size:15px;margin:16px 0 6px;color:var(--ink)}
.prose p{margin:8px 0;color:#cfd4e0}
.prose ul{margin:8px 0;padding-left:20px;color:#cfd4e0}
.prose li{margin:4px 0}
.prose code{background:var(--panel2);padding:1px 5px;border-radius:4px;font-size:13px}
.prose .lede{color:var(--ink);font-size:16px}
table{border-collapse:collapse;width:100%;margin:10px 0;font-size:13.5px}
th,td{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:top}
th{background:var(--panel2);color:var(--dim);font-weight:600;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.4px}
td.num{text-align:right;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto}
.verdict{border-left:3px solid var(--warn);padding-left:11px;margin:10px 0;color:#cfd4e0}
.verdict.ok{border-left-color:var(--ok)}
.swatch{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:6px;
  vertical-align:baseline}
.sw-fit{background:var(--accent)} .sw-flow{background:var(--flow)}
.sw-liquid{background:var(--liquid)} .sw-wall{background:var(--wallc)}
.sw-sand{background:var(--sand)}
.foot{border-top:1px solid var(--line);padding:12px 20px 26px;color:var(--dim);font-size:12.5px}
.foot p{margin:0}
pre.verbatim{background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:11px;overflow-x:auto;font-size:12px;line-height:1.45;color:#cfd4e0;white-space:pre}
@media (max-width:860px){
  main{grid-template-columns:minmax(0,1fr)}
  .controls{position:static}
}