:root{color-scheme:dark;--theme-color:#45261c;--metal:#b59150;--ink:#f4e9d7;--muted:#cebaa5;--field:#26150f;--button-size:clamp(120px,calc((100svh - 300px)*.32),180px);--action-size:58px}
*{box-sizing:border-box}body{margin:0;color:var(--ink);font:17px/1.5 Georgia,'Times New Roman',serif;background:#15100d}button,input{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:not-allowed}button:focus-visible,input:focus-visible{outline:2px solid #f6d792;outline-offset:4px}img{user-select:none;pointer-events:none}h2,p{margin-top:0}[hidden]{display:none!important}
.remote-page{min-height:100svh;display:grid;place-items:center;padding:12px;background:radial-gradient(ellipse at top,#322016,#100d0b)}
.remote-shell{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:26px;align-items:center;width:min(100%,470px);min-height:min(810px,calc(100svh - 24px));padding:46px 34px 38px;border-radius:12px;background:var(--theme-color) url('assets/materials/brushed-metal-repeat.png') repeat;background-size:256px;box-shadow:0 18px 70px #0009}
.remote-shell:before{content:'';position:absolute;inset:14px;z-index:-1;background:url('assets/classic/patterns/ornament-repeat.png') center/540px repeat;opacity:.17;pointer-events:none}
.v-frame{position:absolute;inset:0;z-index:5;border:48px solid transparent;border-image:url('assets/classic/borders/frame-9slice.png') 300 / 48px / 0 round;pointer-events:none}
.toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;width:100%;font:14px/1.5 system-ui,sans-serif}.connection{display:flex;gap:7px;align-items:center;flex-shrink:0}.dot{width:7px;height:7px;background:#ac9984;border-radius:50%;flex-shrink:0}.dot.online{background:#9fe0b5;box-shadow:0 0 6px #9fe0b555}.dot.error{background:#f48174}.feedback{flex:1;min-width:0;text-align:right;color:var(--muted)}.feedback.error{color:#ffaaa0}
.controls{display:flex;flex:1;align-items:center;justify-content:center;width:100%}.control-plate{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:32px;width:100%;padding:32px 16px;background:color-mix(in srgb,var(--theme-color) 65%,#120c08);border-radius:10px;box-shadow:0 7px 16px #0006}.control-plate:before{content:'';position:absolute;inset:0;border:20px solid transparent;border-image:url('assets/classic/popup/normal.png') 32 fill / 20px stretch;pointer-events:none;z-index:-1}
.control-plate{background-image:url('assets/materials/brushed-metal-repeat.png');background-size:256px}
.command{position:relative;isolation:isolate;flex:none;width:var(--button-size);aspect-ratio:1;border:0;border-radius:50%;padding:0;background:var(--metal);box-shadow:0 6px 10px #0007,inset 0 0 0 2px #1d110c;max-width:100%}.command:disabled{background:#796448}.command.counting{background:#9b7b48}.command.queued{box-shadow:0 6px 10px #0007,0 0 0 1px #e7c57e80}
.v-layer{position:absolute;inset:0;display:none;pointer-events:none}[data-state=normal]>.v-layer[data-layer=normal],[data-state=hover]>.v-layer[data-layer=hover],[data-state=active]>.v-layer[data-layer=active],[data-state=disabled]>.v-layer[data-layer=disabled]{display:block}
.command-surface{position:absolute;width:116%;height:116%;left:-8%;top:-8%}.v-glyph--arrow{position:absolute;left:28%;top:28%;width:44%;height:44%}.v-glyph--arrow img{width:100%;height:100%;object-fit:contain}.command.counting .v-glyph--arrow{visibility:hidden}.command .button-caption{display:none!important}
.countdown-label{display:none;position:absolute;left:13%;top:30%;width:74%;height:40%;align-items:center;justify-content:center;gap:2%;pointer-events:none}.command.counting .countdown-label{display:flex}.v-crop{position:relative;display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}.v-crop img{position:absolute;max-width:none}.countdown-digit{flex:0 0 43%;width:43%;height:100%;filter:drop-shadow(0 1px 2px #000)}.countdown-label:has(.countdown-digit:nth-child(3)){top:35%;height:30%}.countdown-label:has(.countdown-digit:nth-child(3)) .countdown-digit{flex-basis:30%;width:30%}
.settings-action{display:flex;align-items:center;gap:14px;width:100%}.settings-action #settings{margin-left:auto;width:var(--action-size);height:var(--action-size)}
.v-icon,.icon-button,.cancel-queue,.secondary,.input-row button{--skin:url('assets/classic/button/normal.png');position:relative;isolation:isolate;border:0;border-radius:6px;background:var(--field);color:var(--ink);padding:11px 18px;min-height:44px;box-shadow:0 3px 5px #0004}
.v-icon:before,.icon-button:before,.cancel-queue:before,.secondary:before,.input-row button:before{content:'';position:absolute;inset:-3px;border:12px solid transparent;border-image:var(--skin) 24 fill / 12px stretch;z-index:-1;pointer-events:none}
button:hover{--skin:url('assets/classic/button/hover.png')}button:active,button[data-state=active]{--skin:url('assets/classic/button/active.png')}button:focus-visible{--skin:url('assets/classic/button/focus.png')}button:disabled{--skin:url('assets/classic/button/disabled.png')}.v-icon:disabled{opacity:.45}
.v-icon,.icon-button{flex:none;width:46px;height:46px;padding:0}.v-icon .v-layer,.icon-button .v-layer{inset:16%}.v-icon img,.icon-button img{width:100%;height:100%;object-fit:contain}.cancel-queue{height:var(--action-size);font-size:16px;min-width:125px}.cancel-label{pointer-events:none}
.settings-dialog{position:fixed;isolation:isolate;width:min(430px,calc(100vw - 30px));max-height:calc(100svh - 32px);overflow:auto;margin:auto;padding:34px 28px;color:var(--ink);border:26px solid transparent;border-image:url('assets/classic/borders/frame-9slice.png') 300 / 26px / 0 round;border-radius:8px;background:var(--theme-color) url('assets/materials/brushed-metal-repeat.png') center/256px;font:16px/1.5 system-ui,sans-serif;box-shadow:0 20px 70px #000b}.settings-dialog::backdrop{background:#080605bb;backdrop-filter:blur(4px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}.dialog-top h2{font:26px Georgia,serif;margin:0}.close-button{width:40px;height:40px;min-height:40px}.settings-section label,.access label{display:block;margin-bottom:12px}.delay-input{display:flex;align-items:center;gap:14px}.v-field{position:relative;isolation:isolate;flex:1;min-width:0;background:var(--field);border-radius:5px;height:48px}.v-field:before{content:'';position:absolute;inset:-3px;border:12px solid transparent;border-image:url('assets/classic/input/normal.png') 23 fill / 12px stretch;pointer-events:none;z-index:-1}.v-field:focus-within:before{border-image-source:url('assets/classic/input/focus.png')}.v-field input{width:100%;height:100%;border:0;outline:none;background:transparent;padding:8px 14px;color:var(--ink);font:18px system-ui,sans-serif}.v-field input[type=number]{text-align:center;appearance:textfield}.v-field input::-webkit-inner-spin-button{appearance:none}.v-field input::placeholder{color:#bfae99}.unit-label{text-align:center}.settings-section p,.access p{font-size:14px;color:var(--muted);margin:12px 0;line-height:1.6}.settings-section .secondary{background:var(--metal);color:#20150b;width:100%;margin-top:8px}.access{margin-top:24px;padding-top:22px;border-top:1px solid #b5915060}.input-row{display:flex;flex-direction:column;gap:14px}.input-row .v-field{flex:auto;width:100%}.input-row button{align-self:flex-end}.access .remember-option{display:flex;align-items:center;gap:10px;margin:18px 0 8px;font-size:15px}.remember-option input{appearance:none;width:26px;height:26px;flex:none;margin:0;border:0;background:url('assets/classic/checkbox-off/normal.png') center/contain no-repeat;cursor:pointer}.remember-option input:checked{background-image:url('assets/classic/checkbox-on/normal.png')}
@media(max-width:520px){:root{--action-size:52px}.remote-shell{gap:24px;padding:40px 28px 34px}.v-frame{border-width:42px;border-image-width:42px}.toolbar{font-size:13px;gap:10px}.control-plate{padding:28px 14px}.settings-dialog{padding:24px 16px}}
@media(max-width:350px){.remote-shell{padding:36px 24px 30px}.toolbar{font-size:12px;gap:8px}.cancel-queue{min-width:112px}.settings-dialog{border-width:20px;border-image-width:20px;padding:20px 12px}}
@media(max-height:600px){:root{--button-size:120px}.control-plate{padding:24px 12px;gap:24px}}
/* Theme colors sit beneath the kit's neutral alpha textures and sliced skins. */
:root{--field:color-mix(in srgb,var(--theme-color) 56%,#050505);--page:color-mix(in srgb,var(--theme-color) 28%,#080807)}
body,.remote-page{background:var(--page)}
.remote-shell{border:1px solid color-mix(in srgb,var(--metal) 45%,transparent);box-shadow:0 18px 70px #0008;border-radius:13px}
.remote-shell:before{background-size:800px;opacity:.085}
.v-frame{inset:-1px;border-width:57px;border-image-width:57px}
.control-plate{background-color:var(--field);box-shadow:0 6px 14px #0005}
.command:disabled{background:color-mix(in srgb,var(--metal) 55%,var(--field))}.command.counting{background:color-mix(in srgb,var(--metal) 78%,var(--field))}
.settings-dialog{box-shadow:0 20px 70px #000b}
.v-icon,.icon-button,.cancel-queue,.secondary,.input-row button,.v-field input{color:#f4e9d7}
.v-field:hover:before{border-image-source:url('assets/classic/input/hover.png')}.v-field:focus-within:before{border-image-source:url('assets/classic/input/focus.png')}
.theme-settings{padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid color-mix(in srgb,var(--metal) 45%,transparent)}
.theme-settings h3{margin:0 0 14px;font-size:16px;font-weight:500}
.theme-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.theme-presets button{position:relative;isolation:isolate;border:0;border-radius:5px;min-height:38px;padding:6px 2px;font-size:13px;color:#fff3dc;background:#45261c}
.theme-presets button:before{content:'';position:absolute;inset:-2px;border:10px solid transparent;border-image:url('assets/classic/button/normal.png') 24 fill / 10px stretch;z-index:-1;pointer-events:none}
.theme-presets button[data-theme-color='#153e30']{background:#153e30}.theme-presets button[data-theme-color='#193b52']{background:#193b52}.theme-presets button[data-theme-color='#86451c']{background:#86451c}
.theme-presets button[aria-pressed=true]{outline:2px solid var(--metal);outline-offset:2px}
.theme-pickers{display:flex;justify-content:space-between;gap:20px;margin-top:20px}.theme-pickers label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;flex:1}
.theme-pickers input{width:42px;height:36px;padding:3px;border:1px solid var(--metal);background:var(--field);border-radius:5px;cursor:pointer;flex:none}
#theme-message{font-size:13px;color:var(--muted);margin:12px 0 0}
@media(max-width:350px){.v-frame{border-width:44px;border-image-width:44px}.theme-pickers{gap:12px}.theme-pickers label{gap:6px}.theme-pickers input{width:34px}}
/* Neutral scratch/highlight layers preserve the hue supplied by the color picker. */
.remote-shell,.control-plate,.settings-dialog{
  background-image:
    url('assets/materials/brushed-metal-repeat.png'),
    url('assets/materials/brushed-metal-repeat.png'),
    url('assets/materials/brushed-metal-repeat.png'),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0px,rgba(255,255,255,.035) .5px,rgba(0,0,0,.04) 1px,transparent 2px,transparent 4px),
    linear-gradient(112deg,rgba(0,0,0,.27) 0%,rgba(255,255,255,.08) 17%,rgba(255,255,255,.24) 32%,rgba(0,0,0,.12) 49%,rgba(255,255,255,.15) 67%,rgba(0,0,0,.25) 100%);
  background-size:256px 256px,256px 256px,256px 256px,100% 100%,100% 100%;
  background-position:center,center,center,center,center;
  background-repeat:repeat,repeat,repeat,no-repeat,no-repeat;
}
/* Reusable raised metal plates: neutral relief over a darker tint of the theme. */
.metal-widget{
  position:relative;isolation:isolate;
  background-color:var(--widget-background,color-mix(in srgb,var(--theme-color) 62%,#020303));
  background-image:url('assets/materials/brushed-metal-repeat.png'),url('assets/materials/brushed-metal-repeat.png'),url('assets/materials/brushed-metal-repeat.png'),linear-gradient(108deg,rgba(0,0,0,.28),rgba(255,255,255,.09) 23%,rgba(0,0,0,.14) 48%,rgba(255,255,255,.07) 74%,rgba(0,0,0,.32));
  background-size:256px 256px,256px 256px,256px 256px,100% 100%;
  background-repeat:repeat,repeat,repeat,no-repeat;
  background-position:center;
  border:1px solid rgba(0,0,0,.8);border-radius:10px;
  box-shadow:0 13px 17px -5px rgba(0,0,0,.8),0 3px 2px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.43),inset 1px 0 0 rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.65),inset -1px 0 0 rgba(0,0,0,.45);
}
.metal-widget:after{
  content:'';position:absolute;inset:9px;pointer-events:none;z-index:2;border-radius:5px;
  background-image:radial-gradient(circle at 35% 30%,#ffffffb3 0 12%,#ffffff30 24%,#0006 48%,#000c 59%,transparent 68%);
  background-size:7px 7px;background-repeat:no-repeat;
  /* Four independent screw heads retain their size as the plate grows. */
  background-image:radial-gradient(circle at 35% 30%,#ffffffb3 0 12%,#ffffff30 24%,#0006 48%,#000c 59%,transparent 68%),radial-gradient(circle at 35% 30%,#ffffffb3 0 12%,#ffffff30 24%,#0006 48%,#000c 59%,transparent 68%),radial-gradient(circle at 35% 30%,#ffffffb3 0 12%,#ffffff30 24%,#0006 48%,#000c 59%,transparent 68%),radial-gradient(circle at 35% 30%,#ffffffb3 0 12%,#ffffff30 24%,#0006 48%,#000c 59%,transparent 68%);
  background-position:left top,right top,left bottom,right bottom;
}
.control-plate.metal-widget:before{display:none}
.settings-dialog .metal-widget{padding:22px 18px;margin:0 0 24px;color:var(--widget-ink,#f4e9d7)}
.settings-dialog .metal-widget:last-child{margin-bottom:0}
.settings-dialog .metal-widget p,.settings-dialog .metal-widget #theme-message{color:var(--widget-muted,#cebaa5)}
.settings-dialog .metal-widget .theme-pickers{gap:12px}
.settings-dialog .metal-widget .theme-pickers label{gap:6px}
.settings-dialog .metal-widget .theme-pickers input{width:34px}
.settings-dialog .metal-widget .theme-presets{gap:6px}
.settings-dialog .access.metal-widget{padding-top:24px}
@media(max-width:350px){.settings-dialog .metal-widget{padding:22px 12px}.settings-dialog .metal-widget .theme-pickers{gap:8px}.settings-dialog .metal-widget .theme-pickers label{font-size:13px}.settings-dialog .metal-widget .delay-input{gap:9px}}

.widget-color-setting{margin-top:20px;padding-top:16px;border-top:1px solid #ffffff24}
.widget-color-setting .theme-pickers{margin-top:0}
.widget-follow{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:14px;cursor:pointer}
.widget-follow input{width:18px;height:18px;margin:0;accent-color:var(--metal);cursor:pointer}
.settings-dialog .metal-widget #widget-color-help{font-size:13px;line-height:1.6;margin:10px 0 0}
/* Chrome rim and a tintable, concentrically brushed metal face. */
.command,.command:disabled,.command.counting{
  --chrome:conic-gradient(from 145deg,#15191d 0deg,#f8fcff 25deg,#92999e 49deg,#20262b 83deg,#e1e8ec 113deg,#fff 151deg,#a2aaaf 177deg,#22282d 211deg,#080b0d 237deg,#dce3e7 278deg,#fff 313deg,#525b61 341deg,#15191d 360deg);
  background:var(--chrome);border:1px solid #808a91;
  box-shadow:0 13px 18px -4px #000a,0 3px 4px #0009,inset 0 1px 1px #fff,inset 0 -1px 2px #111;
}
.command:before{content:'';position:absolute;inset:2%;border-radius:50%;background:var(--chrome);border:2px solid #d8dfe3;box-shadow:inset 0 0 0 2px #171d21,0 0 1px 1px #0009;pointer-events:none}
.command:after{
  content:'';position:absolute;inset:8%;border-radius:50%;z-index:1;pointer-events:none;
  background-color:var(--button-face,#a8adb0);
  background-image:url('assets/materials/turned-metal-transparent.svg'),conic-gradient(from 30deg,#ffffff05,#fff5 45deg,#0003 98deg,#fff4 164deg,#0003 222deg,#fff5 284deg,#ffffff05 360deg),linear-gradient(#ffffff24,#00000029);
  background-size:100% 100%;background-repeat:no-repeat;
  border:1px solid #ffffff70;
  box-shadow:inset 0 2px 2px #ffffff80,inset 0 -2px 3px #0005,0 3px 4px 1px #0009;
}
.command>.v-layer{z-index:2}.command>.countdown-label{z-index:3}

.command[data-held=true],.command.pressed,.command[data-state=active]{box-shadow:0 3px 5px #0008,inset 0 2px 4px #000b}
.command[data-held=true]:before,.command.pressed:before,.command[data-state=active]:before{background:conic-gradient(from 145deg,#fff,#434b52 55deg,#0c1116 100deg,#b6c0c6 170deg,#fff 235deg,#d2dce2 295deg,#fff);box-shadow:inset 0 3px 5px #000b,0 1px 1px #fff8}
.command[data-held=true]:after,.command.pressed:after,.command[data-state=active]:after{inset:9%;border-color:#282f3580;box-shadow:inset 0 5px 9px #0009,inset 0 -1px 2px #fff8;background-position:center;transform:translateY(1px)}
.command[data-held=true] .v-glyph--arrow,.command.pressed .v-glyph--arrow{transform:translateY(1px)}
.command:disabled:not(.counting):not(.pressed){opacity:1}
.command.queued{outline:1px solid #d9e8f080;outline-offset:3px}
.button-color-setting{padding-top:15px;border-top:1px solid #ffffff24}

/* Solid square button body; only the machined texture is translucent. */
.command,.command:disabled,.command.counting{border-radius:12px;opacity:1}
.command:before{border-radius:10px}
.command:after{border-radius:7px;background-color:var(--button-face,#a8adb0);opacity:1;background-image:url('assets/materials/turned-metal-defined.svg'),conic-gradient(from 30deg,#ffffff08,#ffffff66 45deg,#00000040 98deg,#ffffff50 164deg,#00000040 222deg,#ffffff66 284deg,#ffffff08 360deg),linear-gradient(#ffffff24,#00000029)}
/* btn-94 motion adapted to a silver chrome rim, without fading the solid face. */
.command,.command:disabled,.command.counting{
  --chrome:linear-gradient(90deg,#22282e 0%,#faffff 17%,#77838c 24%,#fff 40%,#adb9c2 50%,#e5edf2 59%,#606e78 70%,#f7fcff 85%,#252c33 100%);
  background-image:var(--chrome);background-size:100% 100%;background-position:50% 50%;border:0;
  transition:transform 500ms ease,box-shadow 200ms ease;
}
.command:before{display:none}
.command:after{inset:3px;border-radius:9px;border:0}
@media(hover:hover){.command:not(:disabled):hover{animation:none;transform:none}}
.command:not(:disabled):active,.command:not(:disabled)[data-held=true],.command:not(:disabled)[data-state=active]{animation:chrome-move 1s infinite alternate ease-in-out;transform:scale(.99)}
.command[data-held=true]:after,.command.pressed:after,.command[data-state=active]:after{inset:4px;border:0;border-radius:8px}
.command:disabled{animation:none;transform:none}
@keyframes chrome-move{0%{background-size:100% 100%;background-position:50% 50%}50%{background-size:500% 100%;background-position:0% 50%}100%{background-size:200% 100%;background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.command{animation:none!important;transition:none!important;transform:none!important}}
/* Strong machined plate relief; all large-area lighting is neutral translucent. */
.metal-widget{
  background-image:url('assets/materials/brushed-metal-intense.svg'),url('assets/materials/brushed-metal-repeat.png'),linear-gradient(105deg,#ffffff0a 0%,#ffffff66 17%,#ffffff14 34%,#00000078 58%,#ffffff57 82%,#00000040 100%);
  background-size:256px 256px,256px 256px,100% 100%;background-repeat:repeat,repeat,no-repeat;
  border-color:#ffffff8c #171c20cc #050708 #ffffff70;border-radius:9px;
  box-shadow:8px 15px 13px -5px #000b,0 4px 3px #000b,inset 0 1px 0 #ffffffd9,inset 1px 0 0 #ffffff70,inset 0 -2px 1px #000a,inset -1px 0 0 #0009;
}
.metal-widget:after{inset:8px;background-image:url('assets/materials/chrome-screw.svg'),url('assets/materials/chrome-screw.svg'),url('assets/materials/chrome-screw.svg'),url('assets/materials/chrome-screw.svg');background-size:15px 15px;background-repeat:no-repeat;background-position:left top,right top,left bottom,right bottom}
.settings-dialog .metal-widget{padding-top:28px;padding-bottom:28px}
.settings-dialog .metal-widget>h3,.settings-dialog .metal-widget label,.settings-dialog .metal-widget p{text-shadow:0 1px 2px #0005}
/* Borderless app shell and engraved, rather than raised, button glyphs. */
.remote-shell{border:0;box-shadow:0 12px 36px #0006}
.command,.command:disabled,.command.counting{box-shadow:0 3px 6px #0005,inset 0 1px 1px #ffffffa0,inset 0 -1px 1px #0006}
.command:after{box-shadow:inset 0 1px 1px #ffffff60,inset 0 -1px 2px #0004,0 1px 2px #0004}
.command[data-held=true],.command.pressed,.command[data-state=active]{box-shadow:0 1px 3px #0004,inset 0 1px 2px #0007}
.command[data-held=true]:after,.command.pressed:after,.command[data-state=active]:after{box-shadow:inset 0 3px 5px #0008,inset 0 -1px 1px #ffffff70}
.command .v-glyph--arrow img,.command .countdown-digit img{filter:grayscale(1) invert(1) brightness(.72) contrast(1.15) drop-shadow(0 -1px .5px #0008) drop-shadow(0 1px .5px #ffffffb3)}
.command .countdown-digit{filter:none}
.engraving-filters{position:absolute;pointer-events:none}
.remote-shell,.remote-shell button,.remote-shell input,.settings-dialog,.settings-dialog h2,.theme-settings h3{font-weight:700}
.toolbar,.settings-dialog label,.settings-dialog p,.settings-dialog h2,.settings-dialog h3,.cancel-label,.secondary,.input-row button,.v-field input{text-shadow:0 -1px 1px #0009,0 1px 0 #ffffff36}
.command .v-glyph--arrow img{filter:grayscale(1) invert(1) brightness(.7) contrast(1.1) url('#arrow-inset') drop-shadow(0 1px .5px #ffffff9c)}
.settings-action #settings{
  background-color:var(--theme-color);
  background-image:url('assets/materials/brushed-metal-intense.svg'),linear-gradient(115deg,#ffffff52,#00000040 48%,#ffffff38 76%,#00000050);
  background-size:160px 160px,100% 100%;border:1px solid #ffffff70;border-radius:9px;
  box-shadow:0 2px 4px #0005,inset 0 1px 1px #ffffff9c,inset 0 -1px 2px #0009;
}
.settings-action #settings:before{display:none}
.settings-action #settings:hover{box-shadow:0 2px 5px #0005,inset 0 1px 1px #fff,0 0 0 1px #ffffff50}
.settings-action #settings[data-state=active]{box-shadow:inset 0 2px 4px #0009,inset 0 -1px 1px #ffffff70}
.settings-action #settings img{filter:grayscale(1) invert(1) brightness(.75) url('#arrow-inset')}
/* Wider sloped chrome rim and a short physical-looking pedestal. */
.command,.command:disabled,.command.counting{
  box-shadow:0 4px 0 #363e44,0 5px 0 #0c1013,0 8px 8px -3px #0008,inset 0 1px 1px #fff,inset 0 -1px 1px #0009;
}
.command:before{display:block;inset:2px;border-radius:10px;border:0;background:linear-gradient(145deg,#ffffffb3 0%,#ffffff10 34%,#00000010 57%,#00000080 100%);box-shadow:inset 0 1px 1px #ffffffb3,inset 0 -1px 1px #0009}

.command:after{inset:9px;border-radius:5px;border:1px solid #222a3080;box-shadow:0 -1px 1px #0008,0 1px 1px #ffffffb3,inset 0 1px 2px #ffffff70,inset 0 -1px 2px #0004}
.command[data-held=true],.command.pressed,.command[data-state=active]{box-shadow:0 1px 0 #30383d,0 3px 4px #0005,inset 0 1px 2px #0008}
.command[data-held=true]:before,.command.pressed:before,.command[data-state=active]:before{background:linear-gradient(145deg,#0008,#ffffff18 48%,#ffffff70);box-shadow:inset 0 2px 3px #0007}
.command[data-held=true]:after,.command.pressed:after,.command[data-state=active]:after{inset:10px;border-radius:5px;box-shadow:inset 0 3px 5px #0008,inset 0 -1px 1px #ffffff70}
/* Clip only the shine overlay so the existing bevels and shadows remain intact. */
.button-shine{position:absolute;inset:0;z-index:4;border-radius:inherit;overflow:hidden;pointer-events:none;opacity:0}
.button-shine:before{content:'';position:absolute;inset:-30% -100%;background:linear-gradient(112deg,transparent 39%,#ffffff08 44%,#ffffff6b 49%,#ffffffa6 50%,#ffffff26 54%,transparent 60%);transform:translateX(-55%);pointer-events:none}
@media(hover:hover){.remote-shell button:not(:disabled):hover>.button-shine{opacity:1}.remote-shell button:not(:disabled):hover>.button-shine:before{animation:button-shine-sweep 1.15s ease-in-out both}}
.remote-shell button:disabled>.button-shine,.remote-shell button:active>.button-shine{opacity:0}
@keyframes button-shine-sweep{from{transform:translateX(-55%)}to{transform:translateX(55%)}}
@media(prefers-reduced-motion:reduce){.remote-shell button>.button-shine{display:none}}
/* Threefold spacing and shared ambient color for the plate, rim and face. */
.control-plate{gap:96px}
@media(max-height:600px){.control-plate{gap:72px}}
.command,.command:disabled,.command.counting{
  --chrome-light:color-mix(in srgb,#f7fafb 82%,var(--widget-background,var(--theme-color)));
  --chrome-mid:color-mix(in srgb,#939da4 75%,var(--widget-background,var(--theme-color)));
  --chrome-dark:color-mix(in srgb,#242d33 70%,var(--widget-background,var(--theme-color)));
  --chrome:linear-gradient(90deg,var(--chrome-dark),var(--chrome-light) 17%,var(--chrome-mid) 24%,var(--chrome-light) 40%,var(--chrome-mid) 59%,var(--chrome-dark) 70%,var(--chrome-light) 85%,var(--chrome-dark));
}
.command:after{
  background-image:linear-gradient(color-mix(in srgb,var(--widget-background,var(--theme-color)) 23%,transparent),color-mix(in srgb,var(--widget-background,var(--theme-color)) 23%,transparent)),url('assets/materials/turned-metal-defined.svg'),conic-gradient(from 30deg,#ffffff05,#ffffff38 45deg,#00000029 98deg,#ffffff29 164deg,#00000029 222deg,#ffffff38 284deg,#ffffff05 360deg),linear-gradient(#ffffff14,#00000024);
}
.command:before{background:linear-gradient(145deg,#ffffff70 0%,#ffffff08 34%,#00000008 57%,#00000060 100%)}
.command>.button-shine:before{background:linear-gradient(112deg,transparent 39%,#ffffff05 44%,#ffffff40 49%,#ffffff66 50%,#ffffff18 54%,transparent 60%)}
/* Deep-cut arrows: the SVG contains its own cavity shadow and lower edge reflection. */
.command .v-glyph--arrow img{filter:none}

.command[data-held=true] .v-glyph--arrow img,.command.pressed .v-glyph--arrow img{filter:brightness(.85)}