.question-diagram {
  margin: 20px 0 24px;
  padding: 16px 18px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--ink);
  background: #fbf8f1;
  min-width: 0;
}
.question-diagram-heading {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.question-diagram-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.question-diagram-canvas { overflow-x:auto; border-radius:8px; }
.question-diagram-canvas:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.question-diagram-canvas > svg {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 6px auto 0;
}
.question-diagram-zoom { margin:0; text-align:right; }
.question-diagram-zoom > summary { min-height:32px; padding:0 2px 8px; cursor:pointer; list-style:none; color:var(--ink-soft); font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.question-diagram-zoom > summary::-webkit-details-marker { display:none; }
.question-diagram-zoom p { max-width:160px; margin:0 0 8px; font-size:11px; line-height:1.4; color:var(--muted); }
.question-diagram-zoom .diagram-zoom-out, .question-diagram-zoom[open] .diagram-zoom-in { display:none; }
.question-diagram-zoom[open] .diagram-zoom-out { display:inline; }
.question-diagram:has(.question-diagram-zoom[open]) .question-diagram-canvas > svg { min-width:600px; max-width:none; }
.question-diagram svg text {
  fill: currentColor;
  stroke: #fbf8f1;
  stroke-width: 4px;
  paint-order: stroke fill;
  font-family: var(--font);
  font-weight: 500;
}
.question-diagram .geometry-fill { fill: currentColor; fill-opacity: .06; }
.question-diagram figcaption {
  max-width: 520px;
  margin: 8px auto 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.question-diagram small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
@media (max-width: 480px) {
  .question-diagram { padding: 12px 8px; border-radius: 16px; }
  .question-diagram-heading { padding-left: 4px; }
  .question-diagram figcaption { padding: 0 6px; font-size: 12px; }
}