:root{--bg:#0b1017;--raised:#121921;--raised2:#17212b;--line:#26313c;--bright:#f4bb4b;--text:#e6e9ed;--muted:#81919e;--teal:#3be5be;font-family:Inter,system-ui,sans-serif;color:var(--text);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);height:100vh;min-height:700px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--bright);outline-offset:3px}.app{display:grid;grid-template-columns:312px minmax(0,1fr);height:100vh;min-height:700px;max-height:1600px;overflow:hidden}.sidebar{background:#0e151d;border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:auto;scrollbar-width:thin;scrollbar-color:#293845 transparent}.brand{display:flex;align-items:center;gap:12px;padding:26px 20px 18px}.brand-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid #5d4d30;background:#211e18;border-radius:9px;flex:none}.overline,.hint,.product-badge,.section-heading,.range-limits,.version,.hud-kicker,.tag,.state,.breadcrumb,.signature,.mini-label,.metric-bottom,.statusline,.viewport-bottom-right,.dimension>span,.dock-right,.operation-indicator,.panel-title,.view-btn b,.tiny-grid,.dialog-foot{font:500 10px/1.5 'DM Mono',monospace;letter-spacing:.7px}.overline{color:#7b8a99;font-size:9px}.brand-word{font:800 22px/1.1 'Barlow Condensed',sans-serif;letter-spacing:.7px}.trademark{font:500 9px 'Inter';vertical-align:top;margin-left:3px;color:var(--bright)}.product-badge{margin:0 20px 22px;padding:11px 10px;color:var(--bright);border:1px solid #55472c;border-radius:5px;background:linear-gradient(90deg,#211d15,#141b20);display:flex;align-items:center;gap:9px;font-size:9px}.version{margin-left:auto;color:#a8a495}.live-dot,.state i,.pulse,.mini-indicator{background:var(--teal);width:7px;height:7px;border-radius:50%;display:inline-block;box-shadow:0 0 11px #3be5be78}.machine-title{padding:0 21px 23px;border-bottom:1px solid var(--line)}.hint{color:#748595;font-size:9px}.machine-title h1{font:700 34px/.99 'Barlow Condensed',sans-serif;letter-spacing:.2px;margin:12px 0;color:#f1f4f5}.machine-title h1 em{color:var(--bright);font-style:normal}.machine-title p{font-size:11px;line-height:1.7;color:#92a1ac;max-width:260px;margin:13px 0 0}.section{padding:19px 21px 10px;border-bottom:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;color:#a7b6c0;margin-bottom:19px;font-size:10px}.active-icon{font-size:9px;color:#40cfaa}.control{margin-bottom:16px}.control-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.control-title label{color:#d3dbe1;font-size:11px;font-weight:600}.control-title output{color:var(--bright);font:600 11px 'DM Mono',monospace}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:4px;background:#354251;accent-color:var(--bright);cursor:pointer;margin:5px 0 8px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--bright);border:2px solid #25231a;box-shadow:0 0 0 2px #80682b}input[type=range]::-moz-range-thumb{width:10px;height:10px;border:2px solid #25231a;border-radius:50%;background:var(--bright)}.range-limits{display:flex;justify-content:space-between;color:#6b7b88;font-size:9px}.visual-section{padding-bottom:12px}.toggle-row{display:flex;align-items:center;justify-content:space-between;margin:13px 0;color:#c6d0d7;font-size:11px}.switch{position:relative;display:inline-block;width:30px;height:17px}.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch span{display:block;background:#31404b;width:30px;height:17px;border-radius:20px;transition:background .2s}.switch span:after{content:'';position:absolute;top:3px;left:3px;width:11px;height:11px;border-radius:50%;background:#91a2ac;transition:transform .2s}.switch input:checked+span{background:#375b50}.switch input:checked+span:after{transform:translateX(13px);background:#46e4b5}.sidebar-footer{padding:19px 21px 20px;margin-top:auto}.tiny-grid{display:grid;grid-template-columns:1fr auto;row-gap:10px;font-size:9px;color:#768795}.tiny-grid b{color:#c0cbd1;text-align:right;font-weight:500;font-size:9px}.signature{color:#566673;font-size:9px;margin-top:21px}.signature strong{color:#a7b3ba}.main-area{min-width:0;height:100%;display:grid;grid-template-rows:62px minmax(250px,1fr) 76px 134px 30px}.topbar{display:flex;align-items:center;justify-content:space-between;background:#111922;border-bottom:1px solid var(--line);padding:0 24px;gap:12px}.breadcrumb{color:#78909f;font-size:10px}.breadcrumb span{color:#526271;padding:0 12px}.breadcrumb b{color:#d4dfe5;font-weight:500}.header-right{display:flex;align-items:center;gap:15px}.tag{border:1px solid #34515b;background:#182b36;color:#74bfce;border-radius:4px;padding:5px 8px}.state{font-size:10px;white-space:nowrap;color:#3bdcb6}.state i{margin-right:5px}.btn{border:1px solid #37414b;background:#1a242d;color:#dce5eb;padding:11px 15px;border-radius:4px;font:700 10px 'DM Mono',monospace;letter-spacing:.3px}.btn:hover{background:#283846}.btn-sky{border-color:#38526a;background:#183349;color:#c6ebff}.viewport{position:relative;overflow:hidden;background:radial-gradient(ellipse at 48% 35%,#34434c,#15202b 64%,#0d1621)}#machine-canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}.boot-screen{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:#111b26;color:#aab9c3;z-index:20;font:500 13px 'DM Mono',monospace;letter-spacing:1px;text-align:center;pointer-events:none}.boot-screen small{color:#73818a;font:11px Inter;letter-spacing:0}.boot-screen.failed{pointer-events:auto;padding:24px}.boot-screen.failed strong{color:#ff9d75}.boot-screen.failed p{font:13px/1.8 Inter;max-width:450px}.boot-screen.failed code{color:var(--bright)}.loader-ring{border:2px solid #405360;border-top:2px solid var(--bright);height:31px;width:31px;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hud{position:absolute;pointer-events:none}.top-left{top:26px;left:28px;display:flex;flex-direction:column;gap:5px;text-shadow:0 2px 6px #0b111b}.hud-kicker{color:#e7b455;font-size:10px}.top-left strong{font:700 25px 'Barlow Condensed';letter-spacing:.7px}.top-left small{color:#c0cbd1;font:500 10px 'DM Mono',monospace;letter-spacing:1px}.compass{position:absolute;top:25px;right:175px;display:flex;align-items:center;flex-direction:column;color:#e4ebee;font:700 10px 'DM Mono';gap:4px;opacity:.65}.compass-needle{width:14px;height:38px;background:linear-gradient(to bottom,#f3a94b 50%,#7791a6 50%);clip-path:polygon(50% 0,100% 49%,50% 100%,0 49%);transform:rotate(-28deg)}.viewport-right{position:absolute;top:86px;right:20px;width:126px;padding:12px 8px;border:1px solid #50616c6b;border-radius:7px;background:#111d27b8;backdrop-filter:blur(12px)}.panel-title{color:#90a3af;font-size:9px;margin:0 5px 9px}.view-btn{width:100%;display:flex;align-items:center;gap:8px;padding:10px 7px;background:transparent;border:1px solid transparent;text-align:left;color:#a9bac5;font-size:10px;border-radius:3px}.view-btn b{color:#768996;font-size:9px}.view-btn:hover{background:#39495a88}.view-btn.selected{background:#263b47;border-color:#53727a;color:#f3cf86}.view-btn.selected b{color:var(--bright)}.viewport-bottom-left{position:absolute;left:24px;bottom:20px;display:flex;gap:9px}.dimension{min-width:110px;background:#0d1722b8;border:1px solid #3b4c586b;border-radius:5px;padding:10px 11px;backdrop-filter:blur(9px)}.dimension>span{display:block;color:#879da9;font-size:9px;margin-bottom:4px}.dimension strong{font:700 22px 'Barlow Condensed';color:#f1f2f3}.dimension strong small{font-size:13px;color:#a0b2c0}.viewport-bottom-right{position:absolute;right:18px;bottom:20px;display:flex;gap:12px;color:#abb9c4;font-size:9px}.viewport-bottom-right span{background:#142331c9;padding:6px 9px;border:1px solid #39495770}.annotations{position:absolute;inset:0;pointer-events:none}.annotation{position:absolute;padding:5px 7px;border:1px solid #80c5d0b3;background:#0d202ccf;border-radius:3px;color:#cdeaf1;font:500 9px 'DM Mono',monospace;white-space:nowrap;transform:translate(-50%,-50%);box-shadow:0 1px 8px #0005}.annotation:before{content:'';position:absolute;top:50%;left:-17px;width:16px;height:1px;background:#74c6cf}.annotation:after{content:'';position:absolute;top:50%;left:-19px;width:4px;height:4px;border-radius:50%;background:#7ae7c1;transform:translateY(-50%)}.control-dock{display:flex;align-items:center;justify-content:space-between;padding:0 21px;background:#121c26;border-top:1px solid #33414a;border-bottom:1px solid #33414a;gap:12px}.dock-left{display:flex;align-items:center;gap:9px;min-width:0}.btn-start{background:#d7a843;color:#121716;border-color:#d7a843;min-width:145px}.btn-start:hover{background:#f5c567}.btn-start.paused{background:#367f73;color:#f8ffff;border-color:#469a8c}.btn-secondary{border-color:#40505c;background:#182632}.dock-separator{height:30px;width:1px;background:#34434d;margin:0 9px}.operation-indicator{display:flex;gap:10px;align-items:center}.operation-indicator div{display:flex;flex-direction:column;gap:5px}.operation-indicator b{font-size:10px;color:#c8d4dc}.operation-indicator small{font:9px 'DM Mono';color:#56dfbe}.dock-right{color:#8194a1;white-space:nowrap}.dock-right b{color:#e4edef;font-size:12px}.separator-dot{margin:0 12px;color:#516a77}.telemetry{display:grid;grid-template-columns:repeat(4,1fr);background:#101922;gap:0;padding:15px 15px}.telemetry-card{min-width:0;padding:11px 17px;border-right:1px solid #2d3d47}.telemetry-card:last-child{border-right:none}.mini-label{color:#8394a0;font-size:10px}.metric{display:flex;align-items:baseline;gap:6px;margin-top:5px}.metric strong{font:700 32px 'Barlow Condensed';letter-spacing:.2px;color:#f2f5f6}.metric span{color:var(--bright);font:500 12px 'DM Mono'}.metric-bottom{color:#728794;font-size:9px;margin-top:9px}.mini-indicator{width:5px;height:5px;margin-right:4px}.utilization{height:4px;background:#293944;border-radius:4px;margin-top:11px;overflow:hidden}.utilization div{background:linear-gradient(90deg,#47c9a9,#d4aa4e);height:100%;transition:width .2s}.statusline{display:flex;justify-content:space-between;align-items:center;padding:0 24px;background:#0c131b;border-top:1px solid #283842;color:#637985;font-size:9px;gap:10px}.square{display:inline-block;width:6px;height:6px;background:#4ae6b6;margin-right:6px}dialog{max-width:min(480px,90vw);background:#18232e;border:1px solid #52717b;border-radius:10px;padding:30px;color:#e1e9ec;box-shadow:0 20px 80px #000c}dialog::backdrop{background:#040a10b3}.dialog-close{position:absolute;right:16px;top:16px;border:0;background:transparent;color:#abb9c5;font-size:18px}.dialog-foot{color:#758a96;margin-top:25px}dialog h2{font:700 30px 'Barlow Condensed';margin:8px 0}dialog p{font-size:12px;line-height:1.8;color:#a6bac7}
@media (max-width:1250px){.app{grid-template-columns:268px minmax(0,1fr)}.sidebar .brand{padding-left:13px}.product-badge{margin-inline:13px}.section,.machine-title,.sidebar-footer{padding-inline:14px}.viewport-bottom-right,.compass{display:none}.header-right{gap:7px}.tag{display:none}.telemetry-card{padding:11px 8px}.metric strong{font-size:27px}}
@media (max-width:950px){body{height:auto;min-height:100vh}.app{display:flex;flex-direction:column;height:auto;max-height:none;overflow:visible}.sidebar{order:2;overflow:visible}.brand,.product-badge,.machine-title,.sidebar-footer{display:none}.sidebar .section{padding:18px 20px}.sidebar .section:nth-of-type(2){display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px}.sidebar .section-heading{grid-column:1/-1}.main-area{order:1;min-height:730px;height:86vh;grid-template-rows:55px minmax(360px,1fr) 70px 120px 30px}.topbar{padding:0 12px}.breadcrumb{font-size:9px}.btn-sky{display:none}.viewport-bottom-left{left:8px;bottom:8px;gap:4px}.dimension{min-width:83px;padding:7px}.dimension strong{font-size:18px}.dimension>span{font-size:8px}.viewport-right{top:75px;right:8px}.control-dock{padding:0 9px}.operation-indicator,.dock-separator{display:none}.statusline span:nth-child(2){display:none}}
@media(max-width:560px){.telemetry{padding:8px 0}.telemetry-card{padding:9px 7px}.mini-label{font-size:8px;min-height:25px}.metric strong{font-size:23px}.metric span{font-size:9px}.metric-bottom{font-size:8px;line-height:1.4}.dimension:nth-child(3){display:none}.viewport-right{width:110px}.view-btn{padding:7px 4px}.hud.top-left{left:10px;top:12px}.top-left strong{font-size:20px}.statusline{padding:0 8px;font-size:8px}.dock-right{font-size:9px}.btn-start{min-width:130px;padding:10px}.sidebar .section:nth-of-type(2){display:block}.machine-title{display:block;padding:17px 20px}.machine-title h1{font-size:26px}}