/* Editable continuous-voice diagrams. Theme, typography, and stage controls are shared. */
.voice-option-diagram { display: block; width: 100%; height: clamp(320px, 51vh, 570px); overflow: visible; font-family: var(--font); }
.voice-architecture-diagram { height: clamp(300px, 48vh, 550px); }
.voice-svg-node { fill: var(--surface); stroke-width: 2; }
.cyan-node { stroke: var(--cyan); }
.violet-node { stroke: var(--violet); }
.voice-svg-node-name { fill: var(--text); font-size: 32px; font-weight: 750; }
.voice-svg-lane { fill: var(--text); font-size: 28px; font-weight: 750; }
.voice-svg-kicker { fill: var(--muted); font-size: 20px; font-weight: 750; letter-spacing: 2px; }
.voice-svg-label { fill: var(--muted); font-size: 28px; }
.voice-svg-sub { fill: var(--muted); font-size: 24px; }
.voice-svg-message { fill: var(--text); font-size: 22px; }
.voice-svg-backend-mode { fill: var(--muted); font-size: 20px; }
.voice-frameworks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 15px auto 0; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); font-size: 1rem; }
.voice-framework-names { display: flex; gap: 12px; }
.voice-framework-names a { padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 750; }
.voice-framework-names a:hover, .voice-framework-names a:focus-visible { border-color: var(--cyan); color: var(--cyan); }
.voice-framework-arrow { color: var(--violet); font-size: 1.6rem; }
.voice-frameworks p { margin: 0; color: var(--cyan); font-weight: 650; }
.voice-frameworks p span { color: var(--muted); font-weight: 400; }
.voice-model-options { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 18px; margin: 10px 0 0; color: var(--muted); font-size: .82rem; }
.voice-model-options a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.voice-model-options a:hover, .voice-model-options a:focus-visible { color: var(--text); }
.voice-option-diagram .cyan { fill: var(--cyan); }
.voice-option-diagram .violet { fill: var(--violet); }
.voice-option-diagram .green { fill: var(--green); }
.voice-svg-arrow { fill: none; stroke-width: 2.5; }
.cyan-arrow { stroke: var(--cyan); marker-end: url(#voice-sequence-cyan-arrow); }
.violet-arrow { stroke: var(--violet); marker-end: url(#voice-sequence-violet-arrow); }
.green-arrow { stroke: var(--green); marker-end: url(#voice-sequence-green-arrow); }
.voice-architecture-diagram .cyan-arrow { marker-end: url(#voice-architecture-cyan-arrow); }
.voice-architecture-diagram .violet-arrow { marker-end: url(#voice-architecture-violet-arrow); }
.voice-architecture-diagram .green-arrow { marker-end: url(#voice-architecture-green-arrow); }
.voice-svg-lifeline { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 5 8; }
.voice-svg-overlap { fill: var(--cyan-soft); stroke: var(--cyan); stroke-width: 1; }
.voice-svg-speaking { fill: var(--cyan); }
.voice-option-slide .takeaway { margin-top: 15px; }
.voice-option-sources { margin-top: 15px; }
@media (max-width: 820px) { .voice-option-diagram { min-width: 780px; height: 360px; } .voice-option-slide .slide-shell { overflow-x: auto; } }
@media print { .voice-option-diagram { height: 105mm; } }