.diagram-container{margin:2rem 0;padding:1.5rem;border-radius:var(--radius-lg);overflow:hidden}.diagram-container--elevated{background-color:var(--color-bg-elevated);border:1px solid var(--color-border)}.diagram-container--transparent{background-color:transparent;border:none}.diagram-container--subtle{background-color:var(--color-bg-subtle);border:1px solid var(--color-border)}.diagram-title{font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--color-text);margin-bottom:1rem;text-align:center}.diagram-wrapper{width:100%;display:flex;justify-content:center;align-items:center;overflow-x:auto;position:relative}.diagram-content{width:100%;display:flex;justify-content:center}.diagram-content svg{max-width:100%;height:auto}.diagram-caption{font-size:.875rem;color:var(--color-text-muted);text-align:center;margin-top:1rem;font-style:italic}.diagram-error{display:flex;align-items:center;gap:.5rem;padding:1rem;background-color:var(--color-error-bg, rgba(239, 68, 68, .1));border:1px solid var(--color-error, #ef4444);border-radius:var(--radius-md);color:var(--color-error, #ef4444)}.diagram-error__icon{font-size:1.25rem}.diagram-error__text{font-size:.875rem;font-family:var(--font-mono, monospace)}.diagram-loading{padding:2rem;color:var(--color-text-muted);font-style:italic}.diagram-wrapper--interactive .diagram-content svg .node{cursor:pointer}.diagram-wrapper--interactive .diagram-content svg .node:hover{filter:brightness(1.15)}.diagram-content svg .node{transition:filter .2s ease}.diagram-content svg text{font-family:var(--font-display),system-ui,sans-serif!important}@media(max-width:640px){.diagram-container{padding:1rem;margin:1.5rem -1rem;border-radius:0}.diagram-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}}@keyframes diagram-tooltip-appear{0%{opacity:0;transform:translate(-50%) translateY(-4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.diagram-tooltip{position:fixed;transform:translate(-50%);z-index:9999;min-width:200px;max-width:320px;background-color:var(--color-bg-elevated, #1f2937);border:1px solid var(--color-border, #374151);border-radius:var(--radius-md, 8px);box-shadow:0 10px 25px #0000004d;padding:.75rem 1rem;font-family:var(--font-display, system-ui, sans-serif);animation:diagram-tooltip-appear .15s ease-out}.diagram-tooltip__arrow-border{position:absolute;top:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--color-border, #374151)}.diagram-tooltip__arrow-fill{position:absolute;top:-5px;left:50%;transform:translate(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid var(--color-bg-elevated, #1f2937)}.diagram-tooltip--above{animation:diagram-tooltip-appear-above .15s ease-out}.diagram-tooltip--above .diagram-tooltip__arrow-border{top:auto;bottom:-6px;border-bottom:none;border-top:6px solid var(--color-border, #374151)}.diagram-tooltip--above .diagram-tooltip__arrow-fill{top:auto;bottom:-5px;border-bottom:none;border-top:5px solid var(--color-bg-elevated, #1f2937)}@keyframes diagram-tooltip-appear-above{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.diagram-tooltip__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.25rem}.diagram-tooltip__title{font-weight:600;font-size:.9rem;color:var(--color-text, #e5e7eb)}.diagram-tooltip__close{background:none;border:none;font-size:1.25rem;line-height:1;color:var(--color-text-muted, #9ca3af);cursor:pointer;padding:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm, 4px);transition:background-color .15s ease,color .15s ease}.diagram-tooltip__close:hover{background-color:var(--color-bg-subtle, #374151);color:var(--color-text, #e5e7eb)}.diagram-tooltip__description{font-size:.825rem;color:var(--color-text-muted, #9ca3af);margin:0;line-height:1.5}@media(max-width:640px){.diagram-tooltip{min-width:180px;max-width:280px}}