.demo-body{--demo-bg:#102d30;--panel:#17383a;--edge:#365352;--soft:#99b3ad;--accent:#d3e7a6;background:var(--demo-bg);color:#ebeee0;min-height:100vh}.demo-body:has(.scene-building){--demo-bg:#192e26;--panel:#233e30;--edge:#456049;--soft:#a6b7a0;--accent:#dde9ad}.demo-body:has(.scene-stadium){--demo-bg:#111e30;--panel:#192b42;--edge:#3a4f68;--soft:#9eafc9;--accent:#b3d6ff}.demo-body:has(.scene-home){--demo-bg:#302f28;--panel:#414035;--edge:#625c49;--soft:#bfb49f;--accent:#f3d9a3}.demo-body:has(.scene-security){--demo-bg:#102925;--panel:#173a31;--edge:#36574a;--soft:#99b8a6;--accent:#b5dfc0}.demo-body:has(.scene-tv){--demo-bg:#292437;--panel:#383247;--edge:#5d526c;--soft:#b6a9c3;--accent:#e4c9ed}.demo-topbar{height:83px;max-width:1600px;margin:auto;padding:0 38px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--edge)}.back-link{font-size:12px;display:flex;align-items:center;gap:12px;color:var(--soft)}.demo-topbar .brand{font-size:19px}.demo-top-actions{display:flex;gap:12px;align-items:center}.demo-top-actions select{font-size:11px;border:1px solid var(--edge);border-radius:6px;padding:10px;background:var(--panel);color:#e7eddc;max-width:190px}.demo-top-actions button{background:transparent;color:var(--soft);border:1px solid var(--edge);border-radius:6px;width:38px;height:38px;font-size:24px}.demo-shell{max-width:1500px;padding:37px 38px 25px;margin:auto}.experience-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:26px;gap:20px}.experience-heading .eyebrow{color:var(--soft);font-size:9px;margin-bottom:12px}.experience-heading h1{font-size:48px;letter-spacing:-2px}.experience-heading h1 span{color:var(--accent)}.experience-heading>div>p:last-child{font-size:11px;margin-top:12px;color:var(--soft)}.experience-meta{display:flex;align-items:center;gap:17px}.mode-pill{border:1px solid var(--edge);padding:8px 11px;border-radius:30px;color:var(--accent);font-size:8px;letter-spacing:.1em;display:flex;align-items:center;gap:7px}.mode-pill i{width:5px;height:5px;background:var(--accent);border-radius:50%}.reset-demo{background:none;border:0;color:var(--soft);font-size:10px;text-decoration:underline;text-underline-offset:4px}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px}.visual-column{min-width:0}.visual-panel{position:relative;min-height:430px;background:radial-gradient(ellipse at 55% 45%,#416a5b38,#0a252a30);border:1px solid var(--edge);border-radius:16px;overflow:hidden;isolation:isolate;transition:background .7s}.scene-stadium .visual-panel{background:radial-gradient(ellipse,#28426670,#081b3090)}.scene-home .visual-panel{background:radial-gradient(ellipse,#a5986530,#332e1b50)}.scene-tv .visual-panel{background:radial-gradient(ellipse,#875c8640,#231b2e)}.visual-panel>.scene-svg{width:100%;height:445px;object-fit:contain;transition:filter .8s,transform .8s}.visual-panel[data-scene-mode=nuit]>.scene-svg{filter:brightness(.68) saturate(.85)}.visual-panel[data-scene-mode=show]>.scene-svg{filter:drop-shadow(0 0 25px #8ad9ff35)}.visual-panel[data-scene-mode=cinema]>.scene-svg{filter:brightness(.65)}.visual-panel[data-zone-index="1"] .pin-two circle{fill:#fff6cd}.visual-panel[data-zone-index="0"] .pin-one circle{fill:#fff6cd}.visual-panel .floodlights{opacity:var(--intensity,.85);filter:drop-shadow(0 0 15px #b3dcff)}.visual-panel .stadium-ring{opacity:var(--intensity,.85);filter:drop-shadow(0 0 9px #b3dcff);transition:opacity .5s}.visual-panel .window-light{opacity:var(--intensity,.7);transition:opacity .5s}.visual-panel .home-glow{opacity:var(--intensity,.5);transition:opacity .5s;filter:blur(8px)}.visual-panel .deck-lights{opacity:var(--intensity,.65)}.visual-panel .scene-svg .map-pin:first-of-type{opacity:1}.panel-top{position:absolute;top:21px;left:23px;right:23px;z-index:2;display:flex;justify-content:space-between;align-items:center;font-size:9px;color:var(--soft);letter-spacing:.09em}.map-time{font-variant-numeric:tabular-nums}.scene-indicator{position:absolute;bottom:20px;left:23px;z-index:2;display:flex;align-items:center;gap:10px;background:#0b24286b;padding:9px 13px;border:1px solid #b9d1ba25;border-radius:7px;font-size:10px;color:#d0dfce}.scene-indicator i{width:6px;height:6px;border-radius:50%;background:var(--accent)}.map-badge{position:absolute;bottom:19px;right:23px;border:1px solid #a4c5b339;padding:9px 12px;border-radius:5px;color:var(--soft);font-size:8px}.zone-bar{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}.zone-bar button{display:flex;flex:1;justify-content:center;align-items:center;gap:7px;min-height:43px;font-size:10px;border:1px solid var(--edge);background:transparent;color:var(--soft);padding:10px 13px;border-radius:7px;white-space:nowrap}.zone-bar button[aria-pressed=true]{color:var(--accent);background:var(--panel);border-color:#adca9860}.zone-bar button span{font-size:13px}.telemetry{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}.telemetry>div{border:1px solid var(--edge);border-radius:10px;padding:17px;min-width:0}.telemetry small{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:var(--soft);display:block}.telemetry strong{display:block;font-size:28px;font-weight:450;letter-spacing:-.8px;margin:6px 0 5px}.telemetry .unit{font-size:12px;color:var(--soft);margin-left:2px}.telemetry .meter-track{height:3px;border-radius:3px;background:var(--edge);margin-top:12px;overflow:hidden}.meter-track span{display:block;height:3px;width:var(--meter,60%);background:var(--accent);transition:width .6s}.control-panel{background:var(--panel);border:1px solid var(--edge);border-radius:15px;padding:23px;align-self:start}.control-panel h2{font-size:22px;letter-spacing:-.7px;margin:10px 0 20px}.control-panel .eyebrow{font-size:8px;color:var(--soft);letter-spacing:.1em}.preset-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.preset-options button{min-height:62px;display:flex;flex-direction:column;align-items:start;justify-content:center;gap:7px;background:#071c221a;border:1px solid var(--edge);border-radius:8px;color:var(--soft);padding:11px 12px;text-align:left;font-size:10px}.preset-options button span{font-size:18px}.preset-options button[aria-pressed=true]{background:var(--accent);color:var(--demo-bg);border-color:var(--accent)}.control-section{padding-top:23px;border-top:1px solid var(--edge);margin-top:23px}.control-section h3{font-size:10px;font-weight:500;color:var(--soft);text-transform:uppercase;letter-spacing:.1em;margin-bottom:17px}.range-control{margin:17px 0 23px}.range-control:last-child{margin-bottom:0}.range-control label{display:flex;justify-content:space-between;align-items:center;font-size:11px}.range-control output{font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums}.range-control input{width:100%;accent-color:var(--accent);height:5px;margin:16px 0 4px;cursor:pointer}.switch-line{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;min-height:43px}.toggle{border:1px solid #a7c19b40;border-radius:30px;width:41px;height:24px;padding:3px;background:#0b282d66;position:relative;flex:none}.toggle:before{content:'';display:block;width:16px;height:16px;background:#90a99d;border-radius:50%;transition:transform .25s,background .25s}.toggle[aria-pressed=true]{background:#8da66b40}.toggle[aria-pressed=true]:before{background:var(--accent);transform:translateX(15px)}.role-tabs{display:flex;gap:6px;margin-top:12px}.role-tabs button{background:transparent;color:var(--soft);border:1px solid var(--edge);border-radius:5px;padding:9px 6px;font-size:9px;flex:1}.role-tabs button[aria-pressed=true]{background:#b3cc9730;color:var(--accent)}.role-explanation{font-size:9px;color:var(--soft);line-height:1.7;margin-top:13px;min-height:32px}.lower-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}.event-panel,.insight-panel{border:1px solid var(--edge);border-radius:12px;padding:23px;min-width:0}.lower-row h2{font-size:17px;letter-spacing:-.4px;margin-bottom:15px}.event-list{margin:0;padding:0;list-style:none;min-height:70px}.event-list li{font-size:10px;display:flex;gap:13px;border-bottom:1px solid #b3c1a715;padding:8px 0;color:#d1ddc8;line-height:1.5}.event-list time{font-size:9px;font-variant-numeric:tabular-nums;color:var(--soft);white-space:nowrap}.insight-panel p{font-size:11px;color:var(--soft);line-height:1.8;margin-top:12px}.insight-panel .button{background:var(--accent);color:var(--demo-bg);margin-top:18px;font-size:10px;padding:9px 15px;min-height:38px}.sparkline{height:47px;width:100%;opacity:.8}.sparkline path{stroke:var(--accent);fill:none;stroke-width:2}.demo-footer{display:flex;justify-content:space-between;align-items:center;max-width:1500px;margin:0 auto;padding:20px 38px 27px;gap:30px;color:var(--soft);font-size:9px}.demo-footer a{white-space:nowrap;text-decoration:underline;text-underline-offset:4px}.demo-footer p{font-size:9px}.demo-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);z-index:50;padding:12px 20px;max-width:calc(100vw - 30px);width:max-content;border:1px solid #98b89880;background:#e5ecd3;color:#203d2c;border-radius:8px;font-size:11px;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 10px 50px #00191760}.demo-toast.visible{opacity:1;transform:translate(-50%,0)}.incident-button{width:100%;border:1px solid #bb8e4c70;border-radius:6px;color:#f0ce92;background:#b2854030;padding:10px;font-size:10px;margin-top:12px}.incident-button:disabled{opacity:.45;cursor:default}.incident-status{font-size:10px;line-height:1.7;color:#b0c8ae;margin-top:10px}.visual-panel.has-incident .alert-beacon{fill:#f7b457;animation:pulse .8s infinite}.visual-panel.has-incident .alert-core{fill:#ffbd69;filter:drop-shadow(0 0 13px #ffc175)}.patrol-path{animation:dash 7s linear infinite}.dpad{display:grid;grid-template-columns:repeat(3,43px);grid-template-rows:repeat(3,43px);justify-content:center;gap:5px;margin:22px 0}.dpad button{background:#4d405d;border:1px solid var(--edge);color:var(--accent);border-radius:50%;font-size:16px}.dpad button[data-direction=up]{grid-area:1/2}.dpad button[data-direction=left]{grid-area:2/1}.dpad button[data-direction=ok]{grid-area:2/2;background:var(--accent);color:var(--demo-bg);font-size:12px}.dpad button[data-direction=right]{grid-area:2/3}.dpad button[data-direction=down]{grid-area:3/2}.tv-channel{position:absolute;left:22%;right:22%;top:49%;background:#211b38c7;border:1px solid #ccb5df44;backdrop-filter:blur(8px);border-radius:9px;padding:13px;text-align:center;color:#f2dff0;font-size:13px}.tv-channel small{display:block;color:#c8b7cf;font-size:9px;margin-top:4px}.tv-app-selector{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}.tv-app-selector button{flex:1;border:1px solid var(--edge);background:none;color:var(--soft);padding:10px 6px;border-radius:5px;font-size:9px}.tv-app-selector button[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:#92789d30}.media-buttons{display:flex;justify-content:center;gap:8px}.media-buttons button{background:transparent;border:1px solid var(--edge);border-radius:6px;padding:9px 14px;font-size:15px;color:var(--accent)}@keyframes dash{to{stroke-dashoffset:-100}}
.blinds-down .window-light{filter:brightness(.3)}.blinds-down .home-glow{fill:#c09869}.blinds-down .pin-two{opacity:.3}.scene-yacht .visual-panel.blinds-down{box-shadow:inset 0 0 120px #061e3040}
@media(min-width:1600px){.visual-panel>.scene-svg{height:510px}.demo-shell{padding-top:45px}}
@media(max-width:1000px){.demo-shell{padding:30px 24px}.demo-topbar{padding-inline:24px}.workbench{grid-template-columns:minmax(0,1fr) 265px;gap:17px}.visual-panel>.scene-svg{height:425px}.telemetry{gap:8px}.telemetry>div{padding:13px}.telemetry strong{font-size:23px}.telemetry small{font-size:7px}.control-panel{padding:20px}.experience-heading h1{font-size:41px}.demo-topbar .brand{font-size:17px}.lower-row{gap:17px}.zone-bar button{font-size:9px;padding:10px 8px;flex-basis:40%}}
@media(max-width:740px){.demo-topbar{height:74px;padding:0 20px;gap:13px}.demo-topbar .brand{display:none}.demo-top-actions select{max-width:175px;font-size:10px}.demo-shell{padding:27px 20px 10px}.experience-heading{align-items:start;margin-bottom:20px}.experience-heading h1{font-size:37px}.experience-heading>div>p:last-child{font-size:10px;max-width:230px}.experience-meta{flex-direction:column;gap:13px;align-items:end}.mode-pill{font-size:7px;padding:7px 9px}.reset-demo{font-size:9px}.workbench{grid-template-columns:1fr;gap:23px}.visual-panel{min-height:300px}.visual-panel>.scene-svg{height:340px;transform:scale(1.05)}.visual-panel .map-pin{display:none}.panel-top{top:17px;left:17px;right:17px;font-size:8px}.scene-indicator{bottom:15px;left:15px;font-size:9px}.map-badge{right:15px;bottom:15px;font-size:7px}.zone-bar{gap:6px}.zone-bar button{flex-basis:22%;padding:10px 6px;font-size:9px}.telemetry{gap:8px;margin-top:15px}.telemetry>div{padding:12px 9px}.telemetry strong{font-size:23px}.telemetry small{font-size:7px;letter-spacing:0}.telemetry .unit{font-size:9px}.control-panel{padding:23px}.control-panel h2{font-size:25px}.preset-options{grid-template-columns:repeat(4,1fr)}.preset-options button{padding:11px 9px;font-size:9px;min-height:65px}.range-control{margin-block:23px}.range-control label{font-size:12px}.range-control input{height:7px;margin-top:20px}.switch-line{font-size:12px;min-height:45px}.control-section h3{font-size:10px}.role-tabs button{font-size:10px;min-height:42px}.role-explanation{font-size:10px}.lower-row{grid-template-columns:1fr;gap:17px;margin-top:23px}.demo-footer{padding:20px;align-items:start;gap:15px}.demo-footer p,.demo-footer a{font-size:8px}.demo-footer a{max-width:115px;white-space:normal}.tv-channel{top:43%;font-size:12px}.tv-app-selector button{font-size:10px;min-height:42px}.dpad{grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:6px}.media-buttons button{padding:10px 22px}.incident-button{min-height:43px}}
@media(max-width:380px){.back-link{font-size:10px;gap:5px}.demo-top-actions{gap:7px}.demo-top-actions select{max-width:160px}.experience-heading h1{font-size:32px}.telemetry{grid-template-columns:1fr 1fr}.telemetry strong{font-size:27px}.preset-options{grid-template-columns:1fr 1fr}.visual-panel>.scene-svg{height:300px}.zone-bar button{flex-basis:40%}.map-badge{display:none}}