/* Molded charcoal shell, rubber keys and a recessed cyan LCD. */
#remote{width:206px;right:20px;bottom:20px;padding:16px 17px 12px;border:1px solid #807187;border-radius:30px 30px 40px 40px;background:linear-gradient(100deg,#615369 0,#302936 4%,#39313f 48%,#251f2d 94%,#66516e 100%);box-shadow:inset 0 2px 2px #dbc9e54a,inset 0 -4px 6px #110d19,8px 14px 26px #000b;color:#d7ccdf;max-height:calc(100dvh - 16px);scrollbar-width:thin;scrollbar-color:#73627e #211b28;overscroll-behavior:contain}
#remote header{gap:3px;margin-bottom:12px}#remote header #remote-drag{display:flex;align-items:center;gap:6px;min-height:30px;border:0;box-shadow:none;background:none;padding:0;touch-action:none;cursor:grab;color:#ddd1e4}
#remote-drag b{font:italic 900 24px var(--display)}#remote-drag span{font:700 9px var(--ui);letter-spacing:.07em}#remote #remote-drag small{display:block;margin-top:3px;font:500 6px var(--mono);text-align:left;color:#b6a6c1}#remote-drag i{font:16px var(--ui);color:#9886a5;margin-left:auto}
#remote header #remote-close{flex:0 0 25px;width:25px;min-height:28px;background:none;border:0;box-shadow:none;font:20px var(--ui)!important;color:#b8a8c6;padding:0}
.remote-lcd{position:relative;background:linear-gradient(130deg,#1d3540,#0d1c25);border:2px solid #17111f;border-radius:8px;box-shadow:inset 0 2px 6px #000c,0 1px 0 #bc9cc550;padding:9px 10px 7px;margin-bottom:12px}
#remote-display{border:0;background:none;box-shadow:none;display:block;margin:0;padding:0;min-height:22px;color:#b8f2f3;font:18px/1.1 var(--mono);letter-spacing:.05em;text-shadow:0 0 7px #9be9f133}
#remote-status{display:block;font:8px var(--mono);letter-spacing:.12em;color:#91b7bd;margin-top:4px}.remote-led{position:absolute;right:9px;bottom:9px;width:4px;height:4px;border-radius:50%;background:#9be9f1;box-shadow:0 0 5px #9be9f199}.standby .remote-led{background:#4d5b66;box-shadow:none}.standby #remote-display{opacity:.35}
#remote button{min-height:30px;border:1px solid #15101d;border-top-color:#776780;background:linear-gradient(#504557,#342b3d);border-radius:50%;color:#f2ebf5;box-shadow:0 3px 0 #100c17,0 4px 5px #0005,inset 0 1px 0 #ffffff18;font:600 11px var(--ui);transition:filter .12s,box-shadow .12s}
#remote button:hover{filter:brightness(1.18)}#remote button:focus-visible,#remote summary:focus-visible{outline:2px solid #9be9f1;outline-offset:3px}#remote button:active{transform:translateY(2px);box-shadow:0 1px 0 #100c17,inset 0 1px 3px #0006}
.remote-utility{display:flex;justify-content:space-between;align-items:center;margin:0 4px 12px;gap:16px}#remote-power{background:linear-gradient(#a5779b,#6d4669)!important;width:56px;min-height:32px;border-radius:18px;font-size:8px!important;display:flex;gap:4px;align-items:center;justify-content:center}#remote-power span{font-size:17px}#remote-mute{width:62px;border-radius:16px;font-size:9px}
.remote-rockers{display:flex;justify-content:space-around;gap:22px;margin:0 7px 15px}.remote-rockers>div{display:flex;flex-direction:column;width:55px;background:#17121f;border-radius:24px;padding:2px;box-shadow:0 1px 0 #ad8db650}.remote-rockers button{height:29px;font-size:20px!important;box-shadow:none!important;border-radius:22px 22px 5px 5px!important}.remote-rockers button:last-child{border-radius:5px 5px 22px 22px!important}.remote-rockers span{text-align:center;font:700 8px var(--ui);letter-spacing:.15em;padding:4px 0;color:#bfaecc}
.remote-digits{grid-template-columns:repeat(3,1fr);gap:9px 12px;margin:0 3px 14px}.remote-digits button{height:32px;min-height:32px;font:600 16px var(--ui)!important;border-radius:45%}#remote .remote-digits #remote-last,#remote .remote-digits #remote-enter{font-size:8px!important;letter-spacing:.03em;background:linear-gradient(#776481,#52415f);color:#efe6f5}
.remote-extras{border-top:1px solid #a087ad35;padding-top:8px}.remote-extras summary{cursor:pointer;list-style:none;font:600 8px var(--ui);letter-spacing:.12em;padding:5px 0;text-align:center;color:#cbb9d7}.remote-extras summary::after{content:' +';color:#9be9f1}.remote-extras[open] summary::after{content:' −'}#remote .remote-extras button{border-radius:6px;margin:6px 0 0;min-height:29px;font-size:9px!important}#remote .remote-extras small{font:9px var(--mono);margin:9px 0 3px}
#remote footer{display:flex;flex-direction:column;text-align:center;gap:6px;margin-top:10px;color:#91809e;font:6px var(--mono);letter-spacing:.18em}#remote footer span:last-child{font-size:12px;letter-spacing:4px;color:#211a2a;text-shadow:0 1px #89719466}.dragging{user-select:none}#remote.dragging #remote-drag{cursor:grabbing}
@media(pointer:coarse){#remote{width:218px}.remote-digits button{height:38px}.remote-rockers button{min-height:33px}}
@media(max-height:500px){#remote{width:284px;padding:12px 15px;border-radius:24px;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}#remote header,.remote-lcd,.remote-extras,#remote footer{grid-column:1/-1}#remote header{margin-bottom:7px}.remote-lcd{margin-bottom:8px}.remote-utility{grid-column:1;margin:0 0 8px;gap:8px}.remote-rockers{grid-column:1;grid-row:4;gap:12px;margin:0 0 8px}.remote-digits{grid-column:2;grid-row:3/5;gap:7px;margin:0 0 8px}.remote-digits button{height:29px;min-height:29px}.remote-rockers button{min-height:27px}.remote-extras{padding-top:3px}#remote footer{margin-top:5px}#remote footer span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){#remote button{transition:none}}
#remote header #remote-drag{border-radius:5px}
@media(max-height:500px){.remote-extras[open]{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.remote-extras summary{grid-column:1/-1}#remote .remote-extras button{min-height:34px;margin:0;font-size:8px!important;padding:3px}#remote .remote-extras small{display:none}}
#remote{background:linear-gradient(#1c14282b,#1c14282b),url('features/remote-shell-v1.webp') center/100% 100% no-repeat #282030;border-color:#ad8cc0;box-shadow:inset 0 2px 2px #dbc9e54a,inset 0 -4px 6px #110d19,8px 14px 26px #000b}
#remote{background-size:100% 100%,160% 100%}

@media(max-height:500px){.remote-extras[open]{display:block}.remote-extra-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}#remote .remote-extra-buttons button{width:100%;font-size:8px!important;min-height:34px;margin:0;padding:3px}}