:root{font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;color:#dce9ee;background:#08131d;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--bg:#08131d;--panel:#0c1924;--panel2:#111f2a;--line:#233744;--muted:#8297a4;--dim:#537181;--cyan:#6ce5e4;--amber:#edb16b;--mono:'DM Mono',Consolas,monospace;--cond:'Barlow Condensed','Arial Narrow',sans-serif}
*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%;height:100%;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}button:disabled{opacity:.5;cursor:wait}select{background:#0e202b;color:#d8e6e8;border:1px solid #2c4450;border-radius:4px;padding:5px 8px;font:11px var(--mono);cursor:pointer}body{background:var(--bg)}[hidden]{display:none!important}
.shell{height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse 45% 70% at 50% 30%,#162938 0,#08131d 90%)}
.app-header{height:76px;flex:0 0 76px;display:flex;justify-content:space-between;align-items:center;padding:0 33px;background:#0b1721;border-bottom:1px solid #24414d;z-index:4;gap:12px}
.brand{display:flex;gap:13px;align-items:center;white-space:nowrap}.logo-mark{height:39px;width:39px;border:1px solid #518e98;display:flex;align-items:center;justify-content:center;position:relative;transform:rotate(-45deg);background:#0c2530}.logo-mark span{font:800 17px var(--cond);letter-spacing:1px;color:#81f6f1;transform:rotate(45deg)}.logo-mark i{width:7px;height:7px;background:#dd9855;position:absolute;right:-4px;top:-4px}
.brand-copy{margin-left:5px}.brand-line{font:700 18px var(--cond);letter-spacing:2px;color:#f0fbfa}.brand-line span{color:var(--cyan)}.brand-copy small{display:block;font:9px var(--mono);letter-spacing:1.25px;color:#668492;margin-top:3px}.header-center{font:10px var(--mono);letter-spacing:1.2px;color:#7794a0}.tiny-spark,.green-dot{display:inline-block;width:6px;height:6px;background:#65d7cf;border-radius:50%;box-shadow:0 0 13px #4bdbd4;vertical-align:middle;margin-right:7px}.serial-divider{padding:0 10px;color:#3b5665}.header-actions{display:flex;align-items:center;gap:20px}.header-connection{font:10px var(--mono);letter-spacing:1px;color:#8db0b7;white-space:nowrap}.green-dot{width:6px;height:6px}.outline-button{padding:10px 15px;border:1px solid #294755;background:#0c1e2a;color:#b9d2d8;letter-spacing:1px;font:11px var(--mono);border-radius:2px}.outline-button:hover,.camera-btn:hover,.icon-button:hover{border-color:var(--cyan);color:var(--cyan)}
.content-layout{min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr) 364px}.left-pane{display:flex;flex-direction:column;min-width:0;min-height:0}.stage{flex:1;position:relative;background:radial-gradient(ellipse at 48% 54%,#203946 0%,#0b1925 57%,#070f18 100%);min-height:280px;overflow:hidden}.scene-root{position:absolute;inset:0;z-index:0}.scene-root canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.stage-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(3,10,17,.43),transparent 31%,transparent 61%,rgba(3,10,17,.52)),linear-gradient(90deg,rgba(3,10,17,.26),transparent 26%,transparent 80%,rgba(3,10,17,.13))}
.stage-top-left,.stage-top-right,.stage-bottom-left,.camera-stack,.orientation-graphic{position:absolute;z-index:3;pointer-events:none}.stage-top-left{top:30px;left:35px}.eyebrow{font:10px var(--mono);letter-spacing:1.55px;color:#acbfc5;display:flex;align-items:center;gap:10px}.amber-rule{display:inline-block;width:25px;height:2px;background:var(--amber)}.stage-title{font:800 clamp(44px,6vw,82px)/.94 var(--cond);letter-spacing:3px;color:#f3f7f8;text-shadow:0 4px 30px #06131e;margin-top:12px}.stage-title span{color:#72e5e5}.stage-desc{font:11px var(--mono);letter-spacing:1.45px;color:#a7bdc3;margin-top:12px}.stage-slash{color:var(--amber);padding:0 7px}.stage-top-right{top:32px;right:30px;text-align:right;display:flex;flex-direction:column;gap:9px}.stage-code{font:9px var(--mono);letter-spacing:1.1px;color:#718c9a}.stage-code b{font-weight:500;color:#c2e1e6;margin-left:12px}.stage-bottom-left{bottom:29px;left:35px}.stage-indicator{font:10px var(--mono);letter-spacing:1.4px;color:#9cd0d1;display:flex;align-items:center;gap:9px}.pulse-dot{width:7px;height:7px;border-radius:50%;background:#5bece2;box-shadow:0 0 15px #3ee9d8;animation:pulse 2.4s infinite}.stage-hint{margin-top:12px;font:9px var(--mono);letter-spacing:.6px;color:#7b94a0}.stage-hint span{color:#497180;margin:0 5px}@keyframes pulse{50%{opacity:.35;box-shadow:none}}
.camera-stack{right:20px;top:50%;transform:translateY(-25%);display:flex;flex-direction:column;gap:4px;pointer-events:auto}.camera-btn{width:40px;height:32px;background:rgba(12,28,38,.86);border:1px solid #32515b;color:#a1b9c2;letter-spacing:0;font:10px var(--mono);border-radius:2px;backdrop-filter:blur(12px)}.camera-btn.selected{border-color:#55a7b0;background:#163742;color:#88f9ec}.orientation-graphic{right:30px;bottom:28px;display:flex;align-items:center;flex-direction:column;gap:5px;opacity:.7;font:10px var(--mono);color:#9bd6d7}.ori-cross{font:28px var(--cond);line-height:.8;color:#7ccacd}.ori-n{color:#e7a766}.ori-s{color:#527b87}
.labels-container{position:absolute;inset:0;z-index:2;pointer-events:none;display:none}.labels-container.visible{display:block}.leaders{position:absolute;width:100%;height:100%;inset:0;overflow:visible;pointer-events:none}.leader-line{stroke:#79d7d8;stroke-width:1;opacity:.43}.leader-dot{fill:#86eeee;stroke:#14353a;stroke-width:2}.floating-label{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;height:29px;min-width:122px;background:rgba(9,24,32,.87);backdrop-filter:blur(9px);border:1px solid rgba(94,162,175,.58);color:#c9e3e4;letter-spacing:.25px;font:9px var(--mono);padding:5px 8px;pointer-events:auto;white-space:nowrap;border-radius:1px}.floating-label.active{color:#a4fffa;border-color:#9afff7;background:rgba(19,53,60,.94)}.floating-label:hover{border-color:#ecb06a}.lbl-index{color:#ecae6d}.lbl-tail{font-size:12px;margin-left:auto;color:#75adad}
.playback-panel{flex:0 0 159px;background:linear-gradient(105deg,#0d1c27,#0c1823);border-top:1px solid #2b4651;padding:20px 34px 17px;z-index:3}.control-upper,.playback-bottom,.transport,.timing{display:flex;align-items:center;justify-content:space-between}.playback-heading{font:11px var(--mono);letter-spacing:1.4px;color:#e0ebec;white-space:nowrap}.section-index{color:var(--amber);margin-right:9px}.divider-dash{color:#56717c;margin:0 8px}.playback-heading #motion-name{font-size:10px;color:#829ca6}.timing{font:12px var(--mono);gap:9px;color:#95a8b0}.timing span:first-child{color:#86f0e9}.time-separator{color:#4f6774}.timeline-wrap{position:relative;height:29px;margin:13px 0 5px}.timeline-track{position:absolute;top:13px;left:0;right:0;height:3px;background:#304c5a}.timeline-progress{height:100%;width:0;background:#78e7e5;box-shadow:0 0 12px #61cfcc}.timeline-markers{position:absolute;inset:0}.timeline-markers i{position:absolute;top:-3px;width:1px;height:9px;background:#c5a274;opacity:.62}#timeline{position:absolute;inset:0;width:100%;height:29px;margin:0;appearance:none;background:transparent;cursor:pointer}#timeline::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:#a0faf5;border:3px solid #234750;border-radius:50%;box-shadow:0 0 13px #69bfc6;cursor:grab}#timeline::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#a0faf5;border:3px solid #234750}#timeline::-webkit-slider-runnable-track{background:transparent}.playback-bottom{gap:10px}.transport{justify-content:flex-start;gap:9px}.icon-button{width:31px;height:29px;background:#101f2b;color:#849fab;border:1px solid #304a57;border-radius:3px;font-size:14px}.icon-button.active{border-color:#397f85;color:var(--cyan);background:#142e39}.primary-button{min-width:97px;height:32px;background:#67dade;color:#081a24;border:1px solid #69f7eb;font:700 11px var(--mono);letter-spacing:1px;border-radius:2px;display:flex;align-items:center;justify-content:center;gap:11px}.primary-button:hover{background:#a2fffa}.transport-line{width:1px;height:21px;background:#314954;margin:0 8px}.speed-box{display:flex;align-items:center;gap:9px;color:#819aaa;font:10px var(--mono)}.speed-box select{background:transparent;border-color:#2c4856}.motion-info{display:flex;align-items:center;gap:9px;color:#8eabb5;font:10px var(--mono);letter-spacing:.7px}.motion-dot{width:6px;height:6px;background:#cc9960;border-radius:50%}
.sidebar{min-height:0;display:flex;flex-direction:column;background:linear-gradient(170deg,#11222d,#0a1822);border-left:1px solid #2a4754}.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:24px 22px 22px;border-bottom:1px solid #294350;gap:8px}.panel-kicker{font:9px var(--mono);letter-spacing:1px;color:#9baeb8}.sidebar-head h1{font:700 29px/.98 var(--cond);letter-spacing:1px;margin:9px 0;color:#eaf6f5}.sidebar-head h1 span{color:var(--cyan)}.sidebar-sub{font:9px var(--mono);color:#829daa;letter-spacing:.4px;margin-top:10px}.unit-badge{min-width:50px;height:54px;border:1px solid #3b6471;background:linear-gradient(135deg,#163341,#0b1b25);display:flex;flex-direction:column;align-items:center;justify-content:center;font:700 22px/.9 var(--cond);color:#96e3e5}.unit-badge span{font:8px var(--mono);color:#b2a178;margin-top:6px}.sidebar-scroll{padding:0 22px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#325260 transparent;flex:1}.sidebar-section{border-bottom:1px solid #243c48;padding:20px 0 21px}.sidebar-section:last-child{border-bottom:0}.section-title{font:11px var(--mono);letter-spacing:.65px;color:#cfdee2;display:flex;align-items:center;gap:9px;margin-bottom:16px}.section-title>span{color:#ecae66}.section-title>i{font-style:normal;color:#7797a3;margin-left:auto;font:9px var(--mono)}.modes-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.mode{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;height:64px;background:#0e202c;border:1px solid #2c4553;border-radius:2px;color:#839fab;font:8.2px var(--mono);letter-spacing:.35px}.mode-icon{font:24px/1 var(--cond);font-weight:400}.mode.active{color:#88f3e7;background:#16333e;border-color:#479ca0}.mode:hover{border-color:#67b5bb;color:#cce3e2}.telemetry{display:flex;flex-direction:column;gap:16px}.telemetry-line{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;font:10px var(--mono);letter-spacing:.55px;color:#89a3ae}.telemetry-line strong{color:#d3edf0;font-weight:500}.data-track{height:3px;background:#223943}.data-fill{width:0;height:3px;background:linear-gradient(90deg,#357480,#79f2e8);transition:width .12s linear;box-shadow:0 0 6px #65c6c0}.assembly-card{border:1px solid #2b4a56;background:linear-gradient(125deg,#122732,#0b1c27);padding:15px 12px;display:flex;align-items:start;gap:12px}.assembly-icon{border:1px solid #365866;color:#8adfdf;font:25px var(--cond);min-width:34px;height:35px;text-align:center}.assembly-name{font:11px var(--mono);color:#ddf4f2}.assembly-desc{margin-top:6px;font-size:11px;line-height:1.6;color:#789aa7}.component-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}.chip{background:#11232e;border:1px solid #294552;color:#7996a4;border-radius:2px;padding:7px 8px;font:9px var(--mono)}.chip.active{color:#9af5f0;border-color:#499b9e}.manual-notice{font-size:10px;line-height:1.6;color:#879daa;margin-top:-3px}.joint-row{display:block;margin:14px 0}.joint-row>span{display:flex;justify-content:space-between;font:9px var(--mono);color:#9bb0b8;margin-bottom:10px}.joint-number{color:var(--cyan);font-weight:500}.joint-row input[type=range],#volume{appearance:none;width:100%;height:3px;background:#325363;accent-color:var(--cyan);cursor:pointer;margin:0}.joint-row input::-webkit-slider-thumb,#volume::-webkit-slider-thumb{appearance:none;width:10px;height:10px;background:#76e1de;border:2px solid #153139;border-radius:50%}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #203642}.setting-row:last-child{border-bottom:0}.setting-row>span{font:10px var(--mono);letter-spacing:.3px;color:#91a7b1}.setting-row>input[type=range]{width:91px}.setting-toggle{min-width:70px;text-align:right;background:transparent;border:0;color:#89a1a9;font:10px var(--mono);padding:5px}.setting-toggle.on{color:#7beadf}.export-button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:6px;padding:15px 12px;background:#142f38;border:1px solid #43838c;color:#96e8e6;font:10px var(--mono);letter-spacing:.4px}.export-button:hover{background:#1b424d}.export-button span{font-size:17px}.license-note{font:8px/1.6 var(--mono);letter-spacing:.3px;margin-top:12px;color:#5f7b89}.sidebar-footer{border-top:1px solid #2d4652;padding:13px 22px 18px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#0c1b26}.perf-item span{display:block;font:8px var(--mono);color:#688594;white-space:nowrap}.perf-item strong{display:block;margin-top:7px;color:#b8d2d6;font:9px var(--mono);font-weight:500}.perf-item:last-child{text-align:right}.perf-item:nth-child(2){text-align:center}
.app-footer{height:31px;flex:0 0 31px;border-top:1px solid #203642;background:#09131d;color:#527282;display:flex;justify-content:space-between;align-items:center;padding:0 26px;gap:10px;font:9px var(--mono);letter-spacing:.3px}.app-footer b{color:#ba9c73;font-size:12px}.toast-notification{position:absolute;left:50%;bottom:110px;transform:translateX(-50%) translateY(9px);padding:12px 17px;background:#17303a;border:1px solid #5badab;font:11px var(--mono);color:#c5f9f1;opacity:0;pointer-events:none;z-index:99;transition:opacity .2s,transform .2s;white-space:nowrap}.toast-notification.show{opacity:1;transform:translateX(-50%) translateY(0)}.toast-notification.error{background:#422929;border-color:#d77a73;color:#fbc3b0}
@media(max-width:1200px){.header-center{display:none}.content-layout{grid-template-columns:minmax(0,1fr) 335px}.sidebar-head h1{font-size:25px}.sidebar-head,.sidebar-scroll{padding-left:17px;padding-right:17px}.stage-top-left{left:24px}.stage-top-right{right:21px}.stage-title{font-size:61px}.playback-panel{padding:20px 24px}.motion-info{font-size:9px}}
@media(max-width:900px){html,body,#app{height:100dvh}.app-header{height:62px;flex-basis:62px;padding:0 17px}.header-connection{display:none}.content-layout{display:flex;flex-direction:column}.left-pane{flex:1;min-height:330px}.stage{min-height:220px}.stage-title{font-size:52px}.stage-top-left{top:20px;left:20px}.stage-top-right{top:21px;right:17px}.stage-code{font-size:8px}.stage-bottom-left{left:20px;bottom:16px}.playback-panel{flex:0 0 141px;padding:14px 20px}.playback-heading #motion-name{display:none}.sidebar{height:39%;min-height:210px;flex:none;border-left:0;border-top:1px solid #2e4a56}.sidebar-head{padding:13px 20px}.sidebar-head h1{margin:4px 0;font-size:23px}.sidebar-sub{margin-top:5px}.sidebar-scroll{padding:0 20px}.sidebar-footer{display:none}.unit-badge{height:35px;min-width:40px;font-size:18px}.unit-badge span{margin-top:3px}.app-footer{display:none}.camera-stack{top:50%;right:11px;transform:translateY(-18%);gap:3px}.camera-btn{width:33px;height:27px;font-size:9px}.orientation-graphic{display:none}}
@media(max-width:650px){.brand-copy small{font-size:8px;letter-spacing:.4px}.brand-line{font-size:16px;letter-spacing:1px}.logo-mark{width:30px;height:30px}.logo-mark span{font-size:13px}.outline-button{padding:6px 9px}.outline-button span{display:none}.stage-title{font-size:clamp(37px,10vw,52px);letter-spacing:1px}.stage-desc{font-size:8px;letter-spacing:.35px}.eyebrow{font-size:8px;letter-spacing:.5px}.stage-top-left{top:18px;left:15px}.stage-top-right{top:90px;right:15px}.stage-code{display:none}.stage-code:first-child{display:block}.stage-bottom-left{bottom:10px;left:15px}.stage-hint{font-size:7px;margin-top:8px;max-width:230px}.camera-stack{right:7px}.camera-btn{width:27px;height:23px;font-size:8px}.camera-btn:nth-child(4),.camera-btn:nth-child(7){display:none}.playback-panel{padding:12px 14px;flex-basis:124px}.playback-heading{font-size:9px}.timing{font-size:10px}.timeline-wrap{margin:9px 0 2px}.icon-button{width:28px;height:29px}.primary-button{min-width:75px}.transport{gap:4px}.transport-line,.motion-info{display:none}.speed-box{font-size:9px;gap:4px}.speed-box select{font-size:10px;padding:5px 3px}.sidebar{height:41%;min-height:245px}.sidebar-head{padding:11px 14px}.sidebar-scroll{padding:0 14px}.sidebar-head h1{font-size:21px}.panel-kicker{font-size:8px}.sidebar-sub{font-size:8px}.sidebar-section{padding:16px 0}.modes-grid{gap:5px}.mode{height:55px;font-size:7.5px}.mode-icon{font-size:20px}.floating-label{font-size:8px;min-width:98px;height:25px;padding:3px 5px}.toast-notification{font-size:9px;max-width:95%;white-space:normal;text-align:center}.stage{min-height:220px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}