.cmd-demo { margin-top: 36px; --cmd-green:#146d69; --cmd-line:#dfe7e1; --cmd-red:#c74f38; }
.cmd-demo [hidden] { display:none!important; }
.cmd-monitor { position:relative; }
.cmd-frame { display:block; width:100%; filter:drop-shadow(0 25px 22px #172e3c16); }
.cmd-screen { position:absolute; left:7.55%; top:4.5%; width:84.8%; height:74.25%; display:grid; grid-template-columns:18% 82%; overflow:hidden; background:#f7faf7; container-type:inline-size; color:#172e3c; text-align:left; border:1px solid #15292e; }
.cmd-sidebar { background:linear-gradient(145deg,#073239,#075455); color:#dfefea; display:flex; flex-direction:column; min-width:0; padding:12% 7%; }
.cmd-brand img { width:100%; height:auto; }
.cmd-brand>span { display:block; letter-spacing:.32em; font-size:.72cqw; padding:10% 6% 16%; color:#91c4bd; }
.cmd-view-list { display:grid; gap:1cqw; }
.cmd-view-item { display:flex; align-items:center; gap:1cqw; text-align:left; padding:1.1cqw .9cqw; border:0; border-radius:.6cqw; background:transparent; color:inherit; font-size:1.15cqw; white-space:nowrap; }
.cmd-view-item>span { font-size:1.6cqw; }
.cmd-view-item.is-current { background:#ffffff22; color:white; }
.cmd-site { margin-top:auto; font-size:.8cqw; letter-spacing:.08em; padding:.7cqw; }
.cmd-site small,.cmd-site>span { display:block; font-size:.85cqw; letter-spacing:0; margin-top:.8cqw; color:#9bc6c0; }
.cmd-site>span { color:#c2e6dd; }
.cmd-workspace { padding:1.7cqw 2.1cqw; overflow:hidden; min-width:0; display:flex; flex-direction:column; }
.cmd-heading { display:flex; justify-content:space-between; align-items:center; gap:1cqw; margin-bottom:1.4cqw; }
.cmd-kicker { font-size:.72cqw; letter-spacing:.12em; color:#6f837a; }
.cmd-heading h3 { font-size:2.5cqw; font-weight:650; letter-spacing:-.04em; margin-top:.4cqw; }
.cmd-environment { color:#357467; font-size:.9cqw; padding:.6cqw .9cqw; border:1px solid #dce8df; border-radius:3cqw; white-space:nowrap; }
.cmd-alert-strip { display:flex; align-items:center; gap:.7cqw; font-size:1.05cqw; padding:.9cqw 1cqw; background:#e7f2eb; border-radius:.5cqw; color:#286554; min-height:3.2cqw; margin-bottom:1.3cqw; }
.cmd-status-dot { width:.6cqw; height:.6cqw; flex-shrink:0; border-radius:50%; background:currentColor; }
.cmd-elapsed { margin-left:auto; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:650; }
.cmd-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:1cqw; margin-bottom:1.3cqw; }
.cmd-metrics>div { position:relative; border:1px solid var(--cmd-line); border-radius:.6cqw; padding:1.2cqw; background:white; }
.cmd-metrics img,.cmd-metric-icon { width:2.6cqw; height:2.6cqw; object-fit:contain; float:right; }
.cmd-metric-icon { display:grid; place-items:center; color:var(--cmd-green); font-size:2.3cqw; }
.cmd-metrics>div>span:not(.cmd-meter):not(.cmd-metric-icon) { font-size:1.05cqw; font-weight:600; }
.cmd-metrics strong { display:block; font-size:2.9cqw; letter-spacing:-.05em; line-height:1.4; }
.cmd-metrics strong small { font-size:1.1cqw; }
.cmd-meter { display:block; height:.35cqw; border-radius:3px; background:#54b793; margin:.4cqw 0 .7cqw; }
.cmd-meter-warn { background:linear-gradient(90deg,#54b793 98%,#e9bc61 98%); }
.cmd-metrics>div>small { font-size:.85cqw; color:#6c8075; }
.cmd-panels { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:1.2cqw; align-items:stretch; flex:1; min-height:0; }
.cmd-primary { min-width:0; min-height:0; }
.cmd-map-card,.cmd-device-card,.cmd-activity-card,.cmd-incident { background:white; border:1px solid var(--cmd-line); border-radius:.6cqw; overflow:hidden; }
.cmd-card-title { display:flex; align-items:center; justify-content:space-between; gap:1cqw; padding:1.2cqw; border-bottom:1px solid #ecf0ed; font-size:1.05cqw; }
.cmd-card-title>span { font-size:.8cqw; color:#7a8b81; }
.cmd-map-card { display:flex; flex-direction:column; height:100%; }
.cmd-map { display:block; width:100%; flex:1; min-height:0; }
.cmd-map-legend { display:flex; justify-content:space-between; gap:1cqw; font-size:.8cqw; color:#367b64; padding:1cqw 1.2cqw; border-top:1px solid #ecf0ed; }
.cmd-map-alert { display:none; fill:var(--cmd-red); }
.cmd-map-alert .cmd-pulse { opacity:.14; transform-origin:160px 206px; }
.cmd-incident-body { padding:1.2cqw; }
.cmd-incident-symbol { display:grid; place-items:center; width:3cqw; height:3cqw; font-size:1.6cqw; border-radius:50%; color:var(--cmd-green); background:#e3f4eb; margin-bottom:.9cqw; }
.cmd-incident h4 { font-size:1.6cqw; line-height:1.2; letter-spacing:-.025em; margin-bottom:.7cqw; }
.cmd-incident p { font-size:.95cqw; line-height:1.55; color:#6c7f74; }
.cmd-incident dl { margin:.7cqw 0; }
.cmd-incident dl div { display:flex; justify-content:space-between; gap:.8cqw; border-bottom:1px solid #edf1ed; padding:.5cqw 0; font-size:.87cqw; }
.cmd-incident dt { color:#7c8d84; }
.cmd-incident dd { margin:0; }
.cmd-awaiting { width:100%; padding:.9cqw .8cqw; display:flex; justify-content:space-between; align-items:center; gap:.4cqw; border:0; border-radius:.5cqw; background:var(--cmd-red); color:white; font-size:1cqw; font-weight:650; margin-top:1cqw; }
.cmd-ack-result { display:block; color:var(--cmd-green); font-weight:600; font-size:1cqw; margin-top:1cqw; }
.cmd-footer { display:flex; justify-content:space-between; gap:1cqw; font-size:.75cqw; color:#87978c; padding-top:1.2cqw; }
.cmd-device-row { display:flex; align-items:center; gap:1.2cqw; padding:1.2cqw; border-bottom:1px solid #edf1ed; font-size:1cqw; }
.cmd-device-row>img,.cmd-device-row>.cmd-metric-icon { width:3cqw; height:3cqw; object-fit:contain; flex-shrink:0; }
.cmd-device-row small { display:block; margin-top:.4cqw; font-size:.85cqw; color:#7a8b80; }
.cmd-device-row>span:last-child { margin-left:auto; color:var(--cmd-green); font-size:.9cqw; }
.cmd-device-warning>span:last-child { color:#a17926; }
.cmd-activity-card ol { margin:0; padding:0; list-style:none; }
.cmd-activity-card li { display:grid; grid-template-columns:5.5cqw 1fr; gap:1cqw; padding:1.3cqw; font-size:1cqw; border-bottom:1px solid #edf1ed; line-height:1.5; }
.cmd-activity-card time { color:#7a8b80; font-size:.85cqw; font-variant-numeric:tabular-nums; }
.cmd-caption { text-align:center; font-size:11px; color:var(--muted); margin-top:14px; }
.cmd-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.cmd-demo[data-incident=pending] .cmd-alert-strip { background:#fff0e9; color:#b44730; }
.cmd-demo[data-incident=pending] .cmd-incident { border-color:#e7a48e; }
.cmd-demo[data-incident=pending] .cmd-incident-symbol { background:#fff0e9; color:var(--cmd-red); }
.cmd-demo[data-incident=pending] .cmd-map-alert,.cmd-demo[data-incident=acknowledged] .cmd-map-alert { display:block; }
.cmd-demo[data-incident=pending] .cmd-incident-room { fill:#fff0e9; stroke:#c74f38; }
.cmd-demo[data-incident=pending] .cmd-pulse { animation:cmd-pulse 1.8s ease-out infinite; }
.cmd-demo[data-incident=acknowledged] .cmd-map-alert { fill:var(--cmd-green); }
.cmd-demo[data-incident=acknowledged] .cmd-incident-room { fill:#e7f5eb; stroke:#146d69; }
.cmd-heading,.cmd-alert-strip,.cmd-metrics,.cmd-footer { flex-shrink:0; }
.cmd-primary>section:not([hidden]) { animation:cmd-view-in .45s ease both; }
@keyframes cmd-view-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.cmd-demo[data-in-view=false] .cmd-pulse { animation-play-state:paused; }
@keyframes cmd-pulse { 0% { transform:scale(.8); opacity:.3; } 100% { transform:scale(1.8); opacity:0; } }
@media(max-width:760px) {
 .cmd-demo.is-animated .cmd-frame { display:none; }
 .cmd-screen { position:relative; inset:auto; width:100%; height:auto; border:5px solid #1f3135; border-radius:12px; grid-template-columns:1fr; font-size:13px; box-shadow:0 15px 35px #173c2510; }
 .cmd-sidebar { padding:12px; display:block; }
 .cmd-brand,.cmd-site { display:none; }
 .cmd-view-list { grid-template-columns:repeat(4,1fr); gap:3px; }
 .cmd-view-item { justify-content:center; padding:11px 3px; font-size:11px; min-height:44px; gap:5px; white-space:normal; }
 .cmd-view-item>span { display:none; }
 .cmd-workspace { padding:15px; height:840px; }
 .cmd-heading h3 { font-size:25px; }
 .cmd-kicker { font-size:8px; }
 .cmd-environment { font-size:9px; padding:5px; }
 .cmd-alert-strip { font-size:11px; padding:10px; margin:14px 0; gap:7px; flex-wrap:wrap; }
 .cmd-status-dot { width:6px; height:6px; }
 .cmd-metrics { gap:6px; margin-bottom:14px; }
 .cmd-metrics>div { padding:10px 7px; border-radius:6px; }
 .cmd-metrics img,.cmd-metrics .cmd-metric-icon { display:none; }
 .cmd-metrics>div>span:not(.cmd-meter):not(.cmd-metric-icon) { font-size:10px; }
 .cmd-metrics strong { font-size:28px; }
 .cmd-metrics strong small { font-size:12px; }
 .cmd-metrics>div>small { font-size:9px; }
 .cmd-meter { height:3px; margin:5px 0 7px; }
 .cmd-panels { grid-template-columns:1fr; grid-template-rows:minmax(200px,1fr) 285px; gap:12px; }
 .cmd-primary>section { height:100%; }
 .cmd-card-title { padding:12px; font-size:12px; }
 .cmd-card-title>span,.cmd-map-legend { font-size:9px; }
 .cmd-map-legend { padding:10px; }
 .cmd-incident-body { padding:14px; }
 .cmd-incident-symbol { width:30px; height:30px; font-size:18px; margin-bottom:10px; }
 .cmd-incident h4 { font-size:20px; margin-bottom:8px; }
 .cmd-incident p { font-size:12px; }
 .cmd-incident dl div { font-size:12px; padding:8px 0; }
 .cmd-awaiting { font-size:13px; padding:13px; min-height:44px; margin-top:12px; }
 .cmd-ack-result { font-size:13px; margin-top:12px; }
 .cmd-device-row { font-size:12px; padding:14px; gap:10px; }
 .cmd-device-row>img,.cmd-device-row>.cmd-metric-icon { width:32px; height:32px; font-size:24px; }
 .cmd-device-row small,.cmd-device-row>span:last-child { font-size:10px; }
 .cmd-activity-card li { grid-template-columns:60px 1fr; font-size:12px; padding:14px; gap:10px; }
 .cmd-activity-card time { font-size:10px; }
 .cmd-footer { font-size:9px; padding-top:13px; }
}
@media(prefers-reduced-motion:reduce) { .cmd-demo .cmd-pulse,.cmd-primary>section:not([hidden]) { animation:none!important; } }