#stage{touch-action:pan-y}
#controls>span{display:none}
#controls>button{width:48px;height:48px;padding:10px;display:grid;place-items:center;border-radius:50%;background:#202024e8}
#controls svg{width:24px;height:24px}
#timer-face{--accent:#ff9f5a;position:absolute;inset:0;color:var(--clock-color);display:flex;align-items:center;justify-content:center;padding-bottom:0}
#timer-face[data-phase=rest]{--accent:#8dd7aa}
#timer-dial{width:min(88dvh,calc(100vw - 180px));aspect-ratio:1;position:relative}
.progress-ring{width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.progress-ring circle{fill:none;stroke-width:5.5}
.ring-track{stroke:currentColor;opacity:.12}
#timer-progress{stroke:var(--accent);stroke-dasharray:100;stroke-linecap:round}
.timer-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
#phase-icon{color:var(--accent);width:clamp(28px,7.5dvh,56px);height:clamp(28px,7.5dvh,56px)}
#phase-icon svg{width:100%;height:100%}
#countdown{font:var(--clock-weight,700) min(19dvh,17vw)/1.1 var(--clock-font);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.02em}
#timer-clock{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));font:500 clamp(40px,12dvh,88px)/1 var(--clock-font);font-variant-numeric:tabular-nums;opacity:.65}
#timer-actions{position:absolute;left:50%;transform:translateX(-50%);bottom:0;display:flex;gap:16px;align-items:center}
#timer-actions button{width:48px;height:48px;min-height:48px;padding:12px;border:0;display:grid;place-items:center;background:#242427;border-radius:50%}
#timer-actions #timer-toggle{width:60px;height:60px}
.timer-finished{outline:2px solid #8dd7aa}
#timer-face[data-status=done] #phase-icon{opacity:.5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(orientation:portrait){#timer-face{padding-bottom:0}#timer-dial{width:88vw}#countdown{font-size:19vw}#timer-clock{top:max(28px,env(safe-area-inset-top));font-size:56px}}


/* Side controls keep the dial centered and stationary in landscape. */
@media(orientation:landscape){#timer-actions{position:fixed;left:auto;right:max(24px,env(safe-area-inset-right));top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;gap:12px}}
@media(orientation:portrait){#timer-clock{top:calc(var(--portrait-top) + 20px)}}
@media(orientation:portrait){#timer-clock{display:none}}
/* Swipe dimming and temporary nonverbal feedback. */
#stage{touch-action:none}
#display-dimmer{position:fixed;inset:0;background:#000;pointer-events:none;z-index:1}
#brightness-hud{position:fixed;left:50%;bottom:calc(max(20px,env(safe-area-inset-bottom)) + 72px);transform:translateX(-50%);z-index:4;pointer-events:none;padding:10px 18px;border-radius:24px;background:#29292eeF;color:#fff;font:500 14px/1.4 -apple-system,system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Apply the same dimming to controls, feedback, and the modal settings sheet. */
#display-dimmer{z-index:10}
#settings{filter:brightness(var(--display-brightness,1))}
#brightness-hud{display:flex;align-items:center;gap:12px;padding:13px 18px;background:#29292ef2}
#brightness-hud svg{width:22px;height:22px;flex:none}
.brightness-track{display:block;width:112px;height:5px;overflow:hidden;background:#ffffff30;border-radius:5px}
#brightness-fill{display:block;height:100%;background:currentColor;border-radius:inherit}

/* Reverse the depletion direction; optional filled remaining-time sector. */
.progress-ring{transform:rotate(-90deg) scaleY(-1)}
#timer-sector{display:none;fill:var(--accent);opacity:.22;stroke:none}
.visual-timer #timer-sector{display:block}
.visual-timer .timer-center{gap:0}