/* Functional motion over the native architecture diagram. */
.diagram-frame[data-architecture]{padding-bottom:22px}
.arch-canvas{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:#7c8c6c #22291d;scrollbar-width:thin;border-radius:3px}
.arch-canvas>svg.arch-diagram{display:block;width:100%;min-width:760px;height:auto;max-width:none}
.arch-node>rect{transition:fill .22s ease,stroke .22s ease,stroke-width .22s ease}
.arch-node.is-reached>rect{fill:#3b3525;stroke:#eda446;stroke-width:2}
.arch-node.is-current>rect{fill:#524023;stroke:#ffc16a;stroke-width:2.6}
.arch-node.is-reached>path{stroke:#ffb655}
.arch-wire,.arch-pulse{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;opacity:0}
.arch-wire{stroke:#f4a23d;stroke-width:3;transition:opacity .18s ease}
.arch-pulse{stroke:#fff1c7;stroke-width:3;stroke-dasharray:6 94;animation:arch-signal 1.3s cubic-bezier(.2,0,.8,1) infinite;animation-play-state:paused}
.arch-wire.is-on,.arch-pulse.is-on{opacity:1}
.arch-diagram[data-playing="true"] .arch-pulse.is-on{animation-play-state:running}
.arch-diagram[data-playing="false"] .arch-pulse{opacity:0}
.arch-controls{border-top:1px solid #536049;border-bottom:1px solid #536049;padding:20px 0;margin:12px 0 22px;color:#f5f4ee}
.arch-controls-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.arch-controls-top>strong{font-size:14px;font-weight:650}
.arch-play{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid #f28a17;border-radius:3px;background:#f28a17;color:#1b2117;font:650 12px/1.4 var(--maq-font-ui);padding:10px 16px;min-height:40px;cursor:pointer}
.arch-play:hover{background:#ffac43}
.arch-play[aria-pressed="true"]{background:#303829;border-color:#9ca98e;color:#f5f4ee}
.arch-choices{display:flex;flex-wrap:wrap;gap:8px}
.arch-choices button{min-height:42px;padding:10px 18px;background:transparent;border:1px solid #748166;border-radius:3px;color:#d9e1d0;font:600 12px/1.4 var(--maq-font-ui);cursor:pointer}
.arch-choices button:hover{border-color:#f4a23d;color:#ffd49a}
.arch-choices button[aria-pressed="true"]{background:#44351f;border-color:#f4a23d;color:#ffd49a}
.arch-play:focus-visible,.arch-choices button:focus-visible,.arch-canvas:focus-visible{outline:2px solid #ffb65a;outline-offset:4px}
.arch-status{margin-top:20px;max-width:92ch}
.arch-status>strong{display:block;font-size:15px;line-height:1.7;color:#ffbd65;overflow-wrap:anywhere}
.arch-status>p{margin-top:6px;font-size:13px;line-height:1.8;color:#d3deca;max-width:90ch}
.arch-controls>.arch-hint{font-size:11px;line-height:1.7;color:#aebb9f;margin-top:8px}
.diagram-modal .arch-controls{margin-top:18px;padding-top:16px}
.diagram-modal:has(.arch-canvas){max-height:94vh;overflow-y:auto}
.diagram-modal .diagram-pan:has(.arch-canvas){max-height:56vh}
@keyframes arch-signal{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@media(max-width:760px){
 .arch-controls-top{align-items:flex-start;gap:14px}.arch-controls-top>strong{font-size:13px;max-width:18ch}
 .arch-play{font-size:11px;padding:9px 12px;flex-shrink:0}
 .arch-choices{gap:8px}.arch-choices button{flex:1 1 calc(50% - 8px);padding:10px 12px;font-size:11px}
 .arch-status{margin-top:18px}.arch-status>strong{font-size:13px}.arch-status>p{font-size:12px}
 .arch-controls>.arch-hint{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.arch-pulse{display:none}.arch-node>rect,.arch-wire{transition:none}}