:root{--bg: rgba(12, 20, 30, .62);--bg-solid: #0d1722;--line: rgba(255, 255, 255, .12);--txt: #eaf1f8;--dim: #9db0c3;--accent: #ff8a3d;--accent2: #46c2d8;--good: #7ddc8e;--warn: #ffcc4d;--bad: #ff5d6c;--r: 12px;--safe-t: env(safe-area-inset-top, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0d1722;color:var(--txt);overscroll-behavior:none}#app{position:fixed;inset:0;touch-action:none}#gl{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}#ui{position:absolute;inset:0;pointer-events:none}#ui>*{pointer-events:auto}button,select,input{font:inherit;color:inherit}button{background:#ffffff14;border:1px solid var(--line);border-radius:9px;padding:7px 11px;cursor:pointer;transition:background .12s,transform .06s;min-height:34px;white-space:nowrap}button:hover{background:#ffffff29}button:active{transform:translateY(1px)}button.primary{background:var(--accent);color:#1b1006;border-color:transparent;font-weight:650}button.primary:hover{background:#ff9d5c}button.on{background:#46c2d847;border-color:#46c2d8b3}button.icon{padding:7px 9px;min-width:36px}.panel{position:absolute;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 8px 30px #00000047;font-size:13px}.panel h3{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);font-weight:600}.panel .hd{display:flex;align-items:center;justify-content:space-between;padding:9px 10px 9px 14px;gap:8px;cursor:default}.panel .bd{padding:2px 14px 12px;display:grid;gap:9px}.panel.collapsed .bd{display:none}.sec{display:grid;gap:8px;padding-top:8px;border-top:1px solid var(--line)}.sec:first-child{border-top:0;padding-top:0}.sec>.t{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}.row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.row>*{flex:1 1 auto}.sl{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center}.sl label{color:var(--dim);font-size:12px}.sl .v{font-variant-numeric:tabular-nums;font-size:12px;text-align:right;min-width:64px}.sl input[type=range]{grid-column:1 / -1;width:100%;accent-color:var(--accent);height:22px}.sl input[type=number]{width:84px;background:#00000040;border:1px solid var(--line);border-radius:6px;padding:3px 6px;text-align:right}.chips{display:flex;gap:5px;flex-wrap:wrap}.chips button{padding:4px 9px;min-height:28px;font-size:12px;flex:0 1 auto}select{background:#0000004d;border:1px solid var(--line);border-radius:8px;padding:6px 8px;min-height:34px}.small{font-size:11.5px;color:var(--dim);line-height:1.4}kbd{background:#ffffff1a;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;font-size:11px}#flightPanel{top:calc(var(--safe-t) + 10px);left:calc(var(--safe-l) + 10px);width:318px;max-height:calc(100% - var(--safe-t) - var(--safe-b) - 150px);overflow:auto}#topRight{position:absolute;top:calc(var(--safe-t) + 10px);right:calc(var(--safe-r) + 10px);display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 350px)}#topRight .panel{position:static;padding:6px;display:flex;gap:5px;align-items:center}#perf{position:absolute;top:calc(var(--safe-t) + 60px);right:calc(var(--safe-r) + 10px);padding:9px 12px;font:11.5px/1.5 ui-monospace,SF Mono,Consolas,monospace;white-space:pre;display:none;max-width:340px;overflow:hidden}#perf.show{display:block}#hud{position:absolute;left:50%;transform:translate(-50%);bottom:calc(var(--safe-b) + 12px);display:grid;gap:8px;width:min(640px,calc(100% - 24px - var(--safe-l) - var(--safe-r)));pointer-events:none}#hud>*{pointer-events:auto}.meters{display:grid;grid-template-columns:1fr 1fr;gap:8px}.meter{padding:8px 12px 10px}.meter .top{display:flex;justify-content:space-between;align-items:baseline}.meter .lab{color:var(--dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.meter .num{font-size:22px;font-weight:650;font-variant-numeric:tabular-nums}.meter .num small{font-size:12px;color:var(--dim);font-weight:500}.meter .bar{height:7px;border-radius:4px;background:#ffffff1a;overflow:hidden;margin-top:6px}.meter .bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#46c2d8,#7ddc8e 45%,#ffcc4d 70%,#ff5d6c);border-radius:4px}.meter .tag{font-size:11px;height:14px;color:var(--warn)}.readouts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;padding:6px 12px;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}.readouts b{color:var(--txt);font-weight:600}.transport{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:6px}.transport button{flex:1 1 auto;max-width:120px}#toast{position:absolute;top:calc(var(--safe-t) + 14px);left:50%;transform:translate(-50%);padding:8px 16px;border-radius:999px;background:#ff8a3deb;color:#1b1006;font-weight:600;font-size:13px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:5}#toast.show{opacity:1}#assist{position:absolute;top:calc(var(--safe-t) + 52px);left:50%;transform:translate(-50%);padding:4px 12px;border-radius:999px;background:#7ddc8eeb;color:#07210f;font-size:12px;font-weight:650;display:none;pointer-events:none}#assist.show{display:block}#steer{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border:2px solid rgba(255,255,255,.6);border-radius:50%;pointer-events:none;display:none}#steer i{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--accent);margin:-7px 0 0 -7px;left:50%;top:50%}.pad{position:absolute;bottom:calc(var(--safe-b) + 14px);width:92px;height:210px;border-radius:26px;background:#0c141e73;border:1px solid var(--line);display:none;touch-action:none}.pad:before{content:attr(data-label);position:absolute;top:8px;width:100%;text-align:center;font-size:11px;letter-spacing:.1em;color:var(--dim)}.pad .knob{position:absolute;left:50%;width:64px;height:64px;margin-left:-32px;border-radius:50%;background:#ff8a3dd9;top:calc(50% - 32px + var(--pull, 0) * 70px);box-shadow:0 4px 14px #00000059}.pad.active{background:#0c141e9e;border-color:#ff8a3d99}#padL{left:calc(var(--safe-l) + 14px)}#padR{right:calc(var(--safe-r) + 14px)}body.touch .pad{display:block}body.touch #hud{bottom:calc(var(--safe-b) + 10px);width:min(520px,calc(100% - 240px - var(--safe-l) - var(--safe-r)))}body.touch .readouts{display:none}body.touch #flightPanel{max-height:calc(100% - var(--safe-t) - var(--safe-b) - 245px)}@media(max-height:460px)and (orientation:landscape){body.touch #flightPanel{max-height:calc(100% - var(--safe-t) - var(--safe-b) - 180px);width:min(280px,calc(100% - 200px))}}body.lab #topRight .panel:first-child{display:none}#boot{position:absolute;inset:0;display:grid;place-items:center;background:#0d1722;z-index:20;transition:opacity .5s}#boot.gone{opacity:0;pointer-events:none}.boot-card{text-align:center}.boot-title{font-size:28px;font-weight:700;letter-spacing:.03em}.boot-sub{color:var(--dim);margin-top:6px}.expert .grp{display:grid;gap:7px;padding-top:6px}.expert details{border-top:1px solid var(--line);padding-top:6px}.expert summary{cursor:pointer;font-size:12px;color:var(--accent2);padding:3px 0}.legend{height:8px;border-radius:4px;background:linear-gradient(90deg,#2a6fe0,#36d6b0,#4cd964 40%,#ffd23c 70%,#ff3b30)}#labPanel{top:calc(var(--safe-t) + 10px);left:calc(var(--safe-l) + 10px);width:330px;max-height:calc(100% - var(--safe-t) - var(--safe-b) - 20px);overflow:auto;display:none}body.lab #labPanel{display:block}body.lab #flightPanel,body.lab #hud,body.lab .pad,body.lab #assist{display:none!important}@media(max-width:760px),(max-height:520px){#flightPanel{width:280px;font-size:12px;max-height:calc(100% - var(--safe-t) - var(--safe-b) - 130px)}#topRight{max-width:calc(100% - 300px)}.meter .num{font-size:18px}}@media(max-height:460px)and (orientation:landscape){#hud{bottom:calc(var(--safe-b) + 6px);gap:4px}.meter{padding:4px 10px 6px}.meter .num{font-size:16px}.pad{height:150px;width:78px;bottom:calc(var(--safe-b) + 8px)}.pad .knob{width:52px;height:52px;margin-left:-26px;top:calc(50% - 26px + var(--pull, 0) * 48px)}#flightPanel{max-height:calc(100% - var(--safe-t) - var(--safe-b) - 100px)}.transport{padding:3px}.transport button{min-height:28px;padding:4px 8px}}
