.catnip-game{
  --cat-observed:#0c6e5b;
  --cat-fuse:#2f5cc4;
  --cat-struct:#bf3625;
  --cat-selected:var(--accent-2);
  margin-top:22px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  overflow:hidden;
}

@media (prefers-color-scheme:dark){
  .catnip-game{--cat-observed:#3cc0a6; --cat-fuse:#8ab4f2; --cat-struct:#f28a8a}
}
:root[data-theme="dark"] .catnip-game{--cat-observed:#3cc0a6; --cat-fuse:#8ab4f2; --cat-struct:#f28a8a}
:root[data-theme="light"] .catnip-game{--cat-observed:#0c6e5b; --cat-fuse:#2f5cc4; --cat-struct:#bf3625}

.catnip-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:var(--surface2);
}
.catnip-status{font-family:var(--mono); font-size:13px; color:var(--muted)}
.catnip-actions{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.catnip-action{
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface);
  color:var(--ink);
  padding:7px 11px;
  font:500 13px/1.2 var(--sans);
  cursor:pointer;
}
.catnip-action:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
.catnip-action.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.catnip-action.primary:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 88%,#000); color:#fff}
.catnip-action:disabled{cursor:not-allowed; opacity:.45}
.catnip-action:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.catnip-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr)}
.catnip-tree-pane{min-width:0; padding:16px; border-right:1px solid var(--line)}
.catnip-tree{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:600/440;
  overflow:visible;
}
.catnip-connector{fill:none; stroke:var(--line); stroke-width:2.4; vector-effect:non-scaling-stroke; pointer-events:none}
.catnip-edge,.catnip-edge-hit{
  fill:none;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.catnip-edge{pointer-events:none; transition:stroke .28s ease,stroke-width .28s ease,opacity .28s ease}
.catnip-edge.state-observed{stroke:var(--cat-observed); stroke-width:4.8}
.catnip-edge.state-fuse{stroke:var(--cat-fuse); stroke-width:6.4}
.catnip-edge.state-struct{stroke:var(--cat-struct); stroke-width:4.4; stroke-dasharray:4 5; opacity:.9}
.catnip-edge-hit{stroke:transparent; stroke-width:16; cursor:pointer; transition:stroke .2s ease,opacity .2s ease}
.catnip-edge-hit.is-related{stroke:color-mix(in srgb,var(--cat-fuse) 28%,transparent); stroke-width:13}
.catnip-edge-hit.is-selected{stroke:color-mix(in srgb,var(--cat-selected) 58%,transparent); stroke-width:14}
.catnip-tip-dot{fill:var(--ink); transition:opacity .28s ease,fill .28s ease}
.catnip-tip-label,.catnip-branch-label{
  font-family:var(--mono);
  dominant-baseline:middle;
  user-select:none;
  cursor:pointer;
}
.catnip-tip-label{fill:var(--ink); font-size:13px}
.catnip-branch-label{fill:var(--muted); font-size:10.5px; font-weight:700}
.catnip-tip-label.is-deleted{fill:var(--cat-struct); opacity:.55; text-decoration:line-through}
.catnip-tip-dot.is-deleted{fill:var(--cat-struct); opacity:.45}
.catnip-branch-label.is-selected{fill:var(--cat-selected)}

.catnip-legend{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:8px; color:var(--muted); font-size:12.5px}
.catnip-legend span{display:inline-flex; align-items:center; gap:7px}
.catnip-key{display:inline-block; width:18px; height:0; border-top:3px solid var(--cat-observed)}
.catnip-key.fuse{border-color:var(--cat-fuse); border-width:4px}
.catnip-key.struct{border-color:var(--cat-struct); border-top-style:dashed}

.catnip-ledger-pane{min-width:0; padding:12px 14px 14px}
.catnip-cellhead{
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:0;
  color:var(--faint); margin:0 0 9px;
}

/* colored branch-state grid — aligned with the SplitAligner explainer */
.catnip-cellgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(56px,1fr));
  gap:7px;
}
.catnip-cell{
  border:0; border-radius:9px; cursor:pointer;
  padding:8px 4px 7px;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  color:#fff; font-family:var(--mono); line-height:1.1;
  background:var(--cat-observed);
  transition:transform .12s ease, box-shadow .16s ease, background .28s ease, opacity .28s ease;
}
.catnip-cell .cell-id{font-size:13.5px; font-weight:700; letter-spacing:.2px}
.catnip-cell .cell-alias{font-size:9.5px; font-weight:500; opacity:.82}
.catnip-cell.state-fuse{background:var(--cat-fuse)}
.catnip-cell.state-struct{
  background:var(--cat-struct);
  background-image:repeating-linear-gradient(45deg,transparent 0 5px,rgba(255,255,255,.18) 5px 10px);
}
.catnip-cell:hover{transform:translateY(-1px)}
.catnip-cell.is-related{box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,var(--cat-fuse) 60%,transparent)}
.catnip-cell.is-selected{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--cat-selected)}
.catnip-cell:focus-visible{outline:2px solid var(--cat-selected); outline-offset:2px}

/* count summary — the ledger read at a glance */
.catnip-summary{
  display:flex; flex-wrap:wrap; gap:8px 16px;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:12.5px;
}
.catnip-sum{display:inline-flex; align-items:center; gap:7px; color:var(--muted)}
.catnip-sum b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}
.catnip-sum i{width:12px; height:12px; border-radius:3px; display:inline-block; flex:0 0 auto}
.catnip-sum.observed i{background:var(--cat-observed)}
.catnip-sum.fuse i{background:var(--cat-fuse)}
.catnip-sum.struct i{
  background:var(--cat-struct);
  background-image:repeating-linear-gradient(45deg,transparent 0 3px,rgba(255,255,255,.28) 3px 6px);
}

.catnip-detail{
  min-height:46px;
  padding:11px 14px;
  border-top:1px solid var(--line);
  background:var(--surface2);
  color:var(--muted);
  font-size:13.5px;
}
.catnip-detail strong{color:var(--ink)}
.catnip-history{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:9px 14px 11px;
  border-top:1px solid var(--line);
  color:var(--faint);
  font-family:var(--mono);
  font-size:11.5px;
}
.catnip-route{text-align:right}

@media (max-width:800px){
  .catnip-grid{grid-template-columns:1fr}
  .catnip-tree-pane{border-right:0; border-bottom:1px solid var(--line)}
  .catnip-tree{max-height:430px}
}
@media (max-width:520px){
  .catnip-toolbar{align-items:flex-start; flex-direction:column}
  .catnip-actions{width:100%}
  .catnip-action.primary{flex:1}
  .catnip-tree-pane{padding:10px}
  .catnip-ledger-pane{padding:8px 10px 12px}
  .catnip-history{flex-direction:column; gap:4px}
  .catnip-route{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .catnip-edge,.catnip-edge-hit,.catnip-tip-dot{transition:none}
}