/* Integration diagram: short labels with generous connections. */
.architecture-map { --architecture-cycle: 8s; background: none; }
.architecture-map figcaption { margin-bottom: 24px; }
.architecture-canvas { display: grid; justify-items: center; }
.architecture-endpoints,.architecture-backend { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,64px); }
.architecture-node { min-width: 0; display: grid; place-content: center; gap: 6px; padding: 12px; min-height: 56px; text-align: center; background: #172a3b; border: 1px solid #668994; border-radius: 12px; }
.architecture-node strong { font-size: 1rem; line-height: 1.4; font-weight: 600; }
.architecture-node span { color: #b2cad4; font-size: .875rem; line-height: 1.4; }
.architecture-connection { position: relative; display: grid; place-items: center; width: 100%; height: 62px; }
.architecture-connection::before { content: ''; position: absolute; height: 30px; width: calc(50% + 24px); top: 0; border: 1px solid #63858f; border-top: 0; border-radius: 0 0 10px 10px; }
.architecture-connection::after { content: ''; position: absolute; bottom: 0; height: 31px; width: 1px; background: #63858f; }
.architecture-connection span { position: relative; z-index: 1; padding: 4px 14px; border-radius: 20px; color: #c4e1e6; background: #203548; font-size: .875rem; }
.architecture-hub { width: 48%; background: #294753; border-color: #badde1; }
.architecture-branches { position: relative; height: 28px; width: calc(50% + 24px); border: 1px solid #63858f; border-bottom: 0; border-radius: 10px 10px 0 0; margin-top: 20px; }
.architecture-branches::before { content: ''; position: absolute; bottom: 100%; left: 50%; height: 21px; width: 1px; background: #63858f; }
.architecture-map .architecture-note { margin: 24px 0 0; max-width: 38em; color: #afc3cf; font-size: .875rem; line-height: 1.7; }
.robot-detail .integration-composition { gap: clamp(48px,6vw,96px); }
.robot-detail .integration-composition .integration-network { gap: 26px; }
.architecture-map.is-playing .architecture-interface { animation: architecture-pulse var(--architecture-cycle) ease infinite; }
.architecture-map.is-playing .architecture-connection span { animation: architecture-pulse var(--architecture-cycle) 1.6s ease infinite; }
.architecture-map.is-playing .architecture-hub { animation: architecture-pulse var(--architecture-cycle) 3.2s ease infinite; }
.architecture-map.is-playing .architecture-service,.architecture-map.is-playing .architecture-storage { animation: architecture-pulse var(--architecture-cycle) 4.8s ease infinite; }
@keyframes architecture-pulse { 0%,32%,100% { box-shadow: 0 0 0 0 #b6e5e500; } 9%,20% { border-color: #d4f5f4; box-shadow: 0 0 22px #b6e5e52c; } }
@media (min-width:651px) and (max-height:760px) {
 .architecture-map .architecture-node { min-height: 44px; padding: 9px 12px; }
 .architecture-map figcaption { margin-bottom: 20px; }
 .architecture-map .architecture-connection { height: 56px; }
 .architecture-map .architecture-connection::before,.architecture-map .architecture-connection::after { height: 28px; }
 .architecture-map .architecture-branches { height: 24px; margin-top: 18px; }
 .architecture-map .architecture-branches::before { height: 19px; }
 .architecture-map .architecture-note { margin-top: 20px; }
 .robot-detail .integration-composition .integration-network { gap: 22px; }
}
@media (max-width:950px) { .robot-detail .integration-composition { gap: 36px; } }
@media (max-width:650px) {
 .architecture-node { padding: 12px 8px; min-height: 62px; }
 .architecture-node strong { font-size: .9375rem; }
 .architecture-endpoints,.architecture-backend { gap: 28px; }
 .architecture-connection::before,.architecture-branches { width: calc(50% + 14px); }
 .robot-detail .integration-composition { gap: 40px; }
}
@media (prefers-reduced-motion:reduce) { .architecture-map * { animation: none !important; } }