.diagram-stage {
  --dg-ink: #253239;
  --dg-blue: #617e92;
  --dg-cyan: #708e9a;
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  background: transparent;
  isolation: isolate;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
  outline: none;
}
.diagram-stage:focus-visible { outline: 2px solid #617e92; outline-offset: 7px; border-radius: 8px; }
.diagram-stage svg { display: block; width: 100%; height: 100%; overflow: visible; }
.diagram-stage svg * { vector-effect: non-scaling-stroke; }
.diagram-stage text { font-family: inherit; fill: var(--dg-ink); user-select: none; }
.diagram-stage .dg-label { font-size: 15px; font-weight: 600; letter-spacing: .035em; }
.diagram-stage .dg-plate-label { font-size: 13px; font-weight: 550; letter-spacing: .02em; }
.diagram-stage .dg-micro { font-size: 8px; letter-spacing: .15em; fill: #78868f; }
.diagram-stage .dg-caption { font-size: 8px; letter-spacing: .16em; fill: #6f7b84; }
.diagram-stage .dg-center-copy { font-size: 15px; font-weight: 500; letter-spacing: .04em; }
.diagram-stage .dg-vertical-note { writing-mode: vertical-rl; }
.diagram-stage .dg-line,
.diagram-stage .dg-small-line { fill: none; stroke: #73838d; stroke-width: .85; stroke-linecap: round; stroke-linejoin: round; }
.diagram-stage .dg-small-line { stroke-width: .7; }
.diagram-stage .dg-grid { fill: none; stroke: #92a0aa; stroke-width: .55; opacity: .25; }
.diagram-stage .dg-plate-top { fill: #edf0ef; fill-opacity: .86; stroke: #7d8b94; stroke-width: .85; stroke-linejoin: round; }
.diagram-stage .dg-plate-side { fill: #d4dce0; stroke: #7d8b94; stroke-width: .85; stroke-linejoin: round; }
.diagram-stage .dg-edge-highlight { fill: none; stroke: #fff; stroke-width: .7; }
.diagram-stage .dg-drill { fill: #faf9f3; stroke: #84939d; stroke-width: .7; }
.diagram-stage .dg-box path { stroke: #738792; stroke-width: .8; stroke-linejoin: round; }
.diagram-stage .dg-face-top { fill: #fafbf8; }
.diagram-stage .dg-face-left { fill: #e0e6e8; }
.diagram-stage .dg-face-right { fill: #b6c7d0; }
.diagram-stage .dg-blue-box .dg-face-top { fill: #597382; stroke: #506775; }
.diagram-stage .dg-blue-box .dg-face-left { fill: #8298a5; stroke: #506775; }
.diagram-stage .dg-blue-box .dg-face-right { fill: #354d5b; stroke: #506775; }
.diagram-stage .dg-core-inset { fill: #6e899b; stroke: #cfdee8; stroke-width: .7; }
.diagram-stage .dg-core-text { fill: #fff; font-size: 17px; letter-spacing: .07em; font-weight: 600; }
.diagram-stage .dg-core-face-label { fill: #e8eef1; font-size: 10px; letter-spacing: .13em; font-weight: 600; }
.diagram-stage .dg-core-pin { fill: none; stroke: #eaf0f3; stroke-width: 1.2; opacity: .8; stroke-dasharray: 5 9; animation: dg-pin-flow 2s linear infinite; }
.diagram-stage .dg-vent { stroke: #8296a1; stroke-width: .8; stroke-linecap: round; }
.diagram-stage .dg-circuit { stroke: #708e9a; stroke-width: .9; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.diagram-stage .dg-status { fill: #617e92; animation: dg-status-pulse 3.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.51s); }
.diagram-stage .dg-port { fill: #fff; stroke: #617e92; stroke-width: 1; }
.diagram-stage .dg-ground-shadow { fill: #6c7d88; opacity: .055; }
.diagram-stage .dg-dimension line { stroke: #8d9ca6; stroke-width: .65; opacity: .5; }
.diagram-stage .dg-link { fill: none; stroke: #9aabb5; stroke-width: .9; stroke-linejoin: round; }
.diagram-stage .dg-link-signal { fill: none; stroke: #617e92; stroke-width: 1.5; stroke-dasharray: 8 75; stroke-linecap: round; animation: dg-signal-flow 3.3s linear infinite; animation-delay: calc(var(--i, 0) * -.47s); }
.diagram-stage .dg-link-signal--muted { stroke: #708e9a; stroke-width: 1.1; opacity: .65; stroke-dasharray: 3 100; }
.diagram-stage .dg-junction { fill: #f2f5f5; stroke: #617e92; stroke-width: .85; }
.diagram-stage .dg-orbit-guides > * { fill: none; stroke: #9cabb4; stroke-width: .6; stroke-dasharray: 2 7; opacity: .55; }
.diagram-stage .dg-node-shadow { fill: #c1ccd4; fill-opacity: .3; }
.diagram-stage .dg-node-face { fill: #f8f8f5; fill-opacity: .93; stroke: #9cabb5; stroke-width: .8; }
.diagram-stage .dg-module-face { fill: #e6ecee; stroke: #869aa7; stroke-width: .8; }
.diagram-stage .dg-wave rect { fill: #708e9a; transform-box: fill-box; transform-origin: center; animation: dg-waveform var(--bar-time, 1.5s) ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -.23s); }
.diagram-stage .dg-code-glyph { stroke: #617e92; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.diagram-stage .dg-check { stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.diagram-stage .dg-circuit-signal { fill: none; stroke: #435e70; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 10 108; animation: dg-trace-flow 3.6s linear infinite; }
.diagram-stage .dg-traveler { fill: #435e70; stroke: #f4f5f1; stroke-width: .8; }
.diagram-stage .dg-micro-unit { animation: dg-chip-float 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.43s); }
.diagram-stage .dg-rack-unit { animation: dg-rack-float 4.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.71s); }
.diagram-stage .dg-blue-box > path { transition: transform 950ms cubic-bezier(.19,.75,.19,1); }
.diagram-stage[data-expanded="true"] .dg-blue-box > .dg-face-top { transform: translateY(-15px); }
.diagram-stage[data-expanded="true"] .dg-blue-box > .dg-face-left { transform: translate(-10px, 5px); }
.diagram-stage[data-expanded="true"] .dg-blue-box > .dg-face-right { transform: translate(10px, 5px); }
.diagram-stage--offscreen *, .diagram-stage.motion-offscreen * { animation-play-state: paused !important; }
@keyframes dg-trace-flow { to { stroke-dashoffset: -236; } }
@keyframes dg-pin-flow { to { stroke-dashoffset: -28; } }
@keyframes dg-chip-float { 0%,100% { transform: translateY(1px); } 50% { transform: translateY(-3px); } }
@keyframes dg-rack-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.8px); } }
@keyframes dg-status-pulse { 0%, 100% { opacity: .35; } 42%, 66% { opacity: 1; } }
@keyframes dg-signal-flow { to { stroke-dashoffset: -166; } }
@keyframes dg-waveform { from { transform: scaleY(var(--bar-scale, .3)); opacity: .65; } to { transform: scaleY(.95); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .diagram-stage *, .diagram-stage *::before, .diagram-stage *::after { animation: none !important; transition: none !important; }
  .diagram-stage .dg-wave rect { transform: scaleY(var(--bar-scale, .55)); }
  .diagram-stage .dg-link-signal { stroke-dasharray: 3 18; opacity: .8; }
}

/* Japanese explanation figures: connector endpoints stay on the fixed card edges. */
.diagram-stage.diagram-stage--flat {
  aspect-ratio: auto;
  min-height: 0;
  height: auto;
  cursor: default;
}
.diagram-stage.diagram-stage--flat > svg {
  width: 100%;
  height: auto;
  max-width: 920px;
  margin-inline: auto;
  overflow: visible;
}
.diagram-stage--flat[data-layout="compact"] > svg { max-width: 420px; }
.diagram-stage--network[data-layout="wide"] > svg { max-width: 700px; }
.diagram-stage--cycle[data-layout="wide"] > svg { max-width: 820px; }
.diagram-stage .dg-flat-face { fill: #f6f7f3; stroke: #9ba8ae; stroke-width: 1; }
.diagram-stage .dg-flat-card--core .dg-flat-face { fill: #dde4e5; stroke: #7d919c; }
.diagram-stage .dg-flat-card--shared .dg-flat-face { fill: #e4e9e8; stroke: #7d919c; }
.diagram-stage .dg-flat-label { fill: var(--dg-ink); font-size: 21px; font-weight: 550; letter-spacing: .015em; }
.diagram-stage--network .dg-flat-label { font-size: 20px; }
.diagram-stage--network .dg-flat-card--core .dg-flat-label { font-size: 18.5px; letter-spacing: 0; }
.diagram-stage .dg-flat-note { fill: #61727c; font-size: 17px; font-weight: 450; letter-spacing: .02em; }
.diagram-stage .dg-flat-heading { fill: #34444d; font-size: 21px; font-weight: 550; letter-spacing: .02em; }
.diagram-stage--flow[data-layout="compact"] .dg-flat-note { font-size: 16px; }
.diagram-stage .dg-flat-icon { fill: none; stroke: #607783; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.diagram-stage .dg-flat-icon .dg-wave rect, .diagram-stage .dg-flat-icon .dg-status { stroke: none; }
.diagram-stage .dg-flat-icon .dg-wave rect { fill: #536e7d; }
.diagram-stage .dg-flat-link { fill: none; stroke: #a8b3b8; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.diagram-stage .dg-flat-signal { fill: none; stroke: #617e92; stroke-width: 1.35; stroke-dasharray: 11 142; stroke-linecap: round; animation: dg-flat-flow 4.4s linear infinite; animation-delay: calc(var(--i, 0) * -.72s); }
.diagram-stage .dg-flat-traveler { fill: #496979; stroke: none; }
.diagram-stage .dg-flat-connection--return .dg-flat-link { stroke: #b5bec0; }
.diagram-stage .dg-flat-connection--return .dg-flat-signal { stroke: #8a9ba2; stroke-width: 1.15; }
.diagram-stage .dg-flat-connection--return .dg-flat-traveler { fill: #8a9ba2; }
.diagram-stage .dg-flat-divider { stroke: #c8cece; stroke-width: .8; }
.diagram-stage .dg-disconnected-line { fill: none; stroke: #bdc5c9; stroke-width: 1; stroke-dasharray: 3 5; }
.diagram-stage .dg-icon-lines { stroke-dasharray: 15 5; animation: dg-copy-flow 4.4s linear infinite; }
.diagram-stage .dg-icon-check { stroke-dasharray: 70; stroke-dashoffset: 0; animation: dg-check-review 5.6s ease-in-out infinite; }
.diagram-stage .dg-icon-code { animation: dg-code-breathe 4.4s ease-in-out infinite; }
.diagram-stage .dg-cycle-base { fill: #f4f6f2; stroke: #c4cecf; stroke-width: 1; }
.diagram-stage .dg-cycle-track { fill: none; stroke: transparent; stroke-width: 1.2; }
.diagram-stage .dg-cycle-accent { fill: none; stroke: #617d8a; stroke-width: 1.6; stroke-dasharray: 76 470; stroke-linecap: round; }
.diagram-stage .dg-cycle-ring { transform-box: fill-box; transform-origin: center; animation: dg-cycle-turn var(--ring-time, 20s) linear infinite; animation-delay: calc(var(--i, 0) * -4.5s); }
.diagram-stage--cycle .dg-flat-label { font-size: 20px; }
.diagram-stage.dg-motion-paused * { animation-play-state: paused !important; }
@keyframes dg-flat-flow { to { stroke-dashoffset: -306; } }
@keyframes dg-copy-flow { to { stroke-dashoffset: -40; } }
@keyframes dg-check-review { 0%,100% { opacity: .6; stroke-dashoffset: 5; } 35%,70% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes dg-code-breathe { 0%,100% { opacity: .52; } 50% { opacity: 1; } }
@keyframes dg-cycle-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .diagram-stage--flat * { animation: none !important; transition: none !important; }
  .diagram-stage .dg-flat-signal { stroke-dasharray: 7 26; opacity: .75; }
}