/* ============================================================
   ERD viewer (WangWeiERD.html)
   Renders WangWeiERD.json in the site's dark "snippet" style,
   with JSON syntax colours matching the Canon code palette.
   ============================================================ */

.erd {
  /* also carries .content (width:1000px; max-width:100%) */
  width: 880px;
  max-width: 100%;
}

.erd-hero {
  text-align: center;
  margin-bottom: 36px;
}

.erd h1 {
  font-family: var(--font-display);
  font-size: 2.2em;
  letter-spacing: 0.06em;
  color: var(--heading);
  margin: 0 0 10px;
}

.erd-subtitle {
  font-family: var(--font-accent);
  font-size: 1em;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0;
}

/* Dark code block — same treatment as the page snippets */
.erd-code {
  background: #1e1e1e;
  border-radius: 10px;
  padding: 26px 28px;
  overflow-x: auto;
  margin: 0;
}

.erd-code code {
  display: block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  line-height: 1.7;
  color: #d4c8be;          /* punctuation / default */
  white-space: pre;
}

/* JSON token colours */
.erd-code .key  { color: #82aaff; }   /* object keys */
.erd-code .str  { color: #c3e88d; }   /* string values */
.erd-code .num  { color: #f78c6c; }   /* numbers */
.erd-code .bool { color: #c792ea; }   /* booleans */
.erd-code .null { color: #c792ea; }   /* null */

.erd-back {
  margin-top: 30px;
}

.erd-back a {
  font-family: var(--font-accent);
  font-size: 0.95em;
  color: var(--accent);
  text-decoration: none;
}

.erd-back a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .erd h1 { font-size: 1.7em; }
  .erd-code { padding: 16px 16px; }
  .erd-code code { font-size: 0.78em; }
}