.timer{margin-inline:auto;max-width:28rem;text-align:center}.timer-display{color:var(--color-text-heading);font-size:clamp(3rem,12vw,5rem);font-variant-numeric:tabular-nums;font-weight:300;letter-spacing:-.02em;line-height:1.1;margin-block:2rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.timer-display.done{color:var(--color-accent-red)}.timer-input-group{align-items:baseline;display:flex;gap:.25rem;justify-content:center;margin-block:2rem}.timer-input-group input{-moz-appearance:textfield;background:transparent;border:none;border-bottom:2px solid var(--color-border-light);color:var(--color-text-heading);font-size:clamp(2.5rem,10vw,4rem);font-variant-numeric:tabular-nums;font-weight:300;outline:none;padding:0;text-align:center;width:3.5rem}.timer-input-group input::-webkit-inner-spin-button,.timer-input-group input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.timer-input-group input:focus{border-bottom-color:var(--color-accent-blue)}.timer-input-group .sep{color:var(--color-text-muted);font-size:clamp(2rem,8vw,3.5rem);font-weight:300;-webkit-user-select:none;-moz-user-select:none;user-select:none}.timer-input-group .label{color:var(--color-text-muted);display:block;font-size:.75rem;letter-spacing:.08em;margin-left:-3.5rem;text-align:center;text-transform:uppercase;width:3.5rem}.timer-presets{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2rem}.preset-btn{background:var(--color-bg-primary);border:1px solid var(--color-border-light);border-radius:2rem;color:var(--color-text-secondary);cursor:pointer;font-size:.875rem;padding:.375rem .875rem;transition:background .15s,border-color .15s}.preset-btn:hover{background:var(--color-hover-bg);border-color:var(--color-border-medium)}.timer-controls{display:flex;gap:.75rem;justify-content:center;margin-bottom:2rem}.tm-btn{background:var(--color-bg-primary);border:1px solid var(--color-border-light);border-radius:.5rem;color:var(--color-text-primary);cursor:pointer;font-size:1rem;font-weight:500;min-width:6rem;padding:.75rem 2rem;transition:background .15s,border-color .15s}.tm-btn:hover{background:var(--color-hover-bg);border-color:var(--color-border-medium)}.tm-btn.primary{background:var(--color-accent-blue);border-color:var(--color-accent-blue);color:#fff}.tm-btn.primary:hover{opacity:.9}.tm-btn.danger{background:var(--color-accent-red);border-color:var(--color-accent-red);color:#fff}.tm-btn.danger:hover{opacity:.9}.timer-progress{background:var(--color-border-light);border-radius:2px;height:4px;margin-bottom:2rem;overflow:hidden;width:100%}.timer-progress-bar{background:var(--color-accent-blue);border-radius:2px;height:100%;transition:width .25s linear}.timer-progress-bar.low{background:var(--color-accent-red)}.timer-display.alarming{animation:timer-pulse 1s ease-in-out infinite}@keyframes timer-pulse{0%,to{opacity:1}50%{opacity:.4}}.timer-alarm-toggle{align-items:center;display:flex;gap:.5rem;justify-content:center;margin-bottom:1.5rem}.timer-alarm-toggle label{color:var(--color-text-muted);cursor:pointer;font-size:.8125rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.timer-alarm-toggle input[type=checkbox]{cursor:pointer}.timer-stop-alarm{background:var(--color-accent-blue);border:none;border-radius:.5rem;color:#fff;cursor:pointer;font-size:1rem;font-weight:500;margin-top:.75rem;padding:.75rem 2rem}.timer-stop-alarm:hover{opacity:.9}.hidden{display:none!important}