/* Four illustrative interfaces for the same sample workflow. */
.demo-tour-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:22px 0 14px;font-size:13px;color:#e2eaff}
.demo-tour-bar p{margin:0}
.demo-tour-bar button{display:flex;align-items:center;gap:9px;min-height:44px;padding:8px 12px;background:transparent;color:inherit;border:1px solid #9ab3ed;font:inherit;white-space:nowrap}
.demo-tour-bar button:hover{background:#ffffff14}
.demo-tour-bar button svg{width:14px;height:14px;fill:currentColor}
.demo-tour-bar button[hidden]{display:none}
.surface-row{flex-wrap:wrap;gap:0 16px;padding-inline:8px 16px}
.surface-picker{flex-wrap:nowrap;max-width:100%}
.surface-picker button{min-height:46px;font-size:13px;padding-inline:14px}
.surface-row>.mono{padding-block:8px;font-size:10px}
.stage-panel[data-demo-surface="cli"]{background:#fafaf8;color:var(--ink);font-family:var(--mono)}
.stage-panel[data-demo-surface="cli"] .assistant-message{display:block}
.stage-panel[data-demo-surface="cli"] .assistant-avatar,.stage-panel[data-demo-surface="cli"] .assistant-label{display:none}
.stage-panel[data-demo-surface="cli"] .cli-prompt{color:var(--ink);border-color:var(--line)}
.stage-panel[data-demo-surface="cli"] .cli-prompt>span{color:var(--blue)}
.stage-panel[data-demo-surface="cli"] .cli-prompt .demo-note{color:var(--muted)}
.stage-panel[data-demo-surface="cli"] .assistant-copy{font-family:var(--mono);font-size:13px}
.stage-panel[data-demo-surface="cli"] .demo-stats,.stage-panel[data-demo-surface="cli"] .change-table{background:transparent}
.demo-view-frame{margin:-28px -28px 24px;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);font-size:12px;background:var(--warm)}
.demo-view-frame span:last-child{font-size:11px;color:var(--muted)}
.demo-ide-file{margin:0 0 22px;border-bottom:1px solid var(--line);padding-bottom:20px}
.demo-ide-file header{display:flex;gap:10px;align-items:center;margin-bottom:12px;font-size:12px}
.demo-ide-file header .icon{width:15px;height:15px;color:var(--blue)}
.demo-editor-lines{font-family:var(--mono);font-size:12px;line-height:1.8;color:var(--muted);counter-reset:editor}
.demo-editor-lines>div{counter-increment:editor;display:flex;gap:18px}
.demo-editor-lines>div::before{content:counter(editor);color:#727870;min-width:12px;text-align:right;flex:none}
.demo-editor-lines strong{font-weight:400;color:var(--ink)}
.demo-ide-assistant{display:flex;gap:9px;align-items:center;font-size:12px;margin-bottom:18px;color:var(--blue)}
.demo-ide-assistant .icon{width:15px;height:15px}
.stage-panel[data-demo-surface="ide"] .user-bubble{max-width:90%}
.stage-panel[data-demo-surface="terminal"]{background:#191f2b;color:#edf1f8;font-family:var(--mono)}
.stage-panel[data-demo-surface="terminal"] .demo-view-frame{background:#242c3b;border-color:#4a566b;color:#edf1f8}
.stage-panel[data-demo-surface="terminal"] .demo-view-frame span:last-child{color:#bdc9dd}
.demo-terminal-menu{display:flex;gap:8px 16px;flex-wrap:wrap;margin-bottom:22px;border-bottom:1px solid #4a566b;padding-bottom:14px;color:#bdc9dd;font-size:12px}
.demo-terminal-menu .current{color:#fff;border-bottom:2px solid #89aaff;padding-bottom:4px}
.stage-panel[data-demo-surface="terminal"] .assistant-message{display:block}
.stage-panel[data-demo-surface="terminal"] .assistant-avatar{display:none}
.stage-panel[data-demo-surface="terminal"] .assistant-label{color:#fff}
.stage-panel[data-demo-surface="terminal"] .assistant-label>span,.stage-panel[data-demo-surface="terminal"] .demo-note{color:#bdc9dd}
.stage-panel[data-demo-surface="terminal"] .assistant-copy{color:#edf1f8;font-family:var(--mono);font-size:13px}
.stage-panel[data-demo-surface="terminal"] .cli-prompt{color:#edf1f8;border-color:#4a566b}
.stage-panel[data-demo-surface="terminal"] .cli-prompt>span{color:#a9c2ff}
.stage-panel[data-demo-surface="terminal"] .demo-stats,.stage-panel[data-demo-surface="terminal"] .change-table,.stage-panel[data-demo-surface="terminal"] .demo-evidence-list{background:#202938;border-color:#4a566b}
.stage-panel[data-demo-surface="terminal"] .demo-stat,.stage-panel[data-demo-surface="terminal"] .change-table>div,.stage-panel[data-demo-surface="terminal"] .demo-evidence-row{border-color:#4a566b}
.stage-panel[data-demo-surface="terminal"] .demo-stat b{color:#fff}
.stage-panel[data-demo-surface="terminal"] .demo-stat small,.stage-panel[data-demo-surface="terminal"] .change-table>div>span,.stage-panel[data-demo-surface="terminal"] .row-sub,.stage-panel[data-demo-surface="terminal"] .dim{color:#bdc9dd}
.stage-panel[data-demo-surface="terminal"] .demo-callout{background:#353426;color:#f3e2b9}
.stage-panel[data-demo-surface="terminal"] .demo-callout.neutral,.stage-panel[data-demo-surface="terminal"] .demo-callout.success{background:#28374c;color:#e3ecff}
.stage-panel[data-demo-surface="terminal"] .demo-text-btn{color:#bfd1ff}
.stage-panel[data-demo-surface="terminal"] .demo-action.secondary{background:transparent;color:#bfd1ff;border-color:#89aaff}
.stage-panel[data-demo-surface="terminal"] :focus-visible{outline-color:#bfd1ff}
.demo-ide-file,.demo-view-frame,.demo-terminal-menu{animation:none}
@media(max-width:719px){
 .demo-tour-bar{align-items:flex-start;font-size:12px;gap:12px}
 .demo-tour-bar p{max-width:20ch;padding-top:7px}
 .surface-row{padding:0;display:block}
 .surface-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
 .surface-picker button{justify-content:center;padding:10px 4px;font-size:12px;gap:5px}
 .surface-picker button .icon{display:none}
 .surface-row>.mono{display:block;font-family:var(--font);font-size:10px;padding:10px 14px;border-top:1px solid var(--line)}
 .demo-view-frame{margin:-21px -14px 20px;padding:12px 14px;flex-wrap:wrap;gap:5px}
 .demo-terminal-menu{gap:7px 12px;font-size:11px}
 .demo-editor-lines{font-size:11px}
 .demo-editor-lines>div{gap:10px}
 .stage-panel[data-demo-surface="cli"] .assistant-copy,.stage-panel[data-demo-surface="terminal"] .assistant-copy{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.stage-panel{animation:none}}
@media(min-width:1100px){
 .demo-ide-shell{display:grid;grid-template-columns:minmax(150px,.65fr) minmax(0,2fr);gap:22px}
 .demo-ide-file{border-bottom:0;border-right:1px solid var(--line);padding:0 18px 0 0;margin:0;min-width:0}
 .demo-ide-conversation{min-width:0}
 .demo-ide-file header{font-size:11px;overflow-wrap:anywhere;gap:6px}
 .demo-ide-file header .icon{flex:none}
 .demo-editor-lines{font-size:11px}
 .demo-editor-lines>div{gap:8px}
 .stage-panel[data-demo-surface="ide"] .assistant-message{display:block}
 .stage-panel[data-demo-surface="ide"] .assistant-avatar{display:none}
}