:root{--ink:#e6f5f5;--muted:#8fa7af;--muted2:#6a848d;--line:rgba(148,198,205,.16);--accent:#5be0d0;--blue:#6ab7ee;--amber:#f5c27b;--panel:rgba(8,27,36,.89);--panel2:rgba(12,35,46,.96)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#102b37;color:var(--ink);font-family:'Segoe UI',Arial,sans-serif;font-size:13px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#world{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none;cursor:grab}#world:active{cursor:grabbing}.ocean-vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(1,13,24,.25),transparent 50%,rgba(2,12,18,.21));z-index:1}.hide-until-ready{visibility:hidden}
.topbar{position:absolute;z-index:8;left:0;top:0;width:100%;height:78px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 27px;background:linear-gradient(180deg,rgba(5,25,34,.98),rgba(7,28,38,.91));border-bottom:1px solid var(--line);box-shadow:0 10px 50px #06152028}.brand{text-decoration:none;display:flex;align-items:center;gap:13px;color:white;min-width:275px}.logo{width:43px;height:43px;border:1px solid #5ce4d5aa;background:#123a41;display:grid;place-items:center;border-radius:11px;color:#64e8da;font-size:40px;font-weight:bold}.logo span{transform:translateY(-4px)}.brand strong{font-size:17px;letter-spacing:.14em;white-space:nowrap;font-weight:750}.brandslash{color:var(--accent)}.brand small{display:block;font-size:8.5px;letter-spacing:.23em;color:#8eafb4;margin-top:6px}.operation{display:flex;align-items:center;gap:11px;color:#9db6bb;letter-spacing:.12em;font-size:10px}.operation b{color:#80e6c3;font-weight:650}.pulse{width:7px;height:7px;background:#7bf9bb;box-shadow:0 0 0 4px #7cf9be21,0 0 14px #7cf9bb;border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{50%{opacity:.42}}.separate{color:#476571}.head-actions{display:flex;align-items:center;gap:14px}.muted{color:var(--muted2);font-size:10px;letter-spacing:.16em}.outline-button,.circle-button{color:#dbeff0;border:1px solid #54778275;background:#18333eaa;border-radius:5px;font-size:10px;letter-spacing:.14em;padding:12px 14px;font-weight:bold}.outline-button:hover,.circle-button:hover{border-color:#6ee9d8;background:#254651}.circle-button{width:33px;height:33px;padding:0;border-radius:50%;font-size:15px}
.panel{background:var(--panel);border:1px solid #678d983d;border-radius:10px;box-shadow:0 8px 35px #00121a4d,0 1px 2px #ffffff0a;backdrop-filter:blur(18px);z-index:4}.section-heading{font-size:9.5px;letter-spacing:.20em;color:#9db7bc;display:flex;justify-content:space-between;align-items:center;font-weight:700}.control-panel{position:absolute;top:97px;left:23px;width:287px;padding:19px 18px 15px;max-height:calc(100vh - 118px);overflow:auto;scrollbar-color:#30545f transparent;scrollbar-width:thin}.section-status{font-size:9px;color:#74d6bf;letter-spacing:.06em}.mini-led{display:inline-block;width:5px;height:5px;border-radius:50%;background:#5bdfb3;margin-right:5px;vertical-align:middle}.big-output{border-bottom:1px solid var(--line);padding:26px 0 18px}.big-output>span{display:block;color:#a8c4c6;font-size:9px;font-weight:700;letter-spacing:.12em}.big-output>div:nth-child(2){display:flex;align-items:baseline;gap:10px;margin:9px 0 14px}.big-output b{font-size:36px;letter-spacing:-.06em;font-family:Consolas,monospace;line-height:1.05}.big-output em{font-style:normal;color:#9fb9bc;font-size:10px;white-space:nowrap}.capacity-track{height:5px;background:#1a3b47;overflow:hidden;border-radius:5px}.capacity-track i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#1b8fa9,#70e3ce);border-radius:5px;transition:width .3s}.big-output small{font-size:9px;color:#809ba3;display:block;margin-top:9px}.control-title{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.13em;font-weight:700;margin-top:21px;margin-bottom:19px}.control-scope{color:#4fd6c1;font-size:8px}.slider-row{margin-bottom:19px}.slider-row .slider-head{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-bottom:10px}.slider-row label{font-size:10px;color:#d1e5e5}.slider-row output{font:700 11px Consolas,monospace;color:var(--accent)}input[type=range]{width:100%;margin:0;height:3px;appearance:none;-webkit-appearance:none;cursor:pointer;background:linear-gradient(90deg,var(--accent) var(--range-fill,50%),#304c57 var(--range-fill,50%));border-radius:4px}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#e2fdf8;border:2px solid #54decd;box-shadow:0 0 0 3px #40bbaa29}input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#e2fdf8;border:2px solid #54decd}.control-footer{display:flex;gap:9px;border-top:1px solid var(--line);padding-top:16px}.control-footer button{border:1px solid #3c5e68;background:#163640;border-radius:5px;padding:10px 7px;font-size:9px;letter-spacing:.07em;color:#cee3e3;flex:1}.control-footer button:hover{background:#20515b}.micro-note{font-size:9px;line-height:1.55;color:#698b95;margin-top:14px}
.metric-strip{position:absolute;z-index:3;top:97px;left:330px;right:288px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.metric{background:rgba(7,29,40,.88);border:1px solid #648d9538;border-radius:7px;padding:16px 15px 13px;backdrop-filter:blur(12px);min-width:0}.metric>span{display:flex;justify-content:space-between;gap:4px;font-size:9px;color:#a9c1c4;letter-spacing:.12em;white-space:nowrap;font-weight:700}.metric-symbol{font-size:15px;color:#5bc7b4;font-style:normal}.metric div{display:flex;align-items:baseline;gap:5px;margin:12px 0 8px}.metric b{font:700 23px Consolas,monospace;letter-spacing:-.05em;white-space:nowrap}.metric small{font-size:9px;color:#91b2b7}.metric em{font-style:normal;font-size:9px;color:#6f9f9c;white-space:nowrap}
.navigator-panel{position:absolute;right:23px;top:97px;width:247px;padding:18px 15px 17px;max-height:calc(100vh - 118px);overflow:auto;scrollbar-width:thin;scrollbar-color:#30545f transparent}.tiny-muted{color:#698c99;letter-spacing:.1em}.navigator-panel h2{font-weight:600;font-size:17px;letter-spacing:-.02em;margin:18px 0 6px}.nav-explain{font-size:10px;color:#829eab;line-height:1.65;margin:0 0 16px}.stage-button{display:flex;width:100%;align-items:center;gap:10px;color:#a7c1c9;text-align:left;cursor:pointer;padding:10px 7px;border:1px solid transparent;border-bottom-color:#55747b23;background:none;border-radius:6px}.stage-button:hover{background:#20515b6b}.stage-button.active{background:#20606866;border-color:#438e91a8;color:#e5fff8}.stage-num{font:700 10px Consolas,monospace;color:#4ea0ad;min-width:22px}.stage-button.active .stage-num{color:var(--accent)}.stage-icon{font-size:17px;color:#6ad5c7;width:21px;text-align:center}.stage-txt{min-width:0;flex:1}.stage-txt b{font-size:10px;display:block;letter-spacing:.02em;font-weight:700}.stage-txt small{font-size:9px;color:#718f9a;margin-top:4px;display:block}.stage-button .arrow{color:#6e8c9b;font-size:15px}.mini-schematic{margin:18px 0 16px;background:#0a2935;border:1px solid #39677544;border-radius:6px;padding:12px}.s-head{display:flex;justify-content:space-between;font-size:8.5px;letter-spacing:.1em;color:#8daab2}.s-head span:last-child{color:#5ad1b9}.schematic-flow{display:flex;justify-content:space-between;align-items:center;position:relative;margin:17px 4px}.schematic-flow:before{content:'';position:absolute;width:100%;height:2px;background:#438c91;top:4px}.schematic-flow i{z-index:1;width:9px;height:9px;border-radius:50%;background:#56d7c9;border:2px solid #163d46;box-shadow:0 0 0 2px #2b9c9666}.schematic-flow i:first-child,.schematic-flow i:last-child{width:11px;height:11px}.mini-schematic small{display:flex;justify-content:space-between;color:#698d98;font-size:8px;letter-spacing:.11em}.mini-schematic small span{color:#52cbbc}.inspection-tools{border-top:1px solid var(--line);padding-top:15px}.tool-heading{font-size:9px;color:#9bb4ba;letter-spacing:.16em;font-weight:700;margin-bottom:10px}.switch-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;cursor:pointer;font-size:10px;color:#a4bcbf;position:relative}.switch-row input{opacity:0;position:absolute;right:0}.switch-row i{width:29px;height:16px;border:1px solid #365c66;background:#1f3d49;border-radius:15px;display:block;position:relative;transition:background .2s}.switch-row i:before{content:'';position:absolute;width:10px;height:10px;left:2px;top:2px;background:#7595a1;border-radius:50%;transition:left .2s}.switch-row input:checked+i{background:#1f7c7a;border-color:#55c4bb}.switch-row input:checked+i:before{left:15px;background:#ccfff5}
.world-caption{position:absolute;z-index:3;top:208px;left:50%;transform:translateX(-50%);font:650 9px Consolas,monospace;letter-spacing:.09em;color:#d0e3e2;background:#071d28b0;border:1px solid #3d738069;border-radius:5px;padding:10px 14px;white-space:nowrap;pointer-events:none}.diamond{color:#53c9be}.separator{color:#487a89;margin:0 5px}#callouts{pointer-events:none;position:fixed;inset:0;z-index:2}.callout{position:absolute;transform:translate(-50%,-50%);font-size:9px;color:#d9f4ef;white-space:nowrap;text-shadow:0 1px 3px #071521;letter-spacing:.07em;display:flex;flex-direction:column;align-items:center;gap:3px}.callout:after{content:'';height:26px;width:1px;background:linear-gradient(#65d7c7,transparent)}.callout .pin{width:5px;height:5px;border-radius:50%;background:#72e4ce;box-shadow:0 0 0 3px #4addcc36}.callout strong{padding:5px 7px;background:#0a2b36b8;border:1px solid #62b6ae6b;border-radius:3px}
.telemetry-panel{position:absolute;bottom:40px;left:330px;width:calc((100vw - 640px)*.58);min-width:390px;max-width:730px;height:235px;padding:17px 18px 10px}.telemetry-title{display:flex;justify-content:space-between;align-items:center}.section-overline{color:#93aeb4;font-size:9px;font-weight:700;letter-spacing:.16em}.telemetry-title h2{font-size:14px;font-weight:600;margin:6px 0 7px}.legend{font-size:8.5px;color:#7d9ba4;display:flex;gap:12px}.legend span{display:flex;align-items:center;gap:5px}.legend i{display:inline-block;width:8px;height:8px;border-radius:50%}.legend-cyan{background:#54e1d2}.legend-gold{background:#efbb80}#chart{display:block;width:100%;height:135px}.telemetry-foot{display:flex;justify-content:space-between;font:9px Consolas,monospace;color:#719da5;letter-spacing:.04em}
.condition-panel{position:absolute;bottom:40px;right:288px;width:calc((100vw - 640px)*.41);min-width:285px;max-width:430px;height:235px;padding:17px}.healthy-dot{font-size:9px;letter-spacing:.04em;color:#6cd2b2}.condition-panel h2{font-size:15px;font-weight:650;margin:15px 0 5px}.condition-panel p{color:#8aa7b0;font-size:10px;line-height:1.45;max-height:40px;min-height:40px;overflow:hidden;margin:0 0 12px}.inspector-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.inspector-grid div{border-top:1px solid #557a8038;padding:8px 0 0}.inspector-grid span{display:block;font-size:8px;color:#75969e;letter-spacing:.07em}.inspector-grid b{font:700 15px Consolas,monospace;display:block;margin-top:6px}.condition-foot{margin-top:10px;display:flex;justify-content:space-between;gap:10px;font-size:9px;color:#7f9ba3}.condition-foot i{font-style:normal;color:#5cceb7}.viewport-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:4;font:9px Consolas,monospace;white-space:nowrap;color:#a5bdc2;text-shadow:0 2px 4px #0c2634}.viewport-hint span{color:#49a89a}
#loading{position:fixed;inset:0;z-index:20;background:radial-gradient(circle at 50% 40%,#154750,#061a24 62%);display:grid;place-items:center;text-align:center}.loading-inner{width:350px;max-width:90vw}.loading-logo{font-size:76px;color:#59dacd;height:90px}.loading-inner h1{font-size:15px;letter-spacing:.18em}.loading-inner p{color:#85aab4;font-size:11px;line-height:1.7}.loading-progress{height:4px;background:#1f4752;margin:25px auto 12px;border-radius:8px;overflow:hidden}.loading-progress i{display:block;width:10%;height:100%;background:#60dfcf;animation:load 2s ease-in-out infinite}@keyframes load{50%{width:78%}100%{width:95%}}#loadingHint{font-size:9px;color:#6fabb2;letter-spacing:.1em}.modal-cover{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#031620dd;backdrop-filter:blur(8px)}.modal-cover[hidden]{display:none}.modal{background:#102f3b;border:1px solid #5b9b9c66;padding:35px 38px;max-width:540px;border-radius:12px;box-shadow:0 20px 80px #0009;position:relative}.modal>span{font-size:10px;color:#60e2c9;letter-spacing:.2em}.modal h2{font-size:24px;line-height:1.2;margin:15px 0}.modal p{color:#a0c1c8;line-height:1.7}.modal-close{position:absolute;right:18px;top:12px;background:none;border:none;color:white;font-size:24px}.primary-button{background:#2cae9b;color:#052833;border:0;padding:14px 18px;font-size:11px;font-weight:750;letter-spacing:.13em;margin-top:10px;border-radius:5px}
@media(max-width:1300px){.metric-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.world-caption{top:273px}.metric{padding:11px}.metric b{font-size:21px}.telemetry-panel{width:calc((100vw - 620px)*.56)}.condition-panel{width:calc((100vw - 620px)*.44)}}
@media(max-width:1090px){.topbar{padding:0 12px}.operation{display:none}.control-panel{left:10px;width:250px}.navigator-panel{right:10px;width:211px}.metric-strip{left:270px;right:231px}.telemetry-panel{left:270px;bottom:28px;min-width:300px;width:calc(100vw - 521px)}.condition-panel{display:none}.world-caption{display:none}.viewport-hint{display:none}}
@media(max-width:760px){.topbar{height:62px}.brand small{font-size:7px}.brand strong{font-size:13px}.brand{min-width:0}.head-actions .muted,.head-actions .outline-button{display:none}.control-panel{top:auto;bottom:8px;left:8px;width:calc(50% - 12px);max-height:38vh;padding:12px}.navigator-panel{top:auto;bottom:8px;right:8px;width:calc(50% - 12px);max-height:38vh;padding:12px}.metric-strip{top:75px;left:8px;right:8px;grid-template-columns:repeat(4,1fr);gap:4px}.metric{padding:9px}.metric b{font-size:16px}.metric>span{font-size:7px}.metric em{display:none}.metric div{margin:7px 0}.telemetry-panel,.condition-panel{display:none}.control-panel .big-output{padding-top:13px}.big-output b{font-size:26px}.navigator-panel h2{margin-top:9px}.nav-explain{display:none}}