:root{color-scheme:dark;font-family:system-ui,"Microsoft JhengHei",sans-serif;color:#e4f1f6;background:#0a1922}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,select,input{font:inherit}button,select{border:1px solid #476475;background:#142c3b;color:#e4f1f6;border-radius:8px;padding:9px 13px;cursor:pointer}button:hover{background:#23495b}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #f3bd57;outline-offset:2px}.primary{background:#20cec5;color:#062522;border-color:#20cec5;font-weight:700}.primary:hover{background:#73ebe3}button:disabled{opacity:.4;cursor:default}#app{width:100%;height:100dvh;min-height:320px;position:relative}#scene{position:absolute;inset:0}canvas{display:block;width:100%;height:100%}header,nav,#controls,footer,#status{position:absolute;z-index:1}header{top:0;left:0;right:0;display:flex;align-items:center;gap:24px;padding:14px 24px;background:#081720eb}header b{font-size:22px;letter-spacing:2px}header b span{font-weight:400;font-size:15px}header small{display:block;color:#9ebdc9;font-size:12px;margin-top:3px}#telemetry{margin-left:auto;font-variant-numeric:tabular-nums;font-size:15px}nav{top:86px;left:24px;right:24px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}nav label,.options label{font-size:12px;color:#d6ecf3}nav select{margin-left:5px}#status{top:150px;left:24px;color:#bff9ed;background:#0b2734d9;padding:7px 12px;border-radius:7px;font-size:13px}#controls{bottom:32px;left:24px;right:24px;display:flex;align-items:flex-end;gap:22px}.stick-wrap{flex:0 0 170px;text-align:center;user-select:none}.stick{height:170px;width:170px;border-radius:50%;background:#0a2536c9;border:1px solid #709eae;position:relative;touch-action:none;cursor:grab;box-shadow:0 6px 30px #04121b40}.stick:before,.stick:after{content:"";position:absolute;background:#54778988}.stick:before{left:50%;top:10%;width:1px;height:80%}.stick:after{top:50%;left:10%;height:1px;width:80%}.knob{position:absolute;left:50%;top:50%;width:54px;height:54px;border-radius:50%;background:#26d9cc;transform:translate(-50%,-50%);box-shadow:0 0 20px #23d2c44a;pointer-events:none}.stick-wrap small{display:block;margin-top:7px;text-shadow:0 1px 5px #00111f}.center{flex:1;max-width:900px;margin:0 auto;background:#091c28e8;border:1px solid #304c5b;border-radius:12px;padding:14px}.actions{display:flex;gap:8px}.actions button{flex:1}.options{display:flex;gap:12px;justify-content:space-between;align-items:center;margin:12px 0}.options select{padding:5px}.options input{width:85px;vertical-align:middle;accent-color:#26d9cc}.progress{height:3px;background:#304754;border-radius:3px}#progress{height:100%;width:0;background:#26d9cc}#task{font-size:13px;line-height:1.5;color:#b9d4e0;padding-top:8px;min-height:30px}footer{bottom:7px;left:0;right:0;text-align:center;font-size:11px;color:#c7dde5;text-shadow:0 1px 4px #031620}#error{position:absolute;inset:25%;z-index:10;background:#1f2935;padding:30px;border:1px solid #f4ac78;border-radius:12px}dialog{max-width:650px;width:90%;max-height:90dvh;border:1px solid #527c8c;border-radius:16px;background:#102431;color:#dcedf4;padding:28px;line-height:1.7}dialog::backdrop{background:#020e19bc}dialog h2{color:#55e3d7;margin-top:0}dialog button{float:right}@media(max-width:950px){header{padding:8px 14px;gap:10px}header b{font-size:17px}header b span{display:none}#telemetry{font-size:12px}header button{font-size:12px}nav{left:12px;right:12px;top:65px;gap:6px}nav button,nav select{font-size:12px;padding:6px}#status{top:115px;left:12px;font-size:11px}#controls{left:12px;right:12px;bottom:24px;gap:12px}.stick-wrap{flex-basis:120px}.stick{width:120px;height:120px}.knob{width:40px;height:40px}.stick-wrap small{font-size:10px}.center{padding:8px}.actions{gap:4px}.actions button{padding:8px 3px;font-size:12px}.options{gap:4px;margin:7px 0;flex-wrap:wrap}.options label{font-size:10px}.options select{font-size:11px;padding:4px}.options input{width:65px}#task{font-size:11px}footer{font-size:9px}}@media(max-height:500px){header small{display:none}nav{top:51px}#status{top:94px}.stick-wrap{flex-basis:105px}.stick{width:105px;height:105px}.center{max-width:600px}.options{margin:5px 0}#task{min-height:0}.actions button{padding:6px}}@media(orientation:portrait){header{flex-wrap:wrap}#telemetry{font-size:11px}nav{top:80px}#status{top:170px}#controls{flex-wrap:wrap;justify-content:space-between;gap:10px}.center{order:-1;flex-basis:100%;max-width:none}.stick-wrap{flex-basis:130px}.stick{height:130px;width:130px}header small{font-size:10px}nav label{font-size:10px}nav select{max-width:150px}footer{font-size:8px}}

@media(orientation:portrait){header{height:78px;align-content:flex-start}header>div:first-child{width:100%}header small{display:none}header #telemetry{margin:0}header #help{position:absolute;right:12px;top:8px}nav{top:86px}}