/* Shared figure tokens mirror the restrained graphite hero and site surfaces. */
.principles .principle-diagram-v7 {
  --figure-panel: #0f1011;
  --figure-surface: #141516;
  --figure-focus: #191a1b;
  --figure-border: #34343a;
  --figure-ink: #d0d6e0;
  --figure-muted: #8a8f98;
  height: auto;
  aspect-ratio: 320 / 200;
  background: var(--figure-panel);
  border: 1px solid #23252a;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
}
.principles .principle-diagram-v7 svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: inherit;
  letter-spacing: -.015em;
}
.figure-system .f7-node > rect {
  fill: var(--figure-surface);
  stroke: var(--figure-border);
  stroke-width: 1;
}
.figure-system .f7-node-focus > rect {
  fill: var(--figure-focus);
  stroke: #62666d;
}
.figure-system .f7-node > text {
  fill: var(--figure-ink);
  font-size: 13px;
  font-weight: 450;
}
.figure-system .f7-node-focus > text { fill: #f7f8f8; }
.figure-system .f7-node-compact > text { font-size: 11.5px; }
.figure-system .f7-icon {
  fill: none;
  stroke: var(--figure-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.figure-system .f7-connection {
  fill: none;
  stroke: #62666d;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.figure-system .f7-junction { fill: var(--figure-muted); stroke: none; }
.figure-system .f7-continuity,
.figure-system .f7-continuity-arrow {
  fill: none;
  stroke: var(--figure-border);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.figure-system .f7-continuity { stroke-dasharray: 2 4; }
.figure-system .f7-boundary {
  fill: #08090a;
  stroke: #34343a;
  stroke-width: 1;
}
.figure-system .f7-section-label {
  fill: var(--figure-muted);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .035em;
}
.principles .principle-v7 > .figure-label { color: #8a8f98; }
.principles .principle-v7 > h3 { color: #f7f8f8; }
.principles .principle-v7 > p:last-child { color: #8a8f98; }
@media (min-width: 761px) and (max-width: 1000px) {
  .principles .principle-diagram-v7 { align-self: center; }
}
@media (max-width: 760px) {
  .principles .principle-diagram-v7 { max-width: 390px; aspect-ratio: 320 / 200; }
}