/* Scoped to the architecture story's schematic interaction. */
.story-architecture-visual{--archv-teal:#1b716b;--archv-amber:var(--amber,#9a6715);margin:32px 0;border:1px solid var(--line,#d7cdd8);border-top:4px solid var(--story-purple,var(--green,#80138b));background:var(--surface-soft,#f6eff7);color:var(--ink,#171219);padding:clamp(17px,3vw,28px);font-family:var(--sans,sans-serif);min-width:0}
.story-architecture-visual *{box-sizing:border-box;min-width:0}
.story-architecture-visual .archv-header h3{font:800 clamp(32px,3.4vw,43px)/1.04 var(--display,sans-serif);margin:13px 0 16px;letter-spacing:-.025em}
.story-architecture-visual .archv-header>p{font:13px/1.8 var(--sans,sans-serif);max-width:590px;margin:0;color:var(--muted,#615669)}
.archv-body-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:24px 0 20px}
.archv-body-choices>button{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;padding:13px 10px;border:1px solid var(--line,#d7cdd8);background:var(--surface,#fff);color:var(--ink,#171219);cursor:pointer;font-family:inherit}
.archv-body-choices>button svg{display:block;width:37px;height:37px;flex:none}
.archv-body-choices b{display:block;font:700 12px/1.4 var(--sans,sans-serif);overflow-wrap:anywhere}
.archv-body-choices small{display:block;margin-top:5px;font:10px/1.5 var(--sans,sans-serif);opacity:.8}
.archv-body-choices>button[aria-pressed="true"]{background:var(--story-purple,var(--green,#80138b));border-color:var(--story-purple,var(--green,#80138b));color:var(--story-on-purple,var(--on-accent,#fff))}
.archv-body-choices>button:hover{border-color:var(--green,#80138b)}
.archv-event-choices{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 17px}
.archv-event-choices>button{display:inline-flex;align-items:center;gap:7px;padding:9px 10px;border:1px solid var(--line,#d7cdd8);background:var(--surface,#fff);color:var(--muted,#615669);font:700 10px/1.5 var(--sans,sans-serif);cursor:pointer}
.archv-event-choices>button>span{font:700 9px/1 var(--sans,sans-serif);opacity:.65}
.archv-event-choices>button[aria-pressed="true"]{color:var(--ink,#171219);background:var(--story-yellow,var(--accent-soft,#ffd642));border-color:var(--ink,#171219)}
.story-architecture-visual button:focus-visible{outline:3px solid var(--focus,#80138b);outline-offset:4px}
.story-architecture-visual .archv-situation{font:700 clamp(20px,2.3vw,27px)/1.3 var(--display,sans-serif);margin:0 0 20px;padding:0 0 17px;border-bottom:1px solid var(--line,#d7cdd8)}
.archv-diagram{display:grid;grid-template-columns:minmax(0,1fr) minmax(125px,.41fr);grid-template-rows:auto auto auto;gap:0 15px;align-items:stretch}
.archv-loop{border:2px solid;background:var(--surface,#fff);padding:17px;border-radius:15px}
.archv-understand{grid-column:1;grid-row:1;border-color:var(--archv-teal)}
.archv-execute{grid-column:1;grid-row:3;border-color:var(--archv-amber)}
.archv-loop-heading{display:flex;align-items:center;gap:9px}
.archv-loop-heading>svg{width:34px;height:34px;flex:none;color:var(--archv-teal)}
.archv-execute .archv-loop-heading>svg{color:var(--archv-amber)}
.story-architecture-visual .archv-loop h4{font:800 clamp(21px,2.2vw,28px)/1.12 var(--display,sans-serif);margin:0}
.archv-loop-heading span{display:block;font:700 9px/1.8 var(--sans,sans-serif);text-transform:uppercase;letter-spacing:.045em;color:var(--muted,#615669);margin-top:5px}
.story-architecture-visual .archv-loop>p{font:12px/1.75 var(--sans,sans-serif);margin:12px 0 0}
.archv-fast-feedback{display:block;font:9px/1.65 var(--sans,sans-serif);color:var(--muted,#615669);border-top:1px solid var(--line,#d7cdd8);padding-top:8px;margin-top:11px}
.archv-interface{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;padding:13px 9px}
.archv-flow{display:flex;align-items:center;gap:8px}
.archv-direction{font:400 41px/1 var(--sans,sans-serif);flex:none;color:var(--archv-teal)}
.archv-up .archv-direction{color:var(--archv-amber)}
.archv-flow b{font:700 10px/1.5 var(--sans,sans-serif);display:block}
.archv-flow small{font:9px/1.5 var(--sans,sans-serif);display:block;color:var(--muted,#615669);margin-top:3px}
.archv-down{grid-column:1;grid-row:1}
.archv-up{grid-column:2;grid-row:1}
.archv-orchestration{grid-column:1/-1;grid-row:2;justify-self:center;background:var(--surface,#fff);padding:4px 9px;font:700 9px/1.5 var(--sans,sans-serif);border:1px solid var(--line,#d7cdd8);border-radius:20px;margin-top:3px}
.archv-memory{grid-column:2;grid-row:1/4;align-self:center;padding:15px 12px;background:var(--surface,#fff);border:1px dashed var(--accent-line,#caa4d1);border-radius:10px;position:relative}
.archv-memory-mark{display:block;color:var(--green,#80138b);font:700 29px/1 var(--sans,sans-serif);margin-bottom:10px}
.archv-small-label{font:700 8px/1.6 var(--sans,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#615669)}
.story-architecture-visual .archv-memory h4{font:700 21px/1.15 var(--display,sans-serif);margin:9px 0 12px}
.story-architecture-visual .archv-memory p{font:11px/1.8 var(--sans,sans-serif);margin:0}
.archv-memory>small{display:block;font:9px/1.7 var(--sans,sans-serif);color:var(--muted,#615669);margin-top:12px}
.archv-explanation{margin-top:20px;padding:19px;background:var(--surface,#fff);border-left:3px solid var(--story-purple,var(--green,#80138b))}
.story-architecture-visual .archv-explanation h4{font:700 25px/1.2 var(--display,sans-serif);margin:0 0 11px}
.story-architecture-visual .archv-explanation p{font:12px/1.85 var(--sans,sans-serif);margin:0}
.archv-note{border-top:1px solid var(--line,#d7cdd8);margin-top:20px;padding-top:14px;color:var(--muted,#615669);font:10px/1.8 var(--sans,sans-serif)}
.archv-note b{color:var(--ink,#171219)}
@media(max-width:700px){.archv-diagram{grid-template-columns:minmax(0,1fr)}.archv-memory{grid-column:1;grid-row:4;margin-top:13px;display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 9px;padding:14px 16px}.archv-memory-mark{grid-column:1;grid-row:1/4;align-self:center;margin:0}.archv-small-label,.story-architecture-visual .archv-memory h4,.story-architecture-visual .archv-memory p,.archv-memory>small{grid-column:2}.story-architecture-visual .archv-memory h4{margin:5px 0 9px;font-size:21px}.archv-memory>small{margin-top:7px}.archv-interface{padding:12px 6px;gap:8px}}
@media(max-width:430px){.story-architecture-visual{padding:16px 12px}.archv-body-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.archv-body-choices>button{flex-direction:row;align-items:center;gap:8px;padding:11px 9px}.archv-body-choices>button svg{width:30px;height:30px}.archv-body-choices small{font-size:9px;margin-top:3px}.archv-event-choices{gap:5px}.archv-event-choices>button{padding:8px 7px;font-size:9px;gap:5px}.archv-loop{padding:15px 12px}.archv-loop-heading{gap:7px}.archv-loop-heading>svg{width:27px;height:27px}.story-architecture-visual .archv-loop h4{font-size:22px}.archv-loop-heading span{font-size:8px}.archv-flow{gap:5px}.archv-flow b{font-size:9px}.archv-flow small{font-size:8px}.archv-direction{font-size:34px}.archv-explanation{padding:16px 13px}.story-architecture-visual .archv-explanation h4{font-size:23px}}
@media(prefers-reduced-motion:reduce){.story-architecture-visual *{scroll-behavior:auto;transition:none;animation:none}}
@media(max-width:360px){.archv-body-choices>button{flex-direction:column;align-items:flex-start;gap:6px}.archv-body-choices b{overflow-wrap:normal;word-break:normal;font-size:11px}.archv-body-choices>button svg{width:26px;height:26px}}