.architecture-demo { margin: 30px 0 38px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf6; font-size: .82rem; line-height: 1.6; }
.arch-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.architecture-demo .arch-eyebrow { margin: 0 0 5px; color: var(--accent); font-size: .65rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.architecture-demo h4 { margin: 0; font: 500 1.55rem/1.25 Georgia, serif; letter-spacing: -.025em; }
.arch-budget { color: var(--muted); font-size: .66rem; text-align: right; max-width: 105px; }
.arch-prompt { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 21px; padding: 12px 14px; background: #f1efe8; border-radius: 6px; font-size: .72rem; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.arch-prompt b { font-weight: 500; color: var(--muted); margin-right: 5px; }
.arch-canvas { margin: 6px -10px 0; }
.arch-diagram { display: block; width: 100%; height: auto; overflow: visible; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.arch-mobile { display: none; }
.arch-wire { fill: none; stroke: #b8b9b3; stroke-width: 1.6; }
.arch-wire[data-wire="feedback"] { stroke: #287878; }
.arch-flow { fill: none; stroke: #287878; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 90; opacity: 0; }
.arch-flow.is-active { opacity: 1; stroke-dasharray: none; }
.architecture-demo.is-playing .arch-flow.is-active { stroke-dasharray: 10 90; animation: arch-travel 1.6s linear infinite; }
@keyframes arch-travel { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.arch-block-bg { fill: #f2f0ea; stroke: #c9c9c1; stroke-width: 1.3; transition: fill .3s, stroke .3s; }
.arch-block-r .arch-block-bg { fill: #f8eee8; stroke: #c39683; }
.arch-block.is-active .arch-block-bg { stroke: #287878; stroke-width: 2.5; fill: #e9f3ed; }
.arch-block-r.is-active .arch-block-bg { fill: #fae6dc; stroke: #98452f; }
.arch-letter { fill: #292c33; font: 500 26px Georgia, serif; }
.arch-block-name { fill: #292c33; font-size: 13px; }
.arch-label { fill: #62646b; font-size: 13px; }
.arch-recur-label { fill: #287878; }
.arch-note { fill: #62646b; font-size: 11.5px; }
.arch-tag { fill: #62646b; font-size: 10px; }
.arch-block-r .arch-tag { fill: #98452f; }
.arch-layer { fill: #c4c7bd; }
.arch-block-r .arch-layer { fill: #be7f64; }
.arch-state-title { font: italic 20px Georgia, serif; fill: #287878; }
.arch-state-bg { fill: #f0f4ed; stroke: #8cae9e; }
.arch-state [data-cell] { fill: #76a694; opacity: .4; transition: opacity .5s, fill .5s; }
.arch-state.is-active .arch-state-bg { stroke: #287878; stroke-width: 2; }
.arch-output rect { fill: #fffefa; stroke: #cfcdc4; }
.arch-output.is-active rect { stroke: #287878; fill: #e9f3ed; }
.arch-output-symbol { fill: #287878; font: 500 25px Georgia, serif; }
.arch-explanation { display: flex; gap: 12px; padding: 17px 0; border-top: 1px solid var(--line); min-height: 104px; }
.arch-stage-number { flex: 0 0 28px; height: 28px; border-radius: 50%; background: #e7eee7; color: #287878; text-align: center; line-height: 28px; font-size: .68rem; font-variant-numeric: tabular-nums; }
.arch-explanation strong { font-size: .82rem; font-weight: 600; }
.arch-explanation p { margin: 4px 0 0; color: var(--muted); font-size: .78rem; }
.arch-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 0 17px; border-bottom: 1px solid var(--line); }
.arch-controls[hidden] { display: none; }
.arch-controls button { min-height: 36px; padding: 6px 11px; border: 1px solid #d5d2c9; border-radius: 6px; background: #fffefa; color: var(--ink); font: inherit; font-size: .73rem; cursor: pointer; }
.arch-controls button:hover { border-color: #287878; color: #287878; }
.arch-controls button:focus-visible, .arch-details summary:focus-visible { outline: 2px solid #287878; outline-offset: 3px; }
.arch-controls .arch-primary { min-width: 82px; background: #287878; color: white; border-color: #287878; }
.arch-controls .arch-primary:hover { background: #206363; color: white; }
.arch-loop-navigation { display: flex; gap: 5px; align-items: center; margin-left: auto; }
.arch-loop-navigation > span { margin-right: 5px; color: var(--muted); font-size: .7rem; }
.arch-loop-navigation button { width: 32px; padding: 5px; }
.arch-loop-navigation button[aria-pressed="true"] { color: #287878; border-color: #287878; background: #e9f3ed; }
.architecture-demo figcaption { margin-top: 15px; font-size: .72rem; color: var(--muted); }
.arch-details { margin-top: 12px; font-size: .7rem; color: var(--muted); }
.arch-details summary { cursor: pointer; }
.arch-details p { margin: 10px 0 0; }
.arch-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 540px) {
  .architecture-demo { padding: 18px 14px; margin-left: -6px; margin-right: -6px; }
  .architecture-demo h4 { font-size: 1.35rem; }
  .arch-budget { max-width: 85px; font-size: .62rem; }
  .arch-prompt { font-size: .66rem; gap: 5px 16px; padding: 10px; }
  .arch-wide { display: none; }
  .arch-mobile { display: block; max-width: 390px; margin: auto; }
  .arch-explanation { min-height: 125px; }
  .arch-loop-navigation { width: 100%; margin: 4px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .architecture-demo *, .architecture-demo.is-playing .arch-flow.is-active { animation: none; transition: none; }
  .architecture-demo.is-playing .arch-flow.is-active { stroke-dasharray: none; }
}