:root{--paper:#f4f1ea;--ink:#20231f;--muted:#77796f;--line:#dcd8ce;--card:#fbfaf6;--accent:#d74f3f;--accent-dark:#bd4033;--green:#526d5a;--shadow:0 18px 50px rgba(42,38,30,.08)}
*{box-sizing:border-box}html{font-family:Manrope,sans-serif;background:var(--paper);color:var(--ink)}body{margin:0;min-height:100vh;background:radial-gradient(circle at 10% 0%,#fff 0,transparent 30%),var(--paper)}
button,input{font:inherit}button{color:inherit}.page{max-width:1180px;margin:auto;padding:0 34px 48px}header{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;font-size:20px;letter-spacing:-.5px}.brand-mark{display:grid;place-items:center;width:31px;height:31px;border:1.5px solid var(--ink);border-radius:50%;font-family:"DM Mono";font-size:15px}.header-actions{display:flex;gap:8px}.icon-button{width:40px;height:40px;display:grid;place-items:center;border:0;background:transparent;border-radius:50%;cursor:pointer}.icon-button:hover{background:#e9e5dc}.icon-button svg,.timer-controls svg,.task-form svg,.task-item svg{width:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
main{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(300px,.68fr);gap:24px;padding-top:28px}.timer-panel{min-height:500px;background:var(--ink);color:#f8f5ed;border-radius:24px;padding:24px;display:flex;flex-direction:column;align-items:center;box-shadow:var(--shadow)}
.mode-tabs{background:rgba(255,255,255,.07);padding:4px;border-radius:100px;display:flex}.mode-tab{border:0;background:transparent;color:#aaa99f;border-radius:100px;padding:9px 17px;font-size:12px;font-weight:600;cursor:pointer}.mode-tab.active{background:#f8f5ed;color:var(--ink)}.timer-copy{margin:auto;text-align:center}.eyebrow{text-transform:uppercase;letter-spacing:1.8px;font-size:11px;font-weight:700;color:var(--muted);margin:0 0 8px}.timer-panel .eyebrow{color:#aaa99f}.timer{font-family:"DM Mono",monospace;font-size:clamp(78px,10vw,132px);line-height:1;letter-spacing:-8px;font-weight:500;margin:14px 0 25px}.focus-line{display:flex;align-items:center;justify-content:center;gap:9px;color:#bcbcb3;font-size:13px}.focus-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;flex:0 0 auto}.timer-controls{display:flex;gap:12px;align-items:center}.primary-button,.secondary-button{height:54px;border:0;border-radius:100px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700}.primary-button{min-width:182px;background:var(--accent);color:white}.primary-button:hover{background:var(--accent-dark)}.secondary-button{background:rgba(255,255,255,.09);color:#e5e2da}.square{width:54px}.secondary-button:hover{background:rgba(255,255,255,.15)}.hidden{display:none}.shortcut{color:#83847e;font-size:11px;margin:15px 0 0}kbd{border:1px solid #60615c;border-radius:4px;padding:1px 5px;font-family:inherit}
.stats-panel{display:flex;flex-direction:column;gap:16px}.today-card,.progress-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px}.today-card{display:flex;align-items:center;justify-content:space-between;min-height:150px}.date{margin:0;font-size:14px;color:var(--muted)}.session-count{text-align:right}.session-count strong{display:block;font-family:"DM Mono";font-size:52px;line-height:1}.session-count span{font-size:12px;color:var(--muted)}.progress-card{flex:1}.progress-header{display:flex;justify-content:space-between;font-size:13px}.progress-header strong{font-family:"DM Mono"}.progress-track{height:7px;background:#e5e1d8;border-radius:10px;margin:20px 0 14px;overflow:hidden}.progress-track div{height:100%;width:0;background:var(--green);border-radius:10px;transition:width .4s}.progress-card p{font-size:12px;color:var(--muted);margin:0}
.tasks-panel{grid-column:1/-1;margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px 30px}.section-title{display:flex;justify-content:space-between;align-items:flex-end}.section-title h1,.dialog-header h2{font-size:28px;letter-spacing:-1px;margin:0}.text-button{border:0;background:transparent;color:var(--muted);font-size:12px;cursor:pointer}.text-button:hover{color:var(--accent)}.task-form{margin:24px 0 12px;display:flex;border-bottom:1px solid var(--line)}.task-form input{width:100%;border:0;background:transparent;padding:15px 4px;outline:none;font-size:15px}.task-form button{width:45px;border:0;background:transparent;cursor:pointer;color:var(--accent)}.task-list:empty:after{content:"No tasks yet. Add one and make it your focus.";display:block;text-align:center;color:#999b92;padding:34px;font-size:13px}.task-item{display:grid;grid-template-columns:28px 1fr auto auto;gap:10px;align-items:center;padding:13px 4px;border-bottom:1px solid #e5e1d9}.check,.focus-button,.delete-button{border:0;background:transparent;cursor:pointer;padding:4px;color:#9a9b94}.check{width:20px;height:20px;border:1.5px solid #aaa;border-radius:50%;padding:0}.check.done{background:var(--green);border-color:var(--green);position:relative}.check.done:after{content:"";position:absolute;width:7px;height:4px;border-left:1.5px solid white;border-bottom:1.5px solid white;transform:rotate(-45deg);left:5px;top:5px}.task-name{font-size:14px;outline:none;padding:4px;border-radius:4px}.task-name[contenteditable=true]{background:#eeeae1}.task-item.completed .task-name{text-decoration:line-through;color:#9b9b94}.focus-button.active{color:var(--accent)}.focus-button svg{width:18px}.delete-button{opacity:0}.task-item:hover .delete-button{opacity:1}.task-footer{display:flex;justify-content:space-between;color:#999b92;font-size:11px;padding-top:15px}.focus-hint{display:flex;align-items:center;gap:7px}.focus-hint .focus-dot{width:6px;height:6px}
dialog{width:min(480px,calc(100% - 32px));border:0;border-radius:22px;padding:0;background:var(--card);box-shadow:0 25px 80px #0004}dialog::backdrop{background:#15171499;backdrop-filter:blur(3px)}dialog form{padding:28px}.dialog-header{display:flex;justify-content:space-between;align-items:flex-start}.dialog-header .icon-button{font-size:27px}.setting-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:25px 0}.setting-grid label{background:#eeeae1;border-radius:12px;padding:13px;font-size:12px;color:var(--muted)}.setting-grid label span{display:flex;align-items:center;gap:4px;color:var(--ink);margin-top:7px}.setting-grid input{width:60px;background:transparent;border:0;border-bottom:1px solid #c8c3b8;outline:none;font-family:"DM Mono";font-size:18px}.toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin:20px 0;cursor:pointer}.toggle-row input{display:none}.toggle{width:42px;height:24px;border-radius:20px;background:#ccc8bf;position:relative}.toggle:after{content:"";position:absolute;width:18px;height:18px;background:white;border-radius:50%;top:3px;left:3px;transition:.2s}.toggle-row input:checked+.toggle{background:var(--green)}.toggle-row input:checked+.toggle:after{left:21px}.save-settings{width:100%}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:white;border-radius:100px;padding:11px 18px;font-size:12px;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){.page{padding:0 16px 28px}header{height:72px}main{grid-template-columns:1fr;padding-top:16px}.timer-panel{min-height:430px;padding:18px;border-radius:20px}.timer{font-size:76px;letter-spacing:-6px}.stats-panel{display:grid;grid-template-columns:1fr 1fr}.today-card,.progress-card{min-height:140px;padding:18px}.today-card{display:block}.session-count{text-align:left;margin-top:18px}.session-count strong{font-size:38px}.tasks-panel{padding:22px 18px;margin-top:0}.mode-tab{padding:8px 12px}.shortcut{display:none}}@media(max-width:480px){.stats-panel{grid-template-columns:1fr}.today-card{display:flex}.session-count{text-align:right;margin:0}.task-footer .focus-hint{display:none}.timer-controls{gap:8px}.primary-button{min-width:155px}.setting-grid{grid-template-columns:1fr}}