.claude-routing-figure {
  margin: 1.75rem 0 2rem;
  padding: 1.5rem 1rem 1rem;
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, currentColor 2%, transparent);
}
.claude-routing-figure .claude-routing-label {
  margin: 0 0 1.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  opacity: 0.65;
}
.claude-routing-canvas { min-height: 18rem; }
.claude-routing-canvas > svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
.claude-routing-figure figcaption {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  font-size: 0.8125rem;
  line-height: 1.65;
  opacity: 0.7;
}
.claude-routing-fallback { margin: 0; font-size: 0.875rem; }
.docs .claude-family-models {
  width: 100%;
  min-width: 0 !important;
  table-layout: fixed;
}
.claude-family-models th:first-child,
.claude-family-models .claude-family-name {
  width: 7rem;
  vertical-align: middle;
  white-space: nowrap;
}
.claude-family-models td:last-child {
  min-width: 0;
  white-space: normal;
}
.claude-model-versions { line-height: 1.6; }
@media (max-width: 480px) {
  .claude-routing-figure { padding: 1rem 0.625rem 0.875rem; }
  .claude-routing-canvas { min-height: 14rem; }
}