/* Frozen v4 styles. Create a new release for changes. */
.architecture-v4 {
  --sans: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono: "SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --diagram-surface: #0e171b;
  --diagram-card: #142127;
  --diagram-ink: #e1e9e5;
  --diagram-muted: #a2b2b5;
  --diagram-accent: #91a5ac;
  --diagram-tint: #91a5ac0a;
  color: var(--diagram-ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  background: var(--diagram-surface);
  border: 1px solid #35474a;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
}
.prose .architecture-v4 { width: min(1000px, calc(100vw - 70px)); max-width: none; margin: 42px 0 42px 50%; transform: translateX(-50%); }
.architecture-v4 [hidden] { display: none !important; }
:where(.architecture-v4) .diagram-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #293b40; }
:where(.architecture-v4) .diagram-title { font-size: 16px; font-weight: 550; letter-spacing: -.25px; }
:where(.architecture-v4) .diagram-controls { display: flex; align-items: center; flex-shrink: 0; gap: 3px; }
.architecture-v4 button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; min-height: 40px; padding: 6px 10px; border: 1px solid transparent; border-radius: 5px; color: #cbdad4; background: transparent; font: 11px var(--mono); cursor: pointer; }
.architecture-v4 button:hover { background: #21332f; border-color: #3a5750; }
.architecture-v4 button:disabled { opacity: .3; cursor: default; }
.architecture-v4 button:focus-visible { outline-offset: -2px; }
:where(.architecture-v4) .diagram-controls button[data-action="in"], :where(.architecture-v4) .diagram-controls button[data-action="out"] { font: 20px var(--sans); }
:where(.architecture-v4) .diagram-controls output { min-width: 40px; text-align: center; font: 10px var(--mono); color: var(--diagram-muted); }
:where(.architecture-v4) .diagram-controls button[data-action="expand"] { border-color: #3a514b; margin-left: 6px; }
:where(.architecture-v4) .diagram-viewport { position: relative; overflow: hidden; background: radial-gradient(circle, #657b762b .7px, transparent .8px) 0 0 / 16px 16px; }
:where(.architecture-v4) .diagram-viewport > svg { display: block; width: 100%; height: auto; max-width: none; font-family: var(--sans); user-select: none; }
.architecture-v4[data-enhanced] .diagram-viewport { cursor: grab; touch-action: pan-y pinch-zoom; }
:where(.architecture-v4) .diagram-viewport.is-dragging, :where(.architecture-v4) .diagram-viewport.is-dragging * { cursor: grabbing !important; }
:where(.architecture-v4) .diagram-viewport:focus-visible { outline: 2px solid #b6d9bb; outline-offset: -3px; }
:where(.architecture-v4) .diagram-tone-sage { --diagram-accent: #b6d9bb; --diagram-tint: #b6d9bb08; }
:where(.architecture-v4) .diagram-tone-blue { --diagram-accent: #a6c8ef; --diagram-tint: #a6c8ef08; }
:where(.architecture-v4) .diagram-tone-amber { --diagram-accent: #e3c18b; --diagram-tint: #e3c18b08; }
:where(.architecture-v4) .diagram-boundary { fill: var(--diagram-tint); stroke: var(--diagram-accent); stroke-opacity: .4; stroke-width: 1; stroke-dasharray: 5 5; }
:where(.architecture-v4) .diagram-section-nested .diagram-boundary { stroke-dasharray: none; }
:where(.architecture-v4) .diagram-repeat { fill: var(--diagram-surface); stroke: var(--diagram-accent); stroke-opacity: .3; stroke-width: 1; }
:where(.architecture-v4) .diagram-section-title { fill: var(--diagram-accent); font-size: 17px; font-weight: 550; letter-spacing: -.2px; }
:where(.architecture-v4) .diagram-section-subtitle { fill: var(--diagram-muted); font: 12px var(--sans); }
:where(.architecture-v4) .diagram-hit { fill: transparent; }
:where(.architecture-v4) .diagram-node-body { fill: var(--diagram-card); stroke: var(--diagram-accent); stroke-opacity: .6; stroke-width: 1; }
:where(.architecture-v4) .diagram-shape-external .diagram-node-body { fill: #111b20; stroke-dasharray: 4 4; }
:where(.architecture-v4) .diagram-store-lid { fill: var(--diagram-card); stroke: var(--diagram-accent); stroke-opacity: .6; }
:where(.architecture-v4) .diagram-bucket-rim { fill: var(--diagram-card); stroke: var(--diagram-accent); stroke-opacity: .6; }
:where(.architecture-v4) .diagram-shape-detail { fill: none; stroke: var(--diagram-accent); stroke-opacity: .5; stroke-width: 1; }
:where(.architecture-v4) .diagram-browser-dot { fill: var(--diagram-accent); opacity: .6; }
:where(.architecture-v4) .diagram-node-title { fill: var(--diagram-ink); font-size: 16px; font-weight: 550; letter-spacing: -.2px; }
:where(.architecture-v4) .diagram-wire { fill: none; stroke: var(--diagram-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:where(.architecture-v4) .diagram-dashed .diagram-wire { stroke-dasharray: 5 5; }
:where(.architecture-v4) .diagram-wire-hit { fill: none; stroke: transparent; stroke-width: 22; }
:where(.architecture-v4) .diagram-edge-label rect { fill: var(--diagram-surface); }
:where(.architecture-v4) .diagram-edge-label text { fill: var(--diagram-accent); font: 11px var(--sans); }
:where(.architecture-v4) .diagram-edge-label .diagram-edge-annotation { fill: var(--diagram-muted); font-size: 10.5px; }
:where(.architecture-v4) .diagram-note-body { fill: transparent; stroke: none; }
:where(.architecture-v4) .diagram-note-rule { fill: none; stroke: var(--diagram-accent); stroke-opacity: .5; stroke-width: 2; }
:where(.architecture-v4) .diagram-note-text { fill: var(--diagram-muted); font: 12px var(--sans); }
.architecture-v4[data-enhanced] [data-diagram-item] { cursor: pointer; outline: none; }
:where(.architecture-v4) .diagram-node, :where(.architecture-v4) .diagram-edge, :where(.architecture-v4) .diagram-section { transition: opacity .12s; }
:where(.architecture-v4) .diagram-node.is-dimmed { opacity: .3; }
:where(.architecture-v4) .diagram-edge.is-dimmed { opacity: .15; }
:where(.architecture-v4) .diagram-section.is-dimmed { opacity: .4; }
:where(.architecture-v4) .diagram-node.is-active .diagram-node-body, :where(.architecture-v4) .diagram-node:focus-visible .diagram-node-body { stroke-opacity: 1; stroke-width: 2; fill: #203238; }
:where(.architecture-v4) .diagram-edge.is-active .diagram-wire, :where(.architecture-v4) .diagram-edge:focus-visible .diagram-wire { stroke-width: 2.5; }
:where(.architecture-v4) .diagram-section-label.is-active .diagram-hit, :where(.architecture-v4) .diagram-section-label:focus-visible .diagram-hit { fill: #91a5ac14; stroke: var(--diagram-accent); stroke-width: 1; }
.diagram-open-v4 { overflow: hidden; }
.diagram-dialog-v4 { width: 100vw; height: 100dvh; max-width: none; max-height: none; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); margin: 0; border: 0; background: #090e12; color: var(--text); }
.diagram-dialog-v4::backdrop { background: #090e12eb; }
.diagram-dialog-v4 .architecture-v4 { display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; max-width: none; transform: none; }
.diagram-dialog-v4 .diagram-viewport { flex: 1; min-height: 100px; }
.architecture-v4[data-expanded] .diagram-viewport { touch-action: none; }
.diagram-dialog-v4 .diagram-viewport > svg { width: 100%; height: 100%; }
@media (pointer: coarse) {
  .architecture-v4 button { min-width: 44px; min-height: 44px; }
}
@media (max-width: 700px) {
  .prose .architecture-v4 { width: calc(100vw - 24px); margin-top: 30px; margin-bottom: 30px; }
  :where(.architecture-v4) .diagram-heading { flex-wrap: wrap; gap: 12px; padding: 16px; }
  :where(.architecture-v4) .diagram-title { font-size: 15px; }
  :where(.architecture-v4) .diagram-controls { width: 100%; justify-content: flex-end; gap: 2px; border-top: 1px solid #26383a; padding-top: 7px; }
  :where(.architecture-v4) .diagram-controls output { min-width: 34px; }
  :where(.architecture-v4) .diagram-viewport > svg { min-height: 220px; height: 240px; }
  .diagram-dialog-v4 { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .diagram-dialog-v4 .architecture-v4 { border-radius: 0; }
  .diagram-dialog-v4 .diagram-heading { gap: 8px; padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { :where(.architecture-v4) .diagram-node, :where(.architecture-v4) .diagram-edge, :where(.architecture-v4) .diagram-section { transition: none; } }
@media print {
  .prose .architecture-v4 { width: 100%; max-width: 100%; margin: 25px 0; transform: none; break-inside: avoid; }
  .architecture-v4 { --diagram-surface: #fff; --diagram-card: #f5f7f6; --diagram-ink: #111; --diagram-muted: #43545c; --diagram-accent: #43545c; background: white; color: #111; border-color: #bbb; }
  :where(.architecture-v4) .diagram-tone-sage { --diagram-accent: #356247; } :where(.architecture-v4) .diagram-tone-blue { --diagram-accent: #315783; } :where(.architecture-v4) .diagram-tone-amber { --diagram-accent: #735421; }
  :where(.architecture-v4) .diagram-controls { display: none !important; }
  :where(.architecture-v4) .diagram-viewport { background: none; }
  :where(.architecture-v4) .diagram-shape-external .diagram-node-body { fill: #f5f7f6; }
  :where(.architecture-v4) .diagram-node.is-dimmed, :where(.architecture-v4) .diagram-edge.is-dimmed, :where(.architecture-v4) .diagram-section.is-dimmed { opacity: 1; }
  :where(.architecture-v4) .diagram-title { color: #111; }
}

/* Keep accessibility text independent of future site utility changes. */
.architecture-v4 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }