.timer-main{max-width:700px;margin:14px auto 60px;padding:0 24px;text-align:center}.timer-main h1{font-size:clamp(2.2rem,5.5vw,3.9rem);line-height:1.08;margin:14px 0 18px}.intro{font-size:1rem;margin-bottom:30px}.timer-panel{background:var(--pink);border:1px solid var(--green);border-radius:24px;padding:30px 38px}#status{font-weight:700;font-size:1rem;min-height:27px}#clock{font-size:clamp(4.4rem,16vw,7.5rem);line-height:1.3;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.065em}.progress-track{height:6px;background:#005a2d24;border-radius:8px;overflow:hidden;margin:12px 0 30px}#progress{width:0;height:100%;background:var(--green)}.timer-actions{display:flex;gap:14px}.timer-actions .button{flex:1;justify-content:center;border:0;font:inherit;font-weight:700;cursor:pointer}.reset{background:transparent;border:1px solid var(--green);border-radius:50px;padding:15px 22px;color:var(--dark);font:inherit;font-size:.875rem;cursor:pointer}fieldset{margin:32px 0 16px;padding:24px 0 0;border:0;border-top:1px solid var(--line)}legend{padding:0 14px;font-size:.875rem;font-weight:700}.presets{display:flex;gap:12px;justify-content:center;margin-bottom:24px}.presets button{flex:1;padding:12px 16px;border:1px solid var(--green);border-radius:40px;background:transparent;color:var(--dark);font:inherit;font-weight:600;cursor:pointer}.presets button[aria-pressed=true]{background:var(--green);color:var(--cream)}.custom-time{display:flex;align-items:end;gap:12px;text-align:left}.custom-time label{font-size:.8125rem;font-weight:600;flex:1;min-width:0}.custom-time input{display:block;width:100%;margin-top:8px;padding:12px 8px;border:1px solid var(--green);border-radius:10px;background:var(--cream);font:inherit;font-size:1.2rem;text-align:center;color:var(--dark)}.custom-time>span{padding-bottom:15px}.custom-time button{min-height:50px;background:var(--cream);color:var(--dark);font:inherit;font-size:.875rem;font-weight:600;border:1px solid var(--green);border-radius:10px;padding:10px 14px;cursor:pointer}.error{font-size:.875rem;margin-top:12px}.error:empty{display:none}.sound{display:inline-flex;align-items:center;gap:10px;font-size:.875rem;min-height:40px;cursor:pointer}.sound input{accent-color:var(--green);width:20px;height:20px}.timer-hint{font-size:.8125rem;margin-top:6px}.timer-footer{margin-top:24px;font-weight:700;font-size:.9375rem}button:focus-visible,input:focus-visible{outline:3px solid var(--orange);outline-offset:4px}button:disabled{opacity:.55;cursor:default}fieldset:disabled{opacity:.6}.timer-panel.done{background:var(--green);color:var(--cream)}.done .button{background:var(--cream);color:var(--dark)}.done .reset{color:var(--cream);border-color:var(--cream)}.done fieldset,.done .sound,.done .timer-hint{display:none}.done #progress{background:var(--pink)}@media(max-width:450px){.timer-main{padding:0 16px}.timer-panel{padding:26px 20px}.custom-time{flex-wrap:wrap}.custom-time button{width:100%}.timer-actions{flex-direction:column}.reset{padding:12px}.intro br{display:none}}

.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left;margin-bottom:24px}.mode-grid button{font:inherit;text-align:left;background:transparent;color:var(--dark);border:1px solid var(--green);border-radius:16px;padding:20px;cursor:pointer}.mode-grid button>*{display:block}.mode-grid small{font-size:.75rem;letter-spacing:.08em}.mode-grid strong{font-size:1.2rem;margin:10px 0 6px}.mode-grid span{font-size:.8125rem;line-height:1.4}.mode-grid b{font-size:.875rem;margin-top:16px}.mode-grid button[aria-pressed=true]{background:var(--green);color:var(--cream)}#settings{margin-top:0;border:0;padding-top:14px}#water{font-size:1rem;font-weight:600}#settings:disabled{opacity:1}#settings button:disabled{opacity:.6}@media(max-width:400px){.mode-grid button{padding:15px}.mode-grid strong{font-size:1.05rem}}