:root{
  --bg:#0b0d10; --panel:#12161b; --panel2:#171d24; --line:#232b35;
  --txt:#e8eef6; --dim:#8b98a8; --acc:#5ad1a5; --warn:#f2b44c; --bad:#f2666c; --blue:#6aa9ff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--txt);
  font:13px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  display:grid; grid-template-rows:52px 1fr; grid-template-columns:1fr 340px;
  grid-template-areas:"hdr hdr" "main side"; overflow:hidden;
}
header{
  grid-area:hdr; display:flex; align-items:center; gap:18px; padding:0 14px;
  background:var(--panel); border-bottom:1px solid var(--line); min-width:0;
}
.brand{font-weight:700; letter-spacing:.14em; font-size:12px; white-space:nowrap}
.brand span{color:var(--dim); font-weight:500; letter-spacing:.04em; text-transform:none}
.sel{display:flex; align-items:center; gap:8px; min-width:0; flex:1}
.sel label{color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.08em}
select{
  background:var(--panel2); color:var(--txt); border:1px solid var(--line);
  border-radius:6px; padding:6px 26px 6px 9px; min-width:0; flex:1; max-width:460px;
  font-size:12px; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 14px) 13px,calc(100% - 9px) 13px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
button,.btn{
  background:var(--panel2); color:var(--txt); border:1px solid var(--line);
  border-radius:6px; padding:6px 10px; font-size:12px; cursor:pointer;
  text-decoration:none; white-space:nowrap;
}
button:hover,.btn:hover{border-color:#33404f; background:#1d242d}
button.on{border-color:var(--acc); color:var(--acc)}
.opts{display:flex; gap:14px; color:var(--dim); font-size:12px; white-space:nowrap}
.opts label{display:flex; align-items:center; gap:6px; cursor:pointer}
input[type=checkbox]{accent-color:var(--acc)}

main{grid-area:main; display:flex; min-width:0; min-height:0; background:#07090c}
.stage{position:relative; flex:1; min-width:0; min-height:0}
.stage.hidden{display:none}
.stage canvas{display:block; width:100%; height:100%}
.tag{
  position:absolute; top:10px; left:10px; z-index:2; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); background:#0b0d1099; padding:4px 8px;
  border:1px solid var(--line); border-radius:5px; pointer-events:none;
}
.loading{
  position:absolute; inset:0; display:grid; place-items:center; color:var(--dim);
  background:#07090c; z-index:3; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
}
.loading.hidden{display:none}

aside{
  grid-area:side; background:var(--panel); border-left:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0; overflow:auto;
}
.card{border-bottom:1px solid var(--line); padding:12px 13px}
.card.grow{flex:1; min-height:0; display:flex; flex-direction:column}
.card h2{
  margin:0 0 9px; font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--dim); font-weight:600; display:flex; justify-content:space-between; align-items:baseline;
}
.card h2 small{font-size:10px; letter-spacing:.02em; text-transform:none; color:var(--dim); font-weight:400}
.row{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.row.chk{margin-top:9px; color:var(--dim); font-size:12px; cursor:pointer}

.report{display:grid; gap:5px; font-size:12px}
.kv{display:flex; justify-content:space-between; gap:10px; padding:3px 0; border-bottom:1px dashed #1c232c}
.kv:last-child{border-bottom:0}
.kv b{font-weight:600; color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.05em}
.kv span{text-align:right; overflow-wrap:anywhere}
.ok{color:var(--acc)} .ko{color:var(--bad)} .warn{color:var(--warn)} .mut{color:var(--dim)}
.badge{
  display:inline-block; padding:1px 6px; border-radius:4px; font-size:10px;
  letter-spacing:.06em; text-transform:uppercase; border:1px solid currentColor;
}
details{margin-top:7px; color:var(--dim)}
summary{cursor:pointer; font-size:11px; user-select:none}
details .list{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; line-height:1.6; margin-top:5px; columns:2; column-gap:12px; overflow-wrap:anywhere}

.morphs{overflow:auto; min-height:0; padding-right:3px}
.mgroup{margin:9px 0 3px; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); opacity:.85}
.mrow{display:grid; grid-template-columns:1fr 62px; gap:8px; align-items:center; padding:1px 0}
.mrow label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; color:#a9b6c6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mrow input[type=range]{width:100%; accent-color:var(--acc); height:14px}
.mrow output{font-family:ui-monospace,monospace; font-size:10px; color:var(--dim); text-align:right}

.error{
  position:fixed; bottom:14px; left:50%; transform:translateX(-50%); z-index:20;
  background:#2a1114; border:1px solid var(--bad); color:#ffd9db; padding:9px 14px;
  border-radius:7px; max-width:min(760px,90vw); font-size:12px; white-space:pre-wrap;
}
.error.hidden{display:none}

@media (max-width:980px){
  body{grid-template-columns:1fr; grid-template-rows:52px 1fr 46vh; grid-template-areas:"hdr" "main" "side"}
  aside{border-left:0; border-top:1px solid var(--line)}
  .opts{display:none}
}