:root{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color:#ece9df;background:#191a18;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-width:240px}button,input{font:inherit}main{min-height:100svh;display:grid;place-items:center;padding:36px 24px}.timer{width:min(100%,440px);display:grid;justify-items:center;position:relative;gap:48px}.dial{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center}.ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}.ring circle{fill:none;stroke-width:3}.track{stroke:#343530}.progress{stroke:#e4e0d3;stroke-linecap:round}.minutes{position:relative;width:77%;padding:12px 0;border:0;border-radius:12px;outline:0;background:transparent;color:inherit;text-align:center;font-size:clamp(72px,20vw,132px);font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:-.065em;line-height:1.1;caret-color:#aaa69a}.minutes::selection{background:#4a4a40;color:#fffdf5}.minutes:focus-visible{outline:1px solid #747369;outline-offset:4px}.controls{display:flex;align-items:center;gap:24px}.control{display:grid;place-items:center;width:56px;height:56px;padding:0;border:1px solid #4b4b43;border-radius:50%;background:transparent;color:#e4e0d3;cursor:pointer;transition:background .16s,border-color .16s,opacity .16s;-webkit-tap-highlight-color:transparent}.control svg{width:22px;height:22px}.play{background:#e4e0d3;border-color:#e4e0d3;color:#23241f}.play svg{fill:currentColor;transform:translate(-1px)}.reset svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.control:hover:enabled{background:#393a33;border-color:#8c8b7e}.play:hover:enabled{background:#f8f4e8;border-color:#f8f4e8}.control:focus-visible{outline:2px solid #e4e0d3;outline-offset:6px}.control:disabled{opacity:.3;cursor:default}.error{position:absolute;top:100%;margin:24px 0 0;width:100%;text-align:center;color:#e6b5a7;font-size:13px;line-height:1.5}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-height:620px){.timer{width:min(100%,52svh);gap:28px}.minutes{font-size:min(20vw,20svh)}}@media(prefers-reduced-motion:reduce){.control{transition:none}}
