:root{font-family:'DM Sans','Noto Sans SC','Microsoft YaHei',sans-serif;color:#e9eeeb;background:#101719;font-synthesis:none;--lime:#c6f36b;--muted:#8a999d;--line:#2b373a}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:3px}button{border:1px solid var(--line);background:#1a2528;border-radius:8px;padding:9px 13px;transition:background .18s,border-color .18s}button:hover{background:#2b393c;border-color:#52634e}header{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#151e20}.brand,.header-right{display:flex;align-items:center;gap:14px}.brand{font-weight:600;letter-spacing:1px}.brand-icon{font-size:35px;color:var(--lime)}.brand-light{font-weight:400;color:#a2b0b3;margin-left:8px}.version{font-size:9px;letter-spacing:1.4px;padding:4px 7px;border:1px solid #43523b;border-radius:4px;color:#b4d988}.header-right{font-size:12px;color:#a8b8bc}.header-right button{margin-left:12px;font-size:12px}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px #c6f35030}main{display:grid;grid-template-columns:minmax(0,1fr) 354px;height:calc(100dvh - 116px);min-height:580px}#viewport{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#243237,#10191c 72%)}#canvas-wrap{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}.scene-top{position:absolute;left:34px;top:30px;z-index:2;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:600;color:#91a1a5}h1{font-size:24px;letter-spacing:1px;margin:10px 0 8px;font-weight:500}.scene-top p{font-size:11px;color:#84979d;margin:0}.view-tools{position:absolute;bottom:66px;left:50%;transform:translateX(-50%);display:flex;gap:2px;padding:4px;background:#182326df;border:1px solid #354145;border-radius:10px;white-space:nowrap}.view-tools button{font-size:11px;border:0;background:transparent;padding:8px 15px}.view-tools button.active{background:#3c4a3b;color:#d7f7a6}.scene-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:16px 26px;font-size:10px;color:#8f9da2}.scene-bottom>span{flex:1}.scene-bottom button{font-size:10px;border:0;background:transparent;padding:5px}.mouse{font-size:16px;margin-right:5px}aside{background:#172124;border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.panel-heading{padding:28px 24px 22px;display:flex;align-items:center;justify-content:space-between}h2{font-weight:500;font-size:20px;margin:6px 0 0}.badge{font-size:10px;color:var(--lime);border:1px solid #415538;border-radius:5px;padding:4px 7px}.panel-tabs{display:flex;background:#101a1d;margin:0 24px 20px;padding:4px;border-radius:8px}.panel-tabs button{width:50%;padding:9px;border:0;background:none;font-size:12px;color:#8e9da2}.panel-tabs button.active{background:#2b383c;color:#e6edea;box-shadow:0 2px 4px #0003}#panel-body{overflow:auto;flex:1;padding:0 24px 24px;scrollbar-width:thin;scrollbar-color:#435348 transparent}.panel-foot{padding:16px 24px;border-top:1px solid var(--line);font-size:9px;color:#86999f;display:flex;align-items:center;gap:7px}.panel-foot>span:last-child{margin-left:auto;font-size:8px;letter-spacing:1px}footer{height:40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 26px;font-size:10px;color:#85999f;background:#141e21}footer>div{display:flex;gap:11px;align-items:center}footer b{font-weight:400;color:#b9c8c9}.live-icon{color:var(--lime)}.footer-sep{height:10px;width:1px;background:#3e4a4e}#loading{position:absolute;inset:0;background:#10191ce8;z-index:10;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;font-size:13px}#loading span{font-size:11px;color:var(--muted)}.loader{width:32px;height:32px;border:2px solid #3a4a40;border-top-color:var(--lime);border-radius:50%;animation:spin 1s linear infinite}.hidden{display:none!important}@keyframes spin{to{transform:rotate(360deg)}}#toast{position:fixed;bottom:60px;left:50%;transform:translate(-50%,20px);background:#d0efad;color:#183014;padding:12px 22px;border-radius:9px;font-size:12px;opacity:0;transition:.2s;pointer-events:none;z-index:50}#toast.visible{opacity:1;transform:translate(-50%,0)}
.control-caption{font-size:10px;display:flex;align-items:center;justify-content:space-between;color:#81979e;margin-bottom:22px}.control-caption button{font-size:9px;padding:5px 8px;border:0;background:none;color:#99aaa5}.group-title{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:500;letter-spacing:.3px;color:#b7c8cb;margin-bottom:12px}.group-title>span{font-size:8px;font-weight:400;letter-spacing:1px;color:#71898f}.gripper-title{margin-top:24px}.link-control{display:flex;align-items:center;gap:5px;color:#a6b8a6;font-size:9px;font-weight:400;cursor:pointer}input[type=checkbox]{width:13px;height:13px;accent-color:var(--lime);cursor:pointer}.joint-row{border-bottom:1px solid #2a383d;padding:12px 0 13px;position:relative}.joint-row.selected{background:linear-gradient(90deg,#c6f36b09,transparent);border-bottom-color:#657a4a}.joint-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}.joint-title{display:flex;align-items:center;gap:9px;padding:0;border:0;background:none!important;color:#c7d3d5;font-size:11px;flex:1;min-width:0;text-align:left}.joint-num{display:inline-flex;align-items:center;justify-content:center;color:var(--joint-color);font-family:'DM Sans',monospace;font-size:9px;width:22px;height:22px;border-radius:6px;background:color-mix(in srgb,var(--joint-color) 10%,transparent);flex-shrink:0}.joint-type{font-size:8px;padding:2px 4px;color:#718c94;border:1px solid #34464b;border-radius:3px;margin-left:auto}.joint-head output{font-size:13px;font-family:'DM Sans',monospace;font-variant-numeric:tabular-nums;color:#d3e2d7;min-width:50px;text-align:right}input[type=range]{--pct:50%;height:3px;appearance:none;-webkit-appearance:none;width:100%;display:block;margin:0;background:linear-gradient(to right,var(--joint-color,var(--lime))) 0/var(--pct) 100% no-repeat,#394b50;border-radius:4px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--joint-color,var(--lime));border:2px solid #cbd6c1;box-shadow:0 0 0 4px #c6f36b05}input[type=range]::-moz-range-thumb{width:8px;height:8px;background:var(--joint-color,var(--lime));border:1px solid #cbd6c1}.range-ends{display:flex;justify-content:space-between;margin-top:8px;font-size:8px;font-family:monospace;color:#6d858d}.joint-detail{display:flex;justify-content:space-between;gap:8px;margin-top:13px}.joint-detail button{font-size:9px;padding:6px 9px;border-radius:5px;border-color:#38474b;background:#223135}.direction-buttons{display:flex;gap:3px}.direction-buttons button{color:#92a7ae;background:transparent}.direction-buttons .active{background:#465439;color:#d7edb8;border-color:#62774c}.joint-detail button.running{color:var(--lime);border-color:#70834f}.range-note{font-size:9px;color:#748d95;line-height:1.9;margin:23px 0 0}.auto-intro{display:flex;align-items:center;gap:13px;padding:10px 0 24px}.auto-symbol{display:flex;align-items:center;justify-content:center;background:#c6f36b12;border:1px solid #61734a;border-radius:12px;width:44px;height:44px;font-size:27px;color:var(--lime)}h3{font-size:12px;font-weight:500;margin:0 0 6px}.auto-intro p{font-size:9px;color:#81989f;margin:0}.field-label{display:block;font-size:11px;color:#a9bdc2;margin:0 0 10px}select{width:100%;padding:12px;border:1px solid #394d53;border-radius:7px;color:#dce9e4;background:#202f34;font-size:11px;cursor:pointer}.speed-heading{display:flex;justify-content:space-between;font-size:11px;color:#b1c5ca;margin:26px 0 15px}.speed-heading output{color:var(--lime);font-family:monospace}#demo-speed{--pct:43%}.auto-options{display:flex;align-items:center;justify-content:space-between;margin:22px 0}.auto-options label{display:flex;align-items:center;gap:7px;font-size:10px;color:#a8bdc2}.auto-options button{border:0;background:none;font-size:9px;color:#8fa6ad;padding:0}.play-button{display:block;background:var(--lime);border-color:var(--lime);color:#26351b;font-size:12px;font-weight:600;width:100%;padding:13px}.play-button:hover{background:#d4fb8c}.play-button.playing{background:#c6f36b20;color:var(--lime);border-color:#8da759}.demo-progress{margin:18px 0 8px;height:3px;background:#35494f;overflow:hidden;border-radius:5px}#progress-bar{height:100%;width:0;background:var(--lime)}.demo-status{display:flex;justify-content:space-between;font-size:8px;color:#849da5;margin-bottom:29px}.auto-joints{border-top:1px solid #2b3d42}.auto-joint{display:flex;align-items:center;gap:10px;font-size:10px;padding:11px 0;border-bottom:1px solid #2b3d42;cursor:pointer}.auto-joint output{margin-left:auto;font-size:10px;color:#93aeb6;font-variant-numeric:tabular-nums}.auto-joint input{margin-left:4px}.leader-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.leader-lines path{fill:none;stroke-width:1}.joint-label{position:absolute;display:flex;align-items:center;gap:7px;height:28px;padding:3px 9px 3px 4px;background:#111c20c9;backdrop-filter:blur(5px);border:1px solid #456068;border-radius:6px;z-index:3;white-space:nowrap;box-shadow:0 3px 10px #0001}.joint-label>span{width:20px;height:20px;display:flex;align-items:center;justify-content:center;font:9px monospace;background:#24383c;border-radius:4px;color:var(--joint-color)}.joint-label b{font-size:9px;font-weight:400;color:#c8dbdf}.joint-label.selected{border-color:var(--joint-color);background:#1b2b28e8}.joint-label.selected b{color:#e6efdc}#labels{position:absolute;inset:0;pointer-events:none}#labels button{pointer-events:auto}#helpers[aria-pressed=true]{color:#b9d5a4}
.panel-tabs button{width:auto;flex:1;white-space:nowrap}.center-intro{display:flex;align-items:center;gap:13px;padding:8px 0 24px}.center-intro p{font-size:9px;color:#81989f;margin:0}.pick-center,.reset-center{display:block;width:100%;font-size:11px;padding:12px;margin-top:14px}.pick-center{border-style:dashed;color:#c3dbb4}.pick-center.active{border-style:solid;border-color:#edc38a;background:#edc38a12;color:#f4d6af}.pick-hint{font-size:9px;color:#829ba3;line-height:1.8;margin:9px 0 24px}.center-coord-heading{display:flex;justify-content:space-between;font-size:11px;color:#b3c9cf;margin-bottom:11px}.center-coord-heading span{color:#80979f;font-size:9px}.center-coordinates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.center-coordinates label{min-width:0;background:#101c20;border:1px solid #3a4e54;border-radius:7px;padding:8px}.center-coordinates label>span{font:10px monospace;display:block;margin-bottom:6px}.axis-x{color:#ecaa9b}.axis-y{color:#bdde91}.axis-z{color:#90bee9}.center-coordinates input{width:100%;min-width:0;border:0;background:transparent;font:11px monospace;color:#dfebe9;padding:0;appearance:textfield;-moz-appearance:textfield}.center-coordinates input::-webkit-inner-spin-button,.center-coordinates input::-webkit-outer-spin-button{appearance:none;margin:0}.center-coord-help{font-size:9px;color:#78929b;line-height:1.8;margin:9px 0 21px}.center-options{display:flex;flex-direction:column;gap:13px;padding:17px 0;border-top:1px solid #2c4147;border-bottom:1px solid #2c4147}.center-options label{font-size:10px;display:flex;gap:8px;align-items:center;color:#b4c9ce;cursor:pointer}.center-options label:has(input:disabled){opacity:.45;cursor:default}.reset-center{margin-top:21px;background:#26362f;color:#cce3b3}.picking-center canvas{cursor:crosshair!important}#center-reticle{position:absolute;pointer-events:none;z-index:4;width:26px;height:26px;border:1px solid #f0c487;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 4px #f0c48710}#center-reticle::before,#center-reticle::after{content:'';position:absolute;background:#f0c487}#center-reticle::before{height:1px;width:38px;left:-7px;top:12px}#center-reticle::after{width:1px;height:38px;top:-7px;left:12px}#center-reticle>span{position:absolute;left:9px;top:9px;width:6px;height:6px;background:#f9d3a2;border:1px solid #374029;border-radius:50%;z-index:1}#center-reticle b{position:absolute;left:33px;top:21px;font-size:9px;font-weight:400;white-space:nowrap;color:#f0c487;background:#172124c9;padding:3px 5px;border-radius:3px}
@media(max-width:900px){main{grid-template-columns:minmax(0,1fr) 310px}header{padding:0 18px}.version{display:none}.scene-top{left:22px}h1{font-size:20px}.panel-heading{padding:22px 18px}.panel-tabs{margin:0 18px 18px}#panel-body{padding:0 18px 18px}.scene-bottom{padding:15px}.scene-bottom>span{font-size:0}.view-tools button{padding:8px 10px}.joint-label b{display:none}.joint-label{padding:3px}}
@media(max-width:680px){header{height:60px}.brand{font-size:12px;gap:8px;letter-spacing:0}.brand-icon{font-size:26px}.brand-light{margin-left:4px}.header-right{gap:6px}.header-right #status{display:none}.header-right button{font-size:10px;padding:7px;margin:0}main{height:auto;display:flex;flex-direction:column;min-height:0}#viewport{height:60dvh;min-height:420px}.scene-top{top:0;left:0;right:0;padding:22px;height:126px;background:linear-gradient(#111c20 60%,#111c2000)}.eyebrow{font-size:8px}h1{font-size:18px}.scene-top p{font-size:10px}aside{border-left:0;border-top:1px solid var(--line);min-height:500px}.panel-heading{padding:20px 22px 16px}.panel-tabs{margin:0 22px 18px}#panel-body{overflow:visible;padding:0 22px 22px}.panel-foot{padding:14px 22px}footer{padding:0 18px}footer>div:last-child{display:none}.scene-bottom{bottom:4px}.view-tools{bottom:58px}.view-tools button{font-size:10px}.scene-top p{max-width:200px}.joint-label b{display:none}.joint-row{padding:16px 0}.joint-title{font-size:12px}.joint-detail button{padding:9px 13px;font-size:10px}.range-ends{font-size:9px}.control-caption,.group-title{font-size:11px}input[type=range]::-webkit-slider-thumb{width:14px;height:14px}h2{font-size:19px}}