:root{font-family:Inter,Segoe UI,Microsoft YaHei,sans-serif;color:#d9efff;background:#02070c;font-synthesis:none;--cyan:#19d3ff;--blue:#2869ff;--line:rgba(116,211,255,.18)}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:radial-gradient(circle at 52% 44%,#102638 0,#06121d 33%,#02070c 72%)}button,input{font:inherit}button{color:inherit}#viewport{position:absolute;inset:0;width:100%;height:100%;outline:none;cursor:grab}#viewport:active{cursor:grabbing}.noise{position:absolute;inset:0;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E")}.scanline{position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 50%,#1bd0ff04 50%);background-size:100% 4px;mix-blend-mode:screen}.glass{background:linear-gradient(135deg,#07141fc9,#050e1775);border:1px solid var(--line);box-shadow:inset 0 1px #ffffff09,0 18px 60px #0003;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.topbar{position:absolute;left:22px;right:22px;top:18px;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;clip-path:polygon(0 0,100% 0,100% 68%,98.5% 100%,1.5% 100%,0 68%)}.brand{display:flex;align-items:center;gap:13px}.brand b{font-size:21px;letter-spacing:.32em}.brand small{display:block;margin-top:3px;font-size:9px;letter-spacing:.22em;color:#5f8499}.brand-mark{position:relative;width:35px;height:35px;display:grid;place-items:center;border:1px solid #1fbbe8;transform:rotate(45deg);box-shadow:0 0 24px #16bcec55}.brand-mark i{position:absolute;width:5px;height:22px;border-radius:9px;background:linear-gradient(#42e6ff,#185ee5);transform:rotate(-45deg)}.brand-mark i:nth-child(2){transform:rotate(15deg)}.brand-mark i:nth-child(3){transform:rotate(75deg)}.top-status{font-size:10px;letter-spacing:.2em;color:#75a5ba}.top-status em{font-style:normal;color:#1ed4ff;margin-left:18px}.pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:#3dffbd;box-shadow:0 0 14px #3dffbd;margin-right:8px;animation:pulse 1.8s infinite}@keyframes pulse{50%{opacity:.35;transform:scale(.65)}}.left-panel{position:absolute;left:22px;top:98px;bottom:82px;width:290px;padding:28px 24px;clip-path:polygon(0 0,94% 0,100% 4%,100% 96%,94% 100%,0 100%)}.eyebrow,.mode-label{font-size:9px;letter-spacing:.24em;color:#4d8aa8}.left-panel h1{margin:12px 0 10px;font-size:38px;line-height:.92;font-weight:300;letter-spacing:.08em}.left-panel h1 span{font-size:17px;color:#91bfd2;font-weight:400;letter-spacing:.16em}.left-panel>p{font-size:11px;line-height:1.8;color:#6d8b9c;margin:0 0 27px}.mode-label{padding-top:19px;margin:18px 0 10px;border-top:1px solid rgba(109,198,240,.12)}.primary-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.action,.secondary-actions button,.view-grid button{border:1px solid rgba(100,177,212,.18);background:#05131ea6;padding:11px 8px;cursor:pointer;transition:.25s}.action{display:flex;align-items:center;gap:8px;text-align:left;font-size:11px}.action span{font-size:9px;color:#50758a}.action.active,.secondary-actions button.active,.view-grid button.active,.action:hover,.secondary-actions button:hover,.view-grid button:hover{border-color:#1fcfffa8;background:linear-gradient(135deg,#0d5a7833,#0b1f31);box-shadow:inset 0 0 22px #1bcfff12;color:#88ebff}.range-wrap{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:18px;font-size:10px;color:#718e9e}.range-wrap output{color:#33d8ff}.range-wrap input{grid-column:1/-1;width:100%;accent-color:#19d3ff;height:2px}.secondary-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:17px}.secondary-actions button{padding:9px 5px;font-size:9px}.view-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.view-grid button{font-size:9px;padding:9px 3px}.right-panel{position:absolute;right:22px;top:98px;width:276px;padding:22px;clip-path:polygon(6% 0,100% 0,100% 100%,6% 100%,0 94%,0 6%)}.panel-title{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.18em;color:#5c879b}.panel-title b{color:#1dd7ff}.part-icon{height:120px;display:grid;place-items:center}.rings{position:relative;width:74px;height:74px;border:1px solid #1d85af;border-radius:50%;box-shadow:0 0 30px #19c8ff19}.rings:before,.rings:after,.rings i{content:"";position:absolute;inset:10px;border:1px solid #1bc8fa55;border-radius:50%}.rings:after{inset:22px;border-color:#24dfff}.rings i:nth-child(1){inset:-9px;border-style:dashed;animation:spin 12s linear infinite}.rings i:nth-child(2){inset:31px;background:#1bd9ff;border:0;box-shadow:0 0 22px #1bd9ff}.rings i:nth-child(3){inset:4px;border-color:transparent;border-top-color:#5ce8ff;animation:spin 3s linear infinite reverse}@keyframes spin{to{transform:rotate(360deg)}}.right-panel h2{margin:2px 0 8px;font-size:18px;font-weight:500}.right-panel>p{min-height:46px;margin:0 0 18px;color:#6d8d9e;font-size:10px;line-height:1.65}.right-panel dl{margin:0;border-top:1px solid #72d8ff16}.right-panel dl div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #72d8ff11;font-size:9px}.right-panel dt{color:#507184}.right-panel dd{margin:0;color:#9ec8d9}.ok{color:#3dffbd}.metric{position:relative;margin-top:13px;display:grid;grid-template-columns:1fr auto;font-size:9px;color:#5d8296}.metric b{color:#bcecff}.metric i{grid-column:1/-1;height:2px;margin-top:6px;background:linear-gradient(90deg,#1dcff5 var(--value),#163143 var(--value));box-shadow:0 0 8px #1dcff555}.bottom{position:absolute;left:22px;right:22px;bottom:18px;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:9px;letter-spacing:.08em}.telemetry{display:flex;gap:22px;color:#638496}.telemetry b{color:#b4d5e3;margin-left:5px}.dot{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:5px}.cyan{background:#26ddff;box-shadow:0 0 8px #26ddff}.blue{background:#3b73ff}.green{background:#3dffbd}.hint{color:#486779}.fps{color:#526f7e}.fps b{color:#2cdcff;margin-left:7px}.dimension{position:absolute;pointer-events:none;color:#4ebcdd99;font-size:9px;letter-spacing:.15em}.dimension-x{left:50%;bottom:96px;width:310px;margin-left:-155px;border-bottom:1px solid #3acdf766;text-align:center}.dimension-x:before,.dimension-x:after{content:"";position:absolute;bottom:-4px;width:7px;height:7px;border-left:1px solid #3acdf7;border-bottom:1px solid #3acdf7;transform:rotate(45deg)}.dimension-x:before{left:0}.dimension-x:after{right:0;transform:rotate(225deg)}.dimension-x span{position:relative;top:16px}.dimension-y{left:330px;top:43%;height:190px;border-left:1px solid #3acdf755}.dimension-y span{position:absolute;left:-33px;top:80px;transform:rotate(-90deg)}#tooltip{position:absolute;display:none;pointer-events:none;padding:7px 10px;border:1px solid #27d5ff66;background:#06131eea;color:#b7edff;font-size:9px;letter-spacing:.08em;transform:translate(12px,12px)}@media(max-width:1050px){.right-panel{display:none}.dimension-y{left:auto;right:30px}.left-panel{width:260px}.hint{display:none}}@media(max-width:720px){.topbar{left:10px;right:10px;top:10px}.top-status{display:none}.left-panel{inset:auto 10px 70px;width:auto;height:245px;padding:16px 18px}.left-panel h1{font-size:25px}.left-panel>p,.eyebrow{display:none}.mode-label{margin:7px 0;padding-top:7px}.right-panel,.dimension,.bottom .telemetry{display:none}.bottom{left:10px;right:10px;bottom:10px;justify-content:center}.secondary-actions{margin-top:8px}.range-wrap{margin-top:10px}.view-grid{grid-template-columns:repeat(4,1fr)}}