:root {
  --paper: #d6d0ad;
  --paper-hi: #e0dab8;
  --paper-lo: #c9c39d;
  --ink: #16160f;
  --ink-soft: #3a382c;
  --ink-faint: #6b6852;
  --rail-w: 232px;
  --panel-w: 380px;
  --mono: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  font-family: var(--mono);
  background: var(--paper);
  color: var(--ink);
  display: flex; flex-direction: column;
  overflow: hidden;
}
button:disabled { opacity: 0.4; cursor: not-allowed; }
button, a.btn {
  font: inherit; color: inherit; background: var(--paper);
  border: 1.5px solid var(--ink); padding: 4px 10px; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px;
  text-decoration: none; display: inline-block;
}
button:hover, a.btn:hover { background: var(--ink); color: var(--paper); }
button.active { background: var(--ink); color: var(--paper); }

#topbar {
  display: flex; align-items: center; gap: 24px;
  border-bottom: 1.5px solid var(--ink); padding: 8px 14px;
}
#brand { display: flex; flex-direction: column; }
#title { font-size: 16px; letter-spacing: 0.2em; font-weight: 700; }
#subtitle { font-size: 10px; letter-spacing: 0.12em; color: var(--ink-soft); }
#stats { display: flex; gap: 22px; flex: 1; }
.stat { display: flex; flex-direction: column; }
.stat .k { font-size: 9px; letter-spacing: 0.14em; color: var(--ink-faint); }
.stat .v { font-size: 13px; font-weight: 700; }
#controls { display: flex; gap: 8px; }

#frame { display: flex; flex: 1; min-height: 0; }
#rail {
  width: var(--rail-w); border-right: 1.5px solid var(--ink);
  overflow-y: auto; padding: 10px 8px; flex-shrink: 1; min-width: 150px;
}
.rail-zone { font-size: 9.5px; letter-spacing: 0.14em; color: var(--ink-faint);
  margin: 12px 4px 4px; text-transform: uppercase; border: none; background: none;
  padding: 0; display: block; text-align: left; }
.rail-zone:hover { background: none; color: var(--ink); }
.rail-item {
  display: flex; gap: 8px; align-items: baseline; width: 100%;
  border: 1.5px solid var(--ink); background: var(--paper-hi);
  padding: 5px 8px; margin: 3px 0; text-align: left; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.rail-item .letter { font-size: 9px; color: var(--ink-faint); min-width: 16px; }
.rail-item.selected, .rail-item:hover { background: var(--ink); color: var(--paper); }
.rail-item.selected .letter, .rail-item:hover .letter { color: var(--paper-lo); }

#stage { flex: 1; position: relative; min-width: 320px; }
#canvas { width: 100%; height: 100%; display: block; cursor: grab; }
#canvas.panning { cursor: grabbing; }
#zoombox { position: absolute; top: 10px; right: 10px; display: flex;
  flex-direction: column; gap: 6px; z-index: 3; }
#zoombox button { width: 30px; }
#breadcrumb { position: absolute; top: 10px; left: 10px; z-index: 3; }
#hint { position: absolute; bottom: 8px; left: 12px; font-size: 10px;
  color: var(--ink-faint); letter-spacing: 0.05em; }
#notice { position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  border: 1.5px solid var(--ink); background: var(--paper-hi);
  padding: 6px 12px; font-size: 11px; z-index: 4; }

#panel {
  width: var(--panel-w); border-left: 1.5px solid var(--ink);
  overflow-y: auto; flex-shrink: 1; min-width: 240px; display: flex;
  flex-direction: column; background: var(--paper);
}

/* SVG scene */
#canvas .zone-outline { fill: none; stroke: var(--ink-faint);
  stroke-dasharray: 5 4; stroke-width: 1.6; }
#canvas .zone-title { font: 700 22px var(--mono); letter-spacing: 0.16em;
  fill: var(--ink); text-transform: uppercase;
  paint-order: stroke; stroke: var(--paper); stroke-width: 5px; }
