:root {color-scheme:dark;--bg:#07111b;--glass:rgba(8,20,33,.89);--line:rgba(113,175,187,.23);--ink:#e1edf1;--muted:#819da9;--teal:#5be5e5;--orange:#f4a46c;--cyan:#58dbea;font-family:Inter,"Segoe UI",Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:#050b12;color:var(--ink);height:100vh;overflow:hidden;font-size:12px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
#world-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;outline:0}
#vignette{pointer-events:none;position:fixed;inset:0;background:radial-gradient(ellipse 55% 56% at 51% 48%,transparent 34%,rgba(1,8,16,.49) 100%),linear-gradient(transparent 80%,rgba(2,6,11,.75));z-index:1}
.scan-line{pointer-events:none;position:fixed;inset:0;z-index:2;background:repeating-linear-gradient(to bottom,transparent 0,transparent 5px,rgba(91,229,229,.008) 6px);opacity:.48}
#crosshair{position:fixed;z-index:4;left:50%;top:51%;width:20px;height:20px;transform:translate(-50%,-50%);pointer-events:none;opacity:.8}#crosshair b:first-child{position:absolute;top:9px;width:20px;height:1px;background:#b1e7ec}#crosshair b:last-child{position:absolute;left:9px;height:20px;width:1px;background:#b1e7ec}
#topbar{height:81px;position:fixed;z-index:7;left:0;right:0;top:0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:linear-gradient(90deg,rgba(4,12,21,.92),rgba(4,12,21,.72));backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:13px}.sigil,.intro-sigil{font-size:21px;font-weight:900;letter-spacing:-.15em;color:var(--teal);border:1px solid rgba(89,217,230,.5);padding:11px 15px 12px 12px;clip-path:polygon(0 0,100% 0,100% 75%,75% 100%,0 100%)}.sigil span,.intro-sigil span{font-weight:500;color:#d7f4f7}
.brand strong{font-size:16px;font-weight:850;letter-spacing:.22em;display:block}.brand em{font-style:normal;color:#75bbcf}.brand small{font-size:8px;letter-spacing:.22em;color:#73909c;display:block;margin-top:7px}.top-stats{color:#a7bcc4;font-size:10px;letter-spacing:.13em;display:flex;align-items:center;gap:13px}.live-dot,.tiny-dot{width:7px;height:7px;background:#51edb0;border-radius:50%;box-shadow:0 0 14px #51edb0}.divider-vert{height:20px;border-left:1px solid var(--line);margin:0 8px}.icon-btn{background:rgba(22,45,59,.75);color:#cee5ea;border:1px solid var(--line);height:35px;min-width:35px;border-radius:4px;font-size:19px}
.glass-panel{position:fixed;z-index:5;top:98px;bottom:87px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:0 0 46px rgba(0,0,0,.3);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#286477 transparent}
#left-panel{left:20px;width:300px;padding:25px 23px}#right-panel{right:20px;width:315px;padding:23px 21px}.eyebrow{font-size:9px;letter-spacing:.22em;color:#6cbaca;font-weight:700}.panel-heading .eyebrow{display:flex;align-items:center;gap:10px}.panel-heading h1{font-size:28px;letter-spacing:.08em;line-height:1.09;font-weight:860;margin:19px 0 12px}.panel-heading i{font-style:normal;color:var(--teal)}.panel-heading p{color:#98acb6;line-height:1.55;font-size:11px;margin:0 0 25px;max-width:230px}.muted{font-size:9px;letter-spacing:.13em;color:var(--muted)}.info-row{display:flex;justify-content:space-between;align-items:center;gap:4px}.tag{font-size:9px;background:rgba(67,186,198,.12);border:1px solid #2f7886;color:#7fe5eb;padding:6px;white-space:nowrap}h2{font-size:15px;letter-spacing:.06em}#sector-name{margin:14px 0 8px} .sector-description{color:#90a6b3;line-height:1.55;font-size:11px;margin:0 0 18px}.hairline{height:1px;background:var(--line);margin:20px 0}.label-top{display:flex;justify-content:space-between;align-items:center;color:#bad5dd;font-size:9px;letter-spacing:.14em;margin-bottom:12px;font-weight:700}.teal{color:#56ddca}.level-selector{display:grid;gap:5px}.level-selector button{width:100%;height:52px;border:1px solid rgba(91,141,162,.23);color:#afc3cb;background:rgba(27,48,63,.4);display:grid;align-items:center;text-align:left;grid-template-columns:36px 1fr 54px;padding:5px 10px;transition:all .15s}.level-selector button>span:first-child{font-weight:900;color:#416c80;font-size:16px}.level-selector button>span:nth-child(2){font-size:11px;letter-spacing:.1em;font-weight:800}.level-selector small{font-size:8px;letter-spacing:.13em;color:#7394a2}.level-selector b{font-size:9px;text-align:right;color:#859eaa}.level-selector button:hover{border-color:#478c9a;background:rgba(40,92,112,.35)}.level-selector button.active{background:rgba(35,124,143,.22);border-color:#50b4c3;border-left:3px solid #6adddc;color:white}.level-selector button.active>span:first-child{color:#7de9f1}
.control-lines{display:grid;gap:14px}.control-lines label{display:grid;grid-template-columns:1fr auto;gap:6px;color:#9fb4bf;letter-spacing:.03em;font-size:11px}.control-lines output{color:#7de3e3}input[type=range]{grid-column:1/3;appearance:none;width:100%;height:3px;background:#315467;cursor:pointer;margin:6px 0 0}input[type=range]::-webkit-slider-thumb{appearance:none;width:10px;height:10px;background:#70e4e9;border-radius:1px;box-shadow:0 0 7px #5adce3}.button-row{display:flex;gap:7px;margin-top:20px}.secondary{background:rgba(20,59,71,.6);border:1px solid #2a7582;color:#b7d9df;padding:11px 9px;flex:1;font-size:9px;font-weight:800;letter-spacing:.04em}.secondary.on{color:#6cebdd;border-color:#46c2bb}
.right-heading{display:flex;justify-content:space-between;align-items:center}#right-panel h2{font-size:13px;letter-spacing:.15em;margin-top:14px}.map-wrap{position:relative;border:1px solid #284c5b;background:radial-gradient(ellipse,#122534 0,#07131f 70%);overflow:hidden;aspect-ratio:1/1;margin:13px 0 9px}#network-map{width:100%;height:100%;display:block;cursor:crosshair}.map-n,.map-scale{position:absolute;font-size:9px;color:#5cb8c7;letter-spacing:.09em;pointer-events:none}.map-n{top:12px;right:14px}.map-scale{bottom:10px;left:12px}.map-note{font-size:8px;color:#7594a4;text-align:center;letter-spacing:.07em}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.metrics div{border-left:2px solid #1b7d89;padding-left:10px}.metrics span{display:block;font-size:8px;letter-spacing:.11em;color:#7797a7}.metrics strong{display:block;font-size:21px;color:#cce6e8;margin-top:6px;letter-spacing:.02em}.metrics small{font-size:10px;color:#7ab2b7}.system-row{display:flex;align-items:center;justify-content:space-between;color:#879fab;font-size:9px;letter-spacing:.08em;margin-top:17px}.system-row strong{color:#cfe7e9;font-size:10px}.system-bar{height:4px;background:#1f3545;margin-top:8px;overflow:hidden}.system-bar i{display:block;height:100%;background:#e7a768}.system-bar.green i{background:#54d9a5}.system-bar.purple i{background:#9d78d8}.error-tag{color:#7fe8ba;border:1px solid rgba(59,192,136,.23);background:rgba(47,174,127,.08);margin-top:18px;padding:11px;text-align:center;font-size:9px;font-weight:800;letter-spacing:.13em}.error-tag.alert{color:#ffb08f;border-color:#b66542}
#bottom-hud{position:fixed;z-index:6;height:65px;bottom:0;left:0;right:0;background:rgba(5,12,22,.88);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 25px;backdrop-filter:blur(14px)}.hud-hint{display:flex;gap:4px;align-items:center}.hud-hint kbd{min-width:18px;text-align:center;border:1px solid #39586b;padding:5px 5px;border-radius:2px;color:#b7d9e4;background:rgba(33,56,72,.5);font-size:9px}.hud-hint span{margin:0 12px 0 4px;font-size:9px;letter-spacing:.1em;color:#7897a6}.coord-block,.fps-block{letter-spacing:.14em;color:#799cab;font-size:10px}.fps-block b{color:#7de3e1}.primary{background:linear-gradient(135deg,#4fd6d6,#4aa4be);border:0;border-radius:1px;color:#041a25;padding:13px 18px;font-size:10px;letter-spacing:.12em;font-weight:900;box-shadow:0 0 26px rgba(69,219,210,.2)}.primary:hover{filter:brightness(1.12)}
.intro-backdrop{position:fixed;z-index:10;inset:0;background:rgba(1,7,14,.64);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;transition:opacity .3s}.intro-backdrop.dismissed{opacity:0;pointer-events:none}.intro-card{padding:42px 49px 42px;width:min(500px,calc(100vw - 40px));border:1px solid #2b7182;background:linear-gradient(139deg,#102835 0%,#081522 70%);box-shadow:0 30px 120px rgba(0,0,0,.8),inset 0 1px 0 #397184}.intro-sigil{font-size:33px;display:inline-block;margin-bottom:22px}.intro-card h2{font-size:58px;font-weight:900;letter-spacing:.04em;line-height:1.04;margin:18px 0;color:#ebf6f8}.intro-card h2::first-line{color:#5de7e6}.intro-card p{max-width:350px;font-size:13px;line-height:1.65;color:#9cbbc5}.intro-numbers{display:flex;gap:45px;margin:32px 0}.intro-numbers strong{font-size:28px;display:block}.intro-numbers strong span{font-size:11px;color:#79c4c5}.intro-numbers small{font-size:9px;letter-spacing:.16em;color:#809da8}.intro-card .primary{width:100%;padding:18px}.intro-small{font-size:8px;color:#81a7b4;letter-spacing:.12em;display:block;text-align:center;margin-top:18px}
#info-dialog{position:fixed;z-index:20;inset:0;background:rgba(1,6,14,.72);display:flex;justify-content:center;align-items:center}#info-dialog.hidden{display:none}.dialog-card{position:relative;width:min(500px,calc(100vw - 35px));background:#102635;border:1px solid #327b8c;padding:32px;font-size:13px;line-height:1.65;color:#9cb9c4}.dialog-card h2{color:#ebffff}.dialog-card .icon-btn{position:absolute;right:10px;top:10px}.toast{position:fixed;z-index:21;left:50%;bottom:91px;transform:translateX(-50%);background:rgba(10,39,49,.9);border:1px solid #377789;color:#c8f4ef;padding:12px 21px;letter-spacing:.07em;font-size:11px;opacity:0;pointer-events:none;transition:opacity .2s}.toast.show{opacity:1}.locked #enter-btn{background:#243f4f;color:#7ce3e3}
@media(max-width:1260px){#left-panel{width:270px;left:10px}#right-panel{width:276px;right:10px}.glass-panel{top:89px;bottom:73px}.hud-hint{display:none}#bottom-hud{height:58px}.top-stats{display:none}}
@media(max-width:860px){#left-panel{width:236px;padding:16px}#right-panel{width:220px;padding:14px}.panel-heading h1{font-size:22px}.metrics{gap:8px}.metrics strong{font-size:16px}#bottom-hud{padding:0 8px}.coord-block{font-size:8px}.fps-block{display:none}}
@media(max-width:600px){#left-panel{top:76px;bottom:auto;width:calc(100% - 24px);height:155px;overflow:auto;left:12px;padding:14px}.panel-heading h1{font-size:19px;margin:5px 0}.panel-heading p,.panel-heading .eyebrow,#left-panel>.info-row,#sector-name,.sector-description,#left-panel>.hairline,#left-panel>.label-top{display:none}.level-selector{grid-template-columns:repeat(4,1fr)}.level-selector button{height:52px;display:block;text-align:center;padding:5px}.level-selector b{display:none}.level-selector button>span:first-child{display:none}.level-selector button>span:nth-child(2){font-size:8px} .control-lines,.button-row{display:none}#right-panel{top:auto;bottom:68px;right:12px;width:185px;max-height:245px}.right-heading,#right-panel h2,.metrics,#right-panel .hairline,#right-panel>.system-row,#right-panel>.system-bar,#right-panel>.error-tag{display:none}.map-note{font-size:7px}#topbar{height:66px;padding:0 12px}.brand strong{font-size:11px}.brand small{font-size:7px}.intro-card{padding:24px}.intro-card h2{font-size:44px}}