:root{--ink:#25243b;--muted:#7f7d92;--line:#ebe9f0;--purple:#7666dc;--paper:#faf9fc}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans","Noto Sans SC",sans-serif}.feature-page{max-width:1100px;margin:0 auto;padding:58px 7vw}.back{display:inline-flex;text-decoration:none;color:#7162ca;font-size:13px;margin-bottom:58px}.eyebrow{margin:0;color:#9d9aaa;letter-spacing:1.3px;font-size:10px;font-weight:700}.feature-page h1{font-size:54px;letter-spacing:-2px;margin:10px 0}.intro{font-size:16px;color:var(--muted);margin:0 0 42px}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.feature-grid article{min-height:250px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px}.feature-grid article>span{font-size:12px;color:var(--purple);font-weight:700}.feature-grid h2{font-size:21px;margin:12px 0 20px}.placeholder-row{display:flex;justify-content:space-between;gap:12px;padding:16px 0;border-top:1px solid var(--line);font-size:14px}.placeholder-row small{color:var(--muted);white-space:nowrap}.placeholder-copy{color:var(--muted);font-size:14px;line-height:1.8;max-width:310px}.feature-grid button{margin-top:14px;border:0;border-radius:9px;background:#7666dc;color:#fff;padding:11px 14px;font:600 13px inherit;cursor:pointer}.workout-page .feature-grid article>span{color:#e57b54}.workout-page .feature-grid button{background:#e57b54}.pending-page .feature-grid article>span{color:#46a995}.pending-page .feature-grid button{background:#46a995}@media(max-width:650px){.feature-page{padding:32px 22px}.back{margin-bottom:42px}.feature-page h1{font-size:42px}.feature-grid{grid-template-columns:1fr}}
.task-row{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:9px}.task-row .start-task{grid-column:1 / -1;justify-self:start;text-decoration:none;border-radius:8px;background:#f0edff;color:#6758c6;font-size:12px;font-weight:600;padding:8px 11px;transition:background .2s}.task-row .start-task:hover{background:#e5e0ff}.task-row .start-task i{font-size:14px;font-style:normal;margin-left:4px}.focus-body{min-height:100vh;background:radial-gradient(circle at 50% 43%,#eeeaff 0,#faf9fc 42%,#faf9fc 100%)}.focus-page{max-width:920px;margin:0 auto;padding:50px 7vw}.timer-panel{text-align:center;display:grid;justify-items:center;padding:28px 0}.timer-label{margin:34px 0 9px;font-size:12px;color:#8d87a6}.timer-panel h1{margin:0 0 32px;font-size:27px;letter-spacing:-.7px}.timer-ring{width:295px;height:295px;border-radius:50%;background:conic-gradient(#7666dc 0deg 260deg,#e9e6f6 260deg 360deg);padding:10px;display:grid;place-content:center;position:relative}.timer-ring:before{content:"";position:absolute;inset:10px;border-radius:50%;background:#fff}.timer-ring strong,.timer-ring span{position:relative}.timer-ring strong{font-size:58px;letter-spacing:-3px}.timer-ring span{font-size:12px;color:var(--muted);margin-top:7px}.timer-actions{display:flex;gap:10px;margin-top:30px}.timer-actions button{border:0;border-radius:10px;background:#7666dc;color:#fff;padding:13px 22px;font:600 13px inherit;cursor:pointer}.timer-actions .secondary{background:#fff;border:1px solid #dfdce7;color:#777}.timer-hint{font-size:12px;color:#8c889a;margin-top:20px}@media(max-width:650px){.task-row{grid-template-columns:1fr auto}.timer-ring{width:255px;height:255px}.timer-ring strong{font-size:48px}.focus-page{padding:32px 22px}}
dialog{border:0;border-radius:18px;width:min(420px,calc(100vw - 36px));padding:0;box-shadow:0 24px 70px rgba(41,33,81,.25)}dialog::backdrop{background:rgba(34,28,58,.5)}dialog form{position:relative;display:grid;gap:15px;padding:28px}dialog h2{margin:0 0 4px;font-size:24px}dialog label{display:grid;gap:7px;color:#666;font-size:12px;font-weight:600}dialog input{width:100%;border:1px solid #dedbe7;border-radius:9px;padding:11px 12px;color:var(--ink);font:400 14px inherit}dialog form>button[type="submit"]{margin:7px 0 0;border:0;border-radius:9px;background:#7666dc;color:#fff;padding:12px;font:600 13px inherit;cursor:pointer}.dialog-close{position:absolute;top:12px;right:14px;border:0;background:transparent;color:#888;font-size:24px;line-height:1;cursor:pointer}.added-task{animation:task-enter .25s ease-out}@keyframes task-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}