@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans','Noto Sans SC',sans-serif;color:#34433b;background:#f6f5ef;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--ink:#34433b;--muted:#8d968d;--green:#72917b;--green-dark:#55735e;--sage:#e7ede5;--paper:#fbfaf6;--line:#e6e8df;--mono:'DM Mono',monospace}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse at 50% 44%,#fbfaf5 0%,#f6f5ef 66%,#f1f2e9 100%)}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #a9c2aa;outline-offset:3px}.app-shell{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding:clamp(24px,4.2vw,56px) clamp(24px,6.5vw,96px) 32px}.topbar,.bottom-bar{display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font-size:15px;font-weight:600;letter-spacing:.04em}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:11px;background:#e5ece3;color:#66816c;font-size:20px}.setting-trigger{display:flex;align-items:center;gap:11px;border:1px solid #e6e8df;border-radius:16px;padding:10px 13px;background:rgba(255,255,255,.56);cursor:pointer;transition:.2s}.setting-trigger:hover,.history-trigger:hover{border-color:#cdd8cd;background:#fff}.setting-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#edf1e9;color:var(--green-dark);font-size:21px}.setting-trigger small,.setting-trigger strong{display:block;text-align:left}.setting-trigger small{margin-bottom:2px;color:var(--muted);font-size:10px}.setting-trigger strong{font-size:13px;font-weight:600}.chevron{margin-left:5px;color:#849184;font-size:16px}.focus-stage{position:absolute;top:50%;left:50%;display:flex;width:min(760px,calc(100% - 40px));flex-direction:column;align-items:center;transform:translate(-50%,-49%);text-align:center}.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:18px;color:#829083;font-size:13px;letter-spacing:.12em}.status-dot,.live-dot{width:7px;height:7px;border-radius:50%;background:#9eb59d;box-shadow:0 0 0 4px #eaf0e8}.clock{color:#394b40;font-family:var(--mono);font-size:clamp(84px,15vw,168px);font-weight:400;letter-spacing:-.085em;line-height:1.05;font-variant-numeric:tabular-nums}.clock.is-timer{font-size:clamp(94px,16vw,180px);color:#496b53}.stage-note{min-height:24px;margin-top:20px;color:#98a096;font-size:14px;letter-spacing:.035em}.progress-track{width:min(280px,58vw);height:4px;margin-top:24px;overflow:hidden;border-radius:4px;background:#e8ebe4;opacity:0;transition:opacity .3s}.progress-track.visible{opacity:1}.progress-track span{display:block;width:0;height:100%;border-radius:4px;background:linear-gradient(90deg,#8da88c,#647f69);transition:width .5s linear}.actions{display:flex;gap:12px;margin-top:35px}.primary-button,.secondary-button{display:inline-flex;min-height:52px;align-items:center;justify-content:center;gap:11px;border:0;border-radius:17px;padding:0 25px;font-weight:600;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}.primary-button{min-width:176px;background:#72917b;color:#fff;box-shadow:0 9px 22px #6685702c}.primary-button:hover{transform:translateY(-2px);background:#66866f;box-shadow:0 12px 25px #66857038}.play-icon{font-size:10px}.secondary-button{border:1px solid #e1e6de;background:rgba(255,255,255,.64);color:#526558}.secondary-button:hover{background:white}.focus-counter{margin-top:22px;color:#99a297;font-size:12px}.bottom-bar{position:absolute;right:clamp(24px,6.5vw,96px);bottom:31px;left:clamp(24px,6.5vw,96px)}.live-time{display:flex;align-items:center;gap:11px;color:#536258;font-family:var(--mono);font-size:15px;letter-spacing:.02em}.live-dot{width:6px;height:6px;box-shadow:none}.history-trigger{display:flex;align-items:center;gap:9px;border:1px solid transparent;border-radius:12px;padding:10px 13px;background:transparent;color:#657469;font-size:13px;cursor:pointer;transition:.2s}.history-trigger>span:first-child{font-size:16px}.history-count{display:grid;min-width:20px;height:20px;place-items:center;border-radius:8px;background:#e8ede6;color:#667d69;font-family:var(--mono);font-size:11px}.ambient{position:fixed;z-index:0;width:300px;height:300px;border-radius:50%;filter:blur(85px);pointer-events:none;opacity:.17}.ambient-one{top:8%;left:-180px;background:#cbd9c6}.ambient-two{right:-200px;bottom:6%;background:#e6d9c4}.scrim[hidden]{display:none}.scrim{position:fixed;z-index:10;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:#35433b45;backdrop-filter:blur(5px);animation:fade-in .18s ease}.dialog{width:min(100%,430px);max-height:calc(100vh - 40px);max-height:calc(100svh - 40px);overflow-y:auto;border:1px solid #ffffffb3;border-radius:25px;padding:27px;background:#fbfaf7;box-shadow:0 24px 80px #34433b26;animation:rise-in .22s ease}.dialog-head{display:flex;align-items:flex-start;justify-content:space-between}.dialog-kicker{margin:0 0 6px;color:#91a08e;font-size:11px;letter-spacing:.11em}.dialog h2{margin:0;color:#3b4b40;font-size:22px;font-weight:600;letter-spacing:.01em}.icon-button{display:grid;width:34px;height:34px;place-items:center;border:0;border-radius:11px;background:#f0f1eb;color:#7c877d;font-size:23px;line-height:1;cursor:pointer}.duration-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:26px}.duration-option{display:flex;min-height:57px;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:1px solid #e7e9e1;border-radius:14px;background:#fffefa;color:#657469;cursor:pointer;transition:.16s}.duration-option strong{font-family:var(--mono);font-size:16px;font-weight:500}.duration-option span{color:#a0a79c;font-size:10px}.duration-option:hover{border-color:#b8cab9;background:#f4f7f1}.duration-option.selected{border-color:#91aa93;background:#edf3eb;color:#4e7055}.custom-label{display:flex;justify-content:space-between;margin:25px 0 10px;color:#68756b;font-size:12px}.custom-label span{color:#a1a89e;font-size:11px}.custom-row{display:flex;gap:9px}.custom-row input{width:100%;min-width:0;border:1px solid #e4e7df;border-radius:12px;padding:12px 14px;background:#fffefa;color:var(--ink);font-family:var(--mono);font-size:14px}.custom-row input::placeholder{color:#aeb4ab;font-family:'Noto Sans SC',sans-serif;font-size:12px}.small-button{flex-shrink:0;border:0;border-radius:12px;padding:0 15px;background:#e8eee6;color:#5a755f;font-size:12px;font-weight:600;cursor:pointer}.small-button:hover{background:#dce8da}.form-message{min-height:17px;margin:8px 0 0;color:#b66f5e;font-size:11px}.history-dialog{width:min(100%,480px)}.stats-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:23px 0 19px}.stat-card{display:flex;flex-direction:column;gap:7px;border:1px solid #e9eae3;border-radius:15px;padding:14px 16px;background:#f6f7f1}.stat-card span{color:#949d92;font-size:11px}.stat-card strong{color:#526b56;font-family:var(--mono);font-size:19px;font-weight:500}.record-list{display:flex;max-height:min(43vh,370px);flex-direction:column;gap:8px;overflow:auto}.record-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;border-bottom:1px solid #edeee8;padding:11px 4px}.record-meta{display:flex;flex-direction:column;gap:5px}.record-date{color:#68766b;font-size:12px}.record-time{color:#a0a79d;font-family:var(--mono);font-size:10px}.record-result{display:flex;align-items:center;gap:8px}.record-duration{color:#526b56;font-family:var(--mono);font-size:14px}.record-tag{border-radius:8px;padding:4px 7px;background:#eaf0e8;color:#789078;font-size:10px}.record-tag.early{background:#f4eee4;color:#aa8862}.empty-state{padding:37px 10px;text-align:center;color:#a2a89e;font-size:13px}.history-footer{display:flex;justify-content:space-between;margin-top:17px}.text-button{border:0;background:none;color:#768779;font-size:11px;cursor:pointer}.text-button:hover{text-decoration:underline}.danger-text{color:#b37b6d}.storage-note{margin:14px 0 0;text-align:center;color:#b0b5ad;font-size:10px}.toast{position:fixed;z-index:20;bottom:84px;left:50%;border:1px solid #ffffff80;border-radius:13px;padding:11px 16px;background:#425449eF;color:white;font-size:13px;opacity:0;pointer-events:none;transform:translate(-50%,10px);transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes rise-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:600px){.app-shell{padding:22px 20px 25px}.brand{font-size:14px}.setting-trigger{gap:8px;padding:8px 10px}.setting-icon{width:31px;height:31px}.focus-stage{top:47%;width:calc(100% - 28px)}.eyebrow{margin-bottom:14px;font-size:11px}.clock{font-size:clamp(64px,18vw,100px);letter-spacing:-.10em}.clock.is-timer{font-size:clamp(72px,21vw,112px);letter-spacing:-.12em}.stage-note{margin-top:16px;font-size:12px}.progress-track{margin-top:20px}.actions{margin-top:29px}.primary-button,.secondary-button{min-height:49px;border-radius:15px;padding:0 20px;font-size:13px}.primary-button{min-width:159px}.bottom-bar{right:20px;bottom:19px;left:20px}.live-time{gap:8px;font-size:13px}.history-trigger{gap:7px;padding:9px 8px;font-size:12px}.dialog{border-radius:22px;padding:22px}.dialog h2{font-size:20px}.duration-grid{gap:7px;margin-top:22px}.duration-option{min-height:53px;border-radius:12px}.duration-option strong{font-size:15px}.stats-row{margin-top:20px}.record-list{max-height:38vh}}
@media(max-height:620px){.focus-stage{top:48%}.eyebrow{margin-bottom:10px}.stage-note{margin-top:10px}.progress-track{margin-top:14px}.actions{margin-top:21px}.bottom-bar{bottom:16px}}



/* Per-device display controls and account settings. */
.clock{font-size:min(var(--clock-custom-size,clamp(84px,15vw,168px)),300px)}
.clock.is-timer{font-size:min(var(--clock-custom-size,clamp(94px,16vw,180px)),300px)}
.live-time{color:#46564b;font-size:var(--live-time-custom-size,15px)}
.bottom-left-group{display:flex;align-items:center;gap:15px}
.preferences-trigger{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:12px;padding:9px 11px;background:transparent;color:#536258;font-size:12px;cursor:pointer;transition:background .18s,border-color .18s}
.preferences-trigger:hover{border-color:#dce3da;background:#fffefa}
.preferences-trigger span{font-size:15px;color:#748774}
.preferences-dialog{width:min(100%,480px)}
.settings-intro{margin:12px 0 18px;color:#8c958b;font-size:12px;line-height:1.7}
.account-card{border:1px solid #e7eae2;border-radius:16px;padding:15px;background:#f7f8f3}
.account-heading{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.account-icon{display:grid;width:34px;height:34px;place-items:center;border-radius:11px;background:#e8eee5;color:#6e866f;font-size:20px}
.account-heading strong,.account-heading span{display:block}
.account-heading strong{color:#526356;font-size:12px;font-weight:600}
.account-heading div>span{margin-top:3px;color:#9ba398;font-size:10px}
.account-form{display:grid;grid-template-columns:1fr;gap:7px}
.account-form label{display:flex;align-items:baseline;justify-content:space-between;margin-top:4px;color:#68766a;font-size:11px}
.account-form label span{color:#a0a79e;font-size:10px}
.account-form input{width:100%;border:1px solid #e3e7de;border-radius:11px;padding:10px 12px;background:#fffefa;color:#35443a;font-size:13px}
.account-form input::placeholder{color:#b0b5ac;font-size:11px}
.account-actions{display:flex;align-items:center;gap:12px;margin-top:7px}
.account-logged-in{display:flex;align-items:center;justify-content:space-between;color:#788477;font-size:11px}
.account-logged-in strong{color:#4e6a53;font-weight:600}
.account-message{min-height:16px;margin:7px 0 0;color:#a87462;font-size:10px}
.appearance-settings{margin-top:21px}
.push-settings{display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px 12px;margin-top:17px;border:1px solid #e7eae2;border-radius:15px;padding:13px 15px;background:#f7f8f3}
.push-settings strong,.push-settings span{display:block}
.push-settings strong{color:#4d5c50;font-size:12px;font-weight:600}
.push-settings span{margin-top:4px;color:#929c91;font-size:10px;line-height:1.5}
.push-note{grid-column:1/-1;margin:2px 0 0;color:#a2aaa0;font-size:9px;line-height:1.5}
.appearance-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.appearance-heading strong,.appearance-heading span{display:block}
.appearance-heading strong{color:#4d5c50;font-size:13px;font-weight:600}
.appearance-heading div>span{margin-top:4px;color:#a0a79e;font-size:10px}
.range-row{display:flex;align-items:center;justify-content:space-between;margin:13px 0 7px;color:#728074;font-size:11px}
.range-value{color:#5f765f;font-family:var(--mono);font-size:11px}
.size-range{display:block;width:100%;height:5px;margin:0 0 17px;appearance:none;border-radius:5px;background:#e4e9e1;cursor:pointer}
.size-range::-webkit-slider-thumb{width:16px;height:16px;appearance:none;border:3px solid #fbfaf7;border-radius:50%;background:#78927a;box-shadow:0 0 0 1px #9db19c}
.size-range::-moz-range-thumb{width:12px;height:12px;border:3px solid #fbfaf7;border-radius:50%;background:#78927a;box-shadow:0 0 0 1px #9db19c}
.account-logged-in[hidden],.account-form[hidden]{display:none}
@media(max-width:600px){.clock{font-size:min(var(--clock-custom-size,clamp(64px,18vw,100px)),300px)}.clock.is-timer{font-size:min(var(--clock-custom-size,clamp(72px,21vw,112px)),300px)}.live-time{color:#46564b;font-size:var(--live-time-custom-size,13px)}.bottom-left-group{gap:5px}.preferences-trigger{gap:5px;padding:8px 7px;font-size:11px}}