:root{color-scheme:dark;--background:#111315;--surface:#25292e;--ink:#f4f4f0;--accent:#b9eb74;--radius:22px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--background);color:var(--ink)}
body{height:100dvh;touch-action:none}
button,input{font:inherit;color:inherit}
button{border:0;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
[hidden]{display:none!important}
#pad{position:absolute;inset:max(38px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))}
.control{position:absolute;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.action{width:100%;height:100%;border-radius:var(--radius);background:var(--surface);color:var(--ink);font-size:clamp(17px,4vh,26px);font-weight:650;box-shadow:inset 0 0 0 1px #ffffff0b,0 4px 0 #0003;transition:background .07s,transform .07s}
.action.round{border-radius:50%;width:var(--diameter,100%);height:var(--diameter,100%);flex:none}
.action.down{background:var(--accent);color:#101310;transform:translateY(3px);box-shadow:none}
.stick{position:relative;border-radius:50%;width:var(--diameter,100%);height:var(--diameter,100%);flex:none;background:var(--surface);box-shadow:inset 0 0 0 1px #ffffff0a;touch-action:none}
.stick::before{content:"";position:absolute;inset:20%;border:1px solid #ffffff10;border-radius:50%}
.knob{position:absolute;width:42%;height:42%;left:29%;top:29%;border-radius:50%;background:var(--ink);opacity:.86;pointer-events:none;box-shadow:0 5px 14px #0004}
.stick.down .knob{background:var(--accent)}
.touchpad{width:100%;height:100%;border-radius:var(--radius);background:var(--surface);border:1px solid #ffffff12;touch-action:none;color:#ffffff50;font-size:20px;display:grid;place-items:center}
.touchpad.down{border-color:var(--accent)}
.text-control{width:100%;height:100%;display:flex;gap:8px;align-items:center}
.text-control input,#remote{width:100%;min-width:0;height:56px;border:1px solid #ffffff14;border-radius:14px;background:var(--surface);padding:0 18px;font-size:16px;user-select:text;-webkit-user-select:text;touch-action:manipulation}
.text-control button{height:56px;min-width:56px;border-radius:14px;background:var(--accent);color:#111;font-size:26px}
.text-control button:disabled{opacity:.4}
.slider-control{display:flex;flex-direction:column;justify-content:center;gap:14px;width:100%;height:100%}
.slider-control label{font-size:14px;color:var(--ink);opacity:.7}
.slider-control input{width:100%;height:44px;accent-color:var(--accent);touch-action:none}
.utility{position:fixed;top:max(4px,env(safe-area-inset-top));width:44px;height:32px;background:transparent;color:var(--ink);opacity:.4;font-size:22px;z-index:5}
.utility:hover{opacity:.9}#settings{right:max(8px,env(safe-area-inset-right))}#fullscreen{left:max(8px,env(safe-area-inset-left))}
#pairing{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;background:var(--background);z-index:10}
#pair-form{display:flex;gap:10px;width:min(600px,100%)}
#pair-form button{height:58px;min-width:58px;background:var(--accent);color:#111;border-radius:15px;font-size:28px}
#remote{height:58px;border-radius:15px}#remote::placeholder{color:#a0a4a8}
#error{font-size:13px;color:#ffb3aa;margin:14px 0 0;min-height:20px}
#waiting{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none}
.spinner{width:20px;height:20px;border:2px solid #ffffff18;border-top-color:var(--ink);border-radius:50%;animation:spin 1s linear infinite;opacity:.5}
#toast{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:90%;margin:0;border-radius:10px;padding:10px 16px;background:#302521;color:#ffd3c5;font-size:13px;z-index:20}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap;border:0}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}.action{transition:none}}
@media(orientation:portrait){#pad{inset:52px 14px 24px}.action{font-size:18px}.text-control input{padding:0 10px}.text-control button{min-width:44px}}