/* Architecture-only instrument surface: existing brand type/tokens, one animated circuit. */
.architecture-explorer {
  --ae-bg: #102330;
  --ae-surface: #173140;
  --ae-line: #36515e;
  --ae-ink: var(--brand-paper, #f7f5f0);
  --ae-muted: #b8cad3;
  --ae-orange: var(--brand-orange, #f36b32);
  --ae-cyan: #83e0da;
  color: var(--ae-ink);
  background: var(--ae-bg);
  border: 1px solid var(--ae-line);
  border-radius: var(--radius-l, 8px);
  padding: clamp(1rem, 3vw, 2.5rem);
  font-family: var(--font-sans);
  isolation: isolate;
  position: relative;
  overflow-wrap: anywhere;
  color-scheme: dark;
}
.architecture-explorer *, .architecture-explorer *::before, .architecture-explorer *::after { box-sizing: border-box; }
.architecture-explorer [hidden] { display: none !important; }
.architecture-explorer button { font: inherit; cursor: pointer; color: inherit; }
.architecture-explorer button:disabled { cursor: default; }
.architecture-explorer :is(button, summary):focus-visible { outline: 2px solid var(--ae-cyan); outline-offset: 4px; }
.architecture-explorer :is(h2, h3, h4, p, ul, ol, dl, dd, fieldset) { margin: 0; }
.architecture-explorer .ae-eyebrow { color: var(--ae-muted); font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .08em; line-height: 1.6; }
.ae-heading { display: flex; align-items: start; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.ae-heading > div:first-child { max-width: 46rem; }
.ae-heading h2 { margin-block: .65rem .85rem; max-width: 25em; font-family: var(--font-display); font-size: clamp(1.55rem, 2.6vw, 2.3rem); line-height: 1.35; text-wrap: balance; color: var(--ae-ink); }
.ae-intro { color: var(--ae-muted); font-size: .95rem; line-height: 1.85; }
.ae-scale { display: flex; flex: none; gap: 1.35rem; padding-top: .25rem; }
.ae-scale span { display: grid; gap: .45rem; max-width: 5rem; color: var(--ae-muted); font: .64rem/1.5 var(--font-mono); }
.ae-scale b { color: var(--ae-cyan); font-size: 2rem; line-height: 1; font-weight: 400; letter-spacing: -.06em; }
.architecture-explorer fieldset { padding: 0; min-width: 0; border: 0; }
.ae-playbooks legend { padding: 0; margin-bottom: .7rem; }
.ae-choice-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.architecture-explorer .ae-choice { min-height: 44px; padding: .65rem 1rem; border: 1px solid var(--ae-line); border-radius: var(--radius-s, 3px); background: transparent; font-size: .82rem; line-height: 1.5; text-align: left; transition: border-color .15s, background .15s; }
.architecture-explorer .ae-choice:hover { background: var(--ae-surface); border-color: var(--ae-muted); }
.architecture-explorer .ae-choice[aria-pressed='true'] { border-color: var(--ae-orange); background: #362c29; color: var(--ae-ink); box-shadow: inset 0 -2px var(--ae-orange); }
.ae-playbook-story { display: flex; gap: 1rem; justify-content: space-between; align-items: start; min-height: 5.5rem; padding: 1.2rem 0 1.5rem; }
.ae-playbook-story > :first-child, .ae-playbook-story > section { min-width: 0; flex: 1; }
.ae-playbook-story > div > p + p { margin-top: .3rem; color: var(--ae-muted); font-size: .83rem; }
.ae-playbook-problem { display: flex; gap: .6rem 1.3rem; align-items: baseline; flex-wrap: wrap; }
.ae-playbook-problem h3 { font-size: .95rem; color: var(--ae-ink); }
.ae-playbook-problem p, .ae-playbook-outputs { color: var(--ae-muted); font-size: .8rem; }
.ae-route { display: flex; flex-wrap: wrap; gap: .35rem 1.3rem; padding: .65rem 0 .65rem 1.1rem; color: var(--ae-cyan); font-size: .77rem; }
.ae-route li { padding-inline-end: .4rem; }
.ae-playbook-outputs { display: flex; gap: .7rem; align-items: baseline; }
.ae-playbook-outputs ul { display: flex; flex-wrap: wrap; gap: .25rem 1.3rem; padding-left: 1.1rem; }
.ae-related-scenarios { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .9rem; margin-top: .75rem; }
.ae-related-scenarios ul { display: flex; flex-wrap: wrap; gap: .4rem .8rem; padding: 0; list-style: none; }
.ae-related-scenarios a { display: inline-flex; align-items: baseline; gap: .5rem; min-height: 36px; color: var(--ae-cyan); font-size: .77rem; text-decoration: underline; text-underline-offset: 4px; }
.ae-related-scenarios a:hover { color: var(--ae-ink); }
.ae-related-scenarios a:focus-visible { outline: 2px solid var(--ae-cyan); outline-offset: 3px; }
.ae-active-count { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; max-width: 12rem; color: var(--ae-muted); font-size: .73rem; flex: none; }
.ae-active-count strong { color: var(--ae-cyan); font-family: var(--font-mono); font-weight: 500; }
.ae-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ae-cyan); flex: none; }
/* Without JavaScript every playbook/branch remains readable and every domain is a native disclosure. */
.architecture-explorer:not([data-enhanced='true']) :is(.ae-playbooks, .ae-branches, .ae-index) { display: none; }
.architecture-explorer:not([data-enhanced='true']) .ae-playbook-story { display: grid; gap: 1.5rem; }
.architecture-explorer:not([data-enhanced='true']) .ae-playbook-story > section { padding-top: 1rem; border-top: 1px solid var(--ae-line); }
.architecture-explorer:not([data-enhanced='true']) .ae-workbench { grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr); }
.architecture-explorer:not([data-enhanced='true']) .ae-network { border-left: 0; }
.architecture-explorer:not([data-enhanced='true']) .ae-branch-panel { margin-top: 1rem; }
.ae-workbench { display: grid; grid-template-columns: minmax(140px, .75fr) minmax(0, 2fr) minmax(300px, 1.5fr); border-block: 1px solid var(--ae-line); }
.ae-index { padding: 1.2rem 1.1rem 1.5rem 0; }
.ae-index-layer { margin-top: 1.5rem; }
.ae-index-layer > p { color: var(--ae-muted); font-size: .71rem; padding-bottom: .4rem; }
.ae-index button { width: 100%; display: flex; gap: .6rem; align-items: center; min-height: 48px; padding: .75rem .55rem; margin-block: .3rem; border: 1px solid transparent; background: transparent; text-align: left; font-size: .8rem; line-height: 1.5; border-radius: var(--radius-s); }
.ae-index button[data-active='false'] { color: var(--ae-muted); }
.ae-index button[aria-pressed='true'] { border-color: var(--ae-line); background: var(--ae-surface); color: var(--ae-ink); }
.ae-domain-mark { width: 7px; height: 7px; flex: none; border: 1px solid var(--ae-muted); transform: rotate(45deg); }
.ae-index button[data-active='true'] .ae-domain-mark { background: var(--ae-cyan); border-color: var(--ae-cyan); }
.ae-index button[aria-pressed='true'] .ae-domain-mark { background: var(--ae-orange); border-color: var(--ae-orange); }
.ae-index-arrow { margin-left: auto; color: var(--ae-muted); }
.ae-network { min-width: 0; padding: 1.2rem clamp(.8rem, 1.7vw, 1.5rem) 1.3rem; background: radial-gradient(ellipse at 50% 35%, #1b3a48 0%, transparent 65%), var(--ae-bg); border-inline: 1px solid var(--ae-line); }
.ae-network-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.ae-motion { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; min-height: 36px; padding: .4rem .5rem; border: 1px solid var(--ae-line); border-radius: var(--radius-s); background: transparent; font-size: .65rem !important; line-height: 1.5; text-align: left; }
.ae-motion:disabled { opacity: .75; }
.ae-motion .ae-play-icon, .ae-motion[aria-pressed='true'] .ae-pause-icon { display: none; }
.ae-motion[aria-pressed='true'] .ae-play-icon { display: block; }
.ae-circuit { position: relative; display: grid; gap: 2rem; margin-top: 1.4rem; }
.ae-wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: .65; }
.ae-wire-base { stroke: var(--ae-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ae-wire-flow { stroke: var(--ae-cyan); stroke-width: 1.5; stroke-dasharray: 7 150; stroke-linecap: round; animation: ae-signal 12s linear infinite; animation-play-state: paused; vector-effect: non-scaling-stroke; }
.ae-wire-return { stroke: var(--ae-orange); opacity: .6; stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.ae-wires circle { fill: var(--ae-orange); }
.architecture-explorer[data-motion='running'] .ae-wire-flow { animation-play-state: running; }
.ae-layer { position: relative; min-width: 0; }
.ae-layer > header { display: flex; align-items: center; gap: .7rem; background: var(--ae-bg); width: fit-content; padding-right: .8rem; }
.ae-layer-number { font-family: var(--font-mono); color: var(--ae-cyan); font-size: 1.35rem; letter-spacing: -.05em; }
.ae-layer-eyebrow { color: var(--ae-muted); font-family: var(--font-mono); font-size: .6rem; line-height: 1.5; letter-spacing: .06em; }
.ae-layer h4 { color: var(--ae-ink); font-size: .87rem; line-height: 1.45; }
.ae-layer-description { color: var(--ae-muted); font-size: .72rem; line-height: 1.6; padding-block: .6rem .8rem; }
.ae-domain-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.architecture-explorer .ae-domain { position: relative; min-width: 0; padding: 1rem .8rem .85rem; border: 1px solid var(--ae-line); border-radius: var(--radius-m, 5px); background: var(--ae-surface); text-align: left; box-shadow: 0 5px 18px #08162040; transition: border-color .2s, background .2s; }
.ae-domain:hover { border-color: var(--ae-cyan); }
.ae-domain[aria-pressed='true'] { border-color: var(--ae-orange); background: linear-gradient(145deg, #3b302c, var(--ae-surface) 80%); box-shadow: 0 0 0 1px #f36b3218, 0 6px 24px #08162050; }
.ae-domain[data-active='false'] { border-style: dashed; background: var(--ae-bg); }
.ae-domain-port { position: absolute; top: -4px; left: calc(50% - 4px); width: 7px; height: 7px; border: 1px solid var(--ae-bg); border-radius: 50%; background: var(--ae-cyan); box-shadow: 0 0 10px #83e0da50; }
.ae-domain[data-active='false'] .ae-domain-port { background: var(--ae-muted); box-shadow: none; }
.ae-domain[aria-pressed='true'] .ae-domain-port { background: var(--ae-orange); }
.ae-domain-name { display: flex; align-items: start; gap: .4rem; justify-content: space-between; font-weight: 600; font-size: .82rem; line-height: 1.5; }
.ae-domain-name > span { color: var(--ae-cyan); font-weight: 400; }
.ae-domain-summary { display: block; margin-top: .55rem; font-size: .71rem; line-height: 1.65; color: var(--ae-muted); }
.ae-node-pins { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: .85rem; color: var(--ae-muted); }
.ae-node-pins i { width: 4px; height: 4px; border-radius: 50%; background: var(--ae-cyan); }
.ae-domain[data-active='false'] .ae-node-pins i { background: var(--ae-line); }
.ae-node-pins > span { margin-left: .25rem; font-family: var(--font-mono); font-size: .58rem; }
.ae-network-note { margin-top: 1.35rem !important; color: var(--ae-muted); font-size: .7rem; line-height: 1.7; }
.ae-network-note > span { margin-right: .5rem; color: var(--ae-orange); }
.ae-inspector { min-width: 0; padding: 1.3rem 0 1.3rem 1.3rem; }
.ae-panel { border-bottom: 1px solid var(--ae-line); scroll-margin-top: calc(var(--header-h, 6rem) + 1.5rem); }
.ae-panel summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding-block: 1rem; list-style: none; cursor: pointer; }
.ae-panel summary::-webkit-details-marker { display: none; }
.ae-panel-layer { display: block; margin-bottom: .3rem; color: var(--ae-cyan); font-family: var(--font-mono); font-size: .65rem; }
.ae-panel-title { display: block; font-size: 1.15rem; font-weight: 600; line-height: 1.4; }
.ae-summary-toggle { font-family: var(--font-mono); font-size: 1.35rem; color: var(--ae-cyan); }
.ae-panel[open] .ae-summary-toggle { transform: rotate(45deg); }
.ae-panel-summary { color: var(--ae-muted); font-size: .83rem; line-height: 1.8; }
.ae-project-status { display: flex; align-items: baseline; gap: .45rem; margin-block: .9rem 1.2rem !important; color: var(--ae-cyan); font-size: .7rem; line-height: 1.7; }
.ae-project-status .ae-dot { transform: translateY(-1px); }
.ae-node-list ul { padding: .6rem 0 0; list-style: none; display: grid; gap: .75rem; }
.ae-node-list li { border-left: 2px solid var(--ae-line); padding-left: .7rem; }
.ae-node-list strong { font-size: .79rem; font-weight: 600; color: var(--ae-ink); }
.ae-node-list p { margin-top: .15rem; font-size: .74rem; line-height: 1.75; color: var(--ae-muted); }
.ae-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .95rem 1.1rem; padding-block: 1.25rem .4rem; }
.ae-facts > div { min-width: 0; border-top: 1px solid var(--ae-line); padding-top: .7rem; }
.ae-facts .ae-fact-wide { grid-column: 1 / -1; }
.ae-facts dt { color: var(--ae-muted); font-family: var(--font-mono); font-size: .66rem; margin-bottom: .35rem; }
.ae-facts dd { font-size: .77rem; line-height: 1.8; }
.ae-facts ul { padding-left: 1rem; }
.ae-facts li + li { margin-top: .25rem; }
.ae-human dt { color: var(--ae-orange); }
.ae-evidence { background: #091b2766; padding: .8rem !important; border: 1px solid var(--ae-line); border-radius: var(--radius-s); }
.ae-evidence dd { color: var(--ae-muted); }
.ae-demo { padding-top: 2rem; }
.ae-demo-heading { display: flex; gap: 1.5rem; justify-content: space-between; align-items: start; }
.ae-demo-heading > div { max-width: 45rem; }
.ae-demo-heading h3 { margin-block: .4rem .65rem; color: var(--ae-ink); font-size: clamp(1.2rem, 2vw, 1.5rem); }
.ae-demo-heading > div > p:last-child { color: var(--ae-muted); font-size: .85rem; line-height: 1.85; }
.ae-demo-notice { display: flex; gap: .5rem; align-items: baseline; max-width: 16rem; color: var(--ae-cyan); font-size: .7rem; line-height: 1.75; }
.ae-demo-notice > span { color: var(--ae-orange); }
.architecture-explorer .ae-branches { margin-block: 1.25rem; }
.ae-branch-mark { display: inline-block; width: 6px; height: 6px; margin-right: .5rem; border: 1px solid currentColor; border-radius: 50%; }
[data-architecture-branch='ready'] .ae-branch-mark { color: var(--ae-cyan); }
[data-architecture-branch='review'] .ae-branch-mark, [data-architecture-branch='permission'] .ae-branch-mark { color: #ffb287; }
[data-architecture-branch='stop'] .ae-branch-mark { color: #ff9eac; }
.ae-branch-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 2rem; padding: 1.3rem; border: 1px solid var(--ae-line); border-radius: var(--radius-m); background: var(--ae-surface); }
.ae-branch-explanation { display: flex; align-items: start; gap: .9rem; }
.ae-branch-glyph { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border: 1px solid var(--ae-line); color: var(--ae-cyan); font-family: var(--font-mono); font-size: 1.5rem; line-height: 1; }
[data-architecture-branch-panel='stop'] .ae-branch-glyph { color: #ff9eac; }
[data-architecture-branch-panel='review'] .ae-branch-glyph, [data-architecture-branch-panel='permission'] .ae-branch-glyph { color: #ffb287; }
.ae-branch-explanation h4 { color: var(--ae-ink); font-size: .95rem; line-height: 1.5; }
.ae-branch-explanation p { margin-top: .5rem; color: var(--ae-muted); font-size: .8rem; line-height: 1.8; }
.ae-demo-steps { display: grid; gap: .75rem; padding-left: 1.3rem; font-size: .8rem; line-height: 1.8; }
.ae-demo-steps li { padding-left: .35rem; }
.ae-demo-steps li::marker { color: var(--ae-cyan); font-family: var(--font-mono); }
.ae-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes ae-signal { to { stroke-dashoffset: -628; } }
@media (min-width: 1101px) {
  .architecture-explorer[data-enhanced='true'] .ae-panel[data-selected='false'] { display: none; }
}
@media (max-width: 1100px) {
  .ae-scale { display: none; }
  .architecture-explorer:not([data-enhanced='true']) .ae-workbench { display: block; }
  .ae-workbench { grid-template-columns: minmax(145px, .7fr) minmax(0, 2fr); }
  .ae-network { border-right: 0; }
  .ae-inspector { grid-column: 1 / -1; border-top: 1px solid var(--ae-line); padding: 1.4rem 0 0; }
  .ae-panel-title { font-size: 1rem; }
  .ae-panel-content { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 0 2rem; padding-bottom: 1rem; }
  .ae-panel-summary, .ae-project-status, .ae-node-list { grid-column: 1; }
  .ae-facts { grid-column: 2; grid-row: 1 / 5; padding-top: 0; }
}
@media (max-width: 720px) {
  .architecture-explorer { padding: 1rem; }
  .ae-heading { margin-bottom: 1.5rem; }
  .ae-heading h2 { font-size: 1.55rem; }
  .ae-intro { font-size: .87rem; }
  .ae-playbook-story { flex-direction: column; gap: .8rem; }
  .ae-active-count { max-width: none; }
  .ae-playbook-outputs { flex-direction: column; gap: .25rem; }
  .ae-workbench { display: block; }
  .ae-index { padding: 1rem 0; }
  .ae-index > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .ae-index-layer { margin-top: .8rem; min-width: 0; }
  .ae-index-layer > p { font-size: .62rem; }
  .ae-index button { padding: .6rem .35rem; gap: .35rem; font-size: .69rem; }
  .ae-index-arrow { display: none; }
  .ae-domain-mark { width: 5px; height: 5px; }
  .ae-network { border: 0; border-top: 1px solid var(--ae-line); padding: 1.2rem 0; }
  .ae-circuit { gap: 1.7rem; }
  .ae-domain-pair { gap: .65rem; }
  .architecture-explorer .ae-domain { padding: .8rem .65rem; }
  .ae-domain-name { font-size: .77rem; }
  .ae-domain-summary { font-size: .72rem; }
  .ae-panel-content { display: block; }
  .ae-facts { margin-top: 1rem; }
  .ae-inspector { padding-bottom: 1rem; }
  .ae-panel summary { min-height: 70px; }
  .ae-demo { padding-top: 1.5rem; }
  .ae-demo-heading { flex-direction: column; gap: .8rem; }
  .ae-demo-notice { max-width: none; }
  .ae-branch-panel { display: block; padding: 1rem; }
  .ae-demo-steps { margin-top: 1.25rem !important; }
  .architecture-explorer .ae-choice { padding: .6rem .75rem; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .architecture-explorer *, .architecture-explorer *::before, .architecture-explorer *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .ae-domain, .ae-choice, .ae-evidence { border: 1px solid ButtonText !important; }
  .ae-domain[aria-pressed='true'], .ae-choice[aria-pressed='true'], .ae-index button[aria-pressed='true'] { outline: 2px solid Highlight; }
  .ae-domain-port, .ae-dot, .ae-node-pins i { background: CanvasText; }
}