:root{--navy:#17233e;--coral:#ff7967;--lime:#ddf477}.intro{padding:48px 0 30px}.intro h1{font-size:clamp(32px,5vw,56px);line-height:1.15;margin:18px 0}.intro em{font-style:normal;color:#2357d9}.intro p{font-size:16px}.timer-app{background:var(--navy);color:#fff;border:2px solid var(--navy);box-shadow:7px 7px 0 #b8c4d7;padding:28px;text-align:center;--accent:var(--lime)}.timer-app.light{background:#fffdf6;color:var(--navy);--accent:#2357d9}.display-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}.display-head>div{display:flex;gap:8px}.timer-app button{font:inherit;font-weight:700;font-size:15px;min-height:44px;padding:10px 18px;border:1px solid #8290aa;border-radius:6px;background:transparent;color:inherit;cursor:pointer}.timer-app button:hover{background:#8290aa33}.timer-app button:focus-visible,.timer-app input:focus-visible{outline:3px solid var(--coral);outline-offset:3px}.timer-app button:disabled{opacity:.45;cursor:not-allowed}.session-title{display:block;width:100%;margin:26px auto 0;border:0;background:transparent;color:inherit;text-align:center;font:inherit;font-size:clamp(20px,3vw,32px);font-weight:700}.session-title::placeholder{color:inherit;opacity:.65}#status{font-size:16px;margin:16px 0 0}.clock{font-family:Arial,sans-serif;font-size:clamp(70px,15vw,210px);font-weight:800;line-height:1.2;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--accent);white-space:nowrap}.timer-app.urgent .clock{color:var(--coral)}.timer-app.finished{border-color:var(--coral)}.progress{height:9px;background:#8290aa44;border-radius:9px;margin:12px auto 26px;max-width:900px;overflow:hidden}#bar{height:100%;width:100%;background:var(--accent)}.controls{display:flex;justify-content:center;gap:12px}.timer-app .primary{background:var(--accent);color:var(--navy);min-width:145px}.timer-app.light .primary{color:white}#message{min-height:24px;font-size:15px}.settings{border-top:1px solid #8290aa66;padding-top:24px}.preset{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}#timeForm{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin:22px 0}#timeForm label{display:flex;align-items:center;gap:8px;font-size:16px}#timeForm input{width:85px;padding:10px;background:#fff;color:var(--navy);border:1px solid #8290aa;border-radius:4px;font:inherit;min-height:44px}.sound-options{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:16px;font-size:16px}.sound-options label{display:flex;align-items:center;gap:8px;min-height:44px}.sound-options input{width:20px;height:20px}.keyboard{font-size:13px;opacity:.8;margin:22px 0 0}.guide{padding:50px 0}.guide h2{font-size:28px}.guide>div{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.guide h3{font-size:18px}.guide p{font-size:16px;line-height:1.8}.timer-app:fullscreen,.timer-app.focus-mode{width:100%;height:100%;padding:24px;display:flex;flex-direction:column;justify-content:center;box-shadow:none;overflow:auto}.timer-app:fullscreen .clock,.focus-mode .clock{font-size:min(24vw,40vh)}.timer-app:fullscreen .settings,.timer-app:fullscreen .keyboard,.focus-mode .settings,.focus-mode .keyboard{display:none}.timer-app.focus-mode{position:fixed;inset:0;z-index:1000}.timer-app:fullscreen .display-head,.focus-mode .display-head{position:absolute;top:20px;left:24px;right:24px}.timer-app:fullscreen .session-title,.focus-mode .session-title{margin-top:60px}@media(max-width:600px){.intro{padding-top:30px}.timer-app{padding:18px 12px;box-shadow:4px 4px 0 #b8c4d7}.display-head{flex-direction:column}.display-head button{padding:8px 12px}.clock{font-size:clamp(56px,18vw,105px)}.controls{gap:8px}.controls button{padding:10px 12px}.timer-app .primary{min-width:110px}.guide>div{grid-template-columns:1fr;gap:12px}.keyboard{line-height:1.8}.timer-app:fullscreen .clock,.focus-mode .clock{font-size:min(19vw,35vh)}.timer-app:fullscreen .display-head,.focus-mode .display-head{position:static}.timer-app:fullscreen .session-title,.focus-mode .session-title{margin-top:20px}}
/* Keep the tool-list link available on small screens. */
@media(max-width:600px){.tool-header{display:flex;justify-content:space-between;align-items:center;padding:16px;min-height:72px}.tool-header .back-home{display:inline-flex;font-size:14px;min-height:44px;align-items:center}.tool-logo small{display:none}.tool-footer a{font-size:14px}}

.timer-help{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;margin-top:8px;border:1px solid #17233e;color:#17233e;font-size:15px;font-weight:700;text-decoration:none;background:#ddf477}.timer-help:hover{background:#edf8b5}.timer-help:focus-visible{outline:3px solid #2357d9;outline-offset:3px}