:root { font-family:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:#e5f0f3; color-scheme:dark; background:#071b29; font-synthesis:none; }
* { box-sizing:border-box } html,body,#app { margin:0; width:100%; height:100%; overflow:hidden }
#app { position:relative; isolation:isolate; } #viewport { position:absolute;inset:0; width:100%;height:100%;display:block;outline:none;cursor:grab;touch-action:none; } #viewport:active{cursor:grabbing}
button,input{font:inherit} button{cursor:pointer} button:focus-visible, input:focus-visible{outline:2px solid #83e9d8;outline-offset:3px}
#boot-status {position:absolute;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Barlow Condensed',sans-serif; font-size:25px;letter-spacing:.2em;color:#beffef;background:#0b2025;padding:18px 24px;transition:opacity .8s}
#boot-status.done {opacity:0;pointer-events:none}
.topbar{position:absolute;z-index:4;top:0;left:0;right:0;height:88px;padding:21px 36px;display:flex;align-items:center;gap:18px;background:linear-gradient(180deg,rgba(4,20,31,.93),rgba(4,20,31,.58) 76%,transparent);pointer-events:none}
.topbar button{pointer-events:auto}.brand-mark{width:53px;height:47px;border:1.5px solid #75e3d1;display:flex;align-items:center;justify-content:center;color:#91f2e3;font-family:'Barlow Condensed',sans-serif;letter-spacing:-.04em;font-size:22px;font-weight:700;flex-shrink:0}.brand-mark span{color:#fff8;font-weight:300;margin:0 2px}
.brand-title{display:flex;flex-direction:column;gap:3px}.brand-title small,.eyebrow,.panel-head small,.panel-section-header,.range-labels,.live-label,.interaction-tip,.status-strip,.vertical-label,.system-footer,.brand-title strong em,.inspector small,.scene-scale small{font-family:'Barlow Condensed',sans-serif;letter-spacing:.16em;font-weight:600}
.brand-title small{font-size:10px;color:#87adb8}.brand-title strong{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.07em;font-size:24px}.brand-title strong em{color:#86e8d4;font-size:16px;font-style:normal;letter-spacing:.03em}
.top-spacer{flex:1}.live-dot{width:7px;height:7px;border-radius:50%;background:#7be8c5;box-shadow:0 0 0 5px #5cefca18,0 0 16px #6dfccc;animation:pulse 2.4s infinite}.live-label{font-size:11px;color:#a8cec8;margin-right:20px}.icon-button{width:31px;height:31px;background:#142f3ca6;border:1px solid #7297a15e;color:#bfd3db;font-family:'Barlow Condensed',sans-serif;font-size:16px;border-radius:50%}
.left-rail{position:absolute;top:106px;bottom:100px;left:39px;display:flex;flex-direction:column;align-items:start;justify-content:space-between;pointer-events:none}.vertical-label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;color:#d1e5e4b5}.scene-scale{border-left:2px solid #8ae2d2;padding-left:11px;display:flex;flex-direction:column;gap:3px}.scene-scale span{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:700;line-height:1}.scene-scale small{font-size:9px;color:#a4ced5}
.scene-title{position:absolute;z-index:2;top:145px;left:113px;width:min(470px,32vw);pointer-events:none;text-shadow:0 2px 24px #092331ce}.eyebrow{color:#9de4d9;font-size:12px}.scene-title h1{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:clamp(42px,5.15vw,88px);line-height:.94;letter-spacing:-.025em;margin:17px 0 16px}.scene-title h1 i{color:#85e6d6;font-style:normal}.scene-title p{font-size:13px;color:#d4e5e9;line-height:1.76;max-width:330px}
.bottom-bar{position:absolute;z-index:4;bottom:32px;left:112px;right:414px;display:flex;flex-direction:column;gap:12px;pointer-events:none}.camera-options{display:flex;flex-wrap:wrap;gap:6px;pointer-events:auto}.camera-options button{background:#0b2632d9;color:#b8d1d6;border:1px solid #82b2b444;outline:none;font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:.08em;padding:11px 14px;transition:all .2s;backdrop-filter:blur(12px)}.camera-options button:hover,.camera-options .selected{background:#93ecdf;color:#0b2735;border-color:#b6fff1}.interaction-tip{font-size:10px;color:#c0d4d9a8;letter-spacing:.12em}.interaction-tip b{color:#71cabb;padding:0 7px}
.control-panel{position:absolute;z-index:5;right:20px;top:102px;bottom:30px;width:366px;background:linear-gradient(155deg,#0a2535f2,#071923f5);border:1px solid #6da4ac45;box-shadow:0 24px 70px #00131d9e, inset 0 1px #aef8ee12;backdrop-filter:blur(21px);padding:22px 21px 18px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#58858b55 transparent}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #8bb7c13b;padding-bottom:19px}.panel-head small{color:#7bbdbf;font-size:11px}.panel-head h2{font-family:'Barlow Condensed',sans-serif;font-size:29px;margin:3px 0 0;font-weight:600;letter-spacing:.012em}.indicator{font-family:'Barlow Condensed',sans-serif;color:#7debcd;font-size:11px;letter-spacing:.09em;border:1px solid #458a79;padding:6px 7px;margin-top:5px}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#37616a4a;margin:15px 0 23px}.metrics>div{padding:14px;background:#0b2734;min-height:89px}.metrics small{display:block;font-family:'Barlow Condensed',sans-serif;color:#99bdc8;letter-spacing:.13em;font-size:11px;margin-bottom:8px}.metrics strong{font-family:'Barlow Condensed',sans-serif;font-size:35px;line-height:1;font-weight:600;color:#f0f6f5;font-variant-numeric:tabular-nums}.metrics strong.small{font-size:29px;color:#96efe0}.metrics span{font-size:12px;color:#89daca;padding-left:5px}
.panel-section-header{font-size:12px;display:flex;justify-content:space-between;align-items:center;color:#c0dbe2;border-bottom:1px solid #7799a833;padding-bottom:9px;margin:18px 0 14px}.panel-section-header span{color:#7195a5}
.input-group{margin-bottom:20px}.input-group label{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:#d5e3e6}.input-group output{font-family:'Barlow Condensed',sans-serif;color:#8ff5df;font-size:18px;font-weight:600;letter-spacing:.05em}
.input-group input[type=range]{display:block;width:100%;margin:13px 0 8px;appearance:none;background:linear-gradient(90deg,#72e7d0 var(--percent),#284552 var(--percent));height:3px;border:0;outline:none;cursor:pointer}.input-group input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#9ff9e6;box-shadow:0 0 0 4px #75dbc326;border:2px solid #113446}.input-group input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#9ff9e6;border:2px solid #113446}.range-labels{display:flex;justify-content:space-between;color:#678995;font-size:10px}
.toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 7px;margin:17px 0 23px}.switch-row{display:flex;align-items:center;gap:8px;color:#b9d1d8;font-size:11px;cursor:pointer}.switch-row input{position:absolute;opacity:0}.fake-check{width:25px;height:14px;border-radius:12px;border:1px solid #426876;background:#1e3947;position:relative;flex-shrink:0}.fake-check:after{content:'';position:absolute;left:2px;top:2px;width:8px;height:8px;border-radius:50%;background:#7a929e;transition:all .2s}.switch-row input:checked+.fake-check{background:#256c69;border-color:#6ae3d3}.switch-row input:checked+.fake-check:after{transform:translateX(11px);background:#a7ffed}.switch-row input:focus-visible+.fake-check{outline:2px solid #8df5dc}
.panel-actions{display:flex;gap:7px;margin-bottom:20px}.panel-actions button{flex:1;background:#163844;color:#c4e4e2;border:1px solid #4b8182;font-family:'Barlow Condensed',sans-serif;letter-spacing:.12em;font-size:13px;padding:10px 5px}.panel-actions button:hover{background:#244d59}.system-footer{display:flex;justify-content:space-between;gap:9px;font-size:9px;color:#648b97;letter-spacing:.05em}
#labels-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}.component-label{position:absolute;top:0;left:0;will-change:transform;white-space:nowrap;padding:5px 8px 5px 16px;color:#dffdf4;border:1px solid #b5fff454;background:#082330b6;box-shadow:0 3px 12px #09222bbb;font-family:'Barlow Condensed',sans-serif;letter-spacing:.11em;font-weight:600;font-size:10px;backdrop-filter:blur(4px)}.component-label:before{content:'';position:absolute;left:6px;top:50%;width:4px;height:4px;border-radius:50%;background:#79f4d7;transform:translateY(-50%)}.component-label:hover{background:#236c68}
.inspector{position:absolute;z-index:7;left:100px;bottom:115px;width:330px;padding:19px 23px;background:#081e2cf2;border-left:3px solid #8cf8e0;border-top:1px solid #73949d77;border-bottom:1px solid #73949d77;box-shadow:0 18px 42px #001523b8;transition:transform .25s,opacity .25s;backdrop-filter:blur(12px)}.inspector.is-hidden{transform:translateX(-30px);opacity:0;pointer-events:none}.inspector>button:first-child{position:absolute;right:13px;top:8px;background:none;border:0;color:#cee1e4;font-size:24px}.inspector small{font-size:11px;color:#78d6c8}.inspector h3{font-family:'Barlow Condensed',sans-serif;font-size:29px;line-height:1.04;margin:12px 24px 12px 0}.inspector p{color:#bcd2dc;font-size:12px;line-height:1.6;margin-bottom:11px}.inspection-spec{font-size:11px;color:#bfece4;border-top:1px solid #4877825c;padding:6px 0}.inspection-spec:before{content:'•';color:#85e7d6;margin-right:7px}.inspector #focusComponent{margin-top:11px;background:#8cebdc;color:#102f35;border:0;padding:11px 14px;font-family:'Barlow Condensed',sans-serif;letter-spacing:.1em;font-weight:700}
.status-strip{position:absolute;bottom:0;left:0;right:0;height:22px;background:#061b24c9;display:flex;gap:28px;align-items:center;padding:0 34px;color:#80adb4;font-size:10px;z-index:6}.status-strip>span:first-child{color:#92ebd7}
.help-modal{position:absolute;z-index:22;inset:0;background:#00131cc9;display:grid;place-items:center;padding:24px;backdrop-filter:blur(6px)}.help-modal.hidden{display:none}.help-inner{max-width:490px;background:#092939;border:1px solid #7eb6bb88;padding:35px 39px;position:relative;box-shadow:0 25px 60px #0008}.help-inner small{font-family:'Barlow Condensed',sans-serif;letter-spacing:.2em;color:#8ae6d4}.help-inner h2{font:600 38px 'Barlow Condensed',sans-serif;margin:10px 0}.help-inner p{color:#c4dee2;line-height:1.7;font-size:14px}.help-inner .disclaimer{font-size:11px;color:#85a5ae}.help-close{position:absolute;right:15px;top:12px;background:transparent;border:0;font-size:25px;color:#fff}kbd{border:1px solid #6d9fa8;padding:2px 6px}
@keyframes pulse{50%{box-shadow:0 0 0 8px #5cefca00,0 0 22px #b1ffde}}
@media(max-height:820px){.control-panel{padding-top:14px;top:86px;bottom:23px}.metrics>div{padding:9px;min-height:70px}.metrics strong{font-size:29px}.panel-section-header{margin:10px 0}.input-group{margin-bottom:11px}.input-group input[type=range]{margin:8px 0 5px}.panel-head{padding-bottom:9px}}
@media(max-width:1120px){.scene-title{top:125px;left:83px;width:29vw}.scene-title h1{font-size:55px}.bottom-bar{left:80px}.left-rail{left:22px}.control-panel{width:324px;right:12px}.bottom-bar{right:345px}.camera-options button{padding:9px;font-size:11px}.inspector{left:72px}}
@media(max-width:780px){.topbar{height:72px;padding:11px 16px}.brand-mark{width:43px;height:40px;font-size:19px}.brand-title strong{font-size:19px}.brand-title small{font-size:8px}.live-dot,.live-label,.left-rail{display:none}.scene-title{left:16px;top:82px;width:calc(100% - 32px)}.scene-title h1{font-size:43px;margin:6px 0}.scene-title p{display:none}.eyebrow{font-size:9px}.control-panel{top:auto;bottom:30px;right:8px;left:8px;width:auto;max-height:47vh;padding:12px 15px;overflow-y:auto}.panel-head h2{font-size:24px}.metrics{margin:8px 0;grid-template-columns:repeat(4,1fr)}.metrics>div{padding:7px 6px;min-height:62px}.metrics strong{font-size:22px}.metrics strong.small{font-size:17px}.metrics small{font-size:8px}.metrics span{font-size:9px}.bottom-bar{left:8px;right:8px;bottom:calc(47vh + 40px)}.camera-options{gap:3px}.camera-options button{font-size:10px;padding:8px}.interaction-tip{display:none}.inspector{left:9px;right:9px;bottom:calc(47vh + 84px);width:auto;padding:12px}.inspector h3{font-size:22px}.inspector p{font-size:11px}.inspection-spec{font-size:10px}.component-label{font-size:9px}.system-footer{font-size:8px}}
@media(prefers-reduced-motion:reduce){.live-dot{animation:none}*{scroll-behavior:auto!important}}