/* Three aligned stages with measured, responsive connector paths. */
#system-architecture {
  --system-green: #527c69;
  --system-ink: #234936;
  --system-muted: #60705f;
  --system-paper: var(--bg, #f6f6ef);
  container: system-architecture / inline-size;
  margin: 28px 0 0;
  padding: 0;
  border: 0;
  color: var(--system-ink);
  font-family: var(--font-sans, Georgia, serif);
}
#system-architecture * { box-sizing: border-box; }
#system-architecture .system-heading { margin-bottom: 28px; }
#system-architecture .system-eyebrow,
#system-architecture .system-overline,
#system-architecture .system-stage-label {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#system-architecture .system-eyebrow { color: var(--system-muted); margin-bottom: 9px; }
#system-architecture .system-heading h3 { margin: 0; color: var(--system-ink); font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: -.025em; }
#system-architecture h4 { margin: 0; color: inherit; font-size: 21px; line-height: 1.16; font-weight: 500; letter-spacing: -.025em; }
#system-architecture p { margin: 0; color: var(--system-muted); font-size: 12px; line-height: 1.5; }
#system-architecture .system-diagram {
  --system-wide: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, .92fr) 34px minmax(0, 1.12fr);
  position: relative;
  isolation: isolate;
  align-items: start;
}
#system-architecture .system-reasoning { grid-column: 1; }
#system-architecture .system-planning { grid-column: 3; }
#system-architecture .system-platform-group { grid-column: 5; }
#system-architecture .system-stage-label { color: #718369; margin-bottom: 15px; }
#system-architecture .system-context { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#system-architecture .system-observations,
#system-architecture .system-workspace { min-height: 105px; padding: 13px 11px; border: 1px solid #c4cdbd; border-radius: 5px; background: #eef0e8; }
#system-architecture .system-observations { background: #f2f3ec; }
#system-architecture .system-context h4 { font-size: 16px; margin-bottom: 7px; }
#system-architecture .system-context p { font-size: 11px; }
#system-architecture .system-workspace { background: #e9ece2; }
#system-architecture .system-memory-flow { height: 38px; padding: 12px 0 12px 46px; margin-left: calc(50% + 6px); text-align: left; font-size: 10px; color: var(--system-muted); white-space: nowrap; }
#system-architecture .system-agent { padding: 18px 19px; border-radius: 5px; background: #173f30; color: #f4f4ed; }
#system-architecture .system-agent .system-overline { color: #bdd0ad; }
#system-architecture .system-agent h4 { font-size: 23px; margin: 6px 0 10px; }
#system-architecture .system-agent p { color: #cbd8c5; font-size: 12px; line-height: 1.55; }
#system-architecture .system-routes { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
#system-architecture .system-route { min-height: 141px; padding: 16px; border: 1px solid #bbcca9; border-radius: 5px; }
#system-architecture .system-route-label { display: block; margin-bottom: 10px; font-size: 11px; line-height: 1.3; color: var(--system-muted); }
#system-architecture .system-policy { background: #e6edde; }
#system-architecture .system-policy h4 { display: flex; align-items: center; gap: 8px; }
#system-architecture .system-policy-symbol { color: #4d784d; font-size: 25px; line-height: 1; }
#system-architecture .system-route-kind { display: block; margin: 6px 0 7px; color: #547052; font-size: 11px; line-height: 1.3; }
#system-architecture .system-programmed { border-color: #ccbea9; background: #efeee5; }
#system-architecture .system-programmed .system-route-label { color: #8b6c4e; }
#system-architecture .system-programmed h4 { margin-bottom: 10px; }
#system-architecture .system-programmed p { color: #716c5f; }
#system-architecture .system-platform { position: relative; padding: 13px 14px 12px; border: 1px dashed #b6c6ad; border-radius: 6px; background: #e9ede349; }
#system-architecture .system-gate { padding: 0 0 12px; border-bottom: 1px solid #b6c6ad; }
#system-architecture .system-gate h4 { display: flex; align-items: center; gap: 7px; font-size: 21px; margin-bottom: 6px; }
#system-architecture .system-gate-check { display: inline-grid; place-items: center; flex: none; width: 19px; height: 19px; border: 1px solid #7e9b72; border-radius: 50%; font-size: 12px; }
#system-architecture .system-gate p { font-size: 11px; }
#system-architecture .system-actuators { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
#system-architecture .system-sonic,
#system-architecture .system-gripper { padding: 10px 12px; border: 1px solid #b0c798; background: #dee9d0; border-radius: 4px; }
#system-architecture .system-gripper { border-color: #c8bca5; background: #ece8dc; }
#system-architecture .system-actuators h4 { font-size: 20px; margin-bottom: 3px; }
#system-architecture .system-optional { margin-left: 3px; color: #7b776b; font-size: 10px; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
#system-architecture .system-actuators p { font-size: 11px; }
#system-architecture .system-robot-frame { position: relative; width: 100px; height: 110px; overflow: hidden; margin: 26px auto 0; }
#system-architecture .system-robot { display: block; position: absolute; left: 50%; top: -13.4%; width: auto; max-width: none; height: 124%; margin: 0; transform: translateX(-52.7%); }
#system-architecture .system-robot-label { position: absolute; left: calc(50% + 32px); bottom: 15px; color: #5d7654; font-size: 10px; white-space: nowrap; }
#system-architecture .system-feedback { grid-column: 1 / -1; position: relative; text-align: center; padding-top: 29px; }
#system-architecture .system-feedback p { position: relative; z-index: 3; display: inline-block; padding: 0 9px; background: var(--system-paper); font-size: 11px; line-height: 1.5; }
#system-architecture .system-feedback-mobile { display: none; }
#system-architecture figcaption { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 13px; line-height: 1.55; text-align: left; }
#system-architecture .system-connectors { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
#system-architecture .system-connectors path { fill: none; stroke: var(--system-green); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#system-architecture.system-connected .system-connectors { display: block; }

@container system-architecture (max-width: 859px) {
  #system-architecture .system-diagram { --system-wide: 0; grid-template-columns: 1fr; gap: 44px; max-width: 560px; margin-inline: auto; }
  #system-architecture .system-reasoning,
  #system-architecture .system-planning,
  #system-architecture .system-platform-group { grid-column: 1; }
  #system-architecture .system-stage-label { display: none; }
  #system-architecture .system-context { gap: 14px; }
  #system-architecture .system-context h4 { font-size: 18px; }
  #system-architecture .system-context p { font-size: 12px; }
  #system-architecture .system-context > div { min-height: 101px; padding: 14px; }
  #system-architecture .system-agent { padding: 17px 20px; }
  #system-architecture .system-agent p { display: inline; font-size: 13px; line-height: 1.7; }
  #system-architecture .system-agent p + p::before { content: ' · '; color: #8ca783; }
  #system-architecture .system-memory-flow { font-size: 11px; }
  #system-architecture .system-routes { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 14px; }
  #system-architecture .system-route { min-height: 147px; }
  #system-architecture .system-platform { max-width: 390px; margin: auto; padding: 16px; }
  #system-architecture .system-gate h4 { font-size: 22px; }
  #system-architecture .system-gate p { font-size: 12px; }
  #system-architecture .system-robot-frame { height: 120px; }
  #system-architecture .system-robot-label { bottom: 19px; }
  #system-architecture .system-feedback { padding-top: 0; margin-top: -23px; }
  #system-architecture .system-feedback p { padding: 0; font-size: 12px; }
  #system-architecture .system-feedback-mobile { display: inline; }
}
@container system-architecture (max-width: 419px) {
  #system-architecture .system-heading h3 { font-size: 23px; }
  #system-architecture .system-context { gap: 10px; }
  #system-architecture .system-context > div { padding: 12px 10px; }
  #system-architecture .system-context h4 { font-size: 16px; }
  #system-architecture .system-context p { font-size: 11px; }
  #system-architecture .system-memory-flow { margin-right: 0; font-size: 10px; }
  #system-architecture .system-agent p { display: block; line-height: 1.55; }
  #system-architecture .system-agent p + p::before { content: none; }
  #system-architecture .system-routes { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; padding-inline: 18px; gap: 14px; }
  #system-architecture .system-route { min-height: 127px; padding: 14px 16px; }
  #system-architecture .system-platform { padding: 14px; }
  #system-architecture .system-gate h4 { font-size: 20px; }
  #system-architecture .system-gate p { font-size: 11px; }
  #system-architecture .system-actuators { gap: 10px; }
  #system-architecture .system-sonic,
  #system-architecture .system-gripper { padding: 10px; }
}