:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#e7eff6;--accent:#ff8b51;--muted:#89a0aa;--edge:rgba(162,198,212,.14);--bg:rgba(5,12,19,.87)}*{box-sizing:border-box}body{margin:0;background:#080f18;overflow:hidden}button,select,input{font:inherit}button{cursor:pointer}canvas#world{display:block;width:100vw;height:100vh;touch-action:none}.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 53% 46%,transparent 30%,rgba(5,9,15,.25) 90%),linear-gradient(to top,rgba(3,8,15,.62),transparent 23%);z-index:1}.topbar{position:fixed;top:0;left:0;right:0;height:83px;background:linear-gradient(#071018f2,#09121cd9);border-bottom:1px solid var(--edge);display:flex;align-items:center;justify-content:space-between;padding:0 32px;z-index:5;gap:12px}.brand{display:flex;align-items:center;gap:15px}.brandmark{width:43px;height:43px;border:1px solid #ee8f56;display:grid;place-items:center;clip-path:polygon(50% 0,100% 18%,100% 78%,50% 100%,0 78%,0 18%);color:#ffad70;font-size:24px;background:#ff8f3d16}.brand-small,.panel-kicker{color:#ffae7b;font-size:10px;font-weight:750;letter-spacing:2.2px}.brand-title{font-size:20px;font-weight:800;letter-spacing:2.8px;margin-top:2px}.brand-code{color:#aabdc7;font-weight:400;font-size:17px;letter-spacing:1.6px}.sep{color:#71818e;padding:0 4px}.topcenter{font-size:10px;font-weight:700;letter-spacing:2px;color:#9ab1be;white-space:nowrap}.live-dot,.mini-dot{display:inline-block;background:#5ec7a7;width:7px;height:7px;border-radius:100%;box-shadow:0 0 12px #5be7b3;margin-right:9px}.top-divider{padding:0 14px;color:#60717c}.rightnav{display:flex;gap:9px}.navbtn{border:1px solid #364651;background:transparent;color:#c6d6df;padding:12px 15px;font-size:10px;font-weight:800;letter-spacing:1px}.navbtn.strong{background:#c9dfdf;color:#101b24;border-color:transparent}.navbtn:hover,.preset:hover{background:#5f788333}.side{position:fixed;top:83px;bottom:0;z-index:4;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#273e4c transparent}.leftside{left:0;width:309px;padding:34px 23px 24px 31px;background:linear-gradient(90deg,#06101bec,#08131ce0 70%,#08131cd5);border-right:1px solid var(--edge)}.leftside h1{font-size:34px;line-height:1.13;letter-spacing:-1.4px;margin:17px 0 18px;font-weight:730}.leftside h1 em{font-weight:350;color:#ffaf7d;font-style:normal}.intro{color:#9aadb9;font-size:12px;line-height:1.7;max-width:260px;margin:0 0 24px}.divider{height:1px;background:var(--edge);margin:21px 0}.section-label{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#d6e2e9;display:flex;justify-content:space-between;margin-bottom:14px}.section-label span{font-size:9px;font-weight:600;letter-spacing:1px;color:#6e8795}.presets{display:grid;gap:3px}.preset{width:100%;display:flex;gap:11px;align-items:center;text-align:left;background:transparent;color:#d3e0e7;border:1px solid transparent;border-radius:2px;padding:11px 8px}.preset.active{background:#1b303a9f;border-color:#395666}.preseticon{width:30px;font-size:21px;color:#f7a66f;text-align:center}.preset strong{display:block;font-size:12px;font-weight:700}.preset small{display:block;font-size:10px;color:#8ca1af;margin-top:5px}.presetnum{margin-left:auto;font-size:10px;color:#74909c}.left-foot{font-size:9px;letter-spacing:1.2px;color:#8499a5;font-weight:750;margin-top:24px;line-height:2}.left-foot #viewport-note{font-size:10px;letter-spacing:0;text-transform:none;font-weight:400}.rightside{right:0;width:306px;padding:31px 25px 30px;background:linear-gradient(270deg,#06101cef,#08131ce3);border-left:1px solid var(--edge)}.side-head{display:flex;align-items:center;justify-content:space-between}.side h2{font-size:20px;letter-spacing:-.4px;margin:8px 0 0}.live-label{font-size:10px;letter-spacing:1.3px;color:#6bd8b0;background:#3cba9c1a;border:1px solid #3cba9c44;padding:7px}.output{margin-top:27px;background:linear-gradient(140deg,#20313d75,#0d1d2778);padding:18px 15px 12px;border:1px solid #38515b6b}.output-label{display:flex;justify-content:space-between;color:#9db5bc;font-size:9px;letter-spacing:1.25px;font-weight:800}.output-label span{color:#65cd9e}.output strong{font-size:43px;font-weight:760;letter-spacing:-2px;line-height:1.55}.unit{font-size:16px;color:#91a5ae;margin-left:7px}.meter{background:#2b3e47;height:5px;overflow:hidden}.meter>div{background:linear-gradient(90deg,#33c5a4,#d7e5b2);height:100%;width:74%;transition:width .3s}.meter-ends{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#92a7ae;margin-top:9px}.kpis{display:grid;grid-template-columns:1fr 1fr;gap:24px 14px;margin-top:25px}.kpis div{min-width:0}.kpis span{display:block;font-size:9px;letter-spacing:1px;color:#9aaeba;font-weight:750}.kpis b{display:block;font-size:23px;font-weight:600;margin-top:6px;white-space:nowrap}.kpis small{font-size:12px;font-weight:400;color:#8ea3ac}.slider-control{margin:20px 0}.slider-top,.switch-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#b9c8d0}.slider-top output,.switch-row output{color:#ffb287;font-weight:760}input[type=range]{width:100%;appearance:none;-webkit-appearance:none;display:block;height:4px;background:#3e5260;outline:none;margin:19px 0 8px;cursor:pointer;accent-color:#f49d65}input[type=range]::-webkit-slider-thumb{appearance:none;background:#ff9d67;width:12px;height:12px;border-radius:50%;border:2px solid #fff1de;box-shadow:0 0 6px #fa7b34}input.time-range{margin-top:16px}.select-row{margin-top:19px}.switch-row select{width:132px;background:#1a2a34;color:#cbd9df;border:1px solid #38505d;padding:7px 8px;font-size:11px;outline:none}.playrow{margin-top:27px;display:flex;gap:7px}.playrow button{background:#293840;color:#dce9e7;border:1px solid #42545c;font-size:10px;font-weight:750;letter-spacing:.9px;padding:12px 11px}.playrow #pause-btn{flex:1}.playrow #reset-btn{font-size:17px;padding:8px 15px}.bottomleft{z-index:3;position:fixed;left:335px;bottom:26px;color:#d3e1e6;pointer-events:none}.coord span{display:block;font-size:10px;color:#9bb5c0;letter-spacing:1.5px}.coord b{display:block;font-size:14px;letter-spacing:1px;margin:7px 0 20px;font-weight:600}.tip{font-size:10px;letter-spacing:.5px;color:#a6bdc5}.tip kbd,.helps kbd{display:inline-block;padding:5px 6px;border:1px solid #718994;border-radius:2px;background:#1c3039a3;color:#e0edf0;font:700 9px Inter,Arial;margin-right:6px}.bottomright{position:fixed;right:326px;bottom:23px;z-index:3;display:flex;align-items:end;gap:15px}.map-wrap{position:relative;width:178px;height:178px;background:#14222b;border:1px solid #6f888d91;padding:6px;box-shadow:0 12px 50px #0009}.map-wrap canvas{width:164px;height:164px;cursor:crosshair}.map-title{position:absolute;bottom:9px;left:11px;font-size:9px;letter-spacing:1px;font-weight:800;text-shadow:0 2px 6px #000}.map-north{position:absolute;right:12px;top:13px;font-size:11px;color:#d4e9e6;font-weight:850}.performance{border:1px solid #536b7349;background:#09151ddf;padding:12px 13px;min-width:185px}.performance>span{font-size:9px;letter-spacing:1.1px;color:#839da8}.performance b{display:block;font-size:11px;letter-spacing:1px;margin:7px 0;color:#b5ded0}.performance .mini-dot{width:6px;height:6px}.performance small{display:block;color:#8ca2ac;font-size:9px;letter-spacing:.4px}.inspect{position:fixed;z-index:8;left:calc(50% - 158px);bottom:85px;width:316px;background:#0c1c25f5;border:1px solid #527282;padding:20px;box-shadow:0 30px 100px #0009}.inspect h3{margin:10px 0;font-size:21px}.inspect p{font-size:12px;color:#a5b8c1;line-height:1.6}.inspect-type{color:#6ed8b1;font-size:10px;letter-spacing:1.2px;font-weight:700}.inspect>button:first-child{float:right;color:#c8d7e0;background:none;border:0}.inspect #inspect-go{background:#f2a674;color:#16232c;border:0;padding:10px 15px;font-size:10px;font-weight:800;letter-spacing:1px}.modal-backdrop{position:fixed;z-index:20;inset:0;background:#01070cbd;display:grid;place-items:center;backdrop-filter:blur(6px)}.modal{background:#11212b;border:1px solid #607882;max-width:530px;padding:32px;box-shadow:0 30px 100px #000b}.modal h2{font-size:28px;margin:10px 0}.modal p{font-size:13px;color:#b2c3cc;line-height:1.65}.close{float:right;background:none;color:white;border:0;font-size:18px}.helps{display:grid;gap:12px;margin:22px 0}.helps div{display:flex;align-items:center;gap:12px;color:#c5d6dc;font-size:12px}.helps kbd{min-width:90px;text-align:center}.help-muted{font-size:10px!important;color:#7c9aa6!important}[hidden]{display:none!important}#load{position:fixed;z-index:50;inset:0;background:#08131c;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}#load .spinner{height:58px;width:58px;border:2px solid #264858;border-top-color:#fb9e62;border-radius:50%;animation:rotate 1.2s linear infinite;margin-bottom:29px}#load h2{font-size:34px;font-weight:650;margin:12px 0}#load p{color:#9cb1bc;font-size:13px}#load .loadbar{margin:22px 0;width:250px;height:4px;background:#20333f;overflow:hidden}#load .loadbar span{display:block;background:#ffaa75;height:100%;animation:fill 2s ease-in-out infinite}#load small{font-size:9px;letter-spacing:1.2px;color:#7294a1}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes fill{0%{width:0}60%{width:84%}100%{width:100%}}@media(max-width:1220px){.leftside{width:250px;padding-left:18px}.rightside{width:264px;padding:25px 18px}.leftside h1{font-size:27px}.bottomleft{left:270px}.bottomright{right:278px}.performance{display:none}.topcenter{display:none}}@media(max-width:850px){.topbar{height:64px;padding:0 12px}.topbar .brand-small{font-size:8px}.brand-title{font-size:14px}.brand-code{font-size:12px}.brandmark{width:34px;height:34px}.rightnav .navbtn{padding:7px;font-size:9px}.rightnav #help-btn{display:none}.leftside{top:64px;bottom:auto;max-height:55vh;width:190px;padding:16px 12px}.leftside h1,.intro,.left-foot{display:none}.rightside{top:auto;bottom:0;height:240px;width:100vw;display:grid;grid-template-columns:1fr 1fr;padding:14px 18px;gap:8px;border-top:1px solid var(--edge);overflow:hidden}.rightside .side-head,.rightside .kpis,.rightside .divider,.rightside .section-label,.rightside .switch-row,.rightside #time,.rightside #pause-btn,.rightside #reset-btn{display:none}.rightside .output{margin:0;padding:8px}.rightside .output strong{font-size:27px}.rightside .slider-control{margin:9px 0}.rightside input[type=range]{margin:9px 0}.leftside .presets{max-height:220px;overflow:auto}.leftside .preset{padding:5px}.leftside .preset small{display:none}.leftside .presetnum{display:none}.bottomleft{display:none}.bottomright{right:10px;bottom:257px}.map-wrap{width:120px;height:120px}.map-wrap canvas{width:106px;height:106px}.map-title{font-size:7px}.brand-small{letter-spacing:1px}}