.environment-panel{position:absolute;right:30px;top:125px;width:280px;padding:17px 18px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);backdrop-filter:blur(16px);box-shadow:0 8px 32px #0002}
.time-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.time-heading label{font-size:14px;color:var(--ink);font-weight:700}.time-heading output{font-size:20px;font-variant-numeric:tabular-nums;color:#ffdfa5;white-space:nowrap}.time-heading #day-phase{display:block;font-size:12px;color:var(--muted);margin-top:5px}
#time-of-day{--sun-progress:50%;display:block;width:100%;height:36px;margin:7px 0 0;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;touch-action:pan-y}
#time-of-day::-webkit-slider-runnable-track{height:7px;border-radius:9px;background:linear-gradient(90deg,#111e43 0%,#a38dac 20%,#efbf8c 28%,#a8d8f6 50%,#ee9e70 75%,#212546 86%,#111e43 100%);box-shadow:0 0 0 1px #ffffff21}
#time-of-day::-moz-range-track{height:7px;border-radius:9px;background:linear-gradient(90deg,#111e43 0%,#a38dac 20%,#efbf8c 28%,#a8d8f6 50%,#ee9e70 75%,#212546 86%,#111e43 100%);box-shadow:0 0 0 1px #ffffff21}
#time-of-day::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:25px;height:25px;border-radius:50%;margin-top:-9px;border:3px solid var(--time-glow,#ffedc5);background:#fff6df;box-shadow:0 0 16px #ffcf7980,0 2px 5px #0008}
#time-of-day::-moz-range-thumb{width:19px;height:19px;border-radius:50%;border:3px solid var(--time-glow,#ffedc5);background:#fff6df;box-shadow:0 0 16px #ffcf7980,0 2px 5px #0008}
#time-of-day:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.time-stops{display:flex;justify-content:space-between;align-items:center;margin:0 -8px}.time-stops button{font:14px Arial,sans-serif;border:0;background:transparent;padding:7px 8px;color:var(--muted);min-width:44px;min-height:32px}.time-stops button:hover{color:#ffe0a3}.time-stops button:focus-visible{outline:3px solid var(--gold);outline-offset:1px;border-radius:4px}
@media(max-width:1050px){.environment-panel{right:25px;width:255px}}
@media(max-width:700px){
 .environment-panel{left:15px;right:15px;top:108px;width:auto;padding:12px 14px 5px}
 .time-heading output{font-size:19px}.time-heading #day-phase{display:inline;margin:0 0 0 10px;font-size:12px}
 #time-of-day{height:32px;margin-top:4px}.time-stops button{min-height:30px;padding-top:4px;padding-bottom:4px}
 .room-status{top:228px}.room-status h1{font-size:27px;margin:9px 0}.room-status p{font-size:12px;margin:6px 0 10px}
 .photo-preview img{height:34px;width:48px}
}
@media(max-height:700px) and (max-width:700px){
 .room-status{top:225px}.room-status h1{font-size:25px;margin:8px 0}.room-status p{display:none}.photo-preview img{display:none}.photo-preview{padding:7px 9px}
}
@media(max-height:620px) and (max-width:700px){
 .environment-panel{top:103px;padding-top:9px}.room-status{top:214px}.room-status .eyebrow{display:none}.room-status h1{font-size:22px;margin:5px 0 7px}.floorbar{bottom:219px}
}
@media(max-height:620px) and (min-width:701px){.environment-panel{top:95px;padding-top:12px}.time-heading output{font-size:18px}}
@media(max-height:520px) and (min-width:701px){#minimap{display:none}.map-panel{padding:10px}.map-heading{margin-bottom:8px}.environment-panel{top:92px}.room-status{max-width:260px}}