.json-viewer{
  --jv-bg: #1e1e2e;
  --jv-panel: #262638;
  --jv-text: #cdd6f4;
  --jv-muted: #7f849c;
  --jv-key: #89b4fa;
  --jv-string: #a6e3a1;
  --jv-number: #fab387;
  --jv-boolean: #f38ba8;
  --jv-null: #6c7086;
  --jv-border: #313244;

  background: var(--jv-panel);
  color: var(--jv-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  border: 1px solid var(--jv-border);
  border-radius: 8px;
  padding: 16px 20px;
  max-width: 700px;
  line-height: 1.6;
}
.json-viewer .json-tree{
  margin: 0;
  padding-left: 18px;
  list-style: none;
}
.json-viewer .json-tree ul{
  margin: 0;
  padding-left: 18px;
  list-style: none;
}
.json-viewer details{
  margin: 0;
}
.json-viewer summary{
  cursor: pointer;
  list-style: none;
}
.json-viewer summary::-webkit-details-marker{ display:none; }
.json-viewer summary::before{
  content: "▸";
  display: inline-block;
  width: 14px;
  color: var(--jv-muted);
  transition: transform 0.15s ease;
}
.json-viewer details[open] > summary::before{
  transform: rotate(90deg);
}
.json-viewer .json-key{ color: var(--jv-key); }
.json-viewer .json-string{ color: var(--jv-string); }
.json-viewer .json-number{ color: var(--jv-number); }
.json-viewer .json-boolean{ color: var(--jv-boolean); }
.json-viewer .json-null{ color: var(--jv-null); font-style: italic; }
.json-viewer .json-punct{ color: var(--jv-muted); }
.json-viewer .json-count{ color: var(--jv-muted); font-size: 12px; margin-left: 4px; }
.json-viewer .json-leaf{ margin-left: 18px; }