:root{color-scheme:dark;--remote-gold:#e3b14e;--remote-bg:#090c0f;--remote-panel:#14191e;--remote-border:#31383e;--remote-text:#f5f3ec;--remote-muted:#aeb7bd}
.remote-pair-qr{width:min(272px,100%);aspect-ratio:1;margin:20px auto 8px;background:#fff;border:8px solid #fff;border-radius:12px;box-sizing:content-box;max-width:calc(100% - 16px)}.remote-pair-qr svg{display:block;width:100%;height:auto}.remote-qr-help{font-size:14px;text-align:center;color:var(--remote-muted)}
.remote-page{margin:0;background:radial-gradient(ellipse at top right,#252017 0,transparent 55%),var(--remote-bg);color:var(--remote-text);font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
.remote-page *{box-sizing:border-box}.remote-page a{color:var(--remote-gold)}.remote-page-header,.remote-page-main,.remote-page-footer{max-width:620px;margin:0 auto;padding:24px}
.remote-page-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--remote-border)}.remote-page-brand{font-size:25px;font-weight:800;text-decoration:none;letter-spacing:-.7px}.remote-page-header>a:last-child{font-size:14px}.remote-page-main h1{font-size:clamp(28px,6vw,40px);line-height:1.2;letter-spacing:-1px;margin:8px 0 14px}.remote-page-main>p,.remote-page-footer{color:var(--remote-muted)}.remote-page-footer{font-size:13px;border-top:1px solid var(--remote-border);padding-bottom:max(24px,env(safe-area-inset-bottom))}.remote-page-footer a{margin-right:16px}
#live-remote-button{min-height:40px;border:1px solid #5d5037;border-radius:8px;padding:8px 13px;background:#262219;color:#f3d798;font:inherit;cursor:pointer}
#live-remote-panel{box-sizing:border-box;background:var(--remote-panel);color:var(--remote-text);border:1px solid #5d5037;border-radius:20px;padding:28px;width:min(520px,calc(100vw - 28px));max-height:calc(100dvh - 40px);overflow:auto;font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 20px 90px #0009}
#live-remote-panel::backdrop{background:#030507bd;backdrop-filter:blur(4px)}#live-remote-panel h2{font-size:25px;line-height:1.25;margin:0 0 12px}#live-remote-panel p{margin:12px 0}#live-remote-panel .remote-address{color:var(--remote-gold);display:block;font-size:18px;overflow-wrap:anywhere}.remote-pair-code{display:block;font:700 clamp(30px,8vw,44px)/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.15em;color:#f4d18e;background:#080c10;padding:10px 6px;text-align:center;border:1px solid var(--remote-border);border-radius:12px;margin:15px 0}
.remote-status{font-weight:650;min-height:1.6em}.remote-connection{font-size:14px;color:#ebc778;min-height:1.4em}.remote-help{color:var(--remote-muted);font-size:14px}.remote-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.remote-button{border:1px solid #e3b14e;border-radius:10px;background:var(--remote-gold);color:#15120c;font:700 15px/1.3 system-ui,sans-serif;min-height:48px;padding:12px 17px;cursor:pointer}.remote-button:disabled,.remote-channel-button:disabled{opacity:.5;cursor:wait}.remote-secondary{background:transparent;color:var(--remote-text);border-color:var(--remote-border)}.remote-button:focus-visible,.remote-channel-button:focus-visible,#live-remote-button:focus-visible,.remote-page input:focus-visible{outline:3px solid #f8d995;outline-offset:3px}.remote-approval,.remote-verification{background:#30281a;border:1px solid #786037;padding:18px;border-radius:12px}.remote-approval .remote-actions{margin-top:12px}.remote-approval strong{display:block;overflow-wrap:anywhere}
.remote-pair-form{display:grid;gap:9px;padding:22px 0}.remote-pair-form label,.phone-remote-controls>label{font-size:14px;font-weight:650}.remote-page input{width:100%;min-height:50px;padding:12px;border:1px solid #45505a;border-radius:9px;background:#12181e;color:var(--remote-text);font:16px system-ui,sans-serif}.remote-pair-form #remote-code{text-transform:uppercase;letter-spacing:.2em;font-family:ui-monospace,monospace}.remote-pair-form button{margin-top:10px}.remote-verification{font-size:18px;color:#f4d18e}.phone-remote-controls h2{font-size:25px;line-height:1.3;margin-bottom:10px;overflow-wrap:anywhere}.remote-play-hint{color:var(--remote-muted);font-size:14px;min-height:2.8em}.remote-channel-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0 28px}.remote-channel-actions button{min-height:66px;font-size:18px}.remote-channel-list{list-style:none;padding:0;margin:15px 0 26px;display:grid;gap:8px;max-height:50vh;overflow-y:auto;overscroll-behavior:contain}.remote-channel-button{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-height:64px;text-align:left;border:1px solid var(--remote-border);border-radius:10px;padding:11px 14px;font:650 16px/1.35 system-ui,sans-serif;background:var(--remote-panel);color:var(--remote-text);cursor:pointer}.remote-channel-category{font-weight:400;font-size:12px;color:var(--remote-muted);margin-top:4px}.remote-channel-button[aria-pressed=true]{border-color:var(--remote-gold);background:#292319;color:#f7d894}.remote-page [hidden],#live-remote-panel [hidden]{display:none!important}
@media(max-width:420px){.remote-page-header,.remote-page-main,.remote-page-footer{padding:20px}#live-remote-panel{padding:21px}.remote-actions>.remote-button{flex:1}.remote-page-header>a:last-child{font-size:12px}}@media(prefers-reduced-motion:reduce){#live-remote-panel::backdrop{backdrop-filter:none}}

/* A quiet, thumb-friendly control surface. Pairing remains readable; once paired,
   the screen uses a compact handset layout with no artwork or media downloads. */
.remote-pair-intro p{color:var(--remote-muted);max-width:48ch}
.remote-page{overscroll-behavior-y:contain;-webkit-tap-highlight-color:transparent}
.remote-surface{--remote-control:#22292f;position:relative;width:100%;max-width:410px;margin:0 auto;color:var(--remote-text);user-select:none;-webkit-user-select:none}
.remote-surface button,.remote-surface input{font:inherit}
.remote-surface svg{display:block;width:24px;height:24px;pointer-events:none;flex-shrink:0}
.remote-surface-top{display:flex;align-items:center;gap:12px;margin-bottom:21px;min-width:0}
.remote-screen-name{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.remote-screen-icon{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;background:#e3b14e12;border:1px solid #e3b14e35;color:#f0ca7e}
.remote-screen-titles{min-width:0}.remote-screen-eyebrow{display:block;color:var(--remote-muted);font-size:11px;line-height:1.5;letter-spacing:.09em;text-transform:uppercase}
.phone-remote-controls .remote-selected-title{font-size:17px;line-height:1.3;font-weight:650;margin:1px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.25px}
.remote-link-state{display:grid;place-items:center;color:#c0a46d;flex:none}.remote-link-state svg{width:20px;height:20px}.remote-surface[data-enabled=true] .remote-link-state{color:#9ebfa9}
.remote-icon-button{display:grid;place-items:center;position:relative;flex:none;width:60px;height:58px;min-height:48px;padding:0;border:1px solid #ffffff09;border-radius:19px;background:linear-gradient(150deg,#2a3138,#1b2228);box-shadow:0 2px 0 #0005,0 1px 0 #ffffff08 inset;color:#eeeee9;cursor:pointer;touch-action:manipulation;transition:background .12s,transform .12s,border-color .12s}
.remote-icon-button:hover:not(:disabled){border-color:#e3b14e65;background:linear-gradient(150deg,#353831,#252922)}
.remote-icon-button:active:not(:disabled){transform:scale(.96);background:#363c3e}
.remote-icon-button:focus-visible,.remote-trackpad:focus-visible,.remote-scroll-strip:focus-visible{outline:3px solid #e6bc68;outline-offset:4px}
.remote-icon-button:disabled{opacity:.35;cursor:default}.remote-icon-small{width:40px;height:42px;min-height:42px;border-radius:12px;background:#ffffff05;box-shadow:none}.remote-icon-small svg{width:20px;height:20px}
.remote-track-area{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:10px;min-width:0}
.remote-trackpad{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1.13;border:1px solid #4a5054;border-radius:32px;background:radial-gradient(ellipse at 30% 0,#3c4245 0,#292e32 47%,#20262a 100%);box-shadow:0 2px 0 #ffffff0a inset,0 14px 34px #0004,0 1px 0 #000c;touch-action:none;cursor:crosshair;-webkit-touch-callout:none;transition:border-color .15s,box-shadow .15s}
.remote-pad-texture{position:absolute;inset:0;background-image:radial-gradient(#ffffff0c .7px,transparent .8px);background-size:8px 8px;mask-image:radial-gradient(ellipse,#000b,transparent 74%);pointer-events:none}
.remote-pad-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#c6bdab6b;display:grid;place-items:center;width:54px;height:54px;border:1px solid #e3b14e21;border-radius:50%;background:#151a1b16;pointer-events:none}.remote-pad-mark svg{width:23px;height:23px}
.remote-trackpad[data-pressed=true]{border-color:#d4ad66;box-shadow:0 0 0 1px #d4ad6630 inset,0 14px 34px #0004}.remote-trackpad[data-pressed=true] .remote-pad-mark{color:#edc77f;border-color:#e3b14e55}
.remote-scroll-strip{position:relative;display:grid;place-items:center;border:1px solid #ffffff0b;border-radius:18px;background:#1b2227;box-shadow:0 1px 0 #ffffff08 inset;touch-action:none;cursor:ns-resize;-webkit-touch-callout:none}
.remote-scroll-strip:before,.remote-scroll-strip:after{content:"";position:absolute;width:5px;height:5px;left:50%;border-top:1.5px solid #aeb7bd80;border-left:1.5px solid #aeb7bd80}.remote-scroll-strip:before{top:18px;transform:translateX(-50%) rotate(45deg)}.remote-scroll-strip:after{bottom:18px;transform:translateX(-50%) rotate(225deg)}
.remote-scroll-handle{width:3px;height:35px;border-radius:3px;background:#b9ad9370;pointer-events:none}.remote-scroll-strip[data-pressed=true]{border-color:#d4ad6660}.remote-scroll-strip[data-pressed=true] .remote-scroll-handle{background:#e6bc68}
.remote-surface[data-enabled=false] .remote-track-area{opacity:.5}.remote-navigation{display:flex;justify-content:space-between;gap:12px;margin:22px 0 17px}.remote-navigation .remote-icon-button{flex:1;width:auto;max-width:82px}.remote-back{border-color:#e3b14e38;color:#f3d392;background:linear-gradient(150deg,#3c3527,#2c2921)}
.remote-playback{display:grid;grid-template-columns:minmax(0,1fr) 70px 58px;align-items:stretch;gap:15px}.remote-volume-rocker{display:flex;align-items:center;justify-content:space-between;min-width:0;border:1px solid #ffffff0b;border-radius:22px;background:linear-gradient(145deg,#262e33,#1c2328);box-shadow:0 2px 0 #0005,0 1px 0 #ffffff08 inset}
.remote-volume-rocker .remote-icon-button{width:50px;min-width:44px;height:65px;background:none;border:0;box-shadow:none;border-radius:21px}.remote-volume-icon{color:#aeb7bd;display:grid;place-items:center;pointer-events:none}.remote-volume-icon svg{width:19px;height:19px}.remote-playback>.remote-icon-button{width:auto;height:67px;border-radius:22px}.remote-play-toggle svg{width:27px;height:27px}.remote-playback>.remote-icon-button[aria-pressed=true]{color:#f0ca7e;border-color:#e3b14e5c}
.remote-channel-stepper{display:flex;align-items:center;justify-content:center;gap:19px;margin:20px 0 0}.remote-channel-stepper .remote-icon-button{height:48px;min-height:48px;width:66px;border-radius:16px;background:#ffffff04;box-shadow:none;border-color:#ffffff07;color:#c1c8cb}.remote-channel-stepper .remote-icon-button:nth-child(2){width:50px}.remote-channel-stepper svg{width:20px;height:20px}
.remote-capability{text-align:center;color:#aab1b5;font-size:11px;line-height:1.5;margin:17px 0 4px;min-height:1.5em;letter-spacing:.015em}
.remote-directional-controls{display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,48px);justify-content:center;gap:5px;margin:18px 0}.remote-directional-controls .remote-icon-button{width:54px;height:48px;border-radius:14px}.remote-direction-up{grid-area:1/2}.remote-direction-left{grid-area:2/1}.remote-direction-select{grid-area:2/2}.remote-direction-right{grid-area:2/3}.remote-direction-down{grid-area:3/2}
.remote-channel-drawer{position:absolute;z-index:4;inset:-12px -12px 0;display:flex;flex-direction:column;min-height:320px;border:1px solid #495057;border-radius:28px;background:#12191efc;box-shadow:0 20px 70px #0009;padding:22px;user-select:text;-webkit-user-select:text}
.remote-drawer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.remote-drawer-top h3{font-size:20px;font-weight:650;letter-spacing:-.4px;margin:0}.remote-search-wrap{position:relative}.remote-search-icon{position:absolute;left:13px;top:16px;color:#9da7ad;pointer-events:none}.remote-search-icon svg{width:18px;height:18px}.remote-page input.remote-channel-search{padding-left:40px;border-color:#3d474e;border-radius:13px;min-height:50px;background:#20272d}
.remote-surface-channel-list{list-style:none;padding:0;margin:15px -6px 0;overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:#5d5d50 transparent}.remote-surface-channel-list li{margin:0 0 5px}.remote-channel-choice{display:grid;grid-template-columns:35px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:8px;width:100%;height:auto;min-height:66px;text-align:left;padding:11px 12px;border:1px solid transparent;border-radius:13px;background:transparent;box-shadow:none}.remote-channel-choice>svg{grid-area:1/1/3/2;width:23px;height:23px;color:#b4b2a6}.remote-choice-name{grid-area:1/2;overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:600}.remote-choice-category{grid-area:2/2;font-size:11px;color:var(--remote-muted);line-height:1.5}.remote-channel-choice[aria-pressed=true]{color:#f2d397;border-color:#e3b14e4d;background:#e3b14e13}.remote-channel-empty{color:var(--remote-muted);font-size:14px;text-align:center}
.remote-paired .remote-pair-intro,.remote-paired .remote-page-footer{display:none}.remote-paired .remote-page-header{max-width:480px;padding:13px 24px;border-bottom-color:#ffffff07}.remote-paired .remote-page-brand{font-size:19px}.remote-paired .remote-page-header>a:last-child{font-size:12px;color:var(--remote-muted)}.remote-paired .remote-page-main{max-width:480px;padding:13px 24px max(16px,env(safe-area-inset-bottom))}.remote-paired #phone-remote>.remote-status{font-size:12px;line-height:1.4;min-height:0;margin:0 0 8px;color:#aab4b9}.remote-paired #phone-remote>.remote-connection{font-size:12px;line-height:1.4;margin:0 0 6px;min-height:0}.remote-paired #phone-remote>.remote-connection:empty{display:none}
@media(max-width:360px){.remote-paired .remote-page-main{padding-left:17px;padding-right:17px}.remote-trackpad{border-radius:27px}.remote-track-area{grid-template-columns:minmax(0,1fr) 29px;gap:8px}.remote-playback{gap:10px;grid-template-columns:minmax(0,1fr) 63px 51px}.remote-volume-rocker .remote-icon-button{width:43px;min-width:40px}.remote-navigation{gap:10px}.remote-surface-top{gap:8px}.remote-screen-name{gap:8px}.remote-screen-icon{width:35px;height:35px}.remote-channel-drawer{inset:-8px -7px 0;padding:18px}}
@media(max-height:740px) and (min-width:361px){.remote-paired .remote-trackpad{aspect-ratio:1.4}.remote-paired .remote-surface-top{margin-bottom:15px}.remote-paired .remote-navigation{margin-top:16px;margin-bottom:14px}.remote-paired .remote-channel-stepper{margin-top:14px}.remote-paired .remote-capability{margin-top:12px}}
@media(orientation:landscape) and (max-height:550px){.remote-paired .remote-page-main{max-width:780px}.remote-paired .remote-surface{max-width:680px;display:grid;grid-template-columns:minmax(240px,1.1fr) minmax(230px,1fr);column-gap:25px}.remote-surface-top{grid-column:1/-1}.remote-track-area{grid-area:2/1/6/2}.remote-paired .remote-trackpad{aspect-ratio:1.4}.remote-navigation{grid-area:2/2;margin-top:0}.remote-playback{grid-area:3/2;grid-template-columns:minmax(0,1fr) 58px 48px;gap:9px}.remote-volume-rocker .remote-icon-button{min-width:35px;width:40px}.remote-channel-stepper{grid-area:4/2;margin-top:13px}.remote-capability{grid-area:5/2;margin-top:8px}.remote-directional-controls{grid-column:2}.remote-channel-drawer{max-height:calc(100dvh - 75px)}}
@media(prefers-reduced-motion:reduce){.remote-surface *{transition:none!important}}
@media(max-width:600px),(hover:none) and (pointer:coarse){#live-remote-button.site-remote-launch{display:none!important}}