:root{--accent:#0e766c;--accent-soft:#e8f6f1;--line:#d7e5e0;background:#f4f8f5}.timer-intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.timer-intro h1{margin-bottom:8px}.timer-intro p{margin-bottom:0}.timer-intro img{width:110px;height:110px;object-fit:contain}.timer-workspace{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);gap:22px}.timer-face{padding:24px 32px 27px;background:#133c37;color:#f5fffb;border-radius:24px;position:relative;overflow:hidden}.timer-top{display:flex;justify-content:space-between;gap:10px;font-size:.875rem;color:#d4e8dd}.timer-badge{font-size:.75rem;padding:2px 9px;border:1px solid #86a49955;border-radius:99px}.task-field{display:block;margin:18px 0 0}.task-field input{font-size:1.15rem;text-align:center;background:transparent;color:#fff;border:0;border-bottom:1px solid #cfeddf30;width:100%;padding:9px;outline-offset:4px}.task-field input::placeholder{color:#c7ded2}.clock-wrap{width:min(100%,300px);aspect-ratio:1;position:relative;margin:20px auto 23px}.clock-ring{width:100%;height:100%;transform:rotate(-90deg)}.clock-ring circle{fill:none;stroke-width:5}.ring-track{stroke:#315650}.ring-progress{stroke:#aee3c0;stroke-linecap:round;stroke-dasharray:798;stroke-dashoffset:0}.clock-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.clock-center output{font-size:clamp(3.7rem,6.5vw,5.2rem);line-height:1.25;font-weight:650;letter-spacing:-.07em;font-variant-numeric:tabular-nums}.clock-center span{font-size:.875rem;color:#c7ded2;margin-top:10px}.timer-buttons{display:flex;gap:12px}.timer-buttons .primary{flex:1;background:#c5e9b7;color:#17392d;border-radius:12px}.reset-button{border:1px solid #7d9c9455;border-radius:12px;background:transparent;color:#e9f5ee;padding:10px 18px;font-size:.9375rem;min-height:48px}.timer-settings{align-self:start;padding:25px}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}.preset-grid button{background:#f7faf8;border:1px solid var(--line);border-radius:12px;padding:12px 8px;font-weight:800;font-size:1.05rem;min-height:76px}.preset-grid button span{display:block;font-size:.8125rem;font-weight:500;color:var(--muted);margin-top:3px}.preset-grid .selected{background:#e6f4ed;border:1.5px solid #558d76;color:#135a46}.timer-settings .secondary{width:100%;margin-top:-3px;margin-bottom:15px}.timer-note{border-top:1px solid var(--line);padding-top:18px;margin-top:20px}.timer-note b{font-size:.9375rem}.timer-note p{font-size:.875rem;color:var(--muted);margin:6px 0 0}@media(max-width:700px){.timer-intro img{width:80px;height:80px}.timer-intro p{font-size:.9375rem}.timer-workspace{grid-template-columns:1fr;gap:17px}.timer-face{padding:21px 22px 23px}.clock-wrap{width:245px;margin:12px auto 18px}.clock-center output{font-size:4.3rem}.timer-settings{padding:20px}.preset-grid{grid-template-columns:repeat(4,1fr);gap:7px}.preset-grid button{font-size:1rem;min-height:70px}.preset-grid button span{font-size:.75rem}}@media(max-width:370px){.preset-grid{grid-template-columns:1fr 1fr}.timer-intro img{width:60px}}