:root{color-scheme:dark;--bg:#050c18;--panel:rgba(5,14,29,.86);--border:rgba(122,194,242,.16);--line:rgba(102,168,214,.19);--cyan:#83e7f5;--light:#dfeefa;--muted:#748da5;--amber:#e5a763;--good:#76ecbf;--font:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-width:360px;width:100%;height:100%;background:var(--bg);color:var(--light);font-family:var(--font);overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
#app{position:relative;width:100vw;height:100vh;min-height:580px;background:radial-gradient(ellipse at 53% 50%,#142e42 0%,#071527 48%,#030914 100%)}
#viewport{position:absolute;inset:0;overflow:hidden}#scene{width:100%;height:100%;display:block;cursor:grab;touch-action:none}#scene:active{cursor:grabbing}
.noise{position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(121,177,223,.009) 4px);opacity:.7}
.topbar{position:absolute;z-index:6;left:0;right:0;top:0;height:76px;padding:0 34px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:linear-gradient(90deg,rgba(4,14,28,.96),rgba(4,14,28,.76) 45%,rgba(4,14,28,.9));backdrop-filter:blur(15px)}.brand{display:flex;gap:12px;align-items:center}.brand-logo{width:43px;height:43px;color:#7cdcf3;filter:drop-shadow(0 0 9px #4ccbe950)}.brand-logo svg{width:100%;height:100%}.brand strong{display:block;font-weight:800;font-size:14px;letter-spacing:.16em}.brand strong span{color:var(--cyan)}.brand small{font-size:9px;letter-spacing:.2em;color:var(--muted)}.top-middle{display:flex;align-items:center;gap:15px;color:#a4b8ca;letter-spacing:.2em;font-size:10px;font-weight:700}.top-middle .dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 12px var(--good)}.top-middle .divider{height:16px;border-left:1px solid var(--border)}.top-right{display:flex;gap:18px;align-items:center}.save-tag{font-size:10px;letter-spacing:.12em;color:var(--muted)}.icon-button{width:34px;height:34px;border:1px solid var(--border);background:transparent;color:var(--light);font-size:23px}
.leftpanel{position:absolute;z-index:4;left:0;top:76px;bottom:118px;width:348px;overflow:auto;padding:28px 26px 24px 33px;border-right:1px solid var(--border);background:linear-gradient(105deg,rgba(4,13,26,.98),rgba(6,19,36,.91));box-shadow:22px 0 70px #03081288;scrollbar-width:thin;scrollbar-color:#26445e #071322}.tiny-label{font-size:10px;letter-spacing:.19em;color:#6aa8b9;font-weight:750}.tiny-deco{float:right;font-size:17px;color:var(--cyan)}.titleblock{margin-top:34px}.eyebrow{color:var(--amber);font-size:9px;font-weight:700;letter-spacing:.2em}.titleblock h1{margin:7px 0 0;font-size:33px;line-height:1.12;font-weight:820;letter-spacing:-.045em}.titleblock h1 span{color:var(--cyan)}.titleblock h2{margin:5px 0 14px;font-size:20px;letter-spacing:.12em;font-weight:700}.titleblock h2 span{font-size:10px;letter-spacing:.14em;color:var(--muted)}.titleblock p{font-size:11px;color:#92a7bb;line-height:1.77;max-width:290px;margin:0}.mini-status{margin:25px 0 25px;display:flex;align-items:center;padding:11px 10px;background:rgba(24,88,102,.16);border:1px solid rgba(74,188,189,.22);font-size:9px;font-weight:750;letter-spacing:.18em;color:#9ef2db}.pulse{height:6px;width:6px;background:var(--good);box-shadow:0 0 10px var(--good);border-radius:50%;margin-right:11px;animation:pulse 2s infinite}.status-code{margin-left:auto;color:#5b9a9e;font-size:9px}.section-header{display:flex;gap:12px;align-items:center;color:#8bb6cb;font-size:10px;letter-spacing:.14em;font-weight:750;margin:13px 0 20px}.section-header.second{margin-top:28px}.section-line{flex:1;height:1px;background:var(--border)}.control{margin:0 0 19px}.control.compact{margin-bottom:15px}.control-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px;font-size:11px}.control label{color:#bccddb}.control output{color:#bdeff3;font-weight:750;font-size:11px;font-variant-numeric:tabular-nums}.control input[type=range]{width:100%;height:3px;appearance:none;background:linear-gradient(90deg,#428c9d,#3ebac6 50%,#305270);outline:none;margin:4px 0 6px;cursor:pointer}.control input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:#bbfaff;border:2px solid #167b96;box-shadow:0 0 0 4px #55bce020,0 0 12px #3de8ff77;border-radius:50%}.control input[type=range]::-moz-range-thumb{height:9px;width:9px;background:#bbfaff;border:2px solid #167b96;border-radius:50%}.ruler{display:flex;justify-content:space-between;color:#526f83;font-size:8px;letter-spacing:.1em}.selectwrap{display:flex;align-items:center;justify-content:space-between;margin:19px 0;color:#bccddb;font-size:11px}.selectwrap select{color:#bdeff3;background:#0b1d31;border:1px solid #2b4a60;padding:8px 13px;max-width:138px}.panelbuttons{display:flex;gap:9px;margin-top:23px}.panelbuttons button{flex:1;border:1px solid #38556b;padding:12px 5px;font-size:10px;letter-spacing:.07em;font-weight:800}.secondary-button{background:rgba(30,50,70,.38);color:#b2c9d7}.primary-button{background:#64c7df;color:#061827;border-color:#76dbf0!important}.panelbuttons button:hover{filter:brightness(1.15)}
.rightpanel{position:absolute;z-index:3;right:28px;top:116px;width:234px;display:flex;flex-direction:column;gap:19px;pointer-events:none}.telemetry-head{display:flex;align-items:center;justify-content:space-between;color:var(--cyan);font-weight:800;font-size:10px;letter-spacing:.2em}.signal{display:flex;gap:3px;align-items:end;height:15px}.signal i{width:3px;background:#4bc4c9;height:5px}.signal i:nth-child(2){height:8px}.signal i:nth-child(3){height:12px}.signal i:nth-child(4){height:15px}.telemetry-value{padding:18px;border:1px solid var(--line);background:rgba(4,15,31,.62)}.telemetry-value>small{font-size:10px;letter-spacing:.18em;color:#8baac2}.telemetry-value>strong{display:block;font-size:37px;letter-spacing:-.045em;font-weight:660;margin:9px 0 15px;font-variant-numeric:tabular-nums}.telemetry-value>strong span{margin-left:7px;color:var(--cyan);font-size:13px;letter-spacing:.07em}.chart-bars{display:flex;gap:3px;align-items:end;height:27px}.chart-bars i{display:block;flex:1;background:linear-gradient(0deg,#176683,#74d6e4);height:20%;opacity:.85}.telemetry-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding-bottom:18px;border-bottom:1px solid var(--line)}.telemetry-grid small{display:block;font-size:8px;letter-spacing:.13em;color:#7692a9;margin-bottom:7px}.telemetry-grid strong{font-size:13px;color:#ddf9fc;font-weight:700;font-variant-numeric:tabular-nums}.technical{font-size:9px;color:#7894a9;letter-spacing:.1em}.technical div{display:flex;justify-content:space-between;gap:15px;padding:8px 0;border-bottom:1px solid #aac9e511}.technical b{color:#acccda;font-size:9px;white-space:nowrap}.warning{display:flex;gap:10px;color:#e3ae6f;border-left:1px solid #c7954360;padding-left:12px}.warning>span{font-size:20px}.warning p{font-size:9px;letter-spacing:.15em;margin:3px 0;line-height:1.6}.warning small{font-size:9px;letter-spacing:normal;color:#8e9eae}
.viewport-hud{position:absolute;pointer-events:none;z-index:2;left:380px;right:292px;display:flex;align-items:center;justify-content:space-between;color:#7d9eaf;font-size:9px;letter-spacing:.18em}.hud-upper{top:110px}.hud-upper b{color:#5ee1e1}.hud-lower{bottom:152px}.hud-lower i{font-style:normal;color:#3b6885;margin:0 10px}.corner{width:32px;height:17px;border-top:1px solid #2a728e}.corner-a{border-left:1px solid #2a728e}.corner-b{border-right:1px solid #2a728e}.axis{position:absolute;z-index:2;bottom:180px;right:35px;width:64px;height:62px;color:#a2dbe2;font-size:9px;opacity:.7}.axis span{position:absolute}.ax-1{left:32px;top:0}.ax-2{left:54px;top:40px}.ax-3{left:2px;top:37px}.axis:before{content:'';position:absolute;left:30px;top:20px;width:1px;height:35px;background:#97d4e0;transform:rotate(-25deg);box-shadow:12px 4px 0 -1px #5fabb5}.axis:after{content:'';position:absolute;left:28px;top:44px;width:35px;height:1px;background:#87c7da;transform:rotate(-20deg)}
.bottompanel{position:absolute;z-index:5;bottom:27px;left:0;right:0;min-height:92px;display:flex;align-items:center;gap:22px;padding:10px 33px;border-top:1px solid var(--border);border-bottom:1px solid #081d32;background:linear-gradient(90deg,rgba(4,13,26,.97),rgba(5,15,28,.95));backdrop-filter:blur(16px)}.bottom-title{display:flex;align-items:center;gap:24px;min-width:225px}.bottom-title>span:first-child{font-size:10px;letter-spacing:.2em;color:#759aae;line-height:1.65}.bottom-title>span b{color:#d4e8ef;font-size:13px}.bottom-sep{height:40px;border-left:1px solid var(--border)}.batch-code{font-size:9px;color:#3f667e;letter-spacing:.13em;line-height:1.7}.bottom-actions{display:flex;align-items:center;gap:7px;flex:1}.mode{display:flex;align-items:center;gap:12px;border:1px solid #254056;background:rgba(24,39,57,.42);color:#a6bbcc;min-width:114px;padding:11px 13px;text-align:left;font-size:10px;line-height:1.35;letter-spacing:.1em;font-weight:750}.mode small{font-size:8px;letter-spacing:.12em;color:#698da2}.mode-icon{display:grid;place-items:center;border-radius:50%;border:1px solid #3b5f75;width:29px;height:29px;font-size:16px;flex-shrink:0}.mode.active{border-color:#2d7a8d;color:#d2f8f6;background:rgba(35,102,117,.20)}.mode.active .mode-icon{color:#7edee5;border-color:#65b9cb}.preset-area{margin-left:auto;min-width:270px}.preset-label{color:#6e9aae;letter-spacing:.17em;font-size:9px;margin-bottom:8px}.presets{display:flex;gap:5px}.preset{border:1px solid #25445c;background:rgba(22,44,61,.38);color:#6e98ae;padding:9px 8px;font-size:9px}.preset b{font-size:9px;color:#aac7d5}.preset.selected{border-color:#72c9d8;color:#94f5ff;background:#12394c}.preset.selected b{color:#d5f9fc}.copyright{position:absolute;z-index:5;bottom:8px;left:33px;right:33px;display:flex;justify-content:space-between;color:#4f6c82;font-size:8px;letter-spacing:.12em}.error{position:absolute;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,90%);background:#25151c;border:1px solid #ff978a;padding:25px;color:white;font-size:14px;line-height:1.6}.error[hidden]{display:none}.flash{animation:flash .5s ease}.hidden{display:none!important}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}@keyframes flash{50%{filter:brightness(2)}}
@media(max-width:1420px){.rightpanel{right:18px;width:206px}.viewport-hud{right:245px}.bottompanel{gap:10px}.bottom-title{min-width:178px;gap:12px}.mode{min-width:91px;gap:6px;padding:9px 7px}.preset-area{min-width:236px}.preset{padding:8px 5px}.leftpanel{width:320px;padding-left:24px;padding-right:24px}.viewport-hud{left:335px}}
@media(max-width:1120px){.top-middle{display:none}.rightpanel{display:none}.leftpanel{width:294px}.viewport-hud{left:314px;right:25px}.bottom-title{display:none}.bottompanel{left:294px;bottom:27px;gap:9px;flex-wrap:wrap;min-height:96px}.bottom-actions{flex:1;justify-content:space-evenly}.mode{min-width:70px}.preset-area{min-width:220px}.axis{right:25px}.copyright{left:310px}}
@media(max-width:780px){html,body{overflow:auto}#app{min-height:950px;height:auto;overflow:hidden}.topbar{height:62px;padding:0 16px}.brand-logo{height:34px;width:34px}.brand strong{font-size:11px}.top-right .save-tag{display:none}#viewport{top:62px;bottom:auto;height:420px}.leftpanel{top:482px;bottom:116px;width:100%;padding:20px 22px 30px;border-right:none;border-top:1px solid var(--border);background:#061426;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;align-content:start}.tiny-label,.titleblock,.mini-status,.section-header,.selectwrap,.panelbuttons{grid-column:1/-1}.titleblock{margin-top:18px}.titleblock h1{font-size:28px}.titleblock p{max-width:none}.mini-status{margin:18px 0 13px}.section-header{margin:7px 0 13px}.section-header.second{margin-top:13px}.control{margin-bottom:11px}.control input[type=range]{width:100%}.viewport-hud{left:22px;right:22px}.hud-upper{top:18px}.hud-lower{bottom:18px}.axis{bottom:57px}.bottompanel{bottom:19px;left:0;min-height:95px;padding:10px 12px}.bottom-actions{gap:5px}.mode{min-width:55px;font-size:9px}.mode-icon{width:20px;height:20px;font-size:12px}.mode small{display:none}.preset-area{min-width:100%;margin:0}.preset-label{display:none}.presets{justify-content:space-between}.preset{flex:1}.copyright{left:12px;right:12px;bottom:4px}.copyright span{display:none}}
@media(max-width:420px){.leftpanel{grid-template-columns:1fr}.titleblock h1{font-size:29px}.control{grid-column:1/-1}.bottompanel{min-height:105px}.mode{gap:5px;padding:8px 4px}.viewport-hud{font-size:8px}}
@media(prefers-reduced-motion:reduce){.pulse{animation:none}}