:root{
  --bg:#0f1216; --panel:#171b21; --panel2:#1d222a; --line:#2b323c;
  --txt:#d7dde5; --dim:#8e99a6; --acc:#d9a13b; --acc2:#5fb0d8;
  --ok:#5fd08a; --bad:#e0603c;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);
  font:13px/1.55 "Segoe UI","Microsoft YaHei",system-ui,sans-serif}
#app{display:grid;grid-template-columns:308px 1fr 340px;height:100%}
aside{background:var(--panel);overflow-y:auto;padding:12px 13px 40px}
#left{border-right:1px solid var(--line)}
#right{border-left:1px solid var(--line)}
#view{position:relative;min-width:0;background:radial-gradient(ellipse at 50% 35%,#1c222b,#0d1014 70%)}
#view canvas{display:block}

h1{font-size:17px;margin:2px 0 12px;letter-spacing:.5px;color:#fff}
h1 small{display:block;font-size:10.5px;color:var(--dim);letter-spacing:1.6px;font-weight:400;margin-top:2px}
h2{font-size:12px;text-transform:none;color:var(--acc);margin:0 0 8px;
  border-bottom:1px solid var(--line);padding-bottom:5px;letter-spacing:.4px}
section{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:10px;margin-bottom:11px}

.row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-bottom:8px}
.row.tight{gap:12px;margin-bottom:6px}
.row.btns{gap:6px}
label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--dim);flex:1}
label.wide{width:100%;margin-bottom:9px}
label.rd{flex-direction:row;align-items:center;gap:5px;color:var(--txt);flex:0 0 auto;cursor:pointer}
input[type=number],select,input[type=text]{background:#0e1116;border:1px solid var(--line);
  color:var(--txt);border-radius:5px;padding:5px 6px;font:inherit;width:100%}
input[type=range]{width:100%;accent-color:var(--acc)}
button{background:#252c36;border:1px solid #38414e;color:var(--txt);border-radius:5px;
  padding:6px 9px;font:inherit;cursor:pointer;transition:.12s}
button:hover{background:#2f3844;border-color:#4a5666}
button.primary{background:#6b4f14;border-color:#8c6a1d;color:#ffe9b8}
button.primary:hover{background:#7d5c19}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.grid.chk{grid-template-columns:1fr 1fr;gap:3px 8px;margin-bottom:8px}
.grid.chk label{flex-direction:row;align-items:center;gap:5px;color:var(--txt);font-size:11px;cursor:pointer}
#coeffs label{background:#141920;border:1px solid var(--line);border-radius:5px;padding:4px 6px}
#coeffs span{color:var(--acc2);font-size:10.5px}
.note{font-size:10.5px;color:var(--dim);margin:6px 0 0;line-height:1.5}
code{background:#0d1015;padding:1px 4px;border-radius:3px;color:#c8b273;font-size:10.5px}

table{width:100%;border-collapse:collapse;font-size:12px}
table.kv td{padding:3px 2px;border-bottom:1px solid #232932}
table.kv td:first-child{color:var(--dim);font-size:11px}
table.kv td:last-child{text-align:right}
table.kv tr.big td{padding-top:7px;font-size:15px}
table.kv tr.big b{color:var(--acc);font-size:20px}
table.reg th{font-size:10.5px;color:var(--dim);text-align:left;font-weight:500;
  border-bottom:1px solid var(--line);padding:3px 3px}
table.reg td{padding:4px 3px;border-bottom:1px solid #21262e;vertical-align:middle}
td.num,th.num{text-align:right;font-family:"Consolas",monospace}
.dgs{letter-spacing:1px}
b.dg{display:inline-block;min-width:15px;text-align:center;background:#efe9d8;color:#1b1b1b;
  border-radius:2px;margin-right:1px;font-family:"Consolas",monospace;font-size:12px}
b.dg.warn{background:var(--bad);color:#fff}
i.src{font-style:normal;background:#5a3c0e;color:#ffd98a;border-radius:3px;padding:0 4px;font-size:10px;margin-left:4px}
i.dst{font-style:normal;background:#123c4e;color:#a8e0ff;border-radius:3px;padding:0 4px;font-size:10px;margin-left:4px}
.ok{color:var(--ok)}
.bad{color:var(--bad)}
.vout{background:#0c0f13;border:1px solid var(--line);border-radius:5px;padding:8px;
  font:11px/1.5 "Consolas",monospace;white-space:pre-wrap;max-height:190px;overflow:auto;color:var(--dim);margin:0}
.vout.ok{color:#a9e8c2;border-color:#2f5c42}
.vout.bad{color:#ffb9a6;border-color:#6b3527}
ol.expl{margin:0;padding-left:18px;font-size:11px;color:#b4bec9;line-height:1.6}
ol.expl li{margin-bottom:7px}
ol.expl b{color:var(--acc)}
@media (max-width:1250px){#app{grid-template-columns:280px 1fr 300px}}