/* Scale the controls with desktop displays without magnifying the room photograph. */
#experience .desktop-stage-tools{flex-wrap:wrap;max-width:calc(var(--visible-width,100vw) / var(--room-ui-scale,1) - 96px)}
@media (min-width:1200px) and (min-height:700px) {
 #experience {--touch-width:230px}
 #experience .virtual-remote,
 #experience .spaces-leadin,
 #experience .dealer-space-trigger,
 #experience .rail-gold-trigger,
 #experience .desktop-stage-tools,
 #experience .remote-toggle {zoom:var(--room-ui-scale,1)}
 body:not(.mobile-theater) #experience .virtual-remote {
  height:auto;
  max-height:calc(var(--visible-height,100svh) / var(--room-ui-scale,1) - 48px);
 }
 #experience .virtual-remote .touch-activities button,
 #experience .virtual-remote .touch-activities a {height:72px;min-height:72px;font-size:13px;line-height:1.2}
 #experience .virtual-remote .touch-activities .touch-scowcroft {height:48px;min-height:48px}
 #experience .touch-footer button {height:40px;min-height:40px}
 #experience .touch-footer small,#experience .touch-skip small {font-size:9px}
 #experience .touch-header {height:40px;min-height:40px}
 #experience .touch-power button {width:48px;min-width:48px}
 #experience .touch-power small {font-size:9px}
}

/* A single compact row stays below the touchscreen in narrow desktop windows. */
@media(max-width:650px){
 body:not(.mobile-theater) #experience .virtual-remote{max-height:min(410px,calc(var(--visible-height,100svh) - 120px))!important}
 body:not(.mobile-theater) #experience .desktop-stage-tools{left:16px;right:80px;top:auto;bottom:16px;width:calc(100% - 96px);max-width:none;flex-wrap:nowrap;gap:6px}
 body:not(.mobile-theater) #experience .desktop-stage-tools button{flex:1;min-width:0;min-height:44px;padding:8px 4px;gap:5px;font-size:11px}
 body:not(.mobile-theater) #experience .desktop-stage-tools button svg{width:16px;height:16px;flex-shrink:0}
}

/* Keep the remote compact even when other desktop controls scale up. */
body:not(.mobile-theater) #experience .virtual-remote{zoom:1}

/* One home screen for programs, lighting and room scenes. */
body:not(.mobile-theater) #experience{--touch-width:264px}
body:not(.mobile-theater) #experience .virtual-remote{width:264px;aspect-ratio:440 / 956;max-width:calc(100vw - 28px);height:auto;top:16px;bottom:auto;max-height:calc(var(--visible-height,100svh) / var(--room-ui-scale,1) - 32px)!important;padding:10px}
body:not(.mobile-theater) #experience .touch-header{min-height:44px;height:44px;padding:0}
body:not(.mobile-theater) #experience .touch-activities{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
body:not(.mobile-theater) #experience .virtual-remote .touch-activities :is(button,a){height:64px!important;min-height:64px!important;font-size:11px!important;padding:4px!important;line-height:1.15}
body:not(.mobile-theater) #experience .virtual-remote .touch-activities .touch-hifi{grid-column:auto}
body:not(.mobile-theater) #experience .virtual-remote .touch-hifi img{width:54px;height:54px}
body:not(.mobile-theater) #experience .touch-room-settings{border-top:1px solid #526b87;margin-top:4px;padding-top:8px}
body:not(.mobile-theater) #experience .touch-room-settings[hidden]{display:none}
body:not(.mobile-theater) #experience .touch-hint{margin:0;font-size:11px}
body:not(.mobile-theater) #experience .os-slider{margin:6px 0;font-size:12px}
body:not(.mobile-theater) #experience .os-slider input{margin:6px 0}
body:not(.mobile-theater) #experience .touch-room-scenes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
body:not(.mobile-theater) #experience .touch-room-scenes button{min-height:44px;height:44px;font-size:12px}
body:not(.mobile-theater) #experience .touch-footer button{min-height:40px;height:40px}
body:not(.mobile-theater) #experience .touch-skip{margin:5px 0}
@media(max-height:650px){
 body:not(.mobile-theater) #experience .virtual-remote{top:8px;max-height:calc(var(--visible-height,100svh) - 16px)!important}
 body:not(.mobile-theater) #experience .virtual-remote .touch-activities :is(button,a){height:52px!important;min-height:52px!important}
 body:not(.mobile-theater) #experience .virtual-remote .touch-hifi img{width:44px;height:44px}
 body:not(.mobile-theater) #experience .touch-activities .tile-symbol,body:not(.mobile-theater) #experience .touch-activities .tile-symbol svg{height:24px;width:32px}
}

@media(max-width:650px){body:not(.mobile-theater) #experience .virtual-remote{width:310px;aspect-ratio:auto}}

/* Transparent white line icons, including the brand ticker and room scenes. */
#experience .virtual-remote svg{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;background:transparent;flex-shrink:0}
#experience .virtual-remote .touch-activities .tile-symbol{display:block;width:28px!important;height:26px!important}
#experience .virtual-remote .touch-activities .tile-symbol svg{width:28px!important;height:26px!important}
#experience .virtual-remote .touch-activities :is(button,a){gap:4px}
#experience .touch-room-scenes button{display:flex;align-items:center;justify-content:center;gap:6px;padding:4px}
#experience .touch-room-scenes svg{width:19px;height:19px}
#experience .os-slider>svg{width:16px;height:16px;vertical-align:middle}

/* Let visitors leave or wake the room after the shutdown scene settles. */
#experience .desktop-stage-tools :is(.away-exit,.away-return){display:none}
#experience.room-away-ready .desktop-stage-tools>:not(.away-exit):not(.away-return){display:none!important}
#experience.room-away-ready .desktop-stage-tools :is(.away-exit,.away-return){display:flex;align-items:center;justify-content:center;gap:12px;width:auto;min-height:56px;padding:14px 20px;border:1px solid #e8c16a;border-radius:12px;background:#101a22;color:white;text-decoration:none;font:700 16px/1.2 system-ui;cursor:pointer}
#experience.room-away-ready .desktop-stage-tools svg{width:26px;height:26px;fill:none;stroke:white;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#experience.room-away-ready .desktop-stage-tools :is(.away-exit,.away-return):hover{background:#263641}
#experience.room-away-ready .desktop-stage-tools :is(.away-exit,.away-return):focus-visible{outline:3px solid white;outline-offset:3px}
@media(max-width:650px){#experience.room-away-ready .desktop-stage-tools :is(.away-exit,.away-return){font-size:11px;padding:8px;gap:6px;min-height:44px}}