/* A compact routing diagram, with motion only when the visitor changes the route. */
#sr-landing .sr-architecture-model { margin-top:38px; max-width:1080px; }
#sr-landing .sr-foundation-modes { display:flex; gap:32px; border-bottom:1px solid var(--sr-line); }
#sr-landing .sr-foundation-modes button { background:transparent; border:0; border-bottom:1px solid transparent; border-radius:0; padding:18px 0; margin-bottom:-1px; min-height:59px; font-size:16px; color:#aab4b0; transition:color .2s,border-color .2s; }
#sr-landing .sr-foundation-modes button:hover { color:var(--sr-ink); }
#sr-landing .sr-foundation-modes button[aria-selected="true"] { border-color:var(--sr-orange); color:var(--sr-ink); }
#sr-landing .sr-foundation-diagram { position:relative; display:grid; grid-template-columns:1.65fr 1fr; margin-block:38px 32px; }
#sr-landing .sr-foundation-internal { padding:24px 30px; border:1px solid #4a5252; }
#sr-landing .sr-foundation-diagram .sr-mono { font-size:.75rem; color:#a3ada8; }
#sr-landing .sr-foundation-flow { display:flex; align-items:center; gap:24px; min-height:90px; }
#sr-landing .sr-foundation-flow > span, #sr-landing .sr-foundation-flow > strong { font-size:20px; line-height:1.4; font-weight:400; flex-shrink:0; }
#sr-landing .sr-foundation-flow > i { flex:1; min-width:28px; height:1px; background:#515c56; position:relative; }
#sr-landing .sr-foundation-flow > i:after { content:''; width:5px; height:5px; background:#aeb7b1; position:absolute; right:0; top:-2px; }
#sr-landing .sr-foundation-external { padding:24px 0 24px 0; opacity:.8; transition:opacity .4s; }
#sr-landing .sr-foundation-external > .sr-mono { padding-left:35px; }
#sr-landing .sr-foundation-external .sr-foundation-flow { gap:24px; padding-right:25px; }
#sr-landing .sr-foundation-external .sr-foundation-flow > i { margin-right:3px; background:repeating-linear-gradient(90deg,#6b7770 0 4px,transparent 4px 10px); }
#sr-landing .sr-foundation-external .sr-foundation-flow > i:before { content:''; position:absolute; inset:-1px 0; background:linear-gradient(90deg,transparent,#e9b594,transparent); opacity:0; }
#sr-landing [data-foundation-mode="hybrid"] .sr-foundation-external { opacity:1; }
#sr-landing [data-foundation-mode="hybrid"] .sr-foundation-external .sr-foundation-flow > i { background:#a88062; }
#sr-landing [data-foundation-mode="hybrid"] .sr-foundation-external .sr-foundation-flow > i:after { background:#e7b48d; }
#sr-landing .is-tracing .sr-foundation-external .sr-foundation-flow > i:before { animation:sr-foundation-pass .9s ease-in-out 2 alternate; }
@keyframes sr-foundation-pass { 0% { opacity:0; transform:scaleX(0); transform-origin:left; } 50% { opacity:1; } 100% { opacity:0; transform:scaleX(1); transform-origin:left; } }
#sr-landing .sr-foundation-explanation { max-width:780px; padding-bottom:30px; }
#sr-landing .sr-foundation-state { display:flex; align-items:center; gap:11px; }
#sr-landing .sr-foundation-state > span { width:5px; height:5px; flex-shrink:0; background:#b7c0b8; }
#sr-landing [data-foundation-mode="hybrid"] .sr-foundation-state > span { background:var(--sr-orange); }
#sr-landing .sr-foundation-state p { color:#c2aa95; font-size:.75rem; }
#sr-landing .sr-foundation-explanation h3 { margin-top:17px; font-size:clamp(27px,3cqw,36px); font-weight:400; line-height:1.2; letter-spacing:-.04em; }
#sr-landing .sr-foundation-explanation > p { margin-top:17px; min-height:84px; max-width:710px; color:var(--sr-muted); font-size:17px; line-height:1.65; }
#sr-landing .sr-foundation-foot { display:flex; justify-content:space-between; align-items:center; gap:24px; border-top:1px solid var(--sr-line); padding-block:23px 35px; }
#sr-landing .sr-foundation-foot > p { color:#99a4a0; font-size:12px; }
#sr-landing[data-motion="false"] .sr-architecture-model * { transition:none!important; animation:none!important; }
@media (prefers-reduced-motion:reduce) { #sr-landing .sr-architecture-model * { transition:none!important; animation:none!important; } }
@container (max-width:760px) {
  #sr-landing .sr-architecture-model { margin-top:30px; }
  #sr-landing .sr-foundation-diagram { grid-template-columns:1.4fr 1fr; }
  #sr-landing .sr-foundation-internal { padding-inline:18px; }
  #sr-landing .sr-foundation-flow { gap:14px; }
  #sr-landing .sr-foundation-flow > span, #sr-landing .sr-foundation-flow > strong { font-size:17px; }
  #sr-landing .sr-foundation-external .sr-foundation-flow { gap:14px; padding-right:0; }
  #sr-landing .sr-foundation-external > .sr-mono { padding-left:22px; }
  #sr-landing .sr-foundation-explanation > p { min-height:112px; }
  #sr-landing .sr-foundation-foot { flex-direction:column; align-items:flex-start; gap:10px; }
}
@container (max-width:480px) {
  #sr-landing .sr-foundation-modes { gap:25px; }
  #sr-landing .sr-foundation-modes button { font-size:15px; }
  #sr-landing .sr-foundation-diagram { grid-template-columns:1fr; }
  #sr-landing .sr-foundation-internal { padding:20px; }
  #sr-landing .sr-foundation-flow { min-height:72px; }
  #sr-landing .sr-foundation-external { padding:22px 20px 0; border-left:1px dashed #48514b; margin-left:20px; }
  #sr-landing .sr-foundation-external > .sr-mono { padding-left:0; }
  #sr-landing .sr-foundation-external .sr-foundation-flow { min-height:55px; }
  #sr-landing .sr-foundation-external .sr-foundation-flow > span br { display:none; }
  #sr-landing .sr-foundation-explanation > p { min-height:141px; }
}
#sr-landing .sr-foundation-diagram > .sr-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }