:root{font-family:Arial,Helvetica,sans-serif;font-synthesis:none;color-scheme:dark;--bg:#111112;--text:#ece9e0;--muted:#858587;--secondary:#b9b8b3;--line:#555557;--surface:#141415;--dot:#28282b;--subtle:#242425;--connection:#777779;--accent:#ff6500;--button-fill:#e9e5dc;--button-text:#151516;--key-top:#242425;--key-bottom:#1d1d1f;--focus:#ff6500;--overlay:#161617f5;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace}

:root[data-theme="light"]{color-scheme:light;--bg:#f1eee6;--text:#232325;--muted:#767679;--secondary:#565658;--line:#b2b0aa;--surface:#eeebe4;--dot:#d4d1ca;--subtle:#e1ded7;--connection:#8a8985;--button-fill:#272729;--button-text:#f1eee6;--key-top:#e8e5dd;--key-bottom:#ddd9d2;--overlay:#f1eee6f5}

@media(prefers-color-scheme:light){:root:not([data-theme]){color-scheme:light;--bg:#f1eee6;--text:#232325;--muted:#767679;--secondary:#565658;--line:#b2b0aa;--surface:#eeebe4;--dot:#d4d1ca;--subtle:#e1ded7;--connection:#8a8985;--button-fill:#272729;--button-text:#f1eee6;--key-top:#e8e5dd;--key-bottom:#ddd9d2;--overlay:#f1eee6f5}
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--text);min-height:100svh}
button,input{font:inherit}
button{cursor:pointer;touch-action:manipulation;border:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;color:inherit}
button:disabled{cursor:default}
button:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:5px}
h1,h2,h3,p{margin:0}
.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;flex-shrink:0}
.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
[hidden]{display:none!important}
.app{width:100%;max-width:480px;height:100svh;height:100dvh;min-height:520px;margin:auto;display:flex;flex-direction:column;padding:calc(20px + env(safe-area-inset-top)) 13px calc(33px + env(safe-area-inset-bottom))}
.app-header{height:40px;flex-shrink:0;display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;border-bottom:1px solid #6c6b68;padding:8px 6px 16px}
.instrument-title{font:18px/1.1 var(--mono);font-weight:400;letter-spacing:.2px;white-space:nowrap}
.instrument-title span{font-weight:600}
.header-device{margin-left:auto;display:flex;flex-direction:row;align-items:center;gap:8px;padding-top:1px}
.connection-pill{display:flex;align-items:center;justify-content:center;padding:0;background:none;width:10px;min-height:18px;position:relative}
.status-dot{width:8px;height:8px;background:var(--connection);border-radius:50%;flex-shrink:0}
.tv-chooser{background:transparent;padding:0;font:10px/1.2 var(--mono);letter-spacing:1px;white-space:nowrap}
.settings-button{display:none}
.settings-button .icon{width:18px;height:18px}
.settings-button:active{color:var(--accent)}
.touchpad{position:relative;flex:1;min-height:145px;border:1px solid var(--line);border-radius:23px;background-color:var(--surface);background-image:linear-gradient(var(--dot) 1px,transparent 1px),linear-gradient(90deg,var(--dot) 1px,transparent 1px);background-size:19px 19px;background-position:center;touch-action:none;isolation:isolate;overflow:hidden}
.touchpad::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;border:1px solid transparent;transition:border-color .1s}
.touchpad.is-active::after{border-color:var(--accent)}
.touchpad-select{position:absolute;inset:0;background:transparent;border-radius:inherit;touch-action:none}
.touchpad-select:focus-visible{outline-offset:-7px}
.touchpad-select:disabled{pointer-events:none}
.pad-crosshair{position:absolute;left:50%;top:50%;width:31px;height:31px;transform:translate(-50%,-50%);pointer-events:none;color:#88888a}
.pad-crosshair::before,.pad-crosshair::after{height:31px;width:1px;left:15px;top:0}
.pad-crosshair::before{width:31px;height:1px;top:15px;left:0}
.pad-crosshair::after{height:24px;width:1px;left:11px;top:0}
.cardinal-tick{display:none}
.tick-up,.tick-down{width:1px;height:13px;left:50%}
.tick-up{top:6px}
.tick-down{bottom:6px}
.tick-left,.tick-right{height:1px;width:13px;top:50%}
.tick-left{left:6px}
.tick-right{right:6px}
.edge-control{position:absolute;z-index:2;background:transparent;width:48px;height:48px;border-radius:0;display:grid;place-items:center;color:var(--text);opacity:0;touch-action:none}
.edge-control:focus-visible,.edge-control.is-pressed{opacity:1;background:var(--overlay)}
.edge-up{top:2px;left:calc(50% - 24px)}
.edge-right{right:2px;top:calc(50% - 24px)}
.edge-down{bottom:2px;left:calc(50% - 24px)}
.edge-left{left:2px;top:calc(50% - 24px)}
.pad-hint{pointer-events:none;position:absolute;left:13px;right:13px;bottom:13px;display:block;font:11px/1.2 var(--mono);letter-spacing:1.3px;color:var(--text);opacity:0}
.pad-hint span{padding:0;background:none}
.pad-feedback{pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:49px;height:49px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--accent);color:var(--accent);opacity:0;transition:opacity .1s;border-radius:50%}
.pad-feedback.visible{opacity:1}
.pad-feedback .icon{width:25px;height:25px}
.connection-card{position:absolute;z-index:3;top:50%;left:24px;right:24px;transform:translateY(-50%);padding:23px 18px;text-align:center;background:var(--overlay);border:1px solid var(--line);border-radius:4px}
.card-tv{display:grid;place-items:center;margin:0 auto 15px;width:32px;height:32px;color:var(--secondary)}
.card-tv .icon{width:24px;height:24px}
.connection-card h1{font-size:16px;font-weight:600;letter-spacing:-.35px;line-height:1.3}
.connection-card p{font-size:11px;color:var(--secondary);line-height:1.6;margin:10px auto 17px;max-width:230px}
.connect-button{display:inline-flex;gap:11px;align-items:center;justify-content:center;font:10px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.4px;min-height:40px;padding:10px 15px;border-radius:3px;background:var(--accent);color:#fff}
.connect-button .icon{width:14px;height:14px}
.connect-button:disabled{opacity:.55}
.control-cluster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 96px minmax(0,1fr) minmax(0,1fr);grid-template-rows:97px;gap:8px;align-items:center;justify-items:center;margin:25px 0 24px;flex-shrink:0}
.round-button,.menu-button{grid-column:3;grid-row:1;width:96px;height:96px;border-radius:50%;font:14px/1 var(--mono);font-weight:500;letter-spacing:1.2px;background:radial-gradient(ellipse at 35% 20%,#f3efe6,var(--button-fill));border:1px solid #ffffff1c;color:var(--button-text)}
.round-button{width:100%;aspect-ratio:1;height:auto;border-radius:12px;background:linear-gradient(145deg,var(--key-top),var(--key-bottom));border:1px solid #ffffff02}
.round-button .icon{width:26px;height:26px;stroke-width:1.7}
.power-button{grid-column:1;grid-row:1;color:var(--accent)}
.home-button{grid-column:2;grid-row:1}
.home-button .icon{width:24px;height:24px}
.play-button{grid-column:4;grid-row:1}
.play-button .icon{width:24px;height:24px}
.mute-button{grid-column:5;grid-row:1}
.menu-button{grid-column:2;grid-row:1 / 3;width:125px;height:125px;font-size:18px;font-weight:700;letter-spacing:-.4px;background:var(--accent);border-color:var(--accent);color:#fff}
.round-button:active:not(:disabled),.round-button.is-pressed{background:var(--subtle);color:var(--accent);transform:scale(.96)}
.menu-button:active:not(:disabled),.menu-button.is-pressed{background:var(--button-fill);transform:scale(.96)}
.round-button:disabled{color:var(--muted)}
.menu-button:disabled{opacity:.55}
.volume-row{height:55px;flex-shrink:0;display:grid;grid-template-columns:64px 1fr 64px;align-items:center;border:1px solid var(--line);border-radius:17px;overflow:hidden;background:linear-gradient(145deg,var(--key-top),var(--key-bottom))}
.volume-row>button{height:100%;display:grid;place-items:center;background:transparent;border-radius:0}
.volume-row>button .icon{width:28px;height:28px;stroke-width:1.3}
.volume-row>button:active:not(:disabled),.volume-row>button.is-pressed{background:var(--subtle);color:var(--accent)}
.volume-row>button:disabled{color:var(--muted)}
.volume-row>span{display:flex;justify-content:center;align-items:center;font:11px/1 var(--mono);letter-spacing:1.4px;pointer-events:none}
.app-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border:0;border-top:1px solid #777773;overflow:visible;margin-top:28px;padding-top:20px;flex-shrink:0}
.app-shortcut{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px 4px;background:linear-gradient(145deg,var(--key-top),var(--key-bottom));height:73px;border:1px solid #ffffff02;border-radius:13px;transition:background .1s,transform .1s}
.app-shortcut+.app-shortcut{border-left:1px solid var(--line)}
.app-shortcut>span{font:10px/1.2 var(--mono);font-weight:400;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap}
.app-mark{width:20px;height:20px}
.netflix-mark{fill:#b80c16}
.netflix-diagonal{fill:#e51c23}
.music-mark{stroke:currentColor;stroke-width:1.7;fill:none;stroke-linejoin:miter}
.music-mark ellipse{fill:currentColor;stroke:none}
.youtube-mark{fill:#e81818;width:24px}
.youtube-mark path{fill:#fff;stroke:none}
.app-shortcut:active:not(:disabled){background:var(--subtle)}
.app-shortcut:disabled{color:var(--muted)}
.app-shortcut:disabled .app-mark{opacity:.35;filter:grayscale(1)}
.app-shortcut[aria-busy="true"]{background:var(--subtle)}
.app-activity{position:absolute;top:8px;right:9px;width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:0}
.app-shortcut[data-visible="true"] .app-activity{opacity:1}
.app-shortcut[aria-busy="true"] .app-activity{opacity:1;animation:status-pulse 1s steps(2) infinite}
.toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,8px);padding:12px 17px;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:4px;font:11px/1.5 var(--mono);max-width:calc(100vw - 32px);width:max-content;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:20}
.toast.visible{opacity:1;transform:translate(-50%,0)}
body[data-connection="connected"]{--connection:#ff6500}
body[data-connection="pairing"],body[data-connection="connecting"]{--connection:#ff6500}
body[data-connection="error"]{--connection:#a8462e}
body[data-connection="connecting"] .status-dot,body[data-connection="pairing"] .status-dot{animation:status-pulse 1.6s steps(2) infinite}
body[data-connection="connected"] .connection-card{display:none}
body[data-connection="connected"] .pad-hint{opacity:1}
.settings-dialog{width:min(440px,calc(100% - 24px));max-height:calc(100svh - 32px);border-radius:12px;background:var(--bg);color:var(--text);border:1px solid var(--line);padding:12px 24px 24px;overscroll-behavior:contain}
.settings-dialog::backdrop{background:#11150fc9}
.sheet-handle{width:32px;height:2px;background:var(--line);margin:0 auto 22px}
.sheet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:10px}
.eyebrow{font:9px/1.2 var(--mono);letter-spacing:1.4px;color:var(--muted)}
.sheet-header h2{font-size:25px;font-weight:650;letter-spacing:-.75px;margin-top:7px}
.close-button{width:32px;height:32px;background:transparent;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--secondary);flex-shrink:0}
.close-button .icon{width:16px;height:16px}
.settings-tv{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.settings-tv-icon{width:36px;height:36px;color:var(--secondary);display:grid;place-items:center}
.settings-tv h3{font-size:13px;font-weight:550}
.settings-tv p{font:9px/1.2 var(--mono);color:var(--muted);margin-top:5px;letter-spacing:.3px}
.settings-tv>.status-dot{margin-left:auto;margin-right:4px}
.settings-details{margin:15px 0}
.settings-details div{display:flex;justify-content:space-between;font-size:11px;margin:12px 0}
.settings-details dt{color:var(--muted)}
.settings-details dd{margin:0;color:var(--secondary);font:10px/1.3 var(--mono)}
.settings-message{font-size:11px;line-height:1.6;color:var(--secondary);min-height:30px;margin-bottom:13px}
.sheet-connect{background:var(--accent);color:#fff;font:11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.4px;border-radius:3px;width:100%;padding:13px}
.sheet-connect:disabled{opacity:.5}
.theme-setting{border:0;margin:23px 0 0;padding:0}
.theme-setting legend{font:10px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;padding:0}
.theme-options{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.theme-options label{flex:1;position:relative;cursor:pointer}
.theme-options label+label{border-left:1px solid var(--line)}
.theme-options input{position:absolute;opacity:0;width:1px;height:1px}
.theme-options span{display:block;text-align:center;padding:10px;font:10px/1.2 var(--mono);color:var(--muted)}
.theme-options input:checked+span{background:var(--text);color:var(--bg)}
.theme-options input:focus-visible+span{outline:2px solid var(--focus);outline-offset:-3px}
.phone-section{display:flex;align-items:center;gap:15px;margin-top:23px;padding-top:22px;border-top:1px solid var(--line)}
.phone-copy{flex:1}
.phone-copy h3{font:11px/1.4 var(--mono);letter-spacing:.3px}
.phone-copy p{font-size:11px;line-height:1.6;color:var(--muted);margin-top:8px}
.text-button{padding:0;display:flex;align-items:center;gap:6px;background:transparent;color:var(--text);font-size:10px;margin-top:12px}
.text-button .icon{width:12px;height:12px}
.qr-wrap{background:#fff;border:1px solid var(--line);padding:6px;width:104px;height:104px;flex-shrink:0}
.qr-wrap img{display:block;width:100%;height:100%;color:#333;font-size:10px}
.setup-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:10px;line-height:1.6}
.setup-note p+p{margin-top:8px}
.setup-note strong{font-weight:550;color:var(--secondary)}
.unlock-screen{position:fixed;inset:0;background:var(--bg);z-index:10;display:flex;align-items:center;justify-content:center;padding:30px;overflow:auto}
.unlock-form{width:100%;max-width:320px}
.unlock-icon{display:grid;place-items:center;width:64px;height:64px;border:1px solid var(--line);border-radius:50%;margin-bottom:34px;color:var(--accent)}
.unlock-icon .icon{width:27px;height:27px;stroke-width:1.5}
.unlock-form .eyebrow{margin-bottom:12px}
.unlock-form h1{font-size:33px;letter-spacing:-1px;line-height:1.1;font-weight:650}
.unlock-description{margin:16px 0 30px;font-size:13px;line-height:1.7;color:var(--secondary)}
.unlock-form label{display:block;font:10px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.6px;color:var(--secondary);margin-bottom:9px}
.unlock-form input{display:block;width:100%;padding:15px 16px;border:1px solid var(--line);background:transparent;color:var(--text);border-radius:3px;font-size:16px;margin-bottom:14px}
.unlock-form input::placeholder{font-size:12px;color:var(--muted)}
.unlock-button{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;width:100%;border-radius:3px;background:var(--accent);color:#fff;font:11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.5px}
.unlock-button .icon{width:17px;height:17px}
.unlock-button:disabled{opacity:.6}
.unlock-error{min-height:38px;margin-top:14px;color:var(--secondary);font-size:11px;line-height:1.6}
@keyframes status-pulse{50%{opacity:.3}
}


#connection-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.app-shortcut+.app-shortcut{border-left:0}

.app-shortcut .app-mark{width:23px;height:23px;color:var(--accent)}

.app-shortcut .netflix-mark,.app-shortcut .netflix-diagonal,.app-shortcut .youtube-mark rect{fill:var(--accent)}

.app-shortcut .youtube-mark path{fill:var(--key-bottom)}

.app-shortcut .music-mark path{stroke:var(--accent)}

.app-shortcut .music-mark ellipse{fill:var(--accent)}

.app-shortcut.is-active{background:linear-gradient(145deg,var(--key-top),var(--key-bottom))}

.app-activity{width:3px;height:3px;right:9px;top:9px}

:root[data-theme="light"] .menu-button{background:var(--button-fill)}


@media(min-width:600px){.app{max-width:460px;padding-top:26px;padding-bottom:28px}
.app-header{margin-bottom:20px}
.instrument-title{font-size:19px}
.tv-chooser{font-size:11px}
.settings-dialog{padding:16px 28px 28px}
}

@media(max-height:740px){.app{padding-top:calc(14px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.app-header{height:38px;margin-bottom:14px}
.instrument-title{font-size:17px}
.tv-chooser{font-size:9px}
.touchpad{border-radius:20px}
.control-cluster{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 84px minmax(0,1fr) minmax(0,1fr);grid-template-rows:85px;margin:18px 0}
.menu-button{width:84px;height:84px;font-size:13px}
.round-button{border-radius:11px}
.volume-row{height:49px}
.app-shortcuts{padding-top:17px;margin-top:20px;gap:8px}
.app-shortcut{height:64px;gap:6px;border-radius:11px}
.app-shortcut>span{font-size:9px;letter-spacing:.4px}
.pad-hint{font-size:10px}
.connection-card{padding:18px 14px;left:19px;right:19px}
.card-tv{display:none}
.connection-card h1{font-size:15px}
.connection-card p{font-size:10px;margin:8px auto 13px}
.connect-button{min-height:35px;padding:9px 13px;font-size:9px}
}

@media(max-width:360px){.app{padding-left:11px;padding-right:11px}
.app-header{padding-left:2px;padding-right:2px;gap:8px}
.instrument-title{font-size:16px}
.tv-chooser{font-size:8px;letter-spacing:.6px}
.control-cluster{gap:6px}
.round-button .icon{width:22px;height:22px}
.app-shortcuts{gap:7px}
.app-shortcut>span{font-size:8px;letter-spacing:.3px}
.settings-dialog{padding-left:18px;padding-right:18px}
}

@media(max-width:599px){.settings-dialog{margin:auto auto 8px;padding-bottom:max(24px,env(safe-area-inset-bottom))}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
}