.touch-controls{--stick-size: clamp(104px, 18vmin, 128px);--knob-size: clamp(48px, 8vmin, 58px);--stick-bottom: clamp(112px, 33vh, 240px);--stick-bottom: clamp(112px, 33dvh, 240px);--stick-edge: clamp(20px, 5vw, 72px);position:fixed;inset:0;z-index:10;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.joystick-zone{box-sizing:border-box;position:absolute;width:var(--stick-size);height:var(--stick-size);bottom:calc(var(--stick-bottom) + env(safe-area-inset-bottom,0px));transform:translateY(50%);border-radius:50%;border:2px solid rgba(226,248,255,.65);background:radial-gradient(circle,#11253661 35%,#0c1b2cad);box-shadow:0 2px 12px #0005,inset 0 0 0 8px #d2f4ff0a;pointer-events:auto;touch-action:none}.left-zone{left:calc(var(--stick-edge) + env(safe-area-inset-left,0px))}.right-zone{right:calc(var(--stick-edge) + env(safe-area-inset-right,0px))}.joystick{box-sizing:border-box;position:absolute;width:var(--knob-size);height:var(--knob-size);left:calc(50% - var(--knob-size) / 2);top:calc(50% - var(--knob-size) / 2);border-radius:50%;background:linear-gradient(145deg,#e6f6ffb3,#84aec08c);border:3px solid #e9faff;box-shadow:0 3px 10px #0006;pointer-events:none}.joystick-label{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);padding:3px 9px;border-radius:8px;color:#f0faff;background:#0c1b2cb3;font:600 12px/1.2 system-ui,sans-serif;white-space:nowrap;pointer-events:none}.joystick-zone.active{border-color:#a2eaff}.joystick-zone.active .joystick{background:#bcecffd9;border-color:#fff}.joystick-zone.running{border-color:#9ff7ba;box-shadow:0 0 0 4px #7bed9b40}.touch-button{position:absolute;width:48px;height:48px;padding:0;border:2px solid #e9faffaa;border-radius:50%;background:#183348b8;color:#f0faff;font:700 25px/1 system-ui,sans-serif;pointer-events:auto;touch-action:none}.touch-button.active{background:#78bed9;border-color:#fff}.jump-button,.interact-button{bottom:calc(var(--stick-bottom) - var(--stick-size) / 2 - 84px + env(safe-area-inset-bottom,0px))}.jump-button{right:calc(var(--stick-edge) + env(safe-area-inset-right,0px))}.interact-button{right:calc(var(--stick-edge) + 56px + env(safe-area-inset-right,0px))}@media(max-height:640px){.jump-button,.interact-button{right:calc(var(--stick-edge) + var(--stick-size) + 12px + env(safe-area-inset-right,0px))}.jump-button{bottom:calc(var(--stick-bottom) + 8px + env(safe-area-inset-bottom,0px))}.interact-button{bottom:calc(var(--stick-bottom) - 48px + env(safe-area-inset-bottom,0px))}}body.cl2-xr-presenting .touch-controls{display:none}body.qe-progress-only:has(.touch-controls) .qe-training-feed{box-sizing:border-box;left:50%;top:calc(78px + env(safe-area-inset-top,0px));width:min(650px,calc(100vw - 32px));max-height:max(64px,calc(50vh - 90px));max-height:max(64px,calc(50dvh - 90px));overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;touch-action:pan-y}