:root { --ink:#1b1f23; --muted:#6a737d; --line:#e6e9ec; --bg:#fff; --panel:#fafbfc; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.55 system-ui,-apple-system,Segoe UI,sans-serif; color:var(--ink);
       background:var(--bg); }
header { padding:1.4rem 1.6rem .9rem; border-bottom:1px solid var(--line); }
h1 { font-size:1.25rem; margin:0 0 .3rem; }
.sub { margin:0 0 .7rem; color:var(--muted); max-width:62rem; font-size:.9rem; }
a { color:#0b62d6; }
.badge { display:inline-block; padding:.28rem .6rem; border-radius:4px; font-size:.8rem;
         font-weight:600; background:#eef1f4; color:var(--muted); }
.badge.ok { background:#CDE8DE; color:#1d5a48; }
.badge.bad { background:#F7D5C4; color:#8a2f12; }
main { display:grid; grid-template-columns:20rem 1fr; gap:1.4rem; padding:1.2rem 1.6rem 3rem;
       align-items:start; }
aside { position:sticky; top:1rem; background:var(--panel); border:1px solid var(--line);
        border-radius:8px; padding:.8rem; max-height:calc(100vh - 2rem); overflow:auto; }
.actions { display:flex; gap:.4rem; margin-bottom:.7rem; flex-wrap:wrap; }
button { font:inherit; font-size:.82rem; padding:.35rem .6rem; border:1px solid var(--line);
         background:#fff; border-radius:5px; cursor:pointer; }
button:hover { background:#f0f3f6; }
fieldset { border:1px solid var(--line); border-radius:6px; margin:0 0 .7rem; padding:.5rem .6rem; }
legend { font-size:.76rem; font-weight:700; color:var(--muted); text-transform:uppercase;
         letter-spacing:.03em; padding:0 .3rem; }
.ctl { display:grid; grid-template-columns:1fr; gap:.15rem; margin:.45rem 0; }
.ctl .lab { font-size:.76rem; color:var(--muted); }
.ctl input[type=range] { width:100%; }
.ctl input[type=number] { width:100%; font:inherit; font-size:.8rem; padding:.15rem .3rem;
                          border:1px solid var(--line); border-radius:4px; }
h2 { font-size:1rem; margin:1.4rem 0 .5rem; }
h2 select { font:inherit; font-size:.85rem; padding:.15rem .3rem; }
table { border-collapse:collapse; width:100%; font-size:.86rem; }
th, td { text-align:left; padding:.3rem .5rem; border-bottom:1px solid var(--line); }
th { font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
td.v, th.v { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; width:9rem; }
td.m { width:1.4rem; text-align:center; font-weight:700; }
td.n, th.n { color:var(--muted); font-size:.8rem; }
tr.ok td.m { color:#1d7a5f; } tr.warn td.m { color:#a8791a; } tr.bad td.m { color:#b3391a; }
tr.bad td { background:#fdf3ef; } tr.warn td { background:#fdf8ec; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.grid.one { grid-template-columns:1fr; }
canvas { width:100%; height:300px; border:1px solid var(--line); border-radius:6px;
         background:#fff; }
.note { color:var(--muted); font-size:.82rem; max-width:60rem; }
@media (max-width:1000px) { main { grid-template-columns:1fr; } aside { position:static;
  max-height:none; } .grid { grid-template-columns:1fr; } }