/* App demo rules copied from the earlier approved demo; isolated from the page. */
#demoApp .btn {display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 21px;border-radius:14px;border:1px solid transparent;font-weight:750;font-size:15px;line-height:1.4;text-align:center;transition:box-shadow .2s,transform .2s}
#demoApp .btn:hover {transform:translateY(-2px)}
#demoApp .btn-primary {background:var(--gradient);color:white;box-shadow:0 12px 26px #324cf22b}
#demoApp .btn-primary:hover {box-shadow:0 16px 32px #324cf238}
#demoApp .btn:disabled {background:#dde4ef;color:#55657b;box-shadow:none;transform:none;cursor:default}
#demoApp .btn svg, #demoApp .text-link svg {width:18px;height:18px}
#demoApp .text-link {display:inline-flex;align-items:center;gap:8px;font-weight:750;font-size:14px}
#demoApp .text-link:hover {text-decoration:underline;text-underline-offset:4px}
#demoApp .avatar {display:grid;place-items:center;border-radius:50%;background:#d4f8e6;color:#007f56;width:42px;height:42px;font-size:14px;font-weight:800;flex-shrink:0}
#demoApp .card-label {display:flex;gap:7px;align-items:center;color:var(--purple);font-size:11px;font-weight:800;letter-spacing:.025em}
#demoApp .card-label svg {width:17px;height:17px}
#demoApp .scenario-switch {display:flex;justify-content:center;gap:7px;margin:0 auto 27px;padding:6px;background:#e5eaf5;border-radius:13px;width:fit-content;max-width:100%}
#demoApp .scenario-switch button {padding:10px 17px;border-radius:9px;background:transparent;font-size:13px;font-weight:700;color:#5d6d89}
#demoApp .scenario-switch button[aria-pressed="true"] {background:white;color:var(--navy);box-shadow:var(--shadow-sm)}
#demoApp .demo-window {border:1px solid #d7deee;border-radius:24px;box-shadow:var(--shadow-md);background:white;overflow:hidden}
#demoApp .demo-toolbar {display:flex;align-items:center;justify-content:space-between;gap:12px;background:#e9edf7;padding:14px 22px;border-bottom:1px solid #d7deee}
#demoApp .demo-toolbar>span:last-child {font-size:10px;color:#66758e}
#demoApp .mini-brand {display:flex;align-items:center;gap:8px;font-size:12px;font-weight:850;letter-spacing:.03em}
#demoApp .mini-brand svg {color:var(--purple);width:18px;height:18px}
#demoApp .demo-grid {display:grid;grid-template-columns:.95fr 1fr 1.1fr;align-items:stretch}
#demoApp .demo-grid>section {padding:25px 22px;min-width:0}
#demoApp .demo-grid>section+section {border-left:1px solid #e5eaf3}
#demoApp .column-label {display:flex;align-items:center;gap:8px;color:#65758d;text-transform:uppercase;font-size:10px;letter-spacing:.04em;font-weight:800;margin-bottom:26px}
#demoApp .column-label span {color:#7188ab;background:#edf1f8;border-radius:5px;padding:2px 4px}
#demoApp .sender {display:flex;align-items:center;gap:10px;margin-bottom:24px}
#demoApp .sender .avatar {width:36px;height:36px;font-size:12px}
#demoApp .sender strong {display:block;font-size:12px;line-height:1.4}
#demoApp .sender small {display:block;color:#74859f;font-size:10px;margin-top:3px}
#demoApp .demo-grid h3 {font-size:19px;line-height:1.35;margin-bottom:18px}
#demoApp .message-text {font-size:13px;white-space:pre-line;line-height:1.85}
#demoApp .knowledge-source {margin-top:30px;background:#f8f9fe;border:1px solid #e6e8f6;border-radius:14px;padding:16px}
#demoApp .knowledge-source ul {margin:12px 0 0;padding-left:17px}
#demoApp .knowledge-source li {font-size:11px;color:#536583;margin-top:7px}
#demoApp .demo-decision {background:#fbfcff}
#demoApp fieldset {border:0;padding:0;margin:0;min-width:0}
#demoApp .route-option {display:flex;gap:10px;align-items:flex-start;padding:17px 13px;border:1px solid #dfe5f0;border-radius:14px;background:white;cursor:pointer;margin-bottom:12px;transition:border-color .2s,box-shadow .2s}
#demoApp .route-option:has(input:checked) {border-color:var(--blue);box-shadow:0 0 0 2px #2275ff16;background:#fff}
#demoApp .route-option input {margin:4px 0 0;accent-color:var(--blue);width:16px;height:16px;flex-shrink:0}
#demoApp .route-option strong {display:block;font-size:13px;line-height:1.45}
#demoApp .route-option small {display:block;font-size:11px;color:var(--muted);margin-top:7px;line-height:1.6}
#demoApp .route-option .route-count {display:inline-block;padding:2px 6px;background:#eff3fa;border-radius:5px;margin-top:10px;font-size:10px;color:#5e708e;font-weight:650}
#demoApp .reason {font-size:11px;background:#f0edfc;color:#65578c;padding:12px;border-radius:10px;margin-top:20px}
#demoApp .demo-actions {display:flex;flex-direction:column}
#demoApp .action-step {border:1px solid #e0e6f1;border-radius:12px;margin-bottom:9px;background:white}
#demoApp .action-step summary {display:flex;gap:9px;align-items:center;padding:13px 10px;cursor:pointer;list-style:none;font-size:12px;font-weight:700;line-height:1.4}
#demoApp .action-step summary::-webkit-details-marker {display:none}
#demoApp .action-step summary:after {content:'+';margin-left:auto;color:#7587a5;font-size:18px;font-weight:500;flex-shrink:0}
#demoApp .action-step[open] summary:after {content:'−'}
#demoApp .action-step[open] {border-color:#bad0ff}
#demoApp .action-number {display:grid;place-items:center;width:21px;height:21px;border-radius:7px;background:#eaf1ff;color:var(--blue);font-size:10px;flex-shrink:0}
#demoApp .action-detail {border-top:1px solid #edf0f7;padding:12px}
#demoApp .action-detail p {font-size:11px;white-space:pre-line;color:#566b89}
#demoApp .action-detail textarea {display:block;min-height:150px;width:100%;resize:vertical;border:1px solid #d5deed;border-radius:7px;padding:9px;color:#3a4e6b;background:#fbfcff;font-size:11px;line-height:1.65;margin:8px 0 12px}
#demoApp .preview-label {display:block;font-size:10px;font-weight:700;color:#6d7c92}
#demoApp .include-action {display:flex;gap:7px;align-items:center;margin-top:12px;font-size:10px;color:#556783;cursor:pointer}
#demoApp .include-action input {width:15px;height:15px;accent-color:var(--blue);margin:0}
#demoApp .action-step.excluded {opacity:.65}
#demoApp .demo-execute {margin-top:auto;padding-top:16px}
#demoApp .demo-execute .btn {width:100%;font-size:12px;min-height:44px;padding:10px}
#demoApp .demo-disclaimer {font-size:10px;margin-top:11px;line-height:1.55}
#demoApp .demo-status {font-size:11px;color:#007a54;margin-top:10px;min-height:18px}
#demoApp .static-demo {padding:30px;background:white;border:1px solid var(--line);border-radius:20px}
#demoApp .static-demo p {margin-top:16px}
@media(max-width:1050px) {
#demoApp .demo-grid>section {padding:22px 14px}
#demoApp .demo-grid {grid-template-columns:1fr 1fr 1.05fr}
#demoApp .demo-grid h3 {font-size:17px}
#demoApp .column-label {font-size:9px}
}
@media(max-width:800px) {
#demoApp .demo-grid {grid-template-columns:1fr 1fr}
#demoApp .demo-incoming {grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
#demoApp .demo-incoming .column-label {grid-column:1/-1;margin-bottom:18px}
#demoApp .demo-incoming .sender, #demoApp .demo-incoming h3, #demoApp .demo-incoming .message-text {grid-column:1}
#demoApp .demo-incoming .sender {margin-bottom:14px}
#demoApp .demo-incoming .knowledge-source {grid-column:2;grid-row:2/5;margin-top:0;align-self:start}
#demoApp .demo-grid>section {padding:24px}
#demoApp .demo-grid>.demo-decision {border-left:0;border-top:1px solid var(--line)}
#demoApp .demo-grid>.demo-actions {border-top:1px solid var(--line)}
#demoApp .column-label {font-size:10px}
}
@media(max-width:540px) {
#demoApp .demo-window {border-radius:18px}
#demoApp .scenario-switch {gap:3px;padding:5px;width:100%}
#demoApp .scenario-switch button {flex:1;padding:9px 7px;font-size:11px}
#demoApp .demo-toolbar {padding:13px}
#demoApp .demo-toolbar>span:last-child {font-size:9px}
#demoApp .demo-grid {display:block}
#demoApp .demo-grid>section {padding:23px 19px}
#demoApp .demo-grid>section+section {border-left:0;border-top:1px solid var(--line)}
#demoApp .demo-incoming {display:block}
#demoApp .demo-incoming .knowledge-source {margin-top:20px}
#demoApp .demo-grid h3 {font-size:20px}
#demoApp .message-text {font-size:14px}
#demoApp .knowledge-source li {font-size:12px}
#demoApp .route-option {padding:17px}
#demoApp .route-option strong {font-size:14px}
#demoApp .route-option small {font-size:12px}
#demoApp .reason {font-size:12px}
#demoApp .action-step summary {font-size:13px;padding:14px}
#demoApp .action-detail p, #demoApp .action-detail textarea {font-size:12px}
#demoApp .include-action {font-size:12px;padding:4px}
#demoApp .demo-execute .btn {font-size:14px}
#demoApp .demo-disclaimer {font-size:11px}
}
@media(prefers-reduced-motion:reduce) {
#demoApp .btn:hover {transform:none}
}
#demoApp .scenario-switch {gap:7px;margin-bottom:19px}
#demoApp .scenario-switch button {display:flex;align-items:center;justify-content:center;gap:8px;transition:background .3s,color .3s,box-shadow .3s,transform .2s}
#demoApp .scenario-switch button svg {width:17px;height:17px}
#demoApp .scenario-switch button:active {transform:scale(.98)}
#demoApp .scenario-context {text-align:center;max-width:750px;margin:0 auto 27px;scroll-margin-top:145px}
#demoApp .scenario-context strong {font-size:19px;line-height:1.4;letter-spacing:-.02em}
#demoApp .scenario-context p {font-size:13px;margin:7px 0 0}
#demoApp .route-option {animation:interactive-proposal-enter .5s cubic-bezier(.25,1,.5,1) both;animation-delay:var(--entry-delay,0ms);transition:border-color .3s,box-shadow .3s,background .3s,transform .3s}
#demoApp .route-option:has(input:checked) {box-shadow:0 0 0 2px #2275ff23,0 6px 18px #314ab10b}
#demoApp .route-option:active {transform:scale(.985)}
#demoApp .route-option .route-count {transition:background .3s,color .3s}
#demoApp .route-option:has(input:checked) .route-count {background:#eaf0ff;color:#365bb2}
#demoApp .action-step {animation:interactive-step-enter .4s cubic-bezier(.25,1,.5,1) backwards;animation-delay:var(--entry-delay,0ms);transition:border-color .3s,background .3s,box-shadow .3s}
#demoApp .action-step[open] .action-detail {animation:interactive-detail-enter .2s ease-out}
#demoApp .action-step[data-state="active"] {border-color:#90b7ff;background:#f4f8ff;box-shadow:0 0 0 2px #2275ff0e}
#demoApp .action-step[data-state="done"] {border-color:#b8e8d2;background:#f4fbf7}
#demoApp .action-step[data-state="done"] summary:after {color:#529276}
#demoApp .action-number {transition:background .3s,color .3s}
#demoApp .action-number.is-active {background:#e2ecff;position:relative}
#demoApp .action-number.is-active:after {content:'';height:11px;width:11px;border-radius:50%;border:1.5px solid #bdd1f6;border-top-color:#2275ff;animation:interactive-work-spin .8s linear infinite}
#demoApp .action-number.is-done {background:#00a66f;color:white;animation:interactive-check-pop .35s cubic-bezier(.2,1.5,.5,1)}
#demoApp .action-detail textarea:read-only {background:#f3f6fb;color:#718096}
#demoApp .include-action input:disabled {cursor:wait}
#demoApp .demo-execute {padding-top:18px}
#demoApp .demo-cancel {display:block;margin:10px auto 0;padding:6px 10px;background:none;color:#61708c;font-size:11px;text-decoration:underline;text-underline-offset:3px}
#demoApp .execution-box {border:1px solid #303959;border-radius:15px;padding:15px;background:var(--navy);color:white;margin-bottom:13px;transition:padding .4s,border-color .4s,background .4s,border-radius .4s;animation:interactive-step-enter .35s cubic-bezier(.25,1,.5,1)}
#demoApp .execution-heading {display:flex;gap:9px;align-items:center;font-size:12px;line-height:1.5}
#demoApp .execution-symbol {width:20px;height:20px;display:grid;place-items:center;flex-shrink:0}
#demoApp .execution-symbol.working:after {content:'';width:14px;height:14px;border:2px solid #555b87;border-top-color:#8ea8ff;border-radius:50%;animation:interactive-work-spin .8s linear infinite}
#demoApp .execution-symbol.done {color:#70edbe;animation:interactive-check-pop .35s cubic-bezier(.2,1.5,.5,1)}
#demoApp .execution-body {display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .4s cubic-bezier(.25,1,.5,1),opacity .25s}
#demoApp .execution-body>div {overflow:hidden;min-height:0}
#demoApp .execution-body p {color:#bcc5e2;font-size:11px;margin:9px 0 12px;line-height:1.5}
#demoApp .execution-track {height:3px;border-radius:4px;background:#3b4265;overflow:hidden;margin-bottom:2px}
#demoApp .execution-track span {display:block;height:100%;width:0;background:linear-gradient(90deg,#6486ff,#56e2b0);transition:width .3s ease-out}
#demoApp .execution-box.complete {border-radius:11px;padding:10px 13px;border-color:#2b5956;background:#122f30}
#demoApp .execution-box.complete .execution-body {grid-template-rows:0fr;opacity:0}
#demoApp .demo-result {margin-top:16px;padding-top:17px;border-top:1px solid #dfe8ee}
#demoApp .result-label {display:block;text-transform:uppercase;letter-spacing:.07em;font-size:9px;color:#577668;font-weight:800}
#demoApp .demo-result p {font-size:13px;color:#245347;margin:7px 0 15px;font-weight:650;line-height:1.6}
#demoApp .demo-result .text-link {font-size:12px;background:transparent;padding:0;color:#4c49b8;line-height:1.6;text-align:left}
#demoApp .demo-status {margin-top:10px;font-size:11px;line-height:1.6}
#demoApp .demo-status:empty {min-height:0;margin:0}
#demoApp .demo-grid h3 {margin-bottom:16px}
#demoApp .demo-toolbar {position:relative}
#demoApp .demo-toolbar:after {content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#2275ff,#7857ff,#00bd91);opacity:.7}
@keyframes interactive-proposal-enter {from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes interactive-step-enter {from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes interactive-detail-enter {from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes interactive-check-pop {0%{transform:scale(.2);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes interactive-work-spin {to{transform:rotate(360deg)}}
@media(max-width:800px) {
#demoApp .scenario-context {scroll-margin-top:145px}
#demoApp .scenario-context strong {font-size:18px}
#demoApp .demo-grid>section {padding:22px}
}
@media(max-width:540px) {
#demoApp .scenario-switch {padding:5px;gap:4px}
#demoApp .scenario-switch button {font-size:10px;padding:10px 5px;gap:5px;flex-direction:column}
#demoApp .scenario-switch button svg {width:18px;height:18px}
#demoApp .scenario-context strong {font-size:16px}
#demoApp .scenario-context p {font-size:12px;max-width:340px;margin:8px auto 0}
#demoApp .scenario-context {margin-bottom:22px}
#demoApp .demo-grid>section {padding:22px 19px}
#demoApp .execution-heading {font-size:13px}
#demoApp .demo-result p {font-size:14px}
#demoApp .demo-result .text-link {font-size:13px}
}
@media(prefers-reduced-motion:reduce) {
#demoApp .route-option, #demoApp .action-step, #demoApp .action-step[open] .action-detail, #demoApp .execution-box, #demoApp .action-number.is-done, #demoApp .execution-symbol.done {animation:none!important}
#demoApp .execution-body, #demoApp .execution-track span {transition:none!important}
#demoApp .scenario-switch button:active, #demoApp .route-option:active {transform:none}
}
#demoApp .route-option[data-tone="green"] input {accent-color:#008b60}
#demoApp .route-option[data-tone="green"]:has(input:checked) {border-color:#00a66f;box-shadow:0 0 0 2px #00a66f20,0 6px 18px #00764a0b}
#demoApp .route-option[data-tone="green"]:has(input:checked) .route-count {color:#00734f;background:#e5f8ee}
#demoApp .route-option[data-tone="red"] input {accent-color:#d83350}
#demoApp .route-option[data-tone="red"]:has(input:checked) {border-color:#e43c58;box-shadow:0 0 0 2px #e43c5820,0 6px 18px #a018360b}
#demoApp .route-option[data-tone="red"]:has(input:checked) .route-count {color:#b52f47;background:#fff0f3}
#demoApp .demo-grid[data-tone="green"] #demoRun:not(:disabled) {background:linear-gradient(120deg,#00875f,#00996a);box-shadow:0 10px 23px #00875f24}
#demoApp .demo-grid[data-tone="red"] #demoRun:not(:disabled) {background:linear-gradient(120deg,#c92949,#df3453);box-shadow:0 10px 23px #d42d4c24}
@media(max-width:540px) {
#demoApp .scenario-switch {display:grid;grid-template-columns:1fr 1fr;width:100%}
#demoApp .scenario-switch button {flex-direction:row;padding:11px 8px;font-size:11px}
#demoApp .scenario-context {scroll-margin-top:185px}
}
@media(min-width:541px) and (max-width:800px) {
#demoApp .scenario-switch {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,560px)}
#demoApp .scenario-switch button {padding:10px 12px;font-size:12px}
#demoApp .scenario-context {scroll-margin-top:185px}
}
#demoApp .action-step.excluded {background:#f3f5f9;border-style:dashed}
#demoApp .action-step.excluded summary>span:nth-child(2) {text-decoration:line-through;color:#75829a}
#demoApp .demo-decision .execution-box {padding:20px;border-radius:18px;margin:0 0 18px}
#demoApp .demo-decision .execution-heading {align-items:flex-start;font-size:14px;line-height:1.45}
#demoApp .demo-decision .execution-symbol {margin-top:1px}
#demoApp .demo-decision .execution-body p {margin:13px 0;font-size:11px}
#demoApp .execution-step-list {list-style:none;padding:15px 0 0;margin:17px 0 0;border-top:1px solid #35405e}
#demoApp .execution-step {display:flex;align-items:flex-start;gap:11px;padding:0 0 16px}
#demoApp .execution-step:last-child {padding-bottom:4px}
#demoApp .execution-step-marker {display:grid;place-items:center;width:22px;height:22px;flex-shrink:0;color:#6cf0b5;margin-top:1px}
#demoApp .execution-step:not([data-state="done"]) .execution-step-marker:after {content:'';height:13px;width:13px;border:2px solid #4c5879;border-top-color:#8babff;border-radius:50%;animation:interactive-work-spin .9s linear infinite}
#demoApp .execution-step strong {display:block;font-size:12px;color:#a9b8d6;line-height:1.5;font-weight:600;transition:color .3s}
#demoApp .execution-step small {display:block;font-size:10px;color:#7184a8;margin-top:3px;line-height:1.4}
#demoApp .execution-step[data-state="active"] strong {color:white}
#demoApp .execution-step[data-state="active"] small {color:#99b7ff}
#demoApp .execution-step[data-state="done"] .execution-step-marker {animation:interactive-check-pop .35s cubic-bezier(.2,1.5,.5,1);border-radius:50%;background:#124d40;color:#7af2bf}
#demoApp .execution-step[data-state="done"] strong {color:#e0f1eb}
#demoApp .execution-step[data-state="done"] small {color:#76c9a7}
#demoApp .execution-box[data-phase="preparing"] .execution-track {position:relative}
#demoApp .execution-box[data-phase="preparing"] .execution-track:after {content:'';position:absolute;inset:0;width:45%;background:linear-gradient(90deg,transparent,#839eff,transparent);animation:interactive-preparation-sweep 1.3s ease-in-out infinite}
#demoApp .demo-decision .execution-box.complete {padding:12px 14px;border-radius:12px}
#demoApp .execution-history {margin:0 0 18px}
#demoApp .history-label {font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#628474;margin-bottom:12px}
#demoApp .execution-receipt {background:white;border:1px solid #d7eadd;border-radius:12px;margin-bottom:9px;box-shadow:0 4px 12px #133b2405}
#demoApp .execution-receipt summary {display:flex;align-items:flex-start;gap:9px;padding:13px 11px;list-style:none;cursor:pointer;font-size:11px;font-weight:650;line-height:1.5}
#demoApp .execution-receipt summary::-webkit-details-marker {display:none}
#demoApp .execution-receipt summary:after {content:'+';margin-left:auto;color:#699984;font-size:15px;line-height:1.2}
#demoApp .execution-receipt[open] summary:after {content:'−'}
#demoApp .receipt-check {color:#008a5b;flex-shrink:0}
#demoApp .execution-receipt p {font-size:11px;padding:12px;border-top:1px solid #e5eee7;white-space:pre-line;line-height:1.7;margin:0}
#demoApp .execution-back {font-size:11px;padding:7px 0;background:none;color:#62668e}
#demoApp .execution-box:focus-visible {outline:3px solid #7e8ef1;outline-offset:4px}
@keyframes interactive-preparation-sweep {from{transform:translateX(-100%)}to{transform:translateX(320%)}}
@media(max-width:540px) {
#demoApp .demo-decision .execution-heading {font-size:16px}
#demoApp .execution-step strong {font-size:14px}
#demoApp .execution-step small {font-size:11px}
#demoApp .execution-step {padding-bottom:19px}
#demoApp .execution-receipt summary {font-size:13px;padding:14px}
#demoApp .execution-receipt p {font-size:12px}
#demoApp .execution-back {font-size:12px}
}
@media(prefers-reduced-motion:reduce) {
#demoApp .execution-step-marker, #demoApp .execution-track:after {animation:none!important}
#demoApp .execution-step strong {transition:none!important}
}
#demoApp .demo-advance {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;padding-top:2px}
#demoApp .demo-advance>span {font-size:11px;line-height:1.6;color:#66738b}
#demoApp .demo-result .demo-advance .text-link {font-size:11px;white-space:nowrap;padding:4px 0}
#demoApp .knowledge-source .knowledge-hint {font-size:12px;line-height:1.65;color:#4e6180;margin:11px 0 0}
#demoApp .supporting-details {margin-top:12px}
#demoApp .supporting-details>summary {display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;font-size:11px;line-height:1.6;font-weight:650;color:#6a648d;padding:3px 0}
#demoApp .supporting-details>summary::-webkit-details-marker {display:none}
#demoApp .supporting-details>summary:after {content:'+';margin-left:auto;flex-shrink:0;color:#7d77a0;font-size:15px}
#demoApp .supporting-details[open]>summary:after {content:'−'}
#demoApp .reason-details {margin-top:14px}
#demoApp .reason-details .reason {margin-top:9px}
#demoApp .action-detail textarea {min-height:185px;font-size:12px;line-height:1.75;background:#fcfdff}
#demoApp .action-detail .preview-label {font-weight:550;font-size:10px}
#demoApp .include-action {margin-top:9px}
#demoApp .demo-grid .demo-actions>h3.sr-only {margin:0}
#demoApp .route-option small {font-size:11px;line-height:1.6}
#demoApp .demo-status.sr-only {margin:0;min-height:0}
@media(max-width:540px) {
#demoApp .action-detail textarea {font-size:13px;min-height:190px}
#demoApp .knowledge-source .knowledge-hint {font-size:13px}
#demoApp .supporting-details>summary {font-size:12px}
#demoApp .include-action {font-size:11px}
}
#demoApp .btn { min-height: 50px; font-size: 15px; }
#demoApp .demo-toolbar { padding: 16px 22px; }
#demoApp .demo-toolbar > span:last-child { font-size: 12px; }
#demoApp .scenario-switch button { font-size: 14px; min-height: 46px; }
#demoApp .scenario-context strong { font-size: 20px; }
#demoApp .scenario-context p { font-size: 15px; max-width: 680px; margin: 8px auto 26px; }
#demoApp .demo-grid { grid-template-columns: .95fr 1fr 1.15fr; }
#demoApp .demo-grid > section { padding: 25px 22px; }
#demoApp .column-label { font-size: 11px; letter-spacing: .025em; }
#demoApp .sender strong { font-size: 14px; }
#demoApp .sender small { font-size: 12px; }
#demoApp .message-text { font-size: 15px; line-height: 1.75; }
#demoApp .route-option { padding: 16px 12px; }
#demoApp .route-option strong { font-size: 14px; }
#demoApp .route-option small { font-size: 13px; line-height: 1.55; }
#demoApp .knowledge-hint { font-size: 14px; }
#demoApp .knowledge-source li { font-size: 13px; }
#demoApp .supporting-details > summary { font-size: 13px; min-height: 32px; }
#demoApp .action-step summary { font-size: 14px; }
#demoApp .action-detail textarea { font-size: 14px; min-height: 205px; line-height: 1.65; }
#demoApp .action-detail .preview-label, #demoApp .include-action { font-size: 12px; }
#demoApp .action-detail p { font-size: 14px; }
#demoApp .demo-disclaimer { font-size: 12px; line-height: 1.65; }
#demoApp .execution-step strong, #demoApp .execution-receipt summary { font-size: 14px; }
#demoApp .execution-step small, #demoApp .execution-receipt p { font-size: 12px; }
@media (max-width: 1100px) {
#demoApp .demo-grid { grid-template-columns: 1fr 1fr; }
#demoApp .demo-incoming { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
#demoApp .demo-incoming .column-label, #demoApp .demo-incoming .sender { grid-column: 1; }
#demoApp .demo-incoming .knowledge-source { grid-column: 2; grid-row: 1 / 5; align-self: start; margin: 0; }
#demoApp .demo-incoming .message-text { grid-column: 1; }
#demoApp .demo-grid > .demo-decision { border-left: 0; border-top: 1px solid #e5eaf3; }
#demoApp .demo-grid > .demo-actions { border-top: 1px solid #e5eaf3; }
}
@media (max-width: 620px) {
#demoApp .demo-grid { grid-template-columns: 1fr; }
#demoApp .demo-incoming { display: block; }
#demoApp .demo-incoming .knowledge-source { margin-top: 20px; }
#demoApp .demo-grid > section { padding: 24px 18px; border-left: 0; }
#demoApp .demo-toolbar { padding: 14px 16px; }
#demoApp .demo-toolbar > span:last-child { font-size: 10px; max-width: 175px; text-align: right; }
#demoApp .scenario-switch button { font-size: 12px; min-height: 46px; }
#demoApp .scenario-context strong { font-size: 18px; }
#demoApp .scenario-context p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
#demoApp .btn { transition: none; }
#demoApp .btn:hover { transform: none; }
}

/* Current PAI design: an optional, quiet entry and the familiar app inside. */
.optional-app-demo { margin-top: 32px; scroll-margin-top: 105px; }
.optional-app-demo .try-demo > summary { padding: 22px 26px; }
.optional-app-demo .try-demo > summary > strong { font-size: 20px; line-height: 1.4; }
.interactive-demo-content { padding: 26px; }
#demoApp {
  --text: var(--ink); --purple: #6d51dc; --blue-2: #225cf1;
  --gradient: linear-gradient(120deg,#225cf1,#2876ff);
  --shadow-sm: 0 2px 6px #1825480a;
  --shadow-md: 0 12px 32px #1825480b;
  color: var(--ink); font-family: inherit;
}
#demoApp [hidden] { display: none !important; }
#demoApp button { border: 0; font-family: inherit; }
#demoApp .route-option { color: var(--ink); margin-top: 0; }
#demoApp .scenario-switch { flex-wrap: wrap; background: #edf1f8; margin-bottom: 14px; }
#demoApp .scenario-switch button { font-weight: 600; }
#demoApp .scenario-switch button[aria-pressed="true"] { color: var(--blue); }
#demoApp .demo-howto { text-align: center; font-size: 14px; margin: 0 0 25px; line-height: 1.6; }
#demoApp .scenario-context { margin-bottom: 24px; }
#demoApp .scenario-context strong { font-size: 18px; font-weight: 600; }
#demoApp .scenario-context p { font-size: 14px; margin: 7px auto 0; max-width: 660px; }
#demoApp .demo-window { border-radius: 18px; }
#demoApp .demo-toolbar { padding: 12px 20px; background: #eff3f9; }
#demoApp .demo-toolbar::after { background: linear-gradient(90deg,#225cf1,#a29bff); }
#demoApp .mini-brand { font-size: 15px; font-weight: 650; gap: 9px; }
#demoApp .mini-brand pai-logo { --pai-size: 30px; }
#demoApp .demo-grid h3 { font-size: 18px; letter-spacing: -.02em; }
#demoApp .sender strong { font-size: 14px; }
#demoApp .message-text { font-size: 14px; line-height: 1.7; }
#demoApp .card-label { font-size: 12px; line-height: 1.5; }
#demoApp .card-label svg { width: 17px; height: 17px; }
#demoApp .route-option strong { font-size: 14px; }
#demoApp .route-option small { font-size: 13px; }
#demoApp .route-count { font-size: 11px; }
#demoApp .action-detail textarea { font-family: inherit; font-size: 14px; line-height: 1.65; }
#demoApp .action-step summary { font-size: 14px; }
#demoApp .include-action { min-height: 32px; font-size: 12px; }
#demoApp .demo-execute .btn { min-height: 48px; font-weight: 650; font-size: 14px; border-radius: 10px; }
#demoApp .demo-execute .btn:disabled { background: #eef1f7; color: #67758b; box-shadow: none; }
#demoApp .demo-cancel { font-size: 13px; min-height: 36px; }
#demoApp .text-link { cursor: pointer; }
#demoApp .execution-back { min-height: 40px; }
#demoApp .execution-box { scroll-margin-top: 115px; }
.interactive-demo-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-top: 24px; }
.interactive-demo-footer p { max-width: 580px; font-size: 13px; line-height: 1.6; }
.interactive-demo-footer .quiet-link { font-size: 14px; }
.demo-fallback { font-size: 16px; line-height: 1.7; }
@media (max-width: 680px) {
  .optional-app-demo .try-demo > summary { padding: 20px; }
  .optional-app-demo .try-demo > summary > strong { font-size: 18px; }
  .interactive-demo-content { padding: 18px 10px; }
  #demoApp .scenario-switch { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  #demoApp .scenario-switch button { min-height: 48px; padding: 10px 6px; font-size: 12px; gap: 6px; }
  #demoApp .demo-grid { grid-template-columns: minmax(0,1fr); }
  #demoApp .demo-incoming { display: block; }
  #demoApp .demo-incoming .knowledge-source { margin-top: 20px; }
  #demoApp .demo-grid > section { padding: 24px 18px; border-left: 0; }
  #demoApp .demo-grid > section + section { border-top: 1px solid #e5eaf3; }
  #demoApp .column-label { margin-bottom: 18px; }
  #demoApp .action-detail textarea { font-size: 16px; }
  #demoApp .demo-howto { max-width: 300px; margin-inline: auto; }
  .interactive-demo-footer { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #demoApp *, #demoApp *::before, #demoApp *::after { animation: none !important; transition: none !important; }
}