:root{color-scheme:dark;--bg:#06131c;--card:rgba(7,21,29,.87);--line:rgba(99,160,171,.23);--text:#e6f0ee;--muted:#698c96;--accent:#4de0e1;--amber:#e9ae5f;--font:Inter,'Segoe UI',Arial,sans-serif;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;font-family:var(--font)}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg)}body{color:var(--text);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{color:inherit;cursor:pointer}#viewport{display:block;width:100%;height:100%;touch-action:none;outline:none}#ui,#labels{position:absolute;inset:0;pointer-events:none}#ui>*,#labels>*{pointer-events:auto}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button{transition:background .18s,color .18s,border-color .18s,transform .18s}button:hover{color:#eafcff;border-color:#58c8d0!important;background:rgba(57,142,152,.2)!important}button:active{transform:scale(.98)}
.topbar{position:absolute;top:0;left:0;right:0;height:82px;padding:0 36px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(76,146,154,.22);background:linear-gradient(180deg,rgba(3,16,25,.94),rgba(3,16,25,.62));z-index:10}
.brand{display:flex;align-items:center;gap:17px}.brand-symbol{width:47px;height:46px;display:grid;place-items:center;border:1px solid #48aeb8;font:700 24px var(--mono);letter-spacing:-5px;color:#cceded;box-shadow:inset 0 0 15px #053a42,0 0 20px #05424d55}.brand-symbol span{color:var(--accent);font-size:13px;transform:translate(-2px,-7px)}.brand-copy strong{font-size:15px;letter-spacing:.17em}.brand-copy em{font-style:normal;color:var(--accent)}.brand-copy small{display:block;margin-top:5px;font:10px var(--mono);letter-spacing:.13em;color:#79969d}.header-right{display:flex;align-items:center;gap:26px;font:10px var(--mono);letter-spacing:.09em}.header-chip{padding:10px 15px;border:1px solid var(--line);color:#8ca4ac}.header-chip b{color:#e1f8f6}.online{color:#8dd3c4}.online i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#53e4ad;box-shadow:0 0 10px #53e4ad;margin-right:9px}
.left-panel,.right-panel{position:absolute;top:105px;bottom:208px;padding:24px 23px;background:linear-gradient(142deg,rgba(8,27,37,.88),rgba(6,19,27,.79));border:1px solid var(--line);backdrop-filter:blur(16px);box-shadow:0 17px 80px #0005;overflow:auto;scrollbar-width:thin;scrollbar-color:#27515b transparent}.left-panel{left:28px;width:285px}.right-panel{right:28px;width:292px;padding:20px 22px}.eyebrow{font:10px var(--mono);letter-spacing:.22em;color:var(--accent);display:flex;align-items:center;gap:9px}.eyebrow-rule{width:16px;height:2px;background:var(--accent)}.hero-title{font-size:46px;font-weight:800;letter-spacing:-.065em;line-height:1.08;margin-top:30px;color:#edf7f6}.hero-title span{color:#7496a0;font-weight:350}.left-panel h1{font-size:20px;font-weight:650;letter-spacing:.12em;line-height:1.4;margin:11px 0 13px}.category{color:#9bafb4;font:10px var(--mono);letter-spacing:.105em}.thin-divider{height:1px;background:linear-gradient(90deg,#305962,transparent);margin:25px 0 21px}.readout{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}.readout span{font:9px var(--mono);letter-spacing:.13em;color:#6a9099}.readout strong{font:11px var(--mono);letter-spacing:.07em;color:#d1e3e3}.sub-heading{display:flex;justify-content:space-between;font:10px var(--mono);letter-spacing:.12em;color:#f4f9f7;margin-bottom:15px}.sub-heading span{color:var(--muted)}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mode{border:1px solid #264955;background:rgba(17,42,51,.35);height:46px;text-align:left;padding:0 9px;font:bold 9px var(--mono);letter-spacing:.04em}.mode-icon{font-size:20px;font-weight:400;vertical-align:-3px;margin-right:5px;color:#739ca3}.mode.active{border-color:#48d2d6;background:rgba(36,142,149,.19);color:#84f4f0;box-shadow:inset 0 0 16px #0c516433}.mode.active .mode-icon{color:var(--accent)}.left-footer{margin-top:22px;color:#83a5aa;font:10px/2.1 var(--mono);letter-spacing:.055em}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:8px}.dot.cyan{background:#4ad8dd;box-shadow:0 0 8px #4ad8dd}.dot.amber{background:#e9ae5f;box-shadow:0 0 8px #e9ae5f}
.side-top{display:flex;flex-direction:column;gap:10px}.side-top strong{font:12px var(--mono);letter-spacing:.1em;color:#e7f2f0}.graph-schematic{height:133px;border:1px solid #254b54;position:relative;margin:18px 0 20px;overflow:hidden;background:linear-gradient(0deg,#0b2229b5,#071a23bb),repeating-linear-gradient(0deg,transparent 0 19px,#33515a55 20px),repeating-linear-gradient(90deg,transparent 0 19px,#33515a55 20px)}.graph-schematic:before{content:'';width:116px;height:116px;border:1px dashed #427783;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}.schematic-cross{position:absolute;left:11px;top:10px;color:#4b9ca3;font:20px var(--mono)}.schematic-v{position:absolute;left:12px;bottom:12px;font:8px var(--mono);letter-spacing:.06em;color:#648d96}.schematic-center{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:100px;height:28px;display:flex;justify-content:space-between;align-items:center;padding:0 4px;border-top:2px solid #54cbd0;transform-origin:left}.schematic-center span{font:10px var(--mono);color:#bde4e5}.schematic-center b{font:8px var(--mono);color:#e8b56e}.schematic-axis{position:absolute;font:10px var(--mono);color:#427680}.axis-x{top:14px;right:15px}.axis-y{bottom:10px;right:15px}.schematic-step{position:absolute;top:9px;left:36px;font:7px/1.5 var(--mono);color:#4a7682;letter-spacing:.08em}.metric{position:relative;display:grid;grid-template-columns:1fr auto;gap:5px;margin:0 0 14px}.metric span{font:9px var(--mono);letter-spacing:.095em;color:#8aa4aa}.metric strong{font:12px var(--mono);color:#d9f5f1}.metricbar{height:2px;grid-column:span 2;background:#1d3d48}.metricbar i{display:block;width:0;height:100%;background:linear-gradient(90deg,#267b88,#75e2dc);box-shadow:0 0 8px #17c9cd77;transition:width .05s}.render-stats{display:grid;grid-template-columns:1fr 1fr;gap:11px;border-top:1px solid var(--line);padding-top:15px;margin-top:11px}.render-stats div{display:flex;flex-direction:column;gap:5px;color:#648a93;font:9px var(--mono);letter-spacing:.07em}.render-stats b{color:#c2e7e6;font-size:11px;font-weight:600}
#manual-panel{display:none;border-top:1px solid #275058;padding-top:14px;margin-top:14px}#ui[data-mode="manual"] .graph-schematic{display:none}#ui[data-mode="manual"] .telemetry{display:none}#ui[data-mode="manual"] #manual-panel{display:block}.manual-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}.manual-head strong{font:10px var(--mono);color:var(--accent)}.manual-head span{font:8px var(--mono);color:var(--muted)}.joint-row{margin-bottom:14px}.joint-title{display:flex;justify-content:space-between;gap:8px;align-items:center}.joint-title label{font:10px var(--mono);color:#a5bcc0}.joint-title output{font:11px var(--mono);color:#bde6e6}.joint-row input{width:100%;margin:8px 0 3px}.joint-minmax{display:flex;justify-content:space-between;color:#567781;font:8px var(--mono)}.secondary-button{width:100%;height:34px;background:#11323d;border:1px solid #2a6f76;font:10px var(--mono)}
.viewbar{position:absolute;left:50%;transform:translateX(-50%);bottom:217px;z-index:5;display:flex;gap:4px;align-items:center;padding:7px 9px;background:rgba(5,24,33,.85);border:1px solid #2a5660;backdrop-filter:blur(12px);white-space:nowrap}.view-caption{font:9px var(--mono);letter-spacing:.12em;color:#5c959f;margin:0 10px 0 6px}.viewbar button{border:1px solid transparent;background:transparent;padding:9px 10px;font:10px var(--mono);color:#98b5bc}.viewbar button.active{border-color:#369ba4;background:rgba(43,132,139,.18);color:#7ae7e7}
.bottom-hud{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:min(1050px,calc(100% - 375px));min-width:600px;z-index:5;padding:16px 21px 13px;background:linear-gradient(180deg,rgba(11,32,42,.95),rgba(5,22,30,.95));border:1px solid #28525d;box-shadow:0 10px 45px #0007;backdrop-filter:blur(18px)}.transport-top{display:flex;align-items:center;justify-content:space-between;gap:20px}.tiny-label{font:9px var(--mono);letter-spacing:.17em;color:#6d9ca4}.transport-name{font-size:13px;font-weight:700;letter-spacing:.12em;margin-top:6px}.transport-name span{color:var(--accent);margin:0 6px}.timecode{font:16px var(--mono);color:#e2f1f0}.timecode span{color:#53818a}.transport-bottom{display:flex;gap:24px;align-items:center;margin-top:15px}.transport-buttons{display:flex;gap:4px;flex-shrink:0}.transport-btn{width:39px;height:38px;background:#102d36;border:1px solid #30565e;font-size:19px;color:#98b9bf}.transport-btn.primary{background:#247e85;color:#e7ffff;border-color:#4cd4d4;font-size:18px;box-shadow:0 0 20px #0a838344}.transport-btn.active{border-color:var(--amber);color:var(--amber)}.timeline-zone{flex:1;min-width:85px}.timeline-topline{display:flex;justify-content:space-between;margin-bottom:10px;font:9px var(--mono);color:#87a5ac}.timeline-topline span:last-child{color:var(--accent)}input[type=range]{appearance:none;-webkit-appearance:none;height:4px;border-radius:1px;outline:none;background:linear-gradient(to right,#43d0d6 0 var(--progress,0%),#204451 var(--progress,0%) 100%);cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border:2px solid #d0fdfc;border-radius:50%;background:#43b8c4;box-shadow:0 0 7px #4bd8e4}input[type=range]::-moz-range-thumb{width:11px;height:11px;border:2px solid #d0fdfc;border-radius:50%;background:#43b8c4}#timeline{width:100%}.speed-zone{display:flex;align-items:center;gap:8px;flex-shrink:0}.speed-zone span{font:9px var(--mono);color:#6f9da5}select{background:#0e2933;border:1px solid #245360;border-radius:0;color:#e4f9f9;padding:7px 6px;font:10px var(--mono)}.footer-control{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #1b3f4b;margin-top:16px;padding-top:12px}.footer-control>span{color:#75939a;font:9px var(--mono)}.footer-buttons{display:flex;gap:8px;align-items:center}.footer-buttons button{background:transparent;border:1px solid #28535d;padding:5px 7px;font:9px var(--mono);color:#8daeb4;white-space:nowrap}.footer-buttons button.active{color:var(--accent);border-color:#3c8992}.footer-buttons label{color:#759da5;font:9px var(--mono)}#volume{width:50px}.copyright{position:absolute;right:29px;bottom:7px;color:#52747a;font:8px var(--mono);letter-spacing:.06em}.copyright span{color:#7f989e}
#labels{z-index:4;overflow:hidden}.joint-label{position:absolute;transform:translate(14px,-26px);display:flex;align-items:center;background:rgba(4,27,35,.83);padding:7px 9px;border:1px solid #41919c;box-shadow:0 0 20px #02394b55;white-space:nowrap;color:#bce6e7;font:9px var(--mono);letter-spacing:.08em}.joint-label:before{content:'';position:absolute;width:20px;height:1px;background:#46aab3;left:-20px;top:100%}.joint-label:after{content:'';position:absolute;left:-24px;top:calc(100% - 2px);width:5px;height:5px;border-radius:100%;background:#65e6e8;box-shadow:0 0 10px #4be5e4}.joint-label.selected{color:#fff;border-color:#e8b56e;background:#204049}.joint-label.selected:after{background:#f0b66c}.inspect-tooltip{display:none;position:absolute;bottom:230px;left:28px;width:285px;padding:17px 20px;border:1px solid #32808a;background:#081e27ed;box-shadow:0 10px 30px #0006}.inspect-tooltip.visible{display:block}.inspect-tooltip div{font:9px var(--mono);color:#5f9fab;letter-spacing:.12em}.inspect-tooltip strong{display:block;font:12px var(--mono);margin:11px 0;color:#e8fcf9}.inspect-tooltip p{font:12px/1.6 var(--font);color:#a5bec3}.inspect-tooltip button{border:1px solid #345f68;padding:7px 14px;background:transparent;color:var(--accent);font:10px var(--mono)}
#loading{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:radial-gradient(circle,#12313c,#031017);transition:opacity .7s,visibility .7s}#loading.hidden{opacity:0;visibility:hidden;pointer-events:none}.loader-core{text-align:center}.loading-logo{font:bold 78px var(--mono);letter-spacing:-.11em;color:#d5f5f4}.loading-logo span{color:var(--accent);font-size:42px}.loading-rule{width:240px;height:2px;margin:20px auto;background:linear-gradient(90deg,transparent,#4aeeee,transparent);animation:flash 1s ease-in-out infinite alternate}.loader-core p{font:12px var(--mono);letter-spacing:.1em}.loader-core small{color:#608b94;font:10px var(--mono)}@keyframes flash{to{opacity:.27}}
@media (max-height:820px){.left-panel,.right-panel{top:94px;bottom:200px;padding:15px 18px}.hero-title{margin-top:16px;font-size:39px}.thin-divider{margin:16px 0}.readout{margin-bottom:11px}.graph-schematic{height:90px;margin:11px 0}.metric{margin-bottom:9px}.bottom-hud{bottom:12px}.viewbar{bottom:207px}.inspect-tooltip{bottom:218px}}
@media (max-width:1170px){.topbar{padding:0 19px}.left-panel{left:14px;width:245px}.right-panel{right:14px;width:250px}.bottom-hud{width:calc(100% - 40px);min-width:0}.viewbar{bottom:211px}.inspect-tooltip{left:14px;width:245px}}
@media (max-width:800px){.topbar{height:64px;padding:0 13px}.brand-symbol{width:35px;height:35px;font-size:18px}.brand-copy strong{font-size:11px}.brand-copy small{font-size:7px;max-width:160px;line-height:1.5}.header-chip{display:none}.header-right{gap:4px}.online{font-size:8px}.left-panel{top:76px;left:8px;width:171px;bottom:auto;max-height:225px;padding:11px 12px;overflow:hidden}.left-panel .eyebrow{font-size:8px}.hero-title{font-size:29px;margin-top:8px}.left-panel h1{font-size:12px;line-height:1.3;margin:6px 0}.left-panel .category{font-size:7px}.thin-divider,.readout,.left-footer{display:none}.sub-heading{margin:9px 0 6px;font-size:8px}.mode-grid{gap:4px}.mode{height:28px;padding:0 5px;font-size:7px}.mode-icon{font-size:12px;margin-right:3px}.right-panel{top:76px;right:8px;width:160px;bottom:auto;max-height:245px;padding:10px 11px}.right-panel .side-top{gap:5px}.side-top .eyebrow{font-size:8px}.side-top strong{font-size:8px}.graph-schematic{height:52px;margin:9px 0}.schematic-center{transform:translate(-50%,-50%) scale(.55)}.schematic-v,.schematic-step{display:none}.telemetry{display:grid;grid-template-columns:1fr 1fr;gap:5px}.metric{margin-bottom:3px;display:flex;flex-wrap:wrap;gap:4px}.metric span{font-size:7px;width:100%}.metric strong{font-size:9px}.metricbar{height:1px;width:100%}.render-stats{display:none}#ui[data-mode="manual"] .right-panel{max-height:calc(100vh - 330px);overflow:auto;width:191px}.manual-head span{display:none}.joint-title label{font-size:8px}.joint-title output{font-size:8px}.viewbar{bottom:205px;width:calc(100% - 16px);overflow-x:auto;justify-content:flex-start}.viewbar button{padding:7px 9px;font-size:8px}.view-caption{font-size:8px}.bottom-hud{bottom:7px;width:calc(100% - 16px);padding:12px 11px 10px}.transport-name{font-size:11px}.tiny-label{font-size:7px}.timecode{font-size:11px}.transport-bottom{gap:8px;margin-top:10px}.transport-buttons{gap:2px}.transport-btn{width:31px;height:32px;font-size:16px}.speed-zone span{display:none}.speed-zone select{font-size:8px;padding:6px 3px}.timeline-topline{font-size:7px}.footer-control{margin-top:9px;padding-top:8px}.footer-control>span{display:none}.footer-buttons{width:100%;justify-content:space-between}.footer-buttons button{font-size:8px;padding:5px}.copyright{display:none}.joint-label{font-size:7px;padding:4px 5px}.inspect-tooltip{bottom:206px;left:8px;width:180px;padding:11px}.inspect-tooltip p{font-size:10px}.inspect-tooltip strong{font-size:10px}}
@media (max-width:400px){.brand-copy small{display:none}.right-panel{width:143px}.left-panel{width:156px}.mode{font-size:6.5px}.viewbar{bottom:202px}.bottom-hud{padding:9px}.transport-btn{width:28px}.footer-buttons #volume{width:32px}}