:root{--text-color:#dbc5e7;--background-color:#190933;--button-color:#5f507c;--button-text:#e4d4ed;--hover-button-color:#acfcd9;--input-text:#190933;--max-ring-size:560px;color:var(--text-color);background-color:var(--background-color);font-family:Roboto Mono,monospace}*{box-sizing:border-box;margin:0}body{background-color:var(--background-color)}.app{flex-direction:column;align-items:center;gap:clamp(8px,2vmin,24px);height:100dvh;padding:clamp(8px,2vmin,24px) 16px;display:flex;position:relative}.top{justify-content:center;align-items:center;width:100%;min-height:1.5rem;display:flex;position:relative}.title{text-align:center;font-size:clamp(1.5rem,6vmin,3rem);font-weight:500}.popout{width:1.25rem;height:1.25rem;color:var(--button-color);cursor:pointer;background:0 0;border:0;padding:0;position:absolute;top:0;right:0}.popout:hover,.popout:focus-visible{color:var(--text-color)}.ring-area{flex:1;justify-content:center;align-items:center;width:100%;min-height:0;display:flex;container-type:size}.ring{width:min(100cqw, 100cqh, var(--max-ring-size));aspect-ratio:1;position:relative;container-type:inline-size}.ring svg{fill:none;stroke-width:10px;width:100%;height:100%;display:block}.ring-trail{stroke:var(--button-color)}.ring-remaining{stroke-dasharray:1;stroke-linecap:round}.label{font-variant-numeric:tabular-nums;justify-content:center;align-items:center;font-size:14cqi;display:flex;position:absolute;inset:0}.app[data-status=paused] .digit{animation:1s step-end infinite blink}@keyframes blink{50%{visibility:hidden}}.controls{flex-direction:column;align-items:center;gap:1rem;padding-bottom:.5rem;display:flex}.inputs{align-items:center;gap:.25rem;display:flex}.inputs input{width:3.5em;color:var(--input-text);font:inherit;text-align:center;background-color:var(--text-color);appearance:textfield;border:none;border-radius:4px;padding:.5em}.inputs input::-webkit-outer-spin-button{appearance:none;margin:0}.inputs input::-webkit-inner-spin-button{appearance:none;margin:0}.buttons{justify-content:center;gap:1.5rem;display:flex}.buttons button{color:var(--button-text);font:inherit;background-color:var(--button-color);cursor:pointer;border:none;border-radius:4px;padding:.5em 1.25em}.buttons button:hover,.buttons button:focus-visible{color:var(--background-color);background-color:var(--hover-button-color)}.pause,.resume,.reset,.app[data-status=running] .start,.app[data-status=paused] .start{display:none}.app[data-status=running] .pause,.app[data-status=paused] .resume,.app[data-status=running] .reset,.app[data-status=paused] .reset,.app[data-status=done] .reset{display:inline-block}.app[data-status=running] .title,.app[data-status=paused] .title,.app[data-status=running] .inputs,.app[data-status=paused] .inputs,.is-popout .title{display:none}.app[data-status=running] :is(.buttons,.popout),.app[data-status=paused] :is(.buttons,.popout){opacity:0;transition:opacity .3s}.app[data-status=running]:is(:hover,:focus-within) :is(.buttons,.popout),.app[data-status=paused]:is(:hover,:focus-within) :is(.buttons,.popout){opacity:1}.app[data-status=running] :is(.top,.controls),.app[data-status=paused] :is(.top,.controls){z-index:1;width:auto;position:absolute;left:16px;right:16px}.app[data-status=running] .top,.app[data-status=paused] .top{top:clamp(8px,2vmin,24px)}.app[data-status=running] .controls,.app[data-status=paused] .controls{bottom:clamp(8px,2vmin,24px)}.is-popout .popout{display:none}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (height<=480px),(width<=360px){.app{font-size:.875rem}.controls{gap:.5rem}}