:root{font-family:'DM Sans',Arial,sans-serif;color:#eef8f5;background:#081924;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer}#app,#viewport{position:fixed;inset:0;width:100%;height:100%}#viewport{display:block;touch-action:none}#shade{pointer-events:none;position:fixed;inset:0;background:linear-gradient(90deg,rgba(5,17,23,.35) 0%,transparent 63%),linear-gradient(0deg,rgba(2,11,20,.43),transparent 24%)}.bar{position:absolute;z-index:4;top:0;left:0;right:0;height:82px;padding:0 34px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff1c;background:#081722ad;backdrop-filter:blur(22px)}.brand{display:flex;gap:13px;align-items:center}.brand b{font-family:'Barlow Condensed',Impact,sans-serif;letter-spacing:.18em;font-size:25px}.brand small{display:block;font-size:8px;color:#87a4af;letter-spacing:.18em;margin-top:-1px}.mark{width:40px;height:38px;border:1px solid #76d3bc;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:6px;clip-path:polygon(0 0,76% 0,100% 24%,100% 100%,0 100%)}.mark i{display:block;width:6px;background:#8ef2cc;height:15px}.mark i:nth-child(2){height:24px}.mark i:nth-child(3){height:19px}.bar-center{font-size:9px;letter-spacing:.19em;color:#b5d0d2}.thin{margin:0 13px;color:#4f777c}.live-dot,.small-dot,.pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:#71f4bf;box-shadow:0 0 13px #71f4bf;margin-right:7px}.header-actions{display:flex;gap:11px;align-items:center}.header-actions button{border:1px solid #ffffff29;background:#ffffff0a;color:#e3f0f0;border-radius:3px;padding:10px 13px;font-size:11px}.header-actions button:hover,.control-buttons button:hover{background:#3b605c}.engine-label{font-size:9px;letter-spacing:.13em;color:#89c7b7;padding-right:14px}.sidebar{position:absolute;z-index:3;top:99px;left:21px;width:336px;bottom:70px;overflow:auto;padding:25px 24px 20px;background:#061924e6;border:1px solid #ffffff21;box-shadow:0 20px 55px #0006;scrollbar-color:#376071 transparent;scrollbar-width:thin;backdrop-filter:blur(22px)}.eyebrow,.section-title,.inspect-eyebrow,.mini-header{font-size:9px;color:#7ccbaa;font-weight:700;letter-spacing:.16em}.sidebar h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:48px;line-height:.98;letter-spacing:-.02em;font-weight:600;margin:17px 0 14px;text-transform:uppercase}.sidebar h1 em{color:#9ae6cf;font-style:normal}.description{color:#aac2c7;font-size:11px;line-height:1.75;margin:0 0 24px}.metric-row{display:flex;justify-content:space-between;border-top:1px solid #ffffff21;border-bottom:1px solid #ffffff21;padding:17px 1px}.metric-row strong{font-family:'Barlow Condensed',sans-serif;font-size:29px;font-weight:600;line-height:1}.metric-row strong span{font-size:15px;color:#72bfb0;padding-left:1px}.metric-row small{display:block;color:#8aa5ab;font-size:9px;margin-top:5px}.section-title{display:flex;justify-content:space-between;margin:25px 0 14px;color:#c4ddd6}.section-title small{font-size:8px;color:#779ba2}.zone-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}.zone{padding:13px 11px;text-align:left;background:#1229359e;color:#bfd9d9;border:1px solid #ffffff16;min-height:55px;border-radius:2px;font-size:10px;line-height:1.4;display:flex;gap:9px;align-items:center}.zone b{font-size:9px;color:#75afac;font-weight:600}.zone.active,.zone:hover{border-color:#83e4c6;background:#173e45;color:#f2fff9}.range-label{display:flex;justify-content:space-between;margin:16px 0 7px;font-size:10px;color:#c8ddda}.range-label output{color:#8fdac2;font-size:10px}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:#3a5560;border-radius:3px;accent-color:#8ff4c9;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#8ff4c9;box-shadow:0 0 0 4px #8ff4c929}.control-buttons{display:flex;gap:8px;margin-top:20px}.control-buttons button{flex:1;padding:10px 6px;background:#1b3842;border:1px solid #ffffff1a;color:#d9efed;font-size:10px;border-radius:2px}.layer-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.layer{background:#2036409c;color:#b8cbd0;border:1px solid #ffffff19;padding:8px;font-size:10px;text-align:left}.layer::before{content:'●';margin-right:8px;color:#395764}.layer.on::before{color:#7ff2c1}.layer.on{color:#e1fbef;border-color:#699f9277}.panel-note{font-size:9px;color:#577783;line-height:1.6;margin-top:20px}.right-panel{position:absolute;right:24px;top:104px;background:#081d28dc;padding:17px 17px 10px;border:1px solid #ffffff24;backdrop-filter:blur(18px);width:298px}.mini-header,.mini-footer{display:flex;justify-content:space-between}.mini-header{color:#ccdfdc}.mini-header .small-dot{margin:0}.mini-footer{font-size:8px;color:#749ba5;letter-spacing:.14em;margin:8px 0 0}.north-arrow{color:#95e7cf;font-size:15px}.right-panel canvas{width:100%;height:146px;display:block;margin-top:10px}.inspect{position:absolute;z-index:4;right:24px;bottom:83px;width:303px;padding:21px;background:#071f2bea;border:1px solid #8dd6c447;backdrop-filter:blur(20px);box-shadow:0 12px 35px #0008}.inspect button{position:absolute;right:13px;top:10px;color:#b0d0d0;border:0;background:transparent;font-size:24px}.inspect h2{font-family:'Barlow Condensed',sans-serif;font-size:30px;margin:11px 0 7px;text-transform:uppercase}.inspect p{font-size:11px;line-height:1.7;color:#b5cbd0}.inspector-info{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid #ffffff19;font-size:10px}.inspector-info span{color:#819fa5}.inspector-info strong{font-weight:500;color:#c7e9de}.bottom-left,.bottom-center,.signature{position:absolute;bottom:25px;color:#c5dfdc;font-size:9px;letter-spacing:.14em}.bottom-left{left:32px}.bottom-left b{color:#7bf0c4}.sep{display:inline-block;width:1px;height:10px;background:#ffffff44;margin:0 12px;vertical-align:middle}.bottom-center{left:50%;transform:translateX(-50%);white-space:nowrap}.divider-dot{margin:0 10px;color:#66a4a8}.mouse-glyph{font-size:15px;vertical-align:-1px;margin-right:4px}.signature{right:27px;color:#7c9aa3}.signature span{color:#b5d7d5;font-weight:700}.toast{position:absolute;z-index:9;bottom:76px;left:50%;transform:translateX(-50%);background:#153c43;color:#dcffec;padding:12px 20px;font-size:12px;border:1px solid #6dcaa2}.hidden{display:none!important}#loading{position:fixed;z-index:15;inset:0;background:#061821;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;font-size:10px;letter-spacing:.24em;color:#88b3b8;transition:opacity .55s}.load-brand{font-family:Impact,sans-serif;font-size:68px;color:white;letter-spacing:.1em}.load-brand span{color:#7ce2bd}.load-track{width:220px;height:2px;background:#183d47}.load-progress{height:100%;width:80%;background:#81edc9;animation:load 1.7s ease-in-out alternate infinite}@keyframes load{from{width:10%}to{width:100%}}.error{position:fixed;z-index:20;top:100px;left:50%;transform:translateX(-50%);background:#442421;color:#fff;padding:30px;max-width:600px;font-size:15px}
@media(max-width:1050px){.bar-center,.bottom-center{display:none}.sidebar{width:300px}.right-panel{width:250px}}@media(max-width:650px){.bar{height:64px;padding:0 14px}.bar .header-actions{gap:5px}.header-actions button{padding:8px}.header-actions button span,.engine-label{display:none}.sidebar{top:auto;left:8px;right:8px;bottom:49px;width:auto;height:290px;padding:16px;overflow:auto}.sidebar h1{font-size:31px;margin:5px 0}.sidebar .description,.sidebar .metric-row,.sidebar .section-title:not(:first-of-type),.sidebar input,.sidebar .range-label,.sidebar .control-buttons,.sidebar .layer-buttons,.sidebar .panel-note{display:none}.zone-list{grid-template-columns:repeat(4,1fr)}.zone{min-height:42px;font-size:8px;padding:5px;gap:4px}.right-panel{right:8px;top:71px;width:177px;padding:9px}.right-panel canvas{height:98px}.bottom-left{bottom:18px;left:13px;font-size:8px}.signature{display:none}.inspect{right:8px;bottom:350px;width:260px;padding:14px}}