.ext-demo { --ext-copper: #a45f35; --ext-ink: #24423d; --ext-muted: #718177; }
.ext-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin:0 0 15px; }
.ext-eyebrow { font:600 10px var(--mono); letter-spacing:.11em; color:var(--ext-copper); }
.ext-heading h1 { font-size:34px; letter-spacing:-.045em; margin:9px 0; line-height:1.15; }
.ext-heading p { margin:0; font-size:13px; color:var(--ext-muted); }
.ext-session-actions { display:flex; gap:9px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.ext-live-pill { font-size:10px; white-space:nowrap; border:1px solid #d4dfd6; color:#6b7d73; padding:6px 10px; border-radius:20px; }
.ext-live-pill.live { color:#276144; background:#e8f4ec; border-color:#bddbc8; }
.ext-live-pill.live::before { content:""; display:inline-block; width:6px; height:6px; background:#43815f; border-radius:50%; margin-right:6px; }
.ext-demo-note { font-size:10px; color:#698076; padding:10px 0 18px; }
.ext-sequence { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 20px; border:1px solid #dbe4db; border-radius:10px; margin-bottom:20px; background:#f4f7f2; }
.ext-sequence > div { display:flex; align-items:center; gap:10px; }
.ext-sequence > div > span { width:28px; height:28px; display:grid; place-items:center; font:10px var(--mono); border:1px solid #d4ded2; border-radius:50%; color:#819081; }
.ext-sequence strong { display:block; font-size:11px; color:#607463; }
.ext-sequence small { display:block; font-size:10px; color:#819081; margin-top:3px; }
.ext-sequence > b { font-weight:400; color:#9caf9d; }
.ext-sequence .active > span { background:#305842; color:white; border-color:#305842; box-shadow:0 0 0 4px #e0eadd; }
.ext-sequence .active strong { color:#25472f; }
.ext-sequence .complete > span { color:#305842; background:#e6eee1; }
.ext-top-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr); gap:20px; align-items:stretch; margin-bottom:20px; }
.ext-demo .panel { padding:22px; min-width:0; }
.ext-panel-head { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-bottom:18px; }
.ext-panel-head h2 { font-size:18px; letter-spacing:-.025em; margin:6px 0 0; }
.ext-small { color:var(--ext-muted); font-size:10px; line-height:1.6; }
.ext-machine-state { font:11px var(--mono); text-transform:uppercase; color:#688074; padding:6px 10px; background:#eef3ec; border-radius:5px; }
.ext-machine-state[data-state=running] { color:#286348; background:#e3f2e7; }
.ext-machine-state[data-state=stopped] { color:#a94c34; background:#faebe5; }
.ext-scene { background:#15373e; border:1px solid #264b4f; border-radius:9px; overflow:hidden; color:#a5bfb4; }
.ext-machine-svg { width:100%; display:block; }
.ext-labels { fill:#9fb9ad; font:9px var(--mono); letter-spacing:.065em; }
.ext-zone-values { fill:#eee2c2; font:11px var(--mono); }
.ext-barrel-zones rect { fill:#624f3d; stroke:#b58960; stroke-width:1; }
.ext-scene-footer { display:flex; justify-content:space-between; gap:10px; padding:10px 14px; background:#123137; font:9px var(--mono); line-height:1.5; }
.ext-scene.is-offline { opacity:.65; }
.ext-scene.is-running .ext-drive { transform-origin:83px 185px; animation:ext-spin 2s linear infinite; }
.ext-scene.is-running .ext-pellets { animation:ext-feed 1.3s ease-in infinite; }
.ext-scene.is-running .ext-screw { stroke-dasharray:9 4; animation:ext-flow 1s linear infinite; }
.ext-scene.is-running .ext-extrudate { stroke-dasharray:17 3; animation:ext-flow 1s linear infinite; }
.ext-scene.is-running .ext-water { animation:ext-cooling 2s ease-in-out infinite alternate; }
.ext-scene.is-heating .ext-barrel-zones rect { fill:#805939; }
.ext-scene.has-alarm { border-color:#b46d4e; }
.ext-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:18px; }
.ext-metrics > div { padding:11px 12px; border-bottom:1px solid #edf0e9; border-right:1px solid #edf0e9; }
.ext-metrics > div:nth-child(4n) { border-right:0; }
.ext-metrics > div:nth-child(n+5) { border-bottom:0; }
.ext-metrics span { display:block; font-size:10px; color:#748675; margin-bottom:7px; }
.ext-metrics strong { display:flex; align-items:baseline; gap:4px; font-size:22px; font-weight:500; letter-spacing:-.03em; }
.ext-metrics b { font-weight:500; }
.ext-metrics small { font:10px var(--mono); color:#8a978a; }
.ext-metrics .warning { background:#fcf3e8; border-radius:5px; color:#a35430; }
.ext-controller-note { font-size:10px; color:#68816e; margin-top:16px; line-height:1.6; border-left:2px solid #bdcfbb; padding-left:10px; }
.ext-controller-note.alarm { color:#a04e33; border-color:#bd6b47; }
.ext-rule-dot { flex:none; width:8px; height:8px; border-radius:50%; background:#b5c0b2; }
.ext-rule-dot.armed { background:#4c875a; box-shadow:0 0 0 4px #edf4e7; }
.ext-automation-state { background:#f1f5ed; padding:12px; border-radius:6px; color:#526a51; font-size:11px; line-height:1.6; min-height:57px; }
.ext-rule { display:flex; align-items:flex-start; gap:11px; padding:17px 0; border-bottom:1px solid #e8eee4; }
.ext-rule > div { flex:1; min-width:0; }
.ext-rule-number { font:10px var(--mono); color:#9aa98f; margin-top:3px; }
.ext-rule header { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.ext-rule h3 { margin:0; font-size:12px; }
.ext-rule header span { font:9px var(--mono); color:#8a9982; white-space:nowrap; }
.ext-rule.acted header span { color:#427650; }
.ext-rule p { font-size:10px; line-height:1.6; color:#74816e; margin:7px 0; }
.ext-rule strong { font-weight:500; display:block; font-size:11px; line-height:1.5; }
.ext-rule small { display:block; color:#87927f; font-size:9px; line-height:1.6; margin-top:6px; }
.ext-arm-controls { display:flex; gap:8px; margin-top:16px; }
.ext-rules > p { margin:14px 0 0; }
.ext-middle-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr); gap:20px; margin-bottom:20px; }
.ext-chart-tabs { display:flex; flex-wrap:wrap; gap:4px; }
.ext-chart-tabs button { padding:6px 10px; background:transparent; color:#7b8b72; border:1px solid transparent; border-radius:5px; font-size:10px; cursor:pointer; }
.ext-chart-tabs button[aria-pressed=true] { background:#eef3e9; border-color:#dce7d2; color:#3e633b; }
.ext-chart-shell { display:flex; margin-top:16px; align-items:stretch; gap:9px; }
.ext-chart-axis { flex:none; width:45px; display:flex; flex-direction:column; justify-content:space-between; padding:9px 0; font:9px var(--mono); color:#9ba48e; }
.ext-chart-shell svg { min-width:0; flex:1; width:100%; overflow:visible; }
.ext-grid-line { stroke:#e9eee3; stroke-width:1; }
.ext-threshold { fill:none; stroke:#c8b59c; stroke-width:1; stroke-dasharray:3 5; }
.ext-trend-line { fill:none; stroke:#a46336; stroke-width:2.5; stroke-linejoin:round; }
.ext-target { fill:none; stroke:#779b79; stroke-width:1.5; stroke-dasharray:6 4; }
.ext-chart-key { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:9px; color:#87967b; padding:10px 0 16px; }
.ext-chart-key > span:first-child { color:#a4653a; }
.ext-output { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #e8eee2; padding-top:16px; gap:12px; }
.ext-output span { display:block; color:#819076; font-size:10px; margin-bottom:8px; }
.ext-output strong { font-size:20px; font-weight:500; letter-spacing:-.035em; }
.ext-output b { font-weight:500; }
.ext-output small { font:10px var(--mono); color:#87967c; }
.ext-flag-count { color:#9a6239; font:10px var(--mono); }
.ext-person { display:flex; gap:11px; align-items:center; padding:4px 0 18px; border-bottom:1px solid #e8eee3; }
.ext-person > span { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#e9ede0; font:12px var(--mono); color:#647a50; }
.ext-person strong { display:block; font-size:12px; font-weight:600; }
.ext-person small { display:block; color:#8e9b81; font-size:10px; margin-top:5px; }
.ext-flag { border:1px solid #dfe8d6; border-radius:6px; padding:13px; margin-top:12px; }
.ext-flag.open { border-color:#ead5b8; background:#fdf8ef; }
.ext-flag > div { display:flex; justify-content:space-between; gap:10px; color:#a16d3b; font:9px var(--mono); }
.ext-flag p { font-size:11px; line-height:1.6; margin:9px 0; }
.ext-flag small { display:block; font-size:9px; color:#8a9a7e; margin-top:5px; }
.ext-flag .text-button { margin-top:12px; font-size:10px; }
.ext-empty { padding:20px 0; font-size:11px; color:#92a087; line-height:1.7; }
.ext-actions { margin-bottom:20px; }
.ext-control-grid { display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; align-items:end; }
.ext-control-grid form label { display:block; font-size:10px; color:#6f8661; margin-bottom:8px; }
.ext-control-grid form label small { color:#a0ac94; margin-left:8px; }
.ext-control-grid form > div { display:flex; gap:7px; }
.ext-control-grid input { min-width:0; width:85px; padding:8px; border:1px solid #d5dfc9; background:white; border-radius:5px; color:#415d34; font:13px var(--mono); }
.ext-control-buttons { display:flex; flex-wrap:wrap; gap:7px; }
.ext-demo .ext-stop { color:#a94429; background:#fff1e9; border:1px solid #dfaf94; }
.ext-operation-notice { background:#f4f7ef; color:#6d8261; padding:12px 14px; margin-top:16px; border-radius:6px; font-size:11px; line-height:1.7; }
.ext-operation-notice.is-error { color:#a05534; background:#fff2e9; }
.ext-fixtures { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:0 4px 20px; }
.ext-fixtures p { font-size:10px; color:#8c9b82; margin:6px 0 0; }
.ext-fixtures > div:last-child { display:flex; gap:7px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.ext-fixtures label { font-size:10px; color:#788b6b; display:flex; align-items:center; gap:6px; }
.ext-fixtures select { width:58px; padding:6px; border-radius:4px; border:1px solid #d4dfc7; color:#506d3d; background:white; }
.ext-bottom-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr); gap:20px; }
.ext-bottom-grid ol { list-style:none; margin:0; padding:0; }
.ext-evidence li { display:flex; gap:11px; align-items:flex-start; padding:14px 0; border-bottom:1px solid #e9eee3; }
.ext-evidence li > div { min-width:0; flex:1; }
.ext-evidence li > button { flex:none; font-size:10px; margin-top:2px; }
.ext-action-mark { flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font-size:11px; }
.ext-action-mark.completed { color:#528057; background:#edf4e6; }
.ext-action-mark.held { color:#ac6b32; background:#fcf0dd; }
.ext-trail-title { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ext-trail-title strong { font-size:11px; font-weight:600; }
.ext-trail-title span { font:8px var(--mono); color:#9aa98e; }
.ext-evidence p { font-size:10px; color:#8d9c80; line-height:1.5; margin:6px 0; }
.ext-evidence small { font:9px var(--mono); color:#9da98f; line-height:1.6; }
.ext-events li { display:flex; gap:12px; border-bottom:1px solid #edf1e7; padding:12px 0; }
.ext-events time { width:38px; flex:none; font:9px var(--mono); color:#a3ac97; }
.ext-events li span { font-size:10px; color:#7b8c6f; line-height:1.6; }
.ext-assumptions { margin:24px 0 8px; font-size:11px; color:#849576; line-height:1.8; }
.ext-assumptions summary { cursor:pointer; }
.ext-assumptions ul { margin-top:12px; padding-left:18px; }
.ext-demo button:focus-visible, .ext-demo input:focus-visible, .ext-demo select:focus-visible, .ext-assumptions summary:focus-visible { outline:2px solid #8f6e3e; outline-offset:3px; }
@keyframes ext-spin { to { transform:rotate(360deg); } }
@keyframes ext-feed { to { transform:translateY(16px); opacity:.3; } }
@keyframes ext-flow { to { stroke-dashoffset:-40; } }
@keyframes ext-cooling { to { transform:translateY(2px); opacity:.55; } }
@media (max-width:1200px) { .ext-top-grid, .ext-middle-grid, .ext-bottom-grid { grid-template-columns:minmax(0,1fr); } .ext-heading h1 { font-size:29px; } .ext-fixtures { align-items:flex-start; flex-direction:column; } .ext-fixtures > div:last-child { justify-content:flex-start; } .ext-rules [data-ext-rules] { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } .ext-rule header { align-items:flex-start; flex-direction:column; } }
@media (max-width:650px) { .ext-heading { flex-direction:column; align-items:flex-start; gap:16px; } .ext-heading h1 { font-size:28px; } .ext-session-actions { justify-content:flex-start; } .ext-sequence { display:grid; grid-template-columns:1fr 1fr; gap:18px 12px; padding:16px; } .ext-sequence > b { display:none; } .ext-sequence strong { font-size:10px; } .ext-sequence small { font-size:9px; } .ext-demo .panel { padding:16px; } .ext-panel-head { gap:8px; align-items:flex-start; } .ext-panel-head h2 { font-size:16px; } .ext-panel-head > .ext-small { max-width:120px; text-align:right; font-size:9px; } .ext-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .ext-metrics > div { padding:12px 8px; } .ext-metrics > div:nth-child(2n) { border-right:0; } .ext-metrics > div:nth-child(n+5) { border-bottom:1px solid #edf0e9; } .ext-metrics > div:nth-child(n+7) { border-bottom:0; } .ext-metrics strong { font-size:23px; } .ext-scene-footer { flex-direction:column; font-size:8px; gap:4px; } .ext-rules [data-ext-rules] { display:block; } .ext-rule header { flex-direction:row; align-items:baseline; } .ext-control-grid { grid-template-columns:1fr; gap:18px; } .ext-control-grid form { max-width:230px; } .ext-output strong { font-size:18px; } .ext-output span { font-size:9px; } .ext-evidence li { flex-wrap:wrap; } .ext-evidence li > div { flex-basis:calc(100% - 34px); } .ext-evidence li > button { margin-left:33px; } .ext-chart-axis { width:38px; font-size:8px; } }
@media (prefers-reduced-motion:reduce) { .ext-scene *, .ext-scene *::before { animation:none !important; transition:none !important; } }