
:root {font-family:Inter,system-ui,-apple-system,sans-serif;color:#d4e1e9;background:#050c15;font-size:12px;color-scheme:dark;--ink:#07101b;--panel:#0c1521;--line:#263949;--muted:#69808e;--cyan:#57ede6;--orange:#e9aa6e}
*{box-sizing:border-box} html,body,#app{margin:0;height:100%;width:100%;overflow:hidden} button,input,select{font:inherit} button{cursor:pointer} button:disabled{cursor:not-allowed;opacity:.4} button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.shell{height:100%;display:flex;flex-direction:column;min-height:400px;isolation:isolate}.topbar{height:69px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 27px;background:#0b1520;border-bottom:1px solid #1f3645;z-index:8;gap:12px}
.brand{display:flex;align-items:center;gap:13px}.brand-hex{width:40px;height:40px;border:1px solid #55d5d0;display:grid;place-items:center;color:#5bf7e3;transform:rotate(45deg);font-size:27px;margin:0 8px}.brand-hex::first-letter{transform:rotate(-45deg)}.brand-title{font-family:'Barlow Condensed',Inter,sans-serif;font-size:22px;font-weight:800;letter-spacing:.12em;color:#f0f7f7}.brand-title span{font-weight:500;color:#77b7b5}.brand-title small{display:block;font:500 9px 'DM Mono',monospace;color:#67818d;letter-spacing:.18em;margin-top:1px}
.header-meta{display:flex;align-items:center;gap:18px;color:#68838d;font:10px 'DM Mono',monospace;letter-spacing:.08em}.signal{color:#69cfc6}.signal i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#43d5bb;box-shadow:0 0 9px #49ceb9;margin-right:4px}.sep{height:15px;width:1px;background:#2b3e4a}.header-seed{border:1px solid #284c56;color:#9bdcd6;padding:8px 10px}.mobile-settings{display:none}
.workspace{display:grid;grid-template-columns:minmax(244px,284px) minmax(250px,1fr) minmax(270px,307px);min-height:0;flex:1}.left-panel,.right-panel{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#243949 transparent}.left-panel{background:linear-gradient(150deg,#101b27,#0a1420 75%);padding:29px 25px 20px;border-right:1px solid #1e3141}.right-panel{background:#0b1520;padding:27px 22px 19px;border-left:1px solid #1e3141}.section-index{font:500 10px 'DM Mono',monospace;letter-spacing:.15em;color:#64ddd6}.subtle-tag{font-size:10px;line-height:1.6;color:#7e9297;margin:27px 0 2px;text-transform:uppercase;letter-spacing:.04em}.hero-id{font:800 clamp(80px,8vw,116px)/.95 'Barlow Condensed',sans-serif;color:#edf4f3;letter-spacing:-.03em;white-space:nowrap}.hero-id span{color:#53eee0}.hero-subtitle{font:700 22px 'Barlow Condensed',sans-serif;letter-spacing:.18em;color:#afc4cd;margin:4px 0 18px}.hero-subtitle span{color:var(--orange)}.hero-note{font-size:12px;color:#8b9caa;line-height:1.8;max-width:230px}.thin-line{height:1px;background:linear-gradient(90deg,#334a57,transparent);margin:27px 0 23px}.specgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 8px}.specgrid div span,.live-row span,.inline-setting span{display:block;font:10px 'DM Mono',monospace;letter-spacing:.055em;color:#7b929f}.specgrid div strong{display:block;font:600 12px 'Barlow Condensed',sans-serif;color:#e3eceb;margin-top:8px;letter-spacing:.1em}.telemetry{margin-top:20px}.live-row{position:relative;padding:0 0 17px;margin-bottom:17px}.live-row strong{position:absolute;top:-3px;right:0;font:500 15px 'DM Mono',monospace;color:#d5f0ed}.mini-track{margin-top:12px;height:3px;background:#1f3341;overflow:hidden}.mini-track b{display:block;height:100%;width:0%;background:#58e9df;transition:width .08s linear;box-shadow:0 0 7px #56eee6}.system-note{display:flex;gap:11px;padding:14px 11px;background:#0e1f26;border-left:2px solid #3c787a;color:#768c93;font:10px/1.8 'DM Mono',monospace}.system-note strong{font-size:10px;color:#a8d0cc}.status-glyph{color:#5bded0;font-size:16px}
.viewport{min-width:0;min-height:0;position:relative;overflow:hidden;background:radial-gradient(ellipse at 45% 50%,#1c2b36,#091320 72%)}.viewport3d{position:absolute;inset:0;z-index:0}.viewport3d canvas{width:100%;height:100%;display:block;touch-action:none}.gridOverlay{position:absolute;inset:0;background:linear-gradient(to right,#2039470b 1px,transparent 1px),linear-gradient(to bottom,#2039470b 1px,transparent 1px);background-size:70px 70px;pointer-events:none}.viewport-head{position:absolute;top:24px;left:26px;right:26px;display:flex;justify-content:space-between;gap:14px;pointer-events:none}.viewport-head small,.small-head{font:10px 'DM Mono',monospace;color:#7ba4b0;letter-spacing:.13em}.viewport-head h1{font:700 clamp(19px,2vw,28px) 'Barlow Condensed',sans-serif;letter-spacing:.1em;margin:7px 0 5px;color:#e8f7f5}.viewport-head h1 em{color:#75cfcf;font-style:normal}.viewport-desc{font:9px/1.6 'DM Mono',monospace;color:#7b949d;max-width:440px}.axis-tag{white-space:nowrap;text-align:right;color:#5dc4ca;font:12px/1.5 'DM Mono',monospace}.axis-tag strong{font:9px 'DM Mono',monospace;color:#557681}.upper-right{position:absolute;top:120px;right:22px;width:132px;text-align:right}.camera-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:8px}.camera-grid button,.cinematic{background:#101e2bbf;border:1px solid #34515d;color:#a8c1c9;padding:8px 3px;font:10px 'DM Mono',monospace;letter-spacing:.01em}.camera-grid button.chosen,.camera-grid button:hover,.cinematic:hover,.cinematic.active{color:#101b22;background:#60dcd4;border-color:#60dcd4}.cinematic{margin-top:5px;width:100%;font-size:9px;padding:9px 3px}.viewport-bottom{position:absolute;bottom:20px;left:25px;right:25px;display:flex;justify-content:space-between;gap:8px;color:#8299a0;font:10px 'DM Mono',monospace;pointer-events:none}.viewport-bottom>span:first-child{color:#60e6d4}.viewport-bottom>span:last-child{text-align:right}.labels,.label-lines{position:absolute;inset:0;pointer-events:none;width:100%;height:100%;overflow:hidden}.labels{z-index:4}.label-lines{z-index:3}.part-label{position:absolute;white-space:nowrap;color:#e6ffff;background:#0a1722cf;border:1px solid #3bbab58c;font:500 9px 'DM Mono',monospace;letter-spacing:.07em;padding:6px 8px;transform:translate(12px,-50%);text-shadow:0 0 6px #377c7c}.part-label.selected{background:#2b5b5e;color:white;border-color:#7af2ea}
.mode-grid{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:7px}.mode-grid button{display:flex;align-items:center;gap:9px;border:1px solid #29404d;background:#121f2b;min-height:46px;color:#9daeb5;padding:9px;text-align:left;font:600 11px 'Barlow Condensed',sans-serif;letter-spacing:.08em}.mode-grid button span{font-size:19px;color:#6b9fa9}.mode-grid button.selected{border-color:#4bd7d0;background:#173539;color:#b5f6ed}.mode-grid button.selected span{color:#54eadd}.mode-caption{font-size:11px;line-height:1.6;color:#81969d;margin-top:14px;min-height:34px}.tag-orange{float:right;color:#df985b;font-size:9px}.manual-control-intro{color:#78919b;font-size:11px;line-height:1.7;margin:14px 0 17px}.joints{display:flex;flex-direction:column;gap:15px}.joint{display:block}.joint-name{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#a7bdc4;font:11px 'Barlow Condensed',sans-serif;letter-spacing:.05em}.joint output{font:10px 'DM Mono',monospace;color:#5ddad4}.joint-selected .joint-name{color:#fff}.joint input{width:100%;margin:10px 0 0;accent-color:#49e1d2;cursor:pointer}.joint input:disabled{opacity:.4;cursor:default}.inline-setting{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:17px 0}.inline-setting select,.transport-options select{padding:6px 8px;border:1px solid #375260;background:#13222f;color:#d0e9ec;font:10px 'DM Mono',monospace}.inline-setting input[type=range]{width:86px;accent-color:#4cd7d0}.inline-setting input[type=checkbox],.transport-options input{accent-color:#52e2d9}.inline-setting .switch{background:#14222e;border:1px solid #344e57;padding:6px 10px;color:#94aeb8;font:10px 'DM Mono',monospace}.inline-setting .switch.unmuted{color:#58e3d9;border-color:#4aafa9}.right-footer{font:9px/1.8 'DM Mono',monospace;color:#506e7b;letter-spacing:.04em;margin-top:30px}.right-footer span{color:#de9455}
.transport{min-height:102px;flex-shrink:0;display:flex;align-items:center;gap:26px;padding:14px 26px;background:#0b1622;border-top:1px solid #263f4e;z-index:7}.transport-left{flex:0 0 148px}.transport-left .section-index{font-size:9px}.play-state{display:block;font:600 11px 'DM Mono',monospace;color:#e5a76a;margin-top:10px;white-space:nowrap}.transport-buttons{display:flex;gap:5px;flex-shrink:0}.transport-buttons button{height:40px;min-width:59px;border:1px solid #334b5b;background:#122330;color:#c1d4dc;padding:0 10px;font:10px 'DM Mono',monospace}.transport-buttons button.primary{border-color:#42d8cc;background:#50d2c9;color:#06202a;font-weight:600}.transport-buttons button.active{box-shadow:0 0 13px #1a9c9b66}.timeline-wrap{flex:1;min-width:60px}.timeline-wrap input{width:100%;height:11px;accent-color:#56e9df;cursor:pointer}.times{display:flex;justify-content:space-between;font:10px 'DM Mono',monospace;color:#60818f}.times strong{color:#d5f6f3}.transport-options{display:flex;gap:13px;align-items:center;font:10px 'DM Mono',monospace;color:#8aa7b1}.transport-options label{display:flex;align-items:center;gap:5px}.transport-options select{max-width:66px}
@media(max-width:1180px){.workspace{grid-template-columns:220px minmax(250px,1fr) 250px}.left-panel,.right-panel{padding:23px 18px}.transport{gap:12px;padding:13px 16px}.transport-left{flex-basis:128px}.transport-buttons button{min-width:48px;padding:0 6px}.transport-buttons span{display:none}}
@media(max-width:920px){.workspace{grid-template-columns:190px minmax(250px,1fr)}.left-panel{padding:19px 14px}.hero-id{font-size:75px}.right-panel{position:absolute;top:70px;bottom:103px;right:0;width:min(340px,92vw);z-index:10;box-shadow:-13px 0 28px #0008;transform:translateX(105%);transition:transform .3s}.right-panel.open{transform:translateX(0)}.mobile-settings{display:block;background:#15323a;border:1px solid #438a8b;padding:9px;color:#99e8e4;font:10px 'DM Mono',monospace}.viewport-head{left:18px;top:15px}.axis-tag{display:none}.viewport-desc{font-size:8px}.upper-right{top:100px;right:10px}.transport-options{gap:6px}}
@media(max-width:620px){.topbar{height:55px;padding:0 12px}.brand-title{font-size:16px}.brand-title span{font-size:12px}.brand-title small{font-size:7px}.brand-hex{width:26px;height:26px;margin:0 4px;font-size:20px}.header-meta{display:none}.workspace{display:block;position:relative}.viewport{position:absolute;inset:0}.left-panel{display:none}.right-panel{top:0;bottom:0}.transport{min-height:126px;flex-wrap:wrap;gap:8px;padding:10px}.transport-left{flex:1;flex-basis:110px}.transport-buttons{order:2}.timeline-wrap{order:3;flex-basis:100%}.transport-options{order:2}.transport-buttons button{height:33px;min-width:38px;font-size:12px}.transport-options select{padding:4px}.viewport-head h1{font-size:19px}.viewport-head small,.viewport-desc{font-size:8px}.upper-right{top:104px;right:9px;width:101px}.camera-grid button{font-size:9px;padding:7px 1px}.cinematic{font-size:8px}.viewport-bottom{bottom:13px;left:10px;right:10px;font-size:8px}.viewport-bottom>span:last-child{display:none}}
