:root{font-family:Inter,Arial,sans-serif;color:#ecf2f1;background:#070d14;font-synthesis:none;--cyan:#72e9d9;--muted:#8194a0;--hair:rgba(177,222,229,.14);--glass:rgba(11,19,27,.87);--mono:'DM Mono',monospace}
*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#070d14}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}button:disabled{opacity:.4;cursor:not-allowed}
#app{position:relative;width:100vw;height:100dvh;min-height:540px;overflow:hidden;background:#070d14}.viewport{position:absolute;inset:0;background:radial-gradient(ellipse at 52% 52%,#12242a,#080e15 65%)}.webgl{width:100%;height:100%;display:block;outline:none;touch-action:none}
.overlay-grad{pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,11,17,.72) 0%,transparent 20%,transparent 75%,rgba(5,11,17,.52) 100%)}
.topbar{pointer-events:none;position:absolute;z-index:10;top:0;left:0;right:0;display:flex;align-items:center;height:74px;padding:0 32px;border-bottom:1px solid var(--hair);background:linear-gradient(180deg,rgba(8,14,21,.82),rgba(8,14,21,.28));gap:18px}
.logo-symbol{width:31px;height:31px;display:grid;place-items:center;border:1.5px solid var(--cyan);color:var(--cyan);transform:rotate(-20deg);font-size:17px;letter-spacing:-5px;padding-right:4px}
.brand{display:flex;align-items:center;gap:13px}.brandname{font-family:'Barlow Condensed',Arial,sans-serif;font-size:23px;font-weight:800;letter-spacing:.15em;line-height:1}.brandsub{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:#839eaa;margin-top:5px}.top-divider{height:28px;width:1px;background:var(--hair);margin:0 12px}.nav-tag{font-family:var(--mono);color:#a0acb5;letter-spacing:.12em;font-size:10px}.top-right{margin-left:auto;display:flex;align-items:center;gap:18px;font:10px var(--mono);letter-spacing:.12em;color:#a2b8bb}.status-dot{width:7px;height:7px;background:#87f2d9;border-radius:50%;display:inline-block;box-shadow:0 0 11px #67e9d8;margin-right:7px}.tag-outline{border:1px solid var(--hair);padding:8px 11px;color:#a6c7cd}.top-right .top-cap{color:#6b8895}
.intro{pointer-events:none;position:absolute;z-index:4;top:124px;left:38px;width:330px}.eyebrow{font:10px var(--mono);letter-spacing:.26em;color:var(--cyan);display:flex;align-items:center;gap:12px}.eyebrow::before{content:'';width:24px;height:1px;background:var(--cyan)}.title-main{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(48px,5vw,72px);font-weight:800;line-height:.88;letter-spacing:.022em;margin:22px 0 7px}.title-main strong{display:block;color:var(--cyan);font-weight:800}.intro-sub{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:#bad0cf;margin:15px 0 0}.intro-desc{font-size:12px;color:#8399a5;line-height:1.85;max-width:287px;margin-top:22px}.intro-rule{width:42px;height:2px;background:#e2a462;margin-top:22px}.object-id{margin-top:22px;font:10px var(--mono);color:#5b7785;letter-spacing:.08em}.object-id b{color:#b4d0cd;font-weight:500}
.sidepanel{position:absolute;z-index:5;top:91px;right:24px;bottom:139px;width:334px;display:flex;flex-direction:column;border:1px solid rgba(166,211,216,.18);background:var(--glass);backdrop-filter:blur(18px);box-shadow:0 12px 42px rgba(0,0,0,.25);overflow:hidden}.panel-header{padding:23px 22px 18px;border-bottom:1px solid var(--hair)}.micro{font:10px var(--mono);letter-spacing:.14em;color:#8eaaad}.panel-title{margin:8px 0 0;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.05em;font-size:27px}.panel-title small{font-family:var(--mono);color:var(--cyan);font-size:10px;vertical-align:middle;margin-left:9px;font-weight:400;letter-spacing:.09em}.panel-content{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#28434b transparent;flex:1;padding:21px 22px}.section-label{display:flex;align-items:center;justify-content:space-between;margin:1px 0 14px;font:10px var(--mono);letter-spacing:.14em;color:#afc3c5}.section-label .section-dash{color:var(--cyan)}.modes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:25px}.mode{padding:11px 6px;background:#121e26;color:#8ea6aa;border:1px solid rgba(178,216,223,.10);text-align:center;text-transform:uppercase;font:10px var(--mono);letter-spacing:.08em;transition:.2s}.mode:hover,.mode.active{border-color:#54b8b4;color:#bffef0;background:#17383b}.mode.active:before{content:'◆';font-size:7px;color:var(--cyan);margin-right:6px}
.telemetry{border-top:1px solid var(--hair);padding-top:17px}.metric{display:flex;justify-content:space-between;align-items:flex-end;padding:10px 0;border-bottom:1px solid rgba(180,219,226,.075)}.metric-info{color:#91a5aa;font-size:11px}.metric-value{font-family:var(--mono);color:#e1efed;font-size:12px}.metric-value em{font:10px var(--mono);color:#7db8b6;margin-left:5px}.state-pill{color:var(--cyan);font:9px var(--mono);letter-spacing:.15em}
.steps{margin:18px 0 25px}.step-line{display:flex;align-items:center;gap:9px;padding:6px 0;color:#697f89;font:10px var(--mono)}.step-line:before{content:'';height:5px;width:5px;border-radius:50%;background:#435c61;border:1px solid #435c61}.step-line.done{color:#9fe1d3}.step-line.done:before{background:#7debd8;box-shadow:0 0 8px rgba(105,231,211,.7)}
.joint-control{margin:15px 0}.joint-head{display:flex;align-items:center;justify-content:space-between;color:#91a9b3;font:11px var(--mono);margin-bottom:9px}.joint-head output{color:#c9e6e0}.slider{appearance:none;width:100%;height:3px;background:linear-gradient(to right,#76e7d9 0%,#76e7d9 var(--v,0%),#294149 var(--v,0%),#294149 100%);border-radius:0;outline:none;cursor:pointer}.slider::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border:2px solid var(--cyan);background:#121e27;border-radius:0;transform:rotate(45deg)}.slider::-moz-range-thumb{width:9px;height:9px;border:2px solid var(--cyan);background:#101820;border-radius:0}
.sidebottom{border-top:1px solid var(--hair);padding:12px 20px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.small-btn{padding:10px 8px;color:#a8c0c1;background:rgba(16,31,38,.7);border:1px solid var(--hair);font:10px var(--mono);letter-spacing:.065em}.small-btn:hover{color:var(--cyan);border-color:#3e7e80}
.playback{position:absolute;z-index:8;bottom:25px;left:34px;right:380px;min-height:96px;display:flex;flex-wrap:wrap;gap:12px 23px;align-items:center;padding:18px 22px;background:rgba(10,18,25,.90);backdrop-filter:blur(20px);border:1px solid rgba(174,214,221,.18);box-shadow:0 12px 45px rgba(0,0,0,.27)}.transport{display:flex;align-items:center;gap:6px}.transport button{height:34px;min-width:35px;border:1px solid var(--hair);background:#111f28;color:#bdd1d4;display:flex;align-items:center;justify-content:center;padding:0 10px}.transport button.primary{background:var(--cyan);color:#0b191c;border-color:var(--cyan)}.transport button:hover{border-color:var(--cyan)}.transport button svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.timeline{flex:1;min-width:160px;padding:0 3px}.timeline-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#98b0b3;font:10px var(--mono)}#timeRead{color:var(--cyan)}.track-wrap{position:relative;height:8px;display:flex;align-items:center}.track-wrap .slider{height:4px;position:relative;z-index:2}.track-mark{position:absolute;width:1px;height:11px;top:-2px;background:#61747d;pointer-events:none;z-index:1}.playback-right{display:flex;align-items:center;gap:13px;font:10px var(--mono);color:#a6bbc0}.playback-right label{display:flex;align-items:center;gap:7px;white-space:nowrap}.playback-right select{background:#182831;color:#bce4df;border:1px solid var(--hair);padding:7px;font:10px var(--mono)}.playback-right input[type=checkbox]{accent-color:#7ce9da;width:14px;height:14px;margin:0}
.viewport-legend{pointer-events:none;position:absolute;left:38px;bottom:156px;color:#5c7782;font:10px var(--mono);line-height:1.9}.viewport-legend span{color:#9fb6b9}.camera-bar{position:absolute;z-index:4;left:36px;top:53%;transform:translateY(-10%);display:flex;flex-direction:column;gap:5px}.camera-btn{width:35px;height:35px;border:1px solid var(--hair);background:rgba(8,18,24,.66);color:#a6bfc3;font:10px var(--mono)}.camera-btn:hover,.camera-btn.active{border-color:#6ce6d7;color:var(--cyan);background:#10272d}
.corner-mark{position:absolute;width:20px;height:20px;pointer-events:none;border-color:rgba(113,218,217,.32);border-style:solid}.corner-mark.tl{top:92px;left:24px;border-width:1px 0 0 1px}.corner-mark.tr{top:92px;right:370px;border-width:1px 1px 0 0}.corner-mark.bl{bottom:136px;left:24px;border-width:0 0 1px 1px}
.labels{position:absolute;inset:0;pointer-events:none;z-index:3}.part-label{display:none;position:absolute;white-space:nowrap;transform:translate(12px,-16px);font:9px var(--mono);letter-spacing:.05em;color:#bbf8ed;background:rgba(9,22,29,.8);padding:7px 10px;border:1px solid rgba(100,208,211,.3)}.part-label:before{content:'';position:absolute;width:17px;height:1px;background:#63d6cd;left:-16px;top:15px}.part-label:after{content:'';position:absolute;width:5px;height:5px;background:#78efdb;left:-20px;top:13px;transform:rotate(45deg)}
.loading{position:absolute;inset:0;background:#070e15;display:flex;align-items:center;justify-content:center;z-index:50;transition:opacity .6s}.loading.done{opacity:0;pointer-events:none}.loading-inner{text-align:center}.loading-mark{font-family:'Barlow Condensed',sans-serif;font-size:62px;font-weight:800;letter-spacing:.18em}.loading-sub{font:10px var(--mono);color:var(--cyan);letter-spacing:.25em;margin-top:14px}.loading-progress{height:2px;width:210px;background:#233941;margin:24px auto 0;overflow:hidden}.loading-progress i{display:block;width:100%;height:100%;background:var(--cyan);animation:load 1.35s ease-in-out}
@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.toast{position:absolute;z-index:25;top:91px;left:50%;transform:translateX(-50%) translateY(-25px);opacity:0;pointer-events:none;background:rgba(15,35,43,.93);border:1px solid #396e72;color:#b9e8e1;padding:12px 20px;font:11px var(--mono);transition:.3s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:1190px){.intro{top:109px;left:27px;width:270px}.title-main{font-size:56px}.intro-desc{display:none}.intro-rule{margin-top:12px}.sidepanel{width:292px;right:14px;bottom:128px}.playback{right:319px;left:16px;bottom:17px;padding:12px}.playback-right{width:100%;justify-content:flex-end}.viewport-legend{display:none}.corner-mark{display:none}.camera-bar{left:17px;top:50%}}
@media(max-width:760px){#app{min-height:500px}.topbar{height:60px;padding:0 15px}.brandname{font-size:20px}.brandsub{font-size:7px}.top-divider,.nav-tag,.top-cap{display:none}.top-right{gap:7px}.tag-outline{padding:6px;font-size:8px}.intro{top:79px;left:15px;width:200px}.title-main{font-size:41px;margin-top:13px}.eyebrow{font-size:8px}.intro-sub{font-size:9px}.intro-rule,.object-id{display:none}.sidepanel{right:8px;top:auto;bottom:166px;width:215px;max-height:43vh}.panel-header{padding:12px}.panel-title{font-size:19px}.micro{font-size:8px}.panel-content{padding:12px}.section-label{font-size:8px}.modes{gap:4px;margin-bottom:10px}.mode{font-size:8px;padding:8px 3px}.metric{padding:7px 0}.metric-info,.metric-value{font-size:9px}.steps{display:none}.sidebottom{padding:7px;gap:3px}.small-btn{font-size:8px;padding:7px 2px}.playback{bottom:8px;left:8px;right:8px;padding:12px;min-height:138px;gap:10px}.transport button{min-width:29px;height:32px;padding:0 7px}.timeline{min-width:110px}.playback-right{width:100%;justify-content:space-between}.camera-bar{left:9px;top:40%}.camera-btn{width:28px;height:28px;font-size:9px}.part-label{font-size:8px;padding:4px}.top-right .status-dot{margin-right:2px}}
@media(max-height:700px) and (min-width:761px){.sidepanel{top:81px;bottom:116px}.panel-header{padding:13px 20px}.panel-content{padding:12px 18px}.section-label{margin-bottom:9px}.modes{margin-bottom:10px}.telemetry{padding-top:8px}.metric{padding:7px 0}.steps{margin:8px 0}.playback{bottom:12px;min-height:88px}.intro{top:100px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}