:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#121915;color:#f1f3eb;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{width:min(100% - 36px,460px);margin:0 auto;padding:24px 0 max(28px,env(safe-area-inset-bottom))}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:42px}.brand{font-size:25px;font-weight:750;letter-spacing:-1.3px;color:inherit;text-decoration:none;display:flex;align-items:center}.mark{background:#d4ef9e;color:#1a291a;border-radius:12px;display:inline-grid;place-items:center;width:37px;height:37px;font-size:28px;margin-right:10px}.dot{color:#d4ef9e}.pill{font-size:11px;letter-spacing:.4px;border:1px solid #3e4d40;padding:7px 10px;border-radius:20px;color:#b9c6b4}.pill.online{color:#d4ef9e;border-color:#6a8052}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#afbcaa;margin:0}h1{font-size:48px;line-height:1.07;letter-spacing:-2.8px;margin:12px 0 18px;font-weight:650}.intro{color:#adbbab;font-size:17px;line-height:1.7;margin-bottom:36px}label{display:block;font-size:13px;color:#c7d0c2;margin-bottom:9px}input[type=password]{width:100%;border:1px solid #45533e;background:#1d271f;border-radius:14px;padding:17px;color:inherit;font:inherit;outline:none}input:focus-visible,button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #d4ef9e;outline-offset:4px}button,select{font:inherit}button{cursor:pointer;border:0;border-radius:12px;min-height:46px;background:#303c2e;color:#f1f3eb;padding:10px 16px;touch-action:manipulation}button:disabled{opacity:.35;cursor:default}button:not(:disabled):active{transform:scale(.97)}.primary{background:#d4ef9e;color:#22311c;font-weight:700}.login .primary{display:flex;justify-content:space-between;width:100%;padding:17px 20px;margin-top:14px;font-size:16px}.hint{color:#81917e;font-size:12px;line-height:1.7;margin-top:30px}.heading h1{font-size:42px;margin:8px 0}.heading>p:last-child{font-size:13px;color:#9caa98;margin:0 0 26px}.card{border-radius:23px;padding:23px;margin-bottom:16px;background:#202b22;border:1px solid #33432f}.card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.music{background:radial-gradient(ellipse at top right,#3a4b2b 0,transparent 72%),#242f23}.music-symbol{font-size:24px;color:#d4ef9e}.music h2{font-size:27px;line-height:1.2;letter-spacing:-1px;margin:22px 0 7px;overflow-wrap:anywhere}.music p{color:#a8b69d;font-size:14px;margin:0;min-height:20px}.transport{display:flex;align-items:center;justify-content:center;gap:28px;margin:26px 0 14px}.transport button{font-size:20px;background:transparent;width:52px}.transport .play{background:#d4ef9e;color:#20301b;border-radius:50%;width:70px;height:70px;font-size:25px}.seek{display:flex;justify-content:center;gap:18px}.seek button{background:transparent;font-size:11px;color:#b7c6a9;padding:6px}.spotify{margin-top:18px;border-top:1px solid #405038;border-radius:0;background:transparent;display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 0 0;font-size:13px;color:#d4ef9e}.volume-number{font-size:30px;letter-spacing:-1px;font-weight:600}.volume-number small{font-size:13px;color:#9caa98}input[type=range]{width:100%;height:42px;accent-color:#d4ef9e;cursor:pointer;margin:16px 0 2px}.volume-bottom{display:flex;justify-content:space-between;align-items:center}.volume-bottom button{background:transparent}.volume-bottom #plus,.volume-bottom #minus{font-size:26px;width:46px;padding:0}.volume-bottom #mute{font-size:13px;color:#c7d7bc}.output{border-top:1px solid #364431;margin-top:18px;padding-top:18px}.output label{font-size:9px;letter-spacing:1.6px;color:#9dae96}select{background:#182219;border:1px solid #3a4b32;padding:12px;border-radius:10px;color:#dce5d5;max-width:100%;width:100%;font-size:12px}#player{margin-top:14px}.shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:12px}.shortcut{display:flex;flex-direction:column;text-align:left;background:#1b241d;border:1px solid #303e2c;border-radius:18px;padding:19px 15px;gap:6px}.shortcut-icon{color:#d4ef9e;font-size:23px;margin-bottom:8px}.shortcut strong{font-size:13px;font-weight:500}.shortcut small{color:#8d9e87;font-size:10px;line-height:1.5}.footnote{font-size:11px;color:#8a9985;text-align:center;line-height:1.8;margin:24px 0}footer{display:flex;align-items:center;justify-content:center;gap:7px;font-size:8px;letter-spacing:2px;color:#667661;margin-top:40px}.tiny-dot{width:5px;height:5px;border-radius:50%;background:#9cb780}#message{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);width:min(90%,430px);padding:16px 20px;background:#e4edda;color:#24311b;border:1px solid #a6ba92;border-radius:14px;box-shadow:0 5px 30px #0008;font-size:13px;z-index:5}dialog{width:min(90%,420px);background:#202b22;color:inherit;border:1px solid #465b39;border-radius:22px;padding:25px}dialog::backdrop{background:#0009}dialog h2{font-size:22px}dialog p{line-height:1.6;font-size:14px;color:#b6c4ad}.dialog-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:22px}[hidden]{display:none!important}@media(min-width:700px){main{padding-top:42px}.login{padding-top:30px}header{margin-bottom:38px}}@media(prefers-reduced-motion:no-preference){button{transition:transform .12s}}
.android{margin-top:18px}.android h2{font-size:22px;letter-spacing:-.7px;margin:14px 0 10px}.android p:not(.eyebrow){font-size:13px;line-height:1.65;color:#adbbab}.android .download{display:block;text-decoration:none;text-align:center;background:#d4ef9e;color:#22311c;font-size:14px;font-weight:650;padding:16px;border-radius:12px;margin-top:16px}.android small{display:block;color:#8fa185;font-size:10px;line-height:1.6;margin-top:12px}
.connection-info{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.latency{font-size:10px;color:#81937a;letter-spacing:.2px;font-variant-numeric:tabular-nums}.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px;background:#1b261e;border:1px solid #354630;border-radius:15px;margin:-12px 0 26px}.mode-switch button{background:transparent;color:#aabb9f;font-size:13px}.mode-switch button[aria-selected=true]{background:#d4ef9e;color:#22311c}.remote-mode main{width:min(100% - 28px,1180px)}.remote-mode header{margin-bottom:24px}.remote-mode .mode-switch{max-width:460px;margin:0 0 22px}.remote-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:14px}.remote-heading h1{font-size:30px;letter-spacing:-1.3px;margin:8px 0}.remote-heading>span{font-size:11px;color:#a9b99b;max-width:120px;text-align:right}.remote-shell{position:relative;background:#0c110e;border:1px solid #3b4c32;border-radius:18px;overflow:hidden}.remote-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;background:#202b22;padding:10px}.remote-tools button{font-size:11px;min-height:39px;padding:7px 12px}.remote-tools button[aria-pressed=true],.remote-keys button[aria-pressed=true]{background:#d4ef9e;color:#22311c}#remoteDisplay{width:100%;height:clamp(230px,60vh,780px);overflow:hidden;touch-action:none}#remoteDisplay canvas{outline:none}.remote-overlay{position:absolute;inset:64px 12px 90px;display:grid;place-items:center;color:#b5c4a9;text-align:center;background:#0c110ee8;font-size:14px;pointer-events:none;padding:16px}.remote-keys{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px;background:#19221b}.remote-keys button{font-size:12px;min-width:36px;min-height:37px;padding:6px 10px}.remote-keys label{display:flex;align-items:center;gap:6px;margin:0 0 0 auto;font-size:10px;color:#b0c29e;min-height:36px}.remote-keys input{accent-color:#d4ef9e}.keyboard-bar{display:flex;gap:5px;padding:9px;background:#263321}.keyboard-bar input[type=password]{min-width:0;flex:1;width:auto;padding:10px;font-size:16px}.keyboard-bar button{font-size:12px;min-height:44px}.remote-shell:fullscreen{border:0;border-radius:0;height:100dvh;display:flex;flex-direction:column}.remote-shell:fullscreen #remoteDisplay{flex:1;min-height:0;height:auto}.remote-mode footer{margin-top:18px}@media(orientation:landscape) and (max-height:600px){.remote-mode main{padding-top:10px}.remote-mode header{margin-bottom:12px}.remote-mode .mode-switch{margin-bottom:10px}.remote-heading{display:none}#remoteDisplay{height:65vh}}@media(max-width:430px){.remote-heading h1{font-size:25px}.remote-tools{gap:4px;padding:8px}.remote-tools button{padding:7px 9px;font-size:10px}.remote-keys label{width:100%;margin:0}}