:root{font-family:Manrope,Arial,sans-serif;color:#20262a;background:#f3f6f6;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #00a1a8;outline-offset:4px}header{max-width:1400px;margin:auto;padding:24px 42px;display:flex;align-items:center;gap:24px}header img{width:148px;height:100px;object-fit:contain;mix-blend-mode:multiply}.brand{font-size:25px;letter-spacing:.12em;border-left:1px solid #cbd5d6;padding-left:25px;font-weight:800}.brand span{display:block;font-size:12px;letter-spacing:.16em;margin-top:4px;font-weight:500}header>button{margin-left:auto}main{max-width:1400px;padding:10px 42px 30px;margin:auto;display:grid;grid-template-columns:minmax(340px, .85fr) minmax(0,1.4fr);gap:24px}.setup{background:white;border:1px solid #e0e7e7;padding:30px;border-radius:18px}.section-head{display:flex;gap:12px;align-items:center;justify-content:space-between}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.15em}.pill{font-size:12px;color:#00777c;background:#e6f6f5;padding:7px 10px;border-radius:20px}h1{font-size:32px;letter-spacing:-.04em;margin:16px 0 26px}h2{font-size:16px;margin:0 0 16px}fieldset{border:0;padding:0;margin:0;min-width:0}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.fields label{display:flex;flex-wrap:wrap;justify-content:space-between;font-size:14px;font-weight:700;gap:5px}.fields label span{font-size:12px;color:#6c777c;font-weight:400}.fields input{width:100%;height:47px;background:#f4f7f7;border:1px solid #dfe5e5;border-radius:8px;padding:8px 12px;font-size:21px;font-weight:700;color:#20262a}.save-row{display:flex;gap:8px;margin-top:24px}input#training-name{min-width:0;width:100%;border:1px solid #d9e1e1;border-radius:8px;padding:10px;font-size:14px}.quiet,.secondary{border:1px solid #cbd7d7;background:transparent;border-radius:8px;padding:11px 15px;color:inherit;font-size:14px;font-weight:700}.saved-label{display:block;font-size:14px;margin-top:16px}select{background:white;border:1px solid #d9e1e1;border-radius:8px;padding:11px;color:#243035;max-width:100%}.saved-label select{display:block;width:100%;margin-top:8px}.preset-actions{display:flex;gap:16px}.text-button{border:0;background:none;color:inherit;padding:12px 0;font-size:14px;text-decoration:underline;text-underline-offset:4px}.sound{border-top:1px solid #e2e8e8;margin-top:16px;padding-top:22px}.sound-row{display:flex;gap:10px}.sound-row select{flex:1;min-width:0}.check{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:14px;cursor:pointer}.check input{width:20px;height:20px;accent-color:#009fa5}.note{font-size:12px;color:#647176;line-height:1.6;margin-bottom:0}.timer{background:#122529;color:#fff;border-radius:18px;padding:32px;display:flex;flex-direction:column;position:relative;overflow:hidden;--accent:#48d9d5;min-height:660px}.timer[data-phase=work]{--accent:#48e2a9}.timer[data-phase=rest],.timer[data-phase=break]{--accent:#ffce7c}.timer[data-phase=done]{--accent:#48e2a9}.timer-top{display:flex;justify-content:space-between;align-items:center;gap:14px}.timer-top .eyebrow{color:#c2d7d9}.live-state{border:1px solid #466164;border-radius:20px;padding:7px 10px;font-size:12px;letter-spacing:.08em}.clock-wrap{margin:auto 0;text-align:center;padding:50px 0}.stage{color:var(--accent);font-size:24px;font-weight:600}#clock{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:600;font-size:clamp(85px,12vw,176px);font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.025em;margin:12px 0 18px}#position{font-size:16px;color:#c1d2d4}#position span{padding:0 12px;color:#648387}.progress-track{height:5px;border-radius:5px;background:#2c4448;overflow:hidden}#progress{height:100%;background:var(--accent);width:0;transition:width .15s linear}.timer-meta{display:flex;justify-content:space-between;padding:22px 0 30px;gap:16px}.timer-meta span{display:block;font-size:12px;color:#a7bfc2;letter-spacing:.08em}.timer-meta strong{display:block;font-size:19px;margin-top:8px;font-weight:600}.next{text-align:right}.controls{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.primary{border:0;background:#00a6aa;color:white;border-radius:9px;padding:18px 22px;font-weight:800;font-size:16px}.controls .primary{width:100%;background:var(--accent);color:#122529;display:flex;justify-content:space-between;align-items:center}.controls .secondary{border-color:#5a7175;color:#eefafa}.timer-foot{text-align:center;font-size:12px;letter-spacing:.2em;color:#a1b9bc;margin:27px 0 0}.timer-foot b{color:var(--accent);padding:0 10px}.message{font-size:14px;text-align:center;color:#d0e6e7;line-height:1.5}.message:not(:empty){margin-top:18px}.sequence{grid-column:1/-1;border-top:1px solid #d8e2e2;padding:26px 0;display:flex;gap:50px;align-items:center}.sequence h2{font-size:22px;margin:8px 0 0}.sequence p{color:#526367;line-height:1.8;max-width:820px;margin:0;font-size:14px}footer{max-width:1400px;margin:auto;padding:0 42px 24px;color:#627479;font-size:12px;display:flex;justify-content:space-between;gap:20px}dialog{border:0;border-radius:16px;padding:28px;max-width:calc(100% - 32px)}dialog::backdrop{background:#001b22aa}dialog>div{display:flex;gap:12px}dialog p{line-height:1.6}dialog .primary{padding:12px 20px}[hidden]{display:none!important}@media(min-width:1600px){#clock{font-size:176px}}@media(max-width:900px){header{padding:14px 20px}main{padding:10px 20px;grid-template-columns:1fr 1.1fr;gap:16px}.setup,.timer{padding:22px}.fields{grid-template-columns:1fr}.timer{min-height:640px}.section-head{flex-wrap:wrap}h1{font-size:28px}#clock{font-size:100px}.timer-meta{flex-direction:column}.next{text-align:left}.sequence{gap:24px}footer{padding:20px}}@media(max-width:650px){header img{width:105px;height:75px}.brand{font-size:20px;padding-left:15px}.brand span{font-size:10px}header{gap:12px}header>button{font-size:12px;padding:9px}main{grid-template-columns:1fr}.timer{grid-row:1;min-height:500px}.clock-wrap{padding:30px 0}#clock{font-size:120px}.timer-meta{flex-direction:row}.timer-meta span{font-size:10px}.timer-meta strong{font-size:16px}.next{text-align:right}.fields{grid-template-columns:1fr 1fr}.sequence{flex-direction:column;align-items:flex-start;gap:14px}footer{flex-direction:column}.setup{padding:24px}.timer-top .eyebrow{font-size:10px}.live-state{font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.volume-label{display:flex;justify-content:space-between;font-size:14px;margin:22px 0 10px}.volume-label output{font-weight:800;color:#007d83}#volume{width:100%;accent-color:#009fa5;height:28px}.check:has(input:disabled){opacity:.65}.sound-row select{font-size:14px}#clock{font-family:Arial,sans-serif;font-weight:700;font-size:clamp(76px,10vw,145px)}@media(max-width:650px){#clock{font-size:clamp(76px,23vw,120px)}}

.setup,.timer{min-width:0}@media(max-width:900px){main{grid-template-columns:minmax(0,1fr)}.timer{grid-row:1;min-height:520px}.fields{grid-template-columns:1fr 1fr}.timer-meta{flex-direction:row}.next{text-align:right}.clock-wrap{padding:35px 0}.sequence{flex-wrap:wrap}}

.timer[data-phase=work]{--accent:#48d9d5}
.timer[data-phase=rest],.timer[data-phase=break],.timer[data-phase=cool]{background:#009fa5;color:#122529;--accent:#122529}
.timer:is([data-phase=rest],[data-phase=break],[data-phase=cool]) :is(.eyebrow,#position,.timer-meta span,.timer-foot,.message){color:#122529}
.timer:is([data-phase=rest],[data-phase=break],[data-phase=cool]) :is(.live-state,.secondary){border-color:#165b60;color:#122529}
.timer:is([data-phase=rest],[data-phase=break],[data-phase=cool]) .primary{background:#122529;color:#fff}
.timer:is([data-phase=rest],[data-phase=break],[data-phase=cool]) .progress-track{background:#ffffff55}
#exit-fullscreen{display:none;align-self:flex-end;margin-bottom:18px;color:inherit}
.timer:fullscreen{width:100%;height:100%;min-height:0;border-radius:0;padding:clamp(18px,4vh,48px) clamp(20px,5vw,80px);overflow:auto}
.timer:fullscreen #exit-fullscreen{display:block}
.timer:fullscreen .clock-wrap{padding:8px 0}
.timer:fullscreen #clock{font-size:clamp(90px,min(24vw,31vh),360px)}
.timer:fullscreen .stage{font-size:clamp(22px,4vh,48px)}
.timer:fullscreen #position{font-size:clamp(16px,2.8vh,28px)}
.timer:fullscreen .controls .primary{width:auto;min-width:280px;justify-content:center}
.timer:fullscreen .timer-foot{display:none}
@media(max-height:550px){.timer:fullscreen{padding:12px 24px}.timer:fullscreen #exit-fullscreen{margin-bottom:8px}.timer:fullscreen .timer-meta{padding:10px 0}.timer:fullscreen #clock{margin:0;font-size:26vh}.timer:fullscreen .primary{padding:12px 20px}}