:root{font-family:Inter,Arial,sans-serif;color:#eaf2f6;background:#071622;--cyan:#55b9d1;--muted:#a1b7c7;--border:#75bad32d;--green:#58d7ad;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #69d9f4;outline-offset:4px}button{border:0;background:none}button:hover{color:#7de4f9}a{color:inherit;text-decoration:none}#app{position:relative;width:100%;height:100svh;min-height:680px;overflow:hidden}#scene{position:absolute;inset:0}#scene canvas{width:100%;height:100%;display:block;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#06131db0,transparent 24%,transparent 65%,#06131dcc)}header{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:flex-start;padding:26px 30px;gap:20px;pointer-events:none}header>*{pointer-events:auto}.identity{min-width:240px}.brand{font-size:27px;font-weight:650;letter-spacing:-1.1px;display:flex;align-items:center;gap:8px}.brand-wave{color:#36c2e7;font-size:44px;line-height:28px;font-weight:400}h1{font-size:24px;font-weight:450;letter-spacing:-.5px;margin:17px 0 7px}.identity p{margin:0;font-size:14px;color:#a1b8ca}.identity p span{padding:0 7px}.mode-switch{display:flex;border:1px solid var(--border);border-radius:40px;background:#081b2ac9;padding:3px;backdrop-filter:blur(16px)}.mode-switch button{padding:11px 21px;font-size:14px;color:#99afc0;border:1px solid transparent;border-radius:30px}.mode-switch .active{border-color:#24c6ef;background:#12465c88;color:#66d5ef}.top-right{min-width:300px}.engine{display:flex;justify-content:flex-end;gap:10px;align-items:center;margin-bottom:14px}.engine>span{border:1px solid var(--border);border-radius:20px;padding:7px 12px;font-size:14px;background:#0822349e}.engine i{display:inline-block;width:7px;height:7px;background:#33c4e9;border-radius:50%;margin-right:7px}.engine .demo{font-size:11px;letter-spacing:1.2px;border-radius:5px;color:#acc6d4}.overview{display:flex;padding:12px 0;border:1px solid var(--border);background:#061d2bbd;backdrop-filter:blur(15px);border-radius:8px}.overview>div{padding:0 17px;border-right:1px solid var(--border);min-width:96px}.overview>div:last-child{border:0}.overview span{display:block;font-size:12px;color:#a9c0cd;margin-bottom:5px}.overview strong{font-size:21px;font-weight:500}.overview small{font-size:12px;font-weight:400;color:#b0c6d0;margin-left:3px}.overview #risk{color:#5ad9b2}.glass{border:1px solid var(--border);background:#071f2ce8;backdrop-filter:blur(20px);border-radius:10px;box-shadow:0 10px 35px #0002}.control{padding:13px 16px;display:flex;gap:10px;align-items:center;font-size:14px}.bottom-left{position:absolute;bottom:64px;left:30px}#layers-panel{position:absolute;bottom:57px;left:0;width:285px;padding:21px}#layers-panel h2{font-size:17px;font-weight:500;margin:0 0 22px}#layers-panel label{display:flex;align-items:center;justify-content:space-between;font-size:14px;margin-top:20px;color:#c1d2dc}input[type=checkbox]{appearance:none;width:32px;height:18px;border-radius:30px;background:#40535e;position:relative;cursor:pointer}input[type=checkbox]:after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:#d9eaf1;top:3px;left:3px;transition:.2s}input[type=checkbox]:checked{background:#227f9a}input[type=checkbox]:checked:after{transform:translateX(14px)}#layers-panel .asset-label{margin-top:24px;font-size:12px}select{width:100%;margin-top:9px;border:1px solid #456574;background:#0c2b3b;color:#d4e5ee;padding:9px 7px;border-radius:5px;font-size:13px}#layers-panel p{font-size:12px;color:#91acbd;line-height:1.7;margin:15px 0 0}.bottom-centre{position:absolute;bottom:23px;left:50%;transform:translateX(-50%);max-width:calc(100% - 30px)}.scenario-dock{border-radius:40px;padding:4px;display:flex;white-space:nowrap}.scenario-dock button{padding:13px 19px;border-radius:30px;border:1px solid transparent;color:#c4d5df;font-size:14px;display:flex;gap:10px;align-items:center}.scenario-dock button span{font-size:22px;line-height:1}.scenario-dock button.active{background:#0c3c50;border-color:#20c4ed;color:#67dbf7}.playback{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:12px;font-size:12px;color:#a0b6c6;min-height:24px}.playback button{font-size:18px;padding:0 3px}.divider{color:#446174}.bottom-right{position:absolute;right:30px;bottom:25px;display:flex;align-items:flex-end;flex-direction:column;gap:15px}.camera-tools{display:flex;overflow:hidden;border-radius:7px}.camera-tools button{font-size:24px;padding:5px 13px;border-right:1px solid var(--border)}.camera-tools button:last-child{border:0}.bottom-right p{margin:0;font-size:11px;color:#92adbd}#inspector{position:absolute;right:30px;bottom:133px;width:330px;padding:18px 20px}.inspector-top{display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:11px;letter-spacing:1.6px;color:#7abed4}.icon-btn{font-size:26px;line-height:1;padding:2px 5px;color:#b8cfdb}.asset-title{display:flex;align-items:center;justify-content:space-between;margin-top:9px;gap:10px}.asset-title h2{font-size:19px;font-weight:500;margin:0 0 7px}.asset-title p{font-size:13px;color:#97b7cb;margin:0}.status{font-size:11px;color:#58d7ad}.readings{display:flex;border-top:1px solid var(--border);margin-top:19px;padding-top:17px;gap:19px}.readings span{display:block;font-size:12px;color:#a7c1d1}.readings strong{font-size:23px;display:block;font-weight:500;margin-top:8px}.readings small{font-size:12px;margin-left:3px;color:#99bacd}.asset-bottom{display:flex;justify-content:space-between;font-size:11px;color:#8eadbe;margin-top:17px}.asset-bottom>span:last-child{color:#5ddab7}.inspect-device{display:flex;gap:11px;align-items:center;width:100%;text-align:left;border-top:1px solid var(--border);margin-top:16px;padding:15px 0 0}.inspect-device img{width:38px;height:48px;object-fit:cover;object-position:center;border-radius:4px}.inspect-device strong{font-size:13px;font-weight:500;display:block}.inspect-device small{font-size:11px;color:#8db0c3;display:block;margin-top:6px}.inspect-device>span:last-child{margin-left:auto;font-size:20px}#insight{position:absolute;left:30px;bottom:130px;width:310px;padding:16px 18px;pointer-events:none}.insight-heading{display:flex;align-items:center;gap:8px}.insight-heading>span:first-child{font-size:23px;color:#55c7e3}.insight-heading strong{font-size:13px;font-weight:500;color:#9cdcec}.insight-heading>span:last-child{margin-left:auto;color:#98b4c3;font-size:11px}#insight p{font-size:13px;color:#c0d3df;line-height:1.6;margin:9px 0 0}#insight #action{color:#f3c586;border-top:1px solid #e8b46d33;padding-top:10px}#story{position:absolute;left:30px;top:190px;width:330px;padding:23px}#story h2{font-size:24px;line-height:1.25;font-weight:500;letter-spacing:-.5px;margin:14px 0 12px}#story p{font-size:14px;color:#b4cbd9;line-height:1.7;margin:0}.story-progress{height:2px;background:#50778c55;margin-top:20px}.story-progress span{display:block;height:100%;width:0;background:#42c4e9}#alert-banner{position:absolute;top:175px;right:30px;display:flex;align-items:center;gap:12px;padding:13px 16px;max-width:380px;border-color:#edb65e66;background:#342820e8}.alert-icon{border:1px solid #eabc7b;color:#eabc7b;border-radius:50%;padding:1px 7px}.alert-title{font-size:14px}#alert-banner strong{font-size:13px;font-weight:500;color:#f7cea0}#alert-banner p{font-size:12px;color:#dab99a;margin:5px 0 0}#alert-banner button{font-size:12px;color:#ffe0b6;white-space:nowrap;margin-left:auto}.marker{position:absolute;transform:translate(-50%,-50%);border-radius:50%;width:27px;height:27px;padding:0;background:#092b3bd4;border:1px solid #65dcf6;box-shadow:0 0 15px #30bcdc44;display:flex;align-items:center;justify-content:center;pointer-events:auto}.marker:after{content:'';width:6px;height:6px;background:var(--marker-color,#55d9f7);border-radius:50%}.marker span{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);padding:5px 8px;white-space:nowrap;color:#d6f3fa;background:#071f30ed;border:1px solid #63bfd566;border-radius:4px;font-size:12px;display:none}.marker.active span,.marker:hover span,.marker:focus-visible span{display:block}.marker.active{box-shadow:0 0 0 5px #55b9d122,0 0 18px #55b9d155;border-width:2px}#markers{position:absolute;inset:0;pointer-events:none}#loading{position:absolute;inset:0;background:#081b27;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;text-align:center;padding:25px}#loading h2{font-size:24px;font-weight:450}#loading p{font-size:14px;color:#9bbacb}.loading-logo{font-size:80px;color:#55b9d1;line-height:1}.load-track{width:230px;height:2px;background:#38515e;margin-top:16px;overflow:hidden}.load-track span{display:block;width:40%;height:100%;background:#55b9d1;animation:loading 1.4s infinite ease-in-out}@keyframes loading{from{transform:translateX(-100%)}to{transform:translateX(350%)}}#error{position:absolute;top:35%;left:50%;transform:translateX(-50%);width:min(440px,90%);padding:28px;z-index:12}#error p{color:#a5bfce;line-height:1.6}#error button{background:#227f9a;padding:10px 20px;border-radius:5px}dialog{padding:0;border:1px solid #426879;border-radius:16px;background:#0a1b28;color:#e8f3f8;width:min(900px,94vw);height:min(760px,90svh);overflow:hidden}dialog::backdrop{background:#020b13c9;backdrop-filter:blur(8px)}#close-device{position:absolute;top:20px;right:20px;z-index:3}.device-copy{position:absolute;top:27px;left:30px;pointer-events:none;z-index:2}.device-copy h2{font-size:30px;letter-spacing:-1px;font-weight:450;margin:12px 0 8px}.device-copy p{color:#91afc2;font-size:14px;margin:0}#device-scene{width:100%;height:100%}#device-scene canvas{display:block;touch-action:none}.device-foot{position:absolute;bottom:20px;left:30px;right:30px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#9bb7c9}.device-foot button{border:1px solid #456475;padding:9px 13px;border-radius:5px;font-size:12px}[hidden]{display:none!important}@media(min-width:1700px){header{padding:34px 42px}.bottom-left,#insight,#story{left:42px}.bottom-right,#inspector,#alert-banner{right:42px}#insight{width:340px}#inspector{width:350px}}@media(max-width:1100px){header{padding:23px 20px}.identity{min-width:190px}.top-right{min-width:260px}.overview>div{padding:0 11px;min-width:86px}.mode-switch button{padding:10px 13px;font-size:13px}.bottom-left{left:20px;bottom:100px}.bottom-right{right:20px;bottom:105px}.bottom-right p{display:none}.bottom-centre{bottom:20px}.scenario-dock button{padding:12px 18px}#inspector{right:20px;bottom:167px;width:300px}#insight{left:20px;bottom:161px;width:275px}#story{left:20px;top:190px;width:285px}#alert-banner{right:20px;max-width:315px}.readings{gap:15px}}@media(max-width:760px){#app{min-height:690px}header{padding:19px 17px;flex-wrap:wrap;gap:15px}.brand{font-size:24px}.brand-wave{font-size:38px}h1{font-size:21px;margin:13px 0 5px}.identity p{font-size:12px}.mode-switch{position:absolute;top:21px;right:17px}.mode-switch button{padding:8px 12px;font-size:12px}.top-right{position:absolute;top:114px;left:17px;right:17px;min-width:0}.engine{position:absolute;right:0;top:-49px}.engine>span{font-size:12px;padding:6px 9px}.engine .demo{font-size:9px}.overview{width:max-content;margin-left:auto;background:#061d2ba8}.overview>div{padding:0 12px;min-width:80px}.overview strong{font-size:18px}.overview span{font-size:11px}.overview small{font-size:10px}.bottom-left{left:15px;bottom:110px}.bottom-right{right:15px;bottom:110px}.control{padding:10px 12px;font-size:12px}.camera-tools button{padding:4px 11px;font-size:23px}.bottom-centre{width:calc(100% - 24px);bottom:20px}.scenario-dock{justify-content:center;padding:3px}.scenario-dock button{flex:1;justify-content:center;font-size:12px;padding:11px 8px;gap:7px}.scenario-dock button span{font-size:19px}.playback{font-size:11px;gap:9px}.playback #scenario-caption{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#insight{left:15px;bottom:163px;width:255px;padding:12px 14px;max-width:calc(100% - 30px)}#insight p{font-size:12px}.insight-heading>span:last-child{font-size:10px}#inspector{left:15px;right:15px;bottom:163px;width:auto;z-index:4;padding:14px 18px}body.has-selection #insight{display:none}.inspect-device{padding-top:11px;margin-top:12px}.inspect-device img{width:30px;height:36px}.asset-title h2{font-size:18px}.readings{gap:35px;margin-top:14px;padding-top:12px}.readings strong{font-size:21px}#layers-panel{width:min(290px,calc(100vw - 30px));z-index:5}#story{top:190px;left:15px;width:270px;padding:17px}#story h2{font-size:20px}#story p{font-size:13px}body.touring #insight{display:none}#alert-banner{top:185px;right:15px;left:15px;max-width:none;padding:11px}body.touring #alert-banner{top:auto;bottom:168px}body.touring #inspector{display:none}.device-copy{left:20px;top:22px}.device-copy h2{font-size:25px}.device-copy p{font-size:12px}.device-foot{left:20px;right:20px;gap:10px;font-size:11px}.device-foot button{font-size:11px}.marker{width:24px;height:24px}}@media(prefers-reduced-motion:reduce){.load-track span{animation:none;width:60%}}

/* Neutral black and white themes. Brand assets are the supplied originals. */
:root{--bg:#0b0c0e;--surface:#131619ed;--text:#eef1f3;--muted:#a3acb3;--border:#ffffff24;background:var(--bg);color:var(--text)}
:root[data-theme=light]{--bg:#fafafa;--surface:#fffffff2;--text:#202629;--muted:#616b73;--border:#18252e28;color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}
.brand{gap:11px;letter-spacing:-.8px}.brand-mark{display:flex;align-items:center;justify-content:center;background:#f8f8f7;border-radius:7px;width:55px;height:43px;padding:4px 5px}.brand-mark img{width:100%;height:100%;object-fit:contain}.logo-light{display:none}:root[data-theme=light] .logo-dark{display:none}:root[data-theme=light] .logo-light{display:block}.brand-mark:has(.logo-light){overflow:hidden}
header{background:linear-gradient(var(--bg),transparent)}h1{font-weight:500}.identity p{color:var(--muted)}.glass,.overview,.mode-switch{background:var(--surface);border-color:var(--border);box-shadow:0 8px 30px #00000012}.vignette{background:linear-gradient(var(--bg),transparent 24%,transparent 68%,var(--bg));opacity:.65}.engine>span{background:var(--surface);border-color:var(--border);color:var(--text)}.engine .demo{color:var(--muted)}.theme-toggle{border:1px solid var(--border);border-radius:50%;width:32px;height:32px;background:var(--surface);color:var(--text);font-size:21px}.mode-switch button{color:var(--muted)}.mode-switch .active,.scenario-dock button.active{background:#227f9a22;color:#55b9d1;border-color:#55b9d1}.scenario-dock button{color:var(--text)}.overview span,.overview small,.asset-title p,.readings span,.readings small,.asset-bottom,.playback,.bottom-right p,.device-copy p,.device-foot{color:var(--muted)}.overview strong,.asset-title h2,.readings strong,.brand,.control{color:var(--text)}.insight-heading>span:last-child{color:var(--muted)}#insight p,#story p,#layers-panel label{color:var(--text)}#layers-panel p{color:var(--muted)}select{background:var(--bg);color:var(--text);border-color:var(--border)}#loading{background:var(--bg);color:var(--text)}#loading p{color:var(--muted)}dialog{background:var(--bg);border-color:var(--border);color:var(--text)}.inspect-device small{color:var(--muted)}.marker{background:#101517d9}.marker span{background:var(--surface);color:var(--text);border-color:var(--border)}
:root[data-theme=light] .eyebrow,:root[data-theme=light] .insight-heading strong,:root[data-theme=light] .mode-switch .active,:root[data-theme=light] .scenario-dock button.active{color:#17677f}:root[data-theme=light] .icon-btn{color:#55636c}:root[data-theme=light] #insight #action{color:#80500e}:root[data-theme=light] .brand-mark{background:#fff}:root[data-theme=light] #asset-risk,:root[data-theme=light] .status{color:#157853}:root[data-theme=light] .marker{background:#f5f9faed}
@media(min-width:1101px){#insight{bottom:146px;width:300px}#inspector{bottom:145px}#story{background:var(--surface)}}

/* Cards live inside viewport-bounded columns; their contents scroll when needed. */
html,body{width:100%;height:100%;overflow:hidden}
#app{height:100dvh;min-height:0;--panel-bottom:164px}
header{z-index:3}
#markers{z-index:1}
.left-panels,.right-panels{position:absolute;top:var(--header-bottom,170px);bottom:var(--panel-bottom);width:min(330px,calc(100% - 32px));display:flex;flex-direction:column;gap:12px;pointer-events:none;z-index:4;overflow-y:auto;overscroll-behavior:contain}
.left-panels{left:20px;justify-content:flex-end}
.right-panels{right:20px}
.left-panels>#story,.left-panels>#insight,.right-panels>#inspector,.right-panels>#alert-banner{position:relative;inset:auto;width:100%;max-width:100%;margin:0;flex-shrink:0;pointer-events:auto}
.left-panels>#story{max-height:100%;overflow-y:auto}
.right-panels>#inspector{max-height:100%;overflow-y:auto;flex-shrink:1;min-height:100px}
.right-panels>#alert-banner{flex-wrap:wrap}
body.touring #insight,body:has(#layers-panel:not([hidden])) #insight{display:none}
#story,#insight,#inspector,#alert-banner{overflow-wrap:anywhere}
#layers-panel{position:fixed;top:var(--header-bottom,170px);bottom:164px;left:20px;width:min(320px,calc(100vw - 40px));height:max-content;max-height:calc(100dvh - var(--header-bottom,170px) - 164px);overflow:auto;overscroll-behavior:contain;z-index:6}
.bottom-left,.bottom-right{z-index:5;bottom:105px}
.bottom-left{left:20px}.bottom-right{right:20px}
.bottom-right p{display:none}
.bottom-centre{z-index:5;bottom:max(12px,env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 24px)}
.camera-tools button{min-height:42px;min-width:42px}
.camera-tools .nav-mode{font-size:14px;padding:8px 12px}
.camera-tools .active{background:#227f9a30;color:var(--cyan)}
button:disabled{cursor:default;opacity:.55}
.readings{gap:10px;justify-content:space-between;flex-wrap:wrap}
.asset-bottom{gap:8px;flex-wrap:wrap}
.asset-title>div{min-width:0}
.status{flex-shrink:0}
#insight{max-height:100%;overflow-y:auto}
#scene canvas{cursor:grab}
#scene canvas:active{cursor:grabbing}
#layers-panel label{gap:12px}
#layers-panel input{flex-shrink:0}
#layers-panel h2{margin-bottom:12px}
#layers-panel p{font-size:13px}
#layers-panel select{font-size:14px}
#close-inspector{position:sticky;top:0;background:var(--surface);border-radius:4px;z-index:1}
#error{top:50%;transform:translate(-50%,-50%);max-height:calc(100dvh - 32px);overflow:auto}
@media(max-width:900px){
header{padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:12px}
.identity{min-width:0}.identity h1{font-size:20px;margin:8px 0 4px}
.brand{font-size:23px}.brand-mark{width:43px;height:34px}
.mode-switch{position:static;align-self:start;justify-self:end}
.top-right{position:static;grid-column:1/-1;min-width:0;display:flex;justify-content:space-between;align-items:center;gap:12px}
.engine{position:static;margin:0;flex-wrap:wrap;justify-content:flex-start;gap:6px}
.engine .demo{display:none}
.overview{margin:0;width:auto;padding:8px 0}
.overview>div{min-width:0;padding:0 10px}
.overview strong{font-size:18px}.overview span{font-size:12px}.overview small{font-size:11px}
.left-panels,.right-panels{width:min(300px,calc(100% - 32px))}
body.has-selection .left-panels{display:none}
}
@media(max-width:600px){
#app{--panel-bottom:211px}
header{padding:12px;gap:8px}
.brand{font-size:20px}.brand-mark{width:35px;height:29px}
.identity h1{font-size:17px}.identity p{font-size:12px}
.mode-switch button{font-size:12px;padding:8px}
.top-right{gap:6px}
.engine>span{display:none}
.overview{flex:1;justify-content:space-around}
.overview>div{padding:0 8px}
.left-panels,.right-panels{left:12px;right:12px;width:auto}
body:has(#alert-banner:not([hidden])) .left-panels{display:none}
body.touring .right-panels{display:none}
.bottom-right{left:12px;right:12px;bottom:106px;align-items:stretch}
.camera-tools{justify-content:center}
.camera-tools .nav-mode{flex:1}
.bottom-left{left:12px;bottom:158px}
.bottom-centre{width:calc(100% - 24px);bottom:12px}
.scenario-dock button{white-space:normal;font-size:12px;padding:10px 5px;min-height:42px}
.scenario-dock button span{display:none}
.playback{font-size:12px;gap:8px}
#scenario-caption{max-width:calc(100vw - 160px)}
#layers-panel{left:12px;top:var(--header-bottom,160px);bottom:211px;width:calc(100vw - 24px);max-height:calc(100dvh - var(--header-bottom,160px) - 211px)}
.device-copy{right:50px}
.device-copy p{display:none}
.device-foot{left:12px;right:12px}
}
@media(max-height:540px) and (min-width:601px){
header{padding:10px 16px}
.identity h1,.identity p,.engine{display:none}
.top-right{display:block;grid-column:auto;min-width:0}
header{display:flex}
.overview{padding:6px 0}
#app{--panel-bottom:145px}
#layers-panel{bottom:145px;max-height:calc(100dvh - var(--header-bottom,90px) - 145px)}
.bottom-left,.bottom-right{bottom:94px}
.bottom-centre{bottom:8px}
#story h2{font-size:20px}
}

body.touring .right-panels>#alert-banner{inset:auto}

.mobile-only{display:none}
@media(max-width:760px){
#app{--mobile-bottom:100px;--caption-height:0px;height:100dvh;min-height:0}
header{display:grid;grid-template-columns:1fr auto;padding:8px 10px;gap:6px;background:var(--bg);align-items:center}
.identity .brand>span:last-child,.identity h1,.identity p{display:none}
.identity{min-width:0}.brand-mark{width:30px;height:28px;padding:2px}
.mode-switch{position:static}.mode-switch button{font-size:13px;padding:7px 12px}
.top-right{grid-column:1/-1;display:flex;gap:8px;position:static}
.engine{position:static;margin:0}.engine>span{display:none}
.theme-toggle{width:28px;height:28px;font-size:18px}
.overview{flex:1;padding:4px 0;justify-content:space-around;border:0;box-shadow:none;background:transparent}
.overview>div{display:flex;align-items:center;gap:5px;padding:0 6px;min-width:0}
.overview span{font-size:12px;margin:0}.overview strong{font-size:14px}
.overview small{font-size:11px}
#scene,#markers{top:var(--header-bottom,82px);bottom:calc(var(--mobile-bottom) + var(--caption-height) + env(safe-area-inset-bottom));left:0;right:0}
.vignette{display:none}
.mobile-only{display:block}
.mobile-bar{position:absolute;left:10px;right:10px;bottom:calc(57px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;z-index:6;pointer-events:none}
.mobile-bar button{pointer-events:auto;background:var(--surface);border:1px solid var(--border);border-radius:20px;font-size:13px;min-height:34px;padding:6px 16px}
.bottom-centre{bottom:calc(6px + env(safe-area-inset-bottom));left:10px;right:10px;width:auto;max-width:none;transform:none;display:flex;gap:6px;align-items:center}
.scenario-dock{flex:1;min-width:0;border-radius:12px}
.scenario-dock button{font-size:12px;padding:7px 5px;min-height:36px;white-space:normal}
.scenario-dock button span{display:none}
.playback{margin:0;gap:4px}
.playback button{font-size:21px;min-width:28px;min-height:36px}
.playback>span{display:none}
.bottom-left,.bottom-right{display:none}
.left-panels,.right-panels{display:contents}
.left-panels>#insight{display:none}
.left-panels>#story{position:absolute;left:10px;right:10px;top:auto;bottom:calc(var(--mobile-bottom) + env(safe-area-inset-bottom));width:auto;padding:9px 12px;max-height:100px;overflow:auto;z-index:4;pointer-events:auto;border-radius:8px}
#story .eyebrow,#story .story-progress,#story p{display:none}
#story h2{font-size:14px;line-height:1.4;margin:0;padding-right:75px;font-weight:500}
#story-toggle{position:absolute;top:6px;right:7px;font-size:12px;min-height:30px;color:var(--cyan)}
body.caption-expanded #story p{display:block;font-size:13px;line-height:1.45;margin-top:8px}
body.caption-expanded #story h2{padding-right:75px}
.right-panels>#inspector,.left-panels>#insight,#layers-panel{position:absolute;top:auto;bottom:calc(var(--mobile-bottom) + env(safe-area-inset-bottom));left:10px;right:10px;width:auto;max-width:none;max-height:min(38dvh,300px);height:auto;overflow:auto;z-index:8;margin:0;padding:14px}
.right-panels>#inspector{min-height:0}
body.mobile-status-open .left-panels>#insight{display:block}
#close-insight,#close-tools{float:right}
body.mobile-tools-open .bottom-right{display:flex;position:absolute;bottom:calc(var(--mobile-bottom) + env(safe-area-inset-bottom));left:10px;right:10px;z-index:9}
body.mobile-tools-open #layers-panel{bottom:calc(var(--mobile-bottom) + 52px + env(safe-area-inset-bottom));max-height:min(32dvh,260px)}
body.mobile-tools-open #story,body.mobile-status-open #story,body.has-selection #story{visibility:hidden}
#layers-panel h2{font-size:16px;margin:0 0 10px}
#layers-panel label{margin-top:12px}
body.touring .right-panels{display:contents}
body.touring .right-panels>#inspector{display:none}
.right-panels>#alert-banner,body.touring .right-panels>#alert-banner{position:absolute;top:var(--header-bottom,82px);bottom:auto;left:10px;right:10px;width:auto;max-width:none;z-index:3;padding:6px 10px;gap:8px;pointer-events:auto}
#alert-banner p,#alert-banner .alert-icon{display:none}
#alert-banner strong,#alert-banner button{font-size:12px}
body.mobile-tools-open #alert-banner,body.mobile-status-open #alert-banner,body.has-selection #alert-banner{display:none}
}
@media(max-width:760px){
body.mobile-tools-open .bottom-left{display:contents}
body.mobile-tools-open #layers-btn{display:none}
}
@media(max-width:760px){
.overview>div:first-child>span{font-size:0}
.overview>div:first-child>span:after{content:'Risk';font-size:12px}
.overview>div:nth-child(2) small{display:none}
}

/* Each operating stage has its own timeline ring; no independent spinner clock. */
.stage-feedback{display:flex;align-items:center;gap:9px;margin-top:12px;min-height:20px;color:var(--muted);font-size:12px;line-height:1.4}
.stage-rings{display:flex;gap:5px;flex-shrink:0}
.stage-ring{--stage-progress:0%;position:relative;isolation:isolate;display:flex;width:17px;height:17px;align-items:center;justify-content:center;border-radius:50%;background:conic-gradient(var(--cyan) var(--stage-progress),var(--border) 0);font-size:12px;color:var(--cyan)}
.stage-ring:before{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--bg);z-index:-1}
.stage-ring.complete{background:var(--cyan);color:var(--bg)}
.stage-ring.complete:before{display:none}
.stage-ring.current{outline:1px solid var(--cyan);outline-offset:2px}
@media(max-width:760px){#story .stage-feedback{margin-top:7px;font-size:12px}#story .stage-ring{width:15px;height:15px}.stage-rings{gap:5px}}
/* Controls share existing sheets; the estate keeps its own unobstructed viewport. */
.load-track #load-progress{animation:none;width:0;transition:width .25s}
.tour-controls{display:flex;align-items:center;gap:7px;margin-top:10px}.tour-controls button,.tour-controls select,#clear-blockage,#fullscreen{background:var(--panel,#17262c);color:inherit;border:1px solid #657b8055;border-radius:8px;padding:8px 10px;cursor:pointer}.tour-controls button:disabled{opacity:.35;cursor:default}.tour-controls select{width:auto;margin:0}
#minimap{padding:8px;background:#64848b12;border:1px solid #758b8e33;border-radius:10px;margin-bottom:12px}#map-svg{width:100%;max-height:160px;display:block}#map-svg [role=button]{cursor:pointer;outline:none}#map-svg [role=button]:focus{stroke:#fff;stroke-width:2}#minimap span,#fullscreen-status,#cutaway small,.response-status{display:block;font-size:11px;color:var(--muted,#91a6aa);line-height:1.5}#fullscreen{width:100%;margin:10px 0}#cutaway{border-top:1px solid #74888d33;padding:10px 0}#cutaway summary{cursor:pointer;font-size:12px}#cutaway svg{width:100%;max-height:110px;margin-top:8px}#clear-blockage{width:100%;margin-top:8px}.response-status:empty{display:none}
.marker.alerting::after{content:'';position:absolute;inset:-6px;border:1px solid var(--marker-color);border-radius:50%;animation:alert-pulse 1.8s ease-out infinite;pointer-events:none}@keyframes alert-pulse{from{transform:scale(.9);opacity:.8}to{transform:scale(1.55);opacity:0}}@media(prefers-reduced-motion:reduce){.marker.alerting::after{animation:none}}
#app:fullscreen{width:100vw;height:100dvh}.expanded-view #app{position:fixed;inset:0;height:100dvh;z-index:9999}#layers-panel{max-height:min(65dvh,620px);overflow:auto;overscroll-behavior:contain}button,input,select{touch-action:manipulation}#scene canvas{touch-action:none}
@media(max-width:760px){.tour-controls{gap:5px;margin-top:5px}.tour-controls button,.tour-controls select{font-size:11px;min-height:28px;padding:3px 9px}.tour-controls select{margin-left:auto}.touring #story{max-height:140px}.touring #scene,.touring #markers{bottom:calc(100px + var(--caption-height,110px) + env(safe-area-inset-bottom))}#minimap svg{max-height:125px}.mobile-bar{gap:7px}#mobile-recover{color:#edb65e}.mobile-tools-open #layers-panel{max-height:38dvh}#stage-recovery{flex-shrink:0}.stage-feedback{gap:6px}#stage-status{font-size:10px}.caption-expanded #story{overflow:auto;max-height:35dvh}}
/* Controls and simulation occupy separate grid columns. */
#app{display:grid;grid-template-columns:48px 320px minmax(0,1fr);height:100dvh;min-height:0;isolation:isolate;background:var(--bg)}
#control-rail{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:8px;padding:12px 5px;border-right:1px solid var(--border);background:var(--surface);z-index:2;overflow-y:auto}#control-rail button{width:38px;min-height:42px;border-radius:8px;font-size:23px;color:var(--cyan)}#control-rail button:hover{background:var(--border)}
#control-panel{grid-column:2;grid-row:1;min-width:0;min-height:0;height:100%;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px;background:var(--bg);border-right:1px solid var(--border);scrollbar-width:thin}
#viewport{grid-column:3;grid-row:1;position:relative;min-width:0;min-height:0;overflow:hidden}#viewport #scene,#viewport #markers{position:absolute;inset:0!important}#viewport #loading{position:absolute;inset:0}#viewport #error{position:absolute;inset:20px;max-width:450px;height:max-content;margin:auto}
#control-panel header{position:static!important;display:flex!important;flex-direction:column;align-items:stretch;padding:0;gap:16px;background:transparent;pointer-events:auto}#control-panel .identity{min-width:0}#control-panel .identity .brand>span:last-child{display:inline}#control-panel .identity h1,#control-panel .identity p{display:block}#control-panel .brand{font-size:23px}#control-panel h1{font-size:20px;margin:0 0 5px}#control-panel .identity p{font-size:13px}
#control-panel .mode-switch{position:static;display:flex;transform:none}#control-panel .mode-switch button{flex:1;padding:10px;font-size:14px}#control-panel .top-right{display:flex;flex-direction:column;min-width:0;gap:10px}#control-panel .engine{display:flex;position:static;justify-content:space-between;margin:0}#control-panel .engine>span{display:inline-block;font-size:12px}#control-panel .overview{display:grid;grid-template-columns:repeat(3,1fr);padding:10px 0;background:var(--surface);border:1px solid var(--border)}#control-panel .overview>div{display:block;min-width:0;padding:0 8px}#control-panel .overview span{font-size:12px}#control-panel .overview strong{font-size:18px}#control-panel .overview small{display:inline;font-size:11px}#control-panel .overview>div:first-child>span:after{content:none}
#control-panel .bottom-centre,#control-panel .bottom-left,#control-panel .bottom-right,#control-panel .left-panels,#control-panel .right-panels{position:static!important;display:block!important;width:100%;max-width:none;transform:none;margin:18px 0 0;padding:0;visibility:visible!important}.panel-heading{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 10px}
#control-panel .scenario-dock{display:flex;flex-direction:column;border-radius:10px;white-space:normal;padding:4px}#control-panel .scenario-dock button{width:100%;font-size:14px;min-height:42px;border-radius:7px;padding:9px 10px;justify-content:flex-start}#control-panel .scenario-dock button span{display:inline;font-size:20px}#control-panel .playback{display:flex;flex-wrap:wrap;gap:9px;margin:9px 0;justify-content:flex-start}#control-panel .playback button{min-width:36px;min-height:36px}#control-panel .playback #simulation-time{display:inline}#control-panel #scenario-caption{display:block;flex-basis:100%;font-size:12px;line-height:1.5}#control-panel .playback .divider{display:none}
#control-panel .camera-tools{display:flex;width:100%}#control-panel .camera-tools button{flex:1;padding:7px;font-size:19px;min-height:42px}#control-panel .camera-tools .nav-mode{font-size:14px}#control-panel .bottom-right p{margin-top:8px;font-size:12px}
#control-panel #layers-panel,#control-panel #insight,#control-panel #story,#control-panel #inspector,#control-panel #alert-banner{position:static!important;inset:auto!important;width:100%;max-width:none;max-height:none!important;height:auto;margin:12px 0 0;overflow:visible;padding:14px;visibility:visible!important;border-radius:10px}#control-panel #insight{display:block}#control-panel #layers-panel{margin:0;padding:0;border:0;background:transparent;box-shadow:none}#control-panel #layers-btn{display:none}#control-panel #layers-panel label{font-size:14px}#control-panel select{font-size:14px}
#control-panel #story h2{font-size:20px;line-height:1.35;padding:0;margin:10px 0}#control-panel #story p{display:block!important;font-size:14px;line-height:1.6}#control-panel #story .eyebrow,#control-panel #story .story-progress{display:block}#control-panel .stage-feedback{flex-wrap:wrap;font-size:12px}#control-panel .tour-controls{flex-wrap:wrap}#control-panel .tour-controls button,#control-panel .tour-controls select{font-size:14px;min-height:36px}#control-panel #insight .insight-heading{flex-wrap:wrap}#control-panel #insight p{font-size:14px}#control-panel #alert-banner{display:flex;flex-wrap:wrap}#control-panel #alert-banner p{display:block;font-size:12px}#control-panel #alert-banner strong{font-size:14px}#control-panel #inspector .readings{gap:12px}#control-panel #inspector .readings strong{font-size:20px}
#control-panel .mobile-only,.mobile-bar,#story-toggle{display:none!important}#app.panel-collapsed{grid-template-columns:48px 0 minmax(0,1fr)}#app.panel-collapsed #control-panel{display:none}#control-panel [hidden],#viewport [hidden]{display:none!important}
@media(max-width:760px){#app{grid-template-columns:44px min(290px,68vw) minmax(0,1fr)}#app.panel-collapsed{grid-template-columns:44px 0 minmax(0,1fr)}#control-rail{padding:8px 3px}#control-rail button{width:36px}#control-panel{padding:12px}#control-panel .brand-mark{width:36px;height:34px}#control-panel .overview{grid-template-columns:1fr}#control-panel .overview>div{display:flex;justify-content:space-between;border:0;margin:3px 0}#control-panel .overview strong{font-size:16px}#control-panel .mode-switch button{font-size:13px}#control-panel #story h2{font-size:17px}}

#control-panel{display:flex;flex-direction:column}#control-panel>*{flex-shrink:0}#control-panel header{order:0}#scenario-controls{order:1}#control-panel .left-panels{order:2}#control-panel .right-panels{order:3}#navigation-controls{order:4}#network-controls{order:5}
