:root{--timer-duration:10;--bright:#ff6e6e;--dark:#1f1f1f}*{box-sizing:border-box;margin:0;padding:0}html{color-scheme:dark}body{height:100dvh;font-family:sans-serif;font-size:clamp(2rem,-.0563rem + 4.507vw,4rem);background-color:var(--dark)}:is(input,button){color:inherit;font:inherit;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}.timer{position:relative;z-index:1;display:grid;place-items:center;height:100%;&:after{content:"";position:absolute;inset-block-end:0;inset-inline:0;z-index:-1;block-size:0dvh;background-color:color(from var(--bright) srgb r g b/.8)}:has(._run,._paused) &:after{animation:runningTimer calc(var(--timer-duration) * 1s) linear}:has(._run) &:after{animation-play-state:running}:has(._paused) &:after{animation-play-state:paused}}.timer__inputs{display:flex;gap:1em;transition:scale .1s ease-out;:has(._run,._paused) &{scale:.4}}.input,.input-label{text-align:center}.input{display:block;inline-size:3ch;border:none;background-color:transparent;&:focus-visible{outline-color:color(from var(--bright) srgb r g b/.2)}:has(._run,._paused) &{pointer-events:none}}.input-text{font-size:.5em}.counter{font-size:2em;text-align:center;transition:scale .2s ease-out;scale:0;:has(._run,._paused) &{scale:1}}.timer__buttons{display:flex;align-items:center;gap:1rem}.button{inline-size:5em;min-inline-size:70px;aspect-ratio:1/1;border:1px solid transparent;border-radius:50%;font-size:.5em;text-transform:uppercase;background-color:var(--bright);transition:background-color .2s;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;:has(._run,._paused) &{background-color:var(--dark);&._pause,&._stop{border-color:var(--dark)}&._start{border:1px solid var(--bright)}}:has(._run) &._start{cursor:not-allowed;pointer-events:none}:has(._paused) &._pause{cursor:not-allowed;pointer-events:none}&._pause,&._stop{min-inline-size:50px;border:1px solid var(--bright);font-size:.3em;background-color:color(from var(--bright) srgb r g b/.1)}}@keyframes runningTimer{0%{block-size:100dvh}to{block-size:0dvh}}