#canvas defs line { stroke: var(--ink); stroke-width: 0.7; opacity: 0.5; }
.face-top { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 2; }
.face-right { fill: url(#hatch); stroke: var(--ink); stroke-width: 2; }
.face-left { fill: url(#hatch-dense); stroke: var(--ink); stroke-width: 2; }
.structure { cursor: pointer; }
.structure:hover .face-top { fill: var(--paper); }
.structure.selected .face-top { fill: var(--ink); }
.structure.selected .letter-glyph { fill: var(--paper); }
.letter-glyph { font: 700 20px var(--mono); fill: var(--ink);
  paint-order: stroke; stroke: var(--paper-hi); stroke-width: 4px; }
.structure.selected .letter-glyph { stroke: var(--ink); }
.structure-label { font: 700 16px var(--mono); fill: var(--ink);
  letter-spacing: 0.06em;
  paint-order: stroke; stroke: var(--paper); stroke-width: 5px; }
.edge { fill: none; stroke: var(--ink); stroke-width: 1.8; opacity: 0.8; }
.edge.kind-queue { stroke-dasharray: 5 4; }
.edge.kind-event { stroke-dasharray: 1.5 3.5; }
.edge.kind-stream { stroke-width: 2.2; }
.edge.kind-webhook { stroke-dasharray: 7 2 1.5 2; }
.edge.dim { opacity: 0.15; }
.edge.lit { opacity: 1; stroke-width: 2.4; }
.edge-joint { fill: var(--ink); }
.packet-dot { fill: var(--ink); stroke: var(--paper); stroke-width: 2;
  cursor: pointer; }
.tooltip { position: absolute; pointer-events: none; z-index: 5;
  border: 1.5px solid var(--ink); background: var(--paper-hi);
  padding: 4px 8px; font-size: 10.5px; max-width: 260px; }
.error-card { border: 2px solid var(--ink); background: var(--paper-hi);
  margin: 40px auto; max-width: 480px; padding: 18px; }
.error-card h2 { font-size: 13px; letter-spacing: 0.1em; margin-bottom: 8px; }
.error-card pre { font-size: 11px; white-space: pre-wrap; color: var(--ink-soft); }

/* Panel */
.panel-head { border-bottom: 1.5px solid var(--ink); padding: 12px 14px; }
.panel-kicker { font-size: 9px; letter-spacing: 0.16em; color: var(--ink-faint);
  text-transform: uppercase; }
.panel-title { font-size: 17px; font-weight: 700; letter-spacing: 0.04em; }
.panel-subtitle { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.panel-paths { font-size: 9.5px; color: var(--ink-faint); padding: 6px 14px;
  border-bottom: 1.5px solid var(--ink-faint); word-break: break-all; }
.panel-notice { background: var(--ink); color: var(--paper); font-size: 10.5px;
  padding: 4px 14px; }
.tabs { display: flex; border-bottom: 1.5px solid var(--ink); }
.tab { border: none; border-right: 1.5px solid var(--ink); flex: 1;
  padding: 7px 4px; font-size: 10px; }
.tab-body { padding: 12px 14px; font-size: 12px; line-height: 1.55; }
.tab-body p { margin-bottom: 10px; }
.tab-body ul { margin: 0 0 10px 16px; }
.tab-body code { background: var(--paper-lo); padding: 0 3px; font-size: 11px; }
.chip { background: var(--ink); color: var(--paper); padding: 0 5px;
  font-size: 11px; }
.node-link { color: var(--ink); font-weight: 700; }
.cond-date { color: var(--ink-faint); font-size: 10px; }
.packet-json { font-size: 10.5px; padding: 12px 14px; white-space: pre-wrap;
  word-break: break-all; border-bottom: 1.5px solid var(--ink-faint); }
.provenance { padding: 10px 14px; font-size: 10px; color: var(--ink-soft); }
.prov-k { color: var(--ink-faint); letter-spacing: 0.1em; }
.go-inside { margin: 10px 14px 0; align-self: flex-start; }
.packet-dot.frozen { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }

#legend { position: absolute; bottom: 30px; right: 10px; z-index: 4;
  border: 1.5px solid var(--ink); background: var(--paper-hi);
  padding: 10px 12px; font-size: 10px; max-width: 260px; }
.legend-title { letter-spacing: 0.14em; font-size: 9px; margin-bottom: 6px; }
.legend-row { display: flex; gap: 8px; align-items: center; margin: 3px 0; }
.legend-row svg { flex-shrink: 0; }
.legend-note { color: var(--ink-soft); margin-top: 6px; }