.timer-shell{color:#15171b;background:#f5f5f7;min-height:100vh}.timer-topbar{z-index:20;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffeb;border-bottom:1px solid #e4e5e8;grid-template-columns:1fr auto 1fr;align-items:center;height:72px;padding:0 max(28px,50vw - 580px);display:grid;position:sticky;top:0}.timer-brand{color:#181a1e;align-items:center;gap:9px;width:max-content;text-decoration:none;display:flex}.timer-brand span{color:#8da8ff;background:#1d1d1f;border-radius:9px;place-items:center;width:30px;height:30px;font-size:9px;font-weight:900;display:grid}.timer-brand b{letter-spacing:-.04em;font-size:18px}.timer-topbar nav{gap:7px;display:flex}.timer-topbar nav a{color:#777d86;border-radius:9px;padding:8px 13px;font-size:12px;font-weight:650;text-decoration:none}.timer-topbar nav a.active{color:#181a1e;background:#efeff2}.timer-topbar>label{background:#fff;border:1px solid #dddfe4;border-radius:10px;justify-self:end;align-items:center;gap:7px;height:35px;padding:0 9px;display:flex}.timer-topbar label span{color:#7b828c;font-size:9px}.timer-topbar select{background:0 0;border:0;outline:0;max-width:100px;font-size:10px;font-weight:700}.timer-main{width:min(780px,100%);margin:0 auto;padding:48px 22px 80px}.timer-heading{text-align:center}.timer-heading>p{color:#315ee8;letter-spacing:.15em;margin:0;font-size:9px;font-weight:850}.timer-heading h1{letter-spacing:-.06em;margin:12px 0 8px;font-size:clamp(38px,7vw,60px)}.timer-heading span{color:#747b84;font-size:13px}.timer-mode{background:#e9eaed;border-radius:12px;width:max-content;margin:30px auto 18px;padding:4px;display:flex}.timer-mode button{color:#747b84;cursor:pointer;background:0 0;border:0;border-radius:9px;padding:9px 15px;font-size:10px;font-weight:750}.timer-mode button.active{color:#17191d;background:#fff;box-shadow:0 2px 8px #18203910}.timer-stage{text-align:center;background:#fff;border:1px solid #e0e1e5;border-radius:28px;padding:28px 34px 32px;box-shadow:0 24px 70px #13172212}.timer-stage.phase-work{background:linear-gradient(#f7f9ff,#fff);border-color:#b9c8f8}.timer-stage.phase-rest{background:linear-gradient(#fff8f3,#fff);border-color:#f1cdb7}.timer-stage.phase-complete{background:linear-gradient(#f4fcf8,#fff);border-color:#b8dfd0}.timer-status{justify-content:space-between;align-items:center;display:flex}.timer-status span{color:#315ee8;letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:850}.phase-rest .timer-status span{color:#d46c31}.phase-complete .timer-status span{color:#25805e}.timer-status b{color:#727985;font-size:10px}.rep-count{color:#315ee8;justify-content:center;align-items:baseline;gap:5px;margin:16px 0 -10px;display:flex}.rep-count b{font-size:30px}.rep-count span{font-size:10px;font-weight:750}.timer-clock{font-variant-numeric:tabular-nums;letter-spacing:-.075em;margin:28px 0 8px;font-size:clamp(72px,16vw,124px);font-weight:700;line-height:.9}.timer-stage>p{color:#8a9099;margin:19px 0 26px;font-size:10px}.timer-controls{justify-content:center;gap:9px;display:flex}.timer-controls button{cursor:pointer;border-radius:13px;height:48px;padding:0 20px;font-size:11px;font-weight:800}.timer-primary{color:#fff;background:#1d1d1f;border:0;min-width:150px}.timer-secondary{color:#606771;background:#fff;border:1px solid #dfe1e6}.timer-settings{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px;display:grid}.timer-settings:has(.timer-setting:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}.timer-setting{background:#fff;border:1px solid #e0e1e5;border-radius:16px;padding:15px 12px}.timer-setting>label{color:#777e88;text-transform:uppercase;letter-spacing:.06em;min-height:22px;margin-bottom:8px;font-size:8px;font-weight:800;display:block}.timer-setting>div{grid-template-columns:28px 1fr 28px;align-items:center;gap:4px;display:grid}.timer-setting button{color:#555d67;cursor:pointer;background:#f8f8fa;border:1px solid #e0e2e7;border-radius:8px;width:28px;height:30px}.timer-setting b{font-variant-numeric:tabular-nums;text-align:center;font-size:15px}.rhythm-help{color:#667499;background:#edf2ff;border-radius:12px;justify-content:space-between;gap:14px;margin:12px 0 0;padding:13px 15px;font-size:9px;line-height:1.5;display:flex}.rhythm-help b{color:#315ee8;flex:none}.timer-presets{background:#fff;border:1px solid #e0e1e5;border-radius:16px;margin-top:16px;padding:16px}.timer-presets>span{color:#7a818b;margin-bottom:10px;font-size:9px;font-weight:800;display:block}.timer-presets>div{flex-wrap:wrap;gap:7px;display:flex}.timer-presets button{color:#555d68;cursor:pointer;background:#fafafd;border:1px solid #dfe2e7;border-radius:9px;padding:8px 10px;font-size:9px;font-weight:750}.timer-tip{text-align:center;color:#868d96;margin:18px 0 0;font-size:9px}@media (max-width:720px){.timer-topbar{grid-template-columns:1fr auto;height:auto;min-height:64px;padding:9px 14px}.timer-topbar nav{grid-area:2/1/auto/3;justify-content:center;overflow:auto}.timer-topbar nav a{padding:7px 9px;font-size:10px}.timer-topbar>label span{display:none}.timer-main{padding:34px 12px 60px}.timer-stage{border-radius:22px;padding:24px 14px 26px}.timer-clock{font-size:22vw}.timer-controls button{padding:0 13px}.timer-primary{min-width:120px}:is(.timer-settings,.timer-settings:has(.timer-setting:nth-child(3):last-child)){grid-template-columns:1fr 1fr}.timer-setting>label{min-height:18px}.rhythm-help{flex-direction:column;align-items:flex-start}.timer-presets>div{grid-template-columns:1fr 1fr;display:grid}.timer-presets button{height:38px}}@media (max-width:390px){.timer-mode button{padding:9px 10px;font-size:9px}.timer-topbar nav a{padding:7px 6px}.timer-controls{gap:6px}.timer-controls button{padding:0 10px}.timer-primary{min-width:105px}}.timer-clock{font-size:clamp(68px,14vw,110px)}@media (max-width:720px){.timer-clock{font-size:18vw}}
