:root {
  --bg: #121214; --panel: #1b1b1f; --line: #2c2c33; --text: #e8e8ea; --dim: #8b8b94;
  --accent: #ccff00; --bad: #ff5470; --warn: #ffb020; --ok: #4ade80;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.4 ui-sans-serif, system-ui, sans-serif; }
header { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 5; flex-wrap: wrap; }
h1 { font-size: 15px; margin: 0; color: var(--accent); letter-spacing: .02em; }
h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); margin: 16px 0 8px; }
h3:first-child { margin-top: 0; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
.save { margin-left: auto; display: flex; gap: 10px; align-items: center; }
#dirty { color: var(--warn); }
button, select, input { font: inherit; color: var(--text); background: #26262c; border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; }
button { cursor: pointer; }
button:hover { border-color: var(--dim); }
button.on { background: #33333b; border-color: var(--accent); }
button.primary { background: var(--accent); color: #111; border-color: var(--accent); font-weight: 600; }
input[type=number] { width: 72px; }
main { padding: 16px; }
.tab { display: none; } .tab.on { display: block; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-width: 0; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.controls { margin-bottom: 14px; }
.hint { color: var(--dim); font-size: 12px; }
pre { background: #0d0d0f; padding: 8px; border-radius: 6px; overflow: auto; font-size: 11px; max-height: 360px; margin: 0; }
canvas { image-rendering: pixelated; display: block; }

.build { display: grid; grid-template-columns: 240px minmax(0, 576px) minmax(200px, 1fr); gap: 16px; align-items: start; }
.stage canvas { width: min(576px, 100%); height: auto; border-radius: 8px; border: 1px solid var(--line); }
.cats .cat { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.cats .cat.focus { background: #2a2a31; outline: 1px solid var(--accent); }
.cats .cat .name { color: var(--dim); font-size: 11px; }
.cats .cat .val { grid-column: 2; font-weight: 600; width: 100%; min-width: 0; }
.cats .cat .name { grid-column: 2; }
.cats .cat .nav { grid-row: 1 / span 2; grid-column: 3; display: flex; gap: 2px; }
.cats .cat .nav button { padding: 2px 7px; }
.cats .lock { grid-row: 1 / span 2; cursor: pointer; opacity: .35; }
.cats .lock.on { opacity: 1; }
.side button { width: 100%; margin-bottom: 6px; }
.vio { color: var(--bad); margin: 4px 0; } .okmsg { color: var(--ok); }

.mx { display: grid; gap: 2px; overflow: auto; max-height: calc(100vh - 140px); }
.mx .h { font-size: 10px; color: var(--dim); padding: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: sticky; background: var(--bg); z-index: 1; }
.mx .h.col { top: 0; writing-mode: vertical-rl; transform: rotate(180deg); height: 110px; white-space: nowrap; }
.mx .h.rowh { left: 0; display: flex; align-items: center; }
.mx .cell { position: relative; cursor: pointer; }
.mx .cell.blocked canvas { opacity: .18; }
.mx .cell.blocked::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--bad); font-size: 22px; font-weight: 700; }
.mx .cell:hover { outline: 2px solid var(--accent); z-index: 2; }

.align { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 16px; align-items: start; }
.vgroup { border-top: 1px solid var(--line); padding: 8px 0; }
.vgroup .title { font-weight: 600; margin-bottom: 6px; }
.vgroup .title .bad { color: var(--bad); } .vgroup .title .ok { color: var(--ok); }
.thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.thumb { text-align: center; font-size: 10px; color: var(--dim); cursor: pointer; width: 104px; }
.thumb canvas { width: 96px; height: 96px; margin: 0 auto 2px; border-radius: 4px; background: #0d0d0f; }
.thumb .n { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb .d.bad { color: var(--bad); font-weight: 700; }
.lint { padding: 4px 0; border-top: 1px solid var(--line); cursor: pointer; }
.lint:hover { color: var(--accent); }
.lint .k { color: var(--warn); font-weight: 600; margin-right: 6px; }
#diffCanvas { width: 480px; height: 480px; border-radius: 8px; border: 1px solid var(--line); max-width: 100%; }
.legend { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--dim); }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
.sw.both { background: #777; } .sw.a { background: #ff3355; } .sw.b { background: #3399ff; } .sw.col { background: #ffcc00; }

table.rules { border-collapse: collapse; width: 100%; margin: 10px 0; }
table.rules td, table.rules th { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; }
table.rules th { color: var(--dim); font-weight: 500; font-size: 11px; }
table.rules input:not([type=checkbox]) { width: 100%; min-width: 90px; }
table.rules .match { color: var(--dim); font-size: 11px; }
table.rules .match.zero { color: var(--bad); }

.weights { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.wcat .head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.wcat .head b { font-size: 14px; margin-right: auto; }
.wrow { display: grid; grid-template-columns: 16px 32px 1fr 64px 52px; gap: 8px; align-items: center; padding: 2px 0; }
.wrow canvas { width: 32px; height: 32px; border-radius: 3px; background: #0d0d0f; }
.wrow .pct { color: var(--dim); text-align: right; font-variant-numeric: tabular-nums; }
.wrow.off { opacity: .4; }
.wrow.removed { opacity: .35; } .wrow.removed .lbl { text-decoration: line-through; }

.gen { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.dist { margin-bottom: 12px; }
.dist .bar { display: grid; grid-template-columns: 1fr 52px 48px; gap: 6px; font-size: 11px; padding: 1px 0; font-variant-numeric: tabular-nums; }
.dist .bar span:first-child { position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dist .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(204,255,0,.15); z-index: -1; }
.dist .bar .z { color: var(--bad); }
#simGrid .thumb { width: 72px; } #simGrid .thumb canvas { width: 72px; height: 72px; }

@media (max-width: 860px) {
  .build, .align, .gen { grid-template-columns: 1fr; }
}
/* checkerboard so black/white traits show on isolated-layer thumbs */
.vgroup .thumb canvas, .wrow canvas, #diffCanvas { background: repeating-conic-gradient(#2a2a30 0 25%, #1d1d22 0 50%) 0 0 / 12px 12px; }
.spacer { flex: 1; }