.architecture-section {
  background: #f8f9fc;
  color: var(--ink);
  border-block: 1px solid #e5e9f1;
}
.architecture-section .section { padding-block: 88px 56px; }
.architecture-section .section-heading { margin-bottom: 56px; }
.architecture-demo { --wire: #cdd5e4; --blue: #435ee8; position: relative; }
.system-scroll-track { position: relative; }
.system-scroll-track { --pin-top: 56px; }
.system-scroll-track.is-pinned .system-viewport { position: sticky; top: var(--pin-top); }
.system-viewport { background: #f8f9fc; padding-block: 12px; }
.system-scroll-cue { display: flex; align-items: center; gap: 20px; padding-block: 17px; font: .75rem var(--mono); letter-spacing: .035em; color: #8793aa; }
.system-legend { display: flex; gap: 26px; flex-wrap: wrap; color: #7d8aa1; font-size: .75rem; padding-top: 15px; }
.system-legend span { display: flex; align-items: center; gap: 9px; }
.system-legend span::before { content: ''; width: 24px; border-top: 1px solid #7a8ddd; }
.system-legend .legend-context::before { border-top: 1px dashed #a4b0c5; }
.system-scroll-meter { flex: 1; max-width: 150px; height: 1px; background: #dce2ef; }
.system-scroll-meter > span { display: block; height: 1px; background: var(--blue); transform-origin: left; }
.system-toolbar { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
.system-label { font: .75rem/1.5 var(--mono); color: #707b91; letter-spacing: .065em; }
.system-modes { display: flex; margin-left: auto; border: 1px solid #d9dfeb; padding: 3px; border-radius: 4px; }
.system-modes button { background: none; border: 0; padding: 8px 15px; color: #6a758b; font: .8125rem var(--mono); cursor: pointer; border-radius: 2px; }
.system-modes button[aria-pressed=true] { background: #fff; color: var(--blue); box-shadow: 0 1px 4px #21315a12; }
.system-playback { display: flex; gap: 15px; }
.system-action { border: 0; background: none; color: #59677f; padding: 10px 0; font-size: .875rem; cursor: pointer; }
.system-action:hover { color: var(--blue); }
.system-board {
  position: relative;
  display: grid;
  gap: 26px;
  padding: 26px 72px 30px 25px;
  border: 1px solid #dde3ed;
  background: linear-gradient(90deg, #e9edf440 1px, transparent 1px), linear-gradient(#e9edf440 1px, transparent 1px), #fff;
  background-size: 24px 24px;
}
.system-layer { --reveal: 1; display: grid; grid-template-columns: 166px minmax(0, 1fr); gap: 20px; position: relative; }
.layer-heading, .system-module { opacity: var(--reveal); transition: opacity .2s; }
.system-module:not(.is-visible) { visibility: hidden; }
.layer-heading { align-self: center; position: relative; padding-left: 33px; }
.layer-index { position: absolute; top: 3px; left: 0; font: .75rem var(--mono); color: #97a2b5; }
.layer-heading h3 { font-size: .9375rem; font-weight: 550; letter-spacing: -.015em; margin: 0 0 8px; color: #47536b; }
.layer-note { font: .75rem/1.4 var(--mono); color: #8a95a8; display: block; }
.layer-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.system-module { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: 76px; min-width: 0; padding: 12px 16px 12px 21px; text-align: left; border: 1px solid #d8dfec; border-radius: 2px; background: #fff; color: #45516a; cursor: pointer; transition: opacity .2s, border-color .3s, background .3s, box-shadow .3s; }
.system-module[data-module=request] { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 24px; min-height: 64px; }
.system-module[data-module=request] .module-subtitle { margin-top: 0; }
.module-port { position: absolute; width: 5px; height: 5px; top: -3px; left: calc(50% - 2.5px); background: #fff; border: 1px solid #abb8cf; }
.module-title { display: block; font-size: .9375rem; line-height: 1.4; font-weight: 500; letter-spacing: -.02em; }
.module-subtitle { display: block; font: .75rem/1.6 var(--mono); color: #8a96aa; margin-top: 7px; overflow-wrap: anywhere; }
.system-module:hover, .system-module[aria-pressed=true] { border-color: #8598ec; background: #fafbff; }
.system-module[aria-pressed=true] { box-shadow: inset 2px 0 var(--blue); }
.system-module:focus-visible, .system-action:focus-visible, .system-modes button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.system-layer[data-layer='3'] .system-module { border-color: #bac6f3; background: #f5f7ff; }
.system-layer[data-layer='3'] .module-title { color: #435fca; font-family: var(--mono); font-size: .875rem; letter-spacing: 0; }
.system-layer[data-layer='3'] .module-title::before { content: '∥'; margin-right: 10px; color: #8da0e8; }
.system-layer.is-current .layer-index { color: var(--blue); }
.system-layer.is-current .system-module { border-color: #8598ec; }
.system-layer[data-layer='5'] .system-module { background: #f8f9fc; border-style: dashed; }
.system-layer[data-layer='5'] .module-port { display: none; }
.system-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.system-wires path { fill: none; stroke: var(--wire); stroke-width: 1; stroke-linejoin: miter; stroke-linecap: butt; vector-effect: non-scaling-stroke; }
.system-wires .arrow-head { stroke: #7a8ddd; stroke-width: 1.2; }
.system-wires .arrow-head.shared { stroke: #98a5bf; }
.system-wires path[data-shared] { stroke: #ccd5e5; stroke-dasharray: 3 4; }
.system-wires .wire-ink { stroke: #7a8ddd; stroke-width: 1.2; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .18s linear; }
.system-wires .wire-ink[data-shared] { stroke: #9aa9cd; stroke-dasharray: 1 1; }
.system-status { font: .8125rem/1.7 var(--mono); color: #687da7; min-height: 24px; margin: 12px 0 20px; }
.system-details { display: grid; grid-template-columns: 230px 1fr; gap: 28px; border-top: 1px solid #dce3ef; padding-top: 23px; min-height: 104px; }
.system-details h4 { color: #43516c; font-weight: 500; letter-spacing: -.025em; font-size: 1.125rem; margin: 9px 0 0; }
.system-details p { color: #69768d; font-size: .9375rem; line-height: 1.7; margin: 0; max-width: 720px; }
@media (max-width: 1100px) {
  .system-board { padding-left: 18px; padding-right: 65px; }
  .system-layer { grid-template-columns: 140px minmax(0, 1fr); gap: 12px; }
  .layer-modules { gap: 16px; }
  .system-module { padding: 14px 11px; }
  .module-title { font-size: .875rem; }
}
@media (max-width: 760px) {
  .architecture-section .section { padding-block: 70px 56px; }
  .system-toolbar { flex-wrap: wrap; gap: 14px; }
  .system-toolbar > .system-label { width: 100%; }
  .system-modes { margin-left: 0; margin-right: auto; }
  .system-board { padding: 22px 50px 30px 15px; gap: 44px; }
  .system-layer { grid-template-columns: 1fr; gap: 12px; }
  .layer-heading { display: flex; gap: 14px; align-items: center; padding-left: 27px; background: #ffffffed; width: fit-content; padding-right: 8px; }
  .layer-heading h3 { margin: 0; font-size: .875rem; }
  .layer-note { display: none; }
  .layer-modules { gap: 12px; }
  .system-module { padding: 14px 8px; min-height: 107px; }
  .system-module[data-module=request] { flex-direction: column; align-items: flex-start; gap: 5px; }
  .module-title { font-size: .875rem; overflow-wrap: anywhere; }
  .system-module[data-module=postgres] { padding-inline: 4px; }
  .system-module[data-module=postgres] .module-title { font-size: .8125rem; letter-spacing: -.035em; }
  .module-subtitle { font-size: .75rem; line-height: 1.5; }
  .system-layer[data-layer='3'] .module-title { font-size: .8125rem; }
  .system-layer[data-layer='3'] .module-title::before { display: block; margin: 0 0 5px; }
  .system-details { grid-template-columns: 1fr; gap: 16px; }
  .system-status { min-height: 44px; font-size: .75rem; }
}
@media (max-width: 420px) {
  .system-board { padding-left: 17px; padding-right: 48px; }
  .layer-modules { gap: 9px; }
  .system-module { padding-inline: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .system-layer, .system-module, .system-wires .wire-ink { transition: none; }
  .layer-heading, .system-module { opacity: 1; transform: none; transition: none; }
  .system-module:not(.is-visible) { visibility: visible; }
}