.time-panel .dial-slider,.time-panel .dial-markers{display:none}
body:not([data-interface-version="before"]) .time-panel{
 width:184px;height:184px;left:50%;right:auto;bottom:23px;transform:translateX(-50%);border-radius:50%;padding:0;display:block;border:1px solid #ffffffb3;background:#fffffff5;box-shadow:0 6px 32px #17355418;color:#1b3d71;backdrop-filter:blur(12px)
}
body:not([data-interface-version="before"]) .time-panel .timeline{display:contents}
body:not([data-interface-version="before"]) .time-panel .time-title,
body:not([data-interface-version="before"]) .time-panel #time,
body:not([data-interface-version="before"]) .time-panel .time-ticks,
body:not([data-interface-version="before"]) .time-panel #sun-symbol,
body:not([data-interface-version="before"]) .time-panel #time-mood{display:none}
body:not([data-interface-version="before"]) .time-panel .time-value{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;padding:0;margin:0;background:none;box-shadow:none;pointer-events:none;z-index:2;color:#1b3d71}
body:not([data-interface-version="before"]) .time-panel .time-value output{font:650 24px/1 Outfit,Arial,sans-serif;letter-spacing:-.6px}
body:not([data-interface-version="before"]) .time-panel .dial-slider{display:block;position:absolute;inset:26px;border-radius:50%;touch-action:none;cursor:grab;outline-offset:5px;--dial-radius:60px}
.dial-slider:active{cursor:grabbing!important}.dial-track{position:absolute;inset:1px;border-radius:50%;background:conic-gradient(from 180deg,#1b3d71,#7590ba 65deg,#edc493 100deg,#ffe5b8 180deg,#efaa71 250deg,#b5577a 295deg,#1b3d71);mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));pointer-events:none}
.dial-knob{position:absolute;left:50%;top:50%;width:20px;height:20px;border:3px solid white;background:#ed1475;border-radius:50%;box-shadow:0 1px 5px #1b3d7126;transform:translate(-50%,-50%) rotate(var(--dial-angle,405deg)) translateY(calc(-1 * var(--dial-radius)));pointer-events:none}
body:not([data-interface-version="before"]) .time-panel .dial-markers{display:contents}
.dial-markers button{position:absolute;width:32px;height:32px;padding:5px;color:#f3a11a;border-radius:50%;z-index:3}.dial-markers button:hover{background:#ffbd3c19}.dial-markers svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dial-markers .dial-noon{top:0;left:calc(50% - 16px)}.dial-markers .dial-dawn{left:0;top:calc(50% - 16px)}.dial-markers .dial-evening{right:0;top:calc(50% - 16px)}.dial-markers .dial-midnight{bottom:0;left:calc(50% - 16px);color:#1b3d71}
.dial-markers .dial-midnight svg{fill:currentColor;stroke:none}
body:not([data-interface-version="before"]) .time-panel .play-btn{position:absolute;right:-2px;bottom:18px;width:46px;height:46px;min-width:0;border:4px solid white;border-radius:50%;background:#1b3d71;color:white;padding:0;margin:0;font-size:19px;display:grid;place-items:center;z-index:4;box-shadow:0 2px 9px #1b3d711a}
body:not([data-interface-version="before"]) .time-panel .play-btn:hover{background:#315d94}
/* The white dial stays legible at night, like the municipal logo cartouche. */
@media(max-width:700px){
 body:not([data-interface-version="before"]) .time-panel{width:160px;height:160px;bottom:91px}
 body:not([data-interface-version="before"]) .time-panel .dial-slider{inset:25px;--dial-radius:49px}
 body:not([data-interface-version="before"]) .time-panel .time-value output{font-size:22px}
 body:not([data-interface-version="before"]) .time-panel .play-btn{width:43px;height:43px;bottom:13px;right:-3px;font-size:17px}
 body:not([data-interface-version="before"]) .interface-compare{bottom:265px}
 body:not([data-interface-version="before"]) .places,body:not([data-interface-version="before"]) .drawer{max-height:calc(100dvh - 354px)}
 body:not([data-interface-version="before"]) #building-info{max-height:calc(100dvh - 354px)}
}
@media(max-height:550px) and (min-width:701px){body:not([data-interface-version="before"]) .time-panel{bottom:17px;width:148px;height:148px}body:not([data-interface-version="before"]) .time-panel .dial-slider{inset:25px;--dial-radius:43px}body:not([data-interface-version="before"]) .time-panel .time-value output{font-size:20px}body:not([data-interface-version="before"]) .time-panel .play-btn{width:42px;height:42px;bottom:8px}}