:root{--bg:#06101a;--panel:rgba(8,21,30,.84);--panel-2:rgba(12,29,39,.82);--border:rgba(100,167,182,.18);--cyan:#63e3e3;--cyan-soft:#3a96a7;--orange:#e29b63;--text:#dce7eb;--muted:#6d8591;--mono:'DM Mono','Courier New',monospace;--tech:'Rajdhani','Arial Narrow',Arial,sans-serif;--display:'Barlow Condensed','Arial Narrow',sans-serif}
*{box-sizing:border-box}
html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:var(--tech);color:var(--text)}
button,select,input{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
#app{position:relative;isolation:isolate}#stage{position:absolute;inset:0;z-index:0}#stage canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}#stage canvas:active{cursor:grabbing}
.ui-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}.ui-layer button,.ui-layer input,.ui-layer select,.panel,.camera-dock,.transport{pointer-events:auto}
.hud-grain{position:absolute;inset:0;opacity:.045;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,rgba(201,235,243,.25) 4px,transparent 5px);mix-blend-mode:screen}
.topbar{position:absolute;top:0;left:0;right:0;height:77px;background:linear-gradient(180deg,rgba(6,14,22,.96),rgba(7,15,23,.76));border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 40px;justify-content:space-between;gap:22px}
.brand-lockup{display:flex;align-items:center;gap:14px;min-width:260px}.brand-glyph{width:33px;height:31px;display:flex;gap:3px;align-items:stretch;transform:skew(-23deg)}.brand-glyph span{background:linear-gradient(165deg,#53eaed,#215f7a);width:7px}.brand-glyph span:nth-child(2){height:70%;align-self:flex-end}.brand-glyph span:nth-child(3){height:40%;align-self:flex-end;background:#e39d62}.brand-name{font-family:var(--display);font-size:27px;letter-spacing:2px;font-weight:800;line-height:.85}.brand-name span{color:#7c8c96}.brand-name .brand-point{color:var(--orange)}.brand-sub{font-family:var(--mono);letter-spacing:1.35px;color:var(--muted);font-size:8px;margin-top:8px}.top-center{font:9px var(--mono);letter-spacing:2.2px;color:#6e8995;white-space:nowrap}.tiny-cross{color:var(--cyan-soft);margin:0 12px}.header-right{display:flex;align-items:center;gap:27px;font:10px var(--mono);color:#81929c;white-space:nowrap}.live{color:var(--cyan);display:flex;align-items:center;gap:8px}.live i,.perf-indicator i{width:6px;height:6px;border-radius:50%;background:#61d6b3;display:inline-block;box-shadow:0 0 8px #4bf1bf}.live i{animation:beacon 2.2s infinite}.seed b{color:#dfecee;font-weight:500}.header-mark{border:1px solid #31515f;padding:9px 10px;color:#a8bdc3}
@keyframes beacon{50%{opacity:.3;box-shadow:0 0 2px #4bf1bf}}
.hero-heading{position:absolute;left:43px;top:110px;max-width:450px;pointer-events:none}.eyebrow{font:10px var(--mono);letter-spacing:1.05px;color:#c1b3a4}.orange-slash{color:var(--orange);margin-right:7px}.eyebrow .ghost{color:#63828f;margin-left:10px}.hero-heading h1{font-family:var(--display);font-size:clamp(62px,6.5vw,105px);line-height:.91;letter-spacing:-1px;margin:12px 0 12px;font-weight:700;text-shadow:0px 10px 25px rgba(0,0,0,.25)}.hero-heading h1 span{color:var(--cyan)}.hero-caption{font:10px var(--mono);letter-spacing:2px;color:#a3aeb5}.hero-rule{height:2px;width:120px;background:linear-gradient(90deg,var(--orange),transparent);margin-top:18px}
.panel{position:absolute;background:linear-gradient(145deg,rgba(10,26,36,.90),rgba(5,15,23,.92));border:1px solid var(--border);backdrop-filter:blur(13px);box-shadow:0 15px 50px rgba(0,0,0,.18)}.panel:before{content:'';position:absolute;top:-1px;left:-1px;background:var(--cyan);width:45px;height:1px}.panel-top{height:42px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;font:9px var(--mono);letter-spacing:1px;color:#a4c9ce}.panel-cross{font-size:17px;color:#537c88}
.left-panel{left:40px;top:315px;width:284px;padding-bottom:0}.stat-label{font:9px var(--mono);letter-spacing:1.2px;color:var(--muted);margin:20px 19px 4px}.stat-big{font-family:var(--display);font-size:72px;font-weight:700;line-height:1;color:var(--cyan);margin:0 19px}.stat-big sup{font-size:39px;vertical-align:top}.stat-big small{font-size:14px;color:#8ca5ac;letter-spacing:2px;margin-left:7px}.stat-descriptor{display:flex;justify-content:space-between;font:9px var(--mono);color:#8095a0;letter-spacing:.4px;margin:5px 19px 11px}.stat-descriptor span{color:var(--orange)}.meter{height:4px;background:#243944;position:relative;margin:0 19px}.meter-progress{height:100%;background:linear-gradient(90deg,var(--cyan-soft),var(--cyan));box-shadow:0 0 12px rgba(70,213,224,.46)}.meter-split{height:8px;width:1px;background:#a2bdc5;position:absolute;left:50%;top:-2px;opacity:.45}.tilt-diagram{margin:9px 18px 12px}.tilt-diagram svg{width:100%;height:auto;display:block}.diagram-caption{display:flex;justify-content:space-between;font:8px var(--mono);letter-spacing:.8px;color:#557988}.left-spec-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border)}.left-spec-grid>div{padding:13px 20px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.left-spec-grid>div:nth-child(even){border-right:0}.left-spec-grid label{display:block;font:9px var(--mono);color:#718b94;margin-bottom:5px}.left-spec-grid strong{font:600 26px var(--display);letter-spacing:1.3px;display:block;color:#dce7eb}.left-spec-grid strong span{font-size:13px;color:#96b4bc}.left-spec-grid small{font:8px var(--mono);color:#54737e}.left-footer{height:56px;display:flex;align-items:center;gap:11px;padding:0 19px;font:9px var(--mono);color:#c9d9dc}.left-footer small{display:block;font:8px var(--mono);color:#718a95;margin-top:5px}.left-footer>span:last-child{margin-left:auto;font-size:19px;color:#3c6672}.pulse-circle{height:17px;width:17px;border:1px solid #2bbaad;border-radius:50%;position:relative}.pulse-circle:after{content:'';position:absolute;inset:5px;border-radius:50%;background:#47d9b9;box-shadow:0 0 10px #47d9b9}
.right-panel{right:40px;top:116px;width:280px;max-height:calc(100vh - 365px);overflow:auto;scrollbar-color:#30535e transparent;scrollbar-width:thin}.right-panel .panel-top{position:sticky;top:0;z-index:2;background:#091822}.control-title{display:flex;justify-content:space-between;padding:18px 19px 10px;font:9px var(--mono);color:#a8bbc2;letter-spacing:1.2px}.control-count{color:#668591}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 17px 14px}.mode{min-height:37px;text-align:left;padding:0 9px;font:9px var(--mono);letter-spacing:.3px;border:1px solid #2c4450;background:#122633;color:#95b1bc;transition:.18s}.mode span{font:9px var(--mono);color:#5c7a85;margin-right:8px}.mode:hover{border-color:var(--cyan-soft)}.mode.active{border-color:var(--cyan);color:var(--cyan);background:#14363e;box-shadow:inset 0 0 13px rgba(52,202,199,.09)}.mode.active span{color:#83bec4}.console-divider{height:1px;background:var(--border);margin:3px 18px 0}.channels{padding:0 20px 10px}.channel{padding:0 0 13px}.channel-header{font:10px var(--mono);color:#b0c2c6;display:flex;justify-content:space-between}.channel-header i{font-style:normal;color:#617c89;font-size:9px;margin-right:8px}.channel-header output{color:var(--cyan);font-size:9px}.joint-slider{width:100%;margin:7px 0 1px;accent-color:var(--cyan);height:4px;opacity:.48;cursor:not-allowed}.channels.manual-active .joint-slider{opacity:1;cursor:pointer}.channel-range{display:flex;justify-content:space-between;color:#577584;font:8px var(--mono)}.config-row{display:flex;justify-content:space-between;align-items:center;min-height:37px;margin:0 18px;border-bottom:1px solid rgba(90,132,140,.12);font:9px var(--mono);color:#829aa5}.config-row select{background:#142833;border:1px solid #32515d;color:#b9cbce;font:9px var(--mono);padding:7px;max-width:148px;outline:none}.config-row input{width:110px;accent-color:var(--cyan)}.sound-btn{border:1px solid #365f67;background:#132e39;color:#78dee1;font:9px var(--mono);padding:6px 10px}.exploded-control{padding:10px 4px 15px;background:#10242c}.exploded-control .control-title{padding-top:9px}.exploded-control input{width:calc(100% - 36px);margin:0 18px;accent-color:var(--orange)}.exploded-control small{display:block;margin:7px 17px;color:var(--muted);font:8px var(--mono)}
.camera-dock{position:absolute;bottom:260px;left:50%;transform:translateX(-50%);background:rgba(5,17,26,.81);border:1px solid var(--border);height:43px;display:flex;align-items:center;padding:0 7px 0 12px;backdrop-filter:blur(9px);box-shadow:0 10px 24px rgba(0,0,0,.15);gap:9px;white-space:nowrap}.camera-dock>span{font:9px var(--mono);letter-spacing:1px;color:#9bc1c7;padding-right:11px;border-right:1px solid var(--border)}.camera-dock>span i{width:5px;height:5px;background:var(--cyan);border-radius:50%;display:inline-block;margin-left:4px}.camera-preset-buttons{display:flex;gap:3px}.camera-dock button{height:29px;min-width:45px;border:1px solid transparent;background:transparent;color:#8ba4ae;font:9px var(--mono);padding:0 9px}.camera-dock button:hover{border-color:#38616b;color:var(--cyan)}.camera-dock button.active{background:#17353e;color:var(--cyan);border-color:#2c7d83}.camera-dock .reset-cam{border-left:1px solid var(--border);font-size:20px;min-width:33px;padding:0}
.transport{position:absolute;bottom:45px;height:192px;left:0;right:0;padding:23px 42px 0;border-top:1px solid rgba(92,162,180,.26);background:linear-gradient(180deg,rgba(6,18,27,.87),rgba(5,15,22,.98));box-shadow:0 -15px 55px rgba(2,9,14,.28);backdrop-filter:blur(12px)}.transport-label{display:flex;justify-content:space-between;align-items:center;font:9px var(--mono);letter-spacing:1.8px;color:#99b5be}.animation-identity{color:var(--orange);letter-spacing:.6px}.timeline-row{display:flex;align-items:center;gap:17px;margin:10px 0 15px}.time-display{font:11px var(--mono);letter-spacing:1px;color:#c5e4e6;min-width:41px}.time-display:nth-last-child(1){text-align:right}.timeline-row input[type=range]{appearance:none;background:linear-gradient(to right,var(--cyan) 0,var(--cyan) var(--fraction,0%),#2b4651 var(--fraction,0%),#2b4651 100%);height:3px;flex:1;cursor:pointer}.timeline-row input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:var(--cyan);border:3px solid #0c2731;box-shadow:0 0 0 1px var(--cyan),0 0 15px rgba(82,230,226,.4)}.timeline-row input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--cyan);border:3px solid #0c2731;box-shadow:0 0 0 1px var(--cyan)}.transport-lower{display:flex;justify-content:space-between;gap:24px;align-items:center}.playback-buttons{display:flex;gap:5px}.playback-buttons button{height:34px;padding:0 17px;background:#132936;color:#a9c0c6;border:1px solid #2a4450;font:10px var(--mono);letter-spacing:.3px;white-space:nowrap}.playback-buttons button:hover{border-color:var(--cyan);color:var(--cyan)}.playback-buttons .primary-play{background:var(--cyan);color:#05222a;border-color:var(--cyan);font-weight:500;min-width:92px}.primary-play span{margin-right:6px}.playback-buttons .primary-play:hover{background:#abf8ef;color:#05222a}.playback-settings{display:flex;gap:15px;align-items:center;color:#7e939e;font:9px var(--mono);letter-spacing:.5px}.playback-settings label{white-space:nowrap}.playback-settings input{accent-color:var(--cyan)}.playback-settings select{padding:6px;background:#172a35;border:1px solid #31505c;color:#c9e2e3;font:10px var(--mono)}.setting-sep{width:1px;height:18px;background:#2b424c}.perf-indicator{display:flex;gap:8px;align-items:center;white-space:nowrap}.timeline-footer{display:flex;justify-content:space-between;color:#506c79;margin-top:13px;font:9px var(--mono);letter-spacing:.6px}
.floating-legend{position:absolute;left:40px;bottom:259px;display:flex;gap:12px;font:8px var(--mono);letter-spacing:.5px;color:#708e9a}.floating-legend span:not(:last-child):after{content:' · ';margin-left:12px;color:#498b98}.bottom-signature{position:absolute;bottom:0;left:0;right:0;height:45px;display:flex;justify-content:space-between;align-items:center;padding:0 42px;color:#54707c;background:#060f17;border-top:1px solid #142a36;font:8px var(--mono);letter-spacing:1px}.bottom-signature span{color:#46616c}
.annotation-layer{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}.annotation-layer svg{width:100%;height:100%;position:absolute;inset:0;pointer-events:none}.annotation-label{position:absolute;transform:translateY(-50%);background:rgba(8,20,29,.90);border-left:2px solid var(--cyan);padding:7px 11px;min-width:130px;pointer-events:auto;cursor:pointer;box-shadow:0 7px 15px rgba(0,0,0,.2)}.annotation-label:hover{background:#16323d}.annotation-label b{display:block;font:10px var(--mono);color:#dbeded;letter-spacing:.3px}.annotation-label small{font:8px var(--mono);color:var(--cyan-soft)}.annotation-label.is-selected{border-left-color:var(--orange)}.annotation-layer .leader{stroke:#52b8bc;stroke-width:1;opacity:.7;fill:none;stroke-dasharray:3 2}.annotation-layer .leader-point{fill:#60e6e1;stroke:#0b262e;stroke-width:1.5}.toast{position:absolute;top:88px;left:50%;transform:translate(-50%,-10px);border:1px solid #3e7883;background:rgba(9,32,39,.95);padding:9px 20px;color:#aff0e9;font:10px var(--mono);letter-spacing:1px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1600px){.left-panel{top:330px}.right-panel{width:310px}.hero-heading{top:114px}}
@media(max-height:820px){.hero-heading{top:94px}.hero-heading h1{font-size:67px}.hero-rule{display:none}.left-panel{top:258px;transform:scale(.84);transform-origin:top left}.right-panel{top:92px;max-height:calc(100vh - 326px);transform:scale(.90);transform-origin:top right}.camera-dock{bottom:246px}.transport{height:175px}.transport .timeline-footer{margin-top:6px}.transport-label{margin-top:-8px}.floating-legend{bottom:240px}}
@media(max-width:1150px){.top-center{display:none}.brand-lockup{min-width:0}.left-panel{width:247px}.right-panel{right:17px;width:250px}.hero-heading{left:22px}.left-panel{left:17px}.floating-legend{display:none}.transport{padding-left:22px;padding-right:22px}.camera-dock{left:48%}.playback-settings{gap:9px}.playback-buttons button{padding:0 11px}}
@media(max-width:850px){.topbar{padding:0 17px;height:67px}.brand-name{font-size:24px}.header-right{gap:13px}.header-mark{display:none}.hero-heading{left:20px;top:81px}.hero-heading h1{font-size:70px}.hero-caption{max-width:270px;line-height:1.4}.left-panel{top:240px;left:12px;transform:scale(.71);transform-origin:top left}.right-panel{top:92px;width:222px;right:12px;max-height:calc(100vh - 320px);transform:scale(.84);transform-origin:top right}.camera-dock{bottom:228px;transform:translateX(-50%) scale(.82);transform-origin:center bottom}.transport{height:179px;bottom:33px;padding:18px}.transport-lower{flex-wrap:wrap;gap:7px}.transport .timeline-footer{display:none}.bottom-signature{height:33px;padding:0 17px;font-size:7px}.bottom-signature span{display:none}.playback-settings{font-size:8px}.playback-buttons button{height:30px;font-size:9px}.timeline-row{margin-bottom:9px}}
@media(max-width:600px){.topbar{height:61px}.brand-name{font-size:22px}.brand-sub{font-size:6px}.live{display:none}.header-right{gap:7px}.seed{font-size:8px}.hero-heading{top:74px;left:15px}.hero-heading h1{font-size:clamp(45px,11vw,64px);margin:8px 0}.eyebrow{font-size:8px}.hero-caption{font-size:8px;max-width:255px}.hero-rule{display:none}.left-panel{display:none}.right-panel{top:auto;bottom:236px;right:10px;width:238px;max-height:37vh;transform:none;opacity:.95}.right-panel .panel-top{height:31px}.right-panel .channel{padding-bottom:7px}.right-panel .channels{padding-bottom:0}.right-panel .mode-grid{padding-bottom:7px}.right-panel .control-title{padding:10px 13px 7px;font-size:8px}.right-panel .channels{padding-left:13px;padding-right:13px}.camera-dock{left:50%;bottom:205px;transform:translateX(-50%) scale(.75)}.camera-preset-buttons button[data-cam="rear"],.camera-preset-buttons button[data-cam="cinematic"]{display:none}.transport{bottom:28px;height:178px;padding:14px 12px}.transport-label{font-size:8px}.transport .animation-identity{font-size:7px}.playback-buttons{gap:4px}.playback-buttons button{min-width:0;padding:0 6px;font-size:8px}.playback-buttons .primary-play{min-width:64px}.playback-settings{gap:7px}.playback-settings>span:nth-last-child(2){display:none}.setting-sep{display:none}.bottom-signature{height:28px;font-size:6px}.annotation-label{min-width:100px;padding:4px 6px}.annotation-label b{font-size:8px}.annotation-label small{font-size:7px}}