:root{color-scheme:dark;--bg:#101312;--surface:#1b201e;--line:#2b322e;--muted:#909a94;--accent:#b8ef94;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#242e27 0, var(--bg) 55%);color:#edf1ed;min-height:100dvh;padding:calc(env(safe-area-inset-top) + 26px) 20px calc(env(safe-area-inset-bottom) + 24px)}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;border:1px solid var(--line);background:var(--surface);color:inherit;border-radius:18px;min-height:48px;transition:background .1s,transform .1s}button:active,button.pressed{background:#354332;transform:scale(.96)}button:disabled{opacity:.32;cursor:default}button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.remote{max-width:390px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.eyebrow{font-size:9px;letter-spacing:2.4px;color:var(--muted)}h1{font-size:25px;letter-spacing:1px;margin:7px 0 0;font-weight:650}h1 span{font-size:15px;font-weight:350;letter-spacing:0;color:#adb7af}.icon-button{width:48px;border-radius:50%;font-size:23px;background:transparent}.device{display:flex;align-items:center;gap:12px;padding:16px;background:#1e2720;border:1px solid #344233;border-radius:20px}.tv-icon{font-size:29px;color:var(--accent)}.device strong{font-size:14px}#connection{font-size:11px;margin-top:5px;color:var(--muted);display:flex;gap:6px;align-items:center}#connection i{width:6px;height:6px;background:#7d847e;border-radius:50%}#connection.connected i{background:var(--accent)}#connection.demo i{background:#edc680}.text-button{margin-left:auto;background:none;border:0;font-size:11px;color:var(--accent);padding:0 8px}.top-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.top-controls button{font-size:27px;display:flex;align-items:center;justify-content:center;gap:10px;height:57px}.top-controls span{font-size:12px}.power{color:var(--accent)}.navigation{border-radius:30px;padding:0 6px}.nav-shortcuts{display:flex;justify-content:space-between}.nav-shortcuts button{width:70px;background:transparent;border-color:transparent;font-size:26px;display:grid;gap:2px;padding:5px}.nav-shortcuts span{font-size:10px;color:var(--muted)}.dpad{width:246px;height:246px;border-radius:50%;margin:-8px auto;background:linear-gradient(135deg,#303932,#1d231f);box-shadow:0 14px 28px #0005,inset 0 1px #ffffff0c;border:1px solid #3a443c;display:grid;grid-template-columns:1fr 86px 1fr;grid-template-rows:1fr 86px 1fr;padding:9px}.dpad button{border:0;background:transparent;font-size:33px}.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad .right{grid-area:2/3}.dpad .down{grid-area:3/2}.dpad .ok{grid-area:2/2;border-radius:50%;background:var(--accent);color:#243021;font-size:18px;font-weight:700;box-shadow:0 4px 12px #0005}.dpad button:active{background:#44513f}.bottom{margin-top:0}.adjustments{display:flex;align-items:center;justify-content:space-around;margin:22px 0}.rocker{display:flex;flex-direction:column;align-items:center;width:80px;border:1px solid #343d36;border-radius:30px;background:linear-gradient(#252d27,#1a201c);overflow:hidden}.rocker button{border:0;background:transparent;width:100%;font-size:27px;border-radius:0;height:48px}.rocker span{font-size:9px;letter-spacing:1.8px;color:var(--muted);padding:5px}.mute{width:74px;background:transparent;border:0;font-size:30px;display:grid;gap:7px}.mute span{font-size:10px;color:var(--muted)}.playback{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.playback button{font-size:18px;background:#1c231e}.extra{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}summary{cursor:pointer;font-size:12px;color:var(--muted);padding:8px 0}summary span{float:right}.hdmi{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:15px 0}.hdmi button{font-size:12px}.numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.numbers button:last-child{grid-column:2}.colors{display:flex;gap:12px;margin-top:18px}.colors button{min-height:44px;flex:1}.colors button:nth-child(1){background:#9e4948}.colors button:nth-child(2){background:#548456}.colors button:nth-child(3){background:#ad9144}.colors button:nth-child(4){background:#496f9f}#feedback{font-size:12px;color:var(--muted);text-align:center;min-height:30px;line-height:1.5;margin:22px 0 12px}#feedback.error{color:#ffaf9f}footer{font-size:8px;letter-spacing:1.8px;text-align:center;color:#758277}.local-dot{display:inline-block;height:5px;width:5px;border-radius:50%;background:#758277;margin-right:5px}.install-button{display:block;margin:20px auto 0;background:transparent;border:0;color:var(--muted);font-size:11px;min-height:44px}dialog{max-width:420px;width:calc(100% - 28px);max-height:90dvh;background:#1c231e;color:#edf1ed;border:1px solid #3c493e;border-radius:26px;padding:24px;box-shadow:0 20px 80px #0009}dialog::backdrop{background:#070b08c9;backdrop-filter:blur(8px)}.dialog-head{display:flex;align-items:center;justify-content:space-between}.dialog-head h2{font-size:21px;margin:0}.dialog-head button{border:0;background:transparent;font-size:28px;width:44px}dialog p,dialog li{color:#a7b4ab;font-size:12px;line-height:1.7}label{display:block;font-size:12px;margin:20px 0 0}input,select{width:100%;margin-top:8px;padding:14px;border:1px solid #405044;border-radius:12px;background:#111812;color:white;font-size:16px}input:focus,select:focus{outline:2px solid var(--accent)}.primary{background:var(--accent);color:#20331a;width:100%;font-size:14px;font-weight:650;margin-top:12px}.demo{width:100%;background:transparent;font-size:12px;margin-top:18px}#setup-error{color:#ffaf9f}dialog ol{padding-left:18px}.privacy{font-size:10px}body.demo-mode .device{border-color:#716443;background:#29271d}@media(min-width:600px){body{padding-top:38px}.remote{padding:26px;border:1px solid #394138;border-radius:38px;background:#111713;box-shadow:0 35px 100px #0006;max-width:410px}.eyebrow{font-size:8px}.dpad{width:232px;height:232px}}@media(prefers-reduced-motion:reduce){button{transition:none}}

.keyboard-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:-8px 0 18px;font-size:24px;min-height:48px;background:#202b22;border-color:#3a4b3b}.keyboard-button span{font-size:12px;color:var(--accent)}textarea{font:inherit;display:block;width:100%;resize:vertical;margin-top:8px;padding:14px;border:1px solid #405044;border-radius:12px;background:#111812;color:white;font-size:16px}textarea:focus{outline:2px solid var(--accent)}#keyboard-status{min-height:24px}#keyboard-status.error{color:#ffaf9f}