:root{--plum: #6e5577;--soft: #a98fb4;--soft2: #ad93bf;--soft3: #b69ec6;--pink: #ff9cc2;--pink-2: #ffb0d4;--pink-3: #ff7eae;--purple: #c79fe6;--purple-2: #cdb8ec;--purple-3: #b79fe3;--shadow-soft: 0 10px 20px -14px rgba(183, 159, 227, .8);--shadow-card: 0 8px 18px -12px rgba(183, 159, 227, .7);--font-display: "Fredoka", system-ui, sans-serif;--font-body: "Nunito", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;background:radial-gradient(circle at 30% 20%,#f6eefb,#ece3f6 60%,#e3d8f0);color:var(--plum)}#root{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center}canvas{image-rendering:pixelated;image-rendering:crisp-edges}button{font-family:inherit}.bezel{display:contents}.phone{width:min(100vw,440px);height:100vh;height:100dvh;overflow:hidden;position:relative;display:flex;flex-direction:column;background:#fdf3fb}@media (min-width: 500px){#root{padding:24px}.phone{height:min(100dvh - 48px,920px);border-radius:40px;box-shadow:0 30px 60px -24px #6e557780,inset 0 0 0 1px #ffffff8c}}.screen{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;padding-top:max(10px,env(safe-area-inset-top))}.focus-bg{background:linear-gradient(172deg,#fdf3fb,#f3edfb 55%,#eee7fb)}.greeting-row{padding:6px 22px 0;display:flex;align-items:center;justify-content:space-between;flex:none}.greeting{font:600 20px var(--font-display);color:var(--plum)}.status-label{font:600 12.5px var(--font-body);color:var(--soft2)}.greeting-side{display:flex;align-items:center;gap:8px}.streak-chip{display:flex;align-items:center;gap:6px;background:#fff;border-radius:14px;padding:7px 11px;box-shadow:0 6px 14px -8px #b79fe3b3}.streak-dot{width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 3px #ff9cc240}.streak-num{font:700 13px var(--font-display);color:var(--plum)}.streak-unit{font:600 11px var(--font-body);color:var(--soft3)}.gear-btn{width:34px;height:34px;border:none;border-radius:12px;background:#fff;color:var(--soft2);font-size:17px;line-height:1;cursor:pointer;box-shadow:0 6px 14px -8px #b79fe3b3;transition:transform .12s ease,color .15s}.gear-btn:hover{color:var(--plum)}.gear-btn:active{transform:scale(.92)}.tabs{position:relative;margin:14px 22px 0;height:42px;background:#ffffff8c;border-radius:18px;padding:4px;flex:none}.tabs-pill{position:absolute;top:4px;left:4px;bottom:4px;width:calc((100% - 8px) / 3);background:#fff;border-radius:14px;box-shadow:0 5px 12px -5px #b79fe3a6;transition:transform .3s cubic-bezier(.5,1.5,.5,1)}.tabs-inner{position:relative;display:flex;height:100%;z-index:2}.tab-btn{flex:1;border:none;background:transparent;cursor:pointer;font:600 13.5px var(--font-display);color:var(--plum)}.ring-wrap{position:relative;width:236px;height:236px;margin:16px auto 0;flex:none}.ring-svg{position:absolute;top:0;right:0;bottom:0;left:0}.ring-disc{position:absolute;top:30px;right:30px;bottom:30px;left:30px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#fffdff,#fbf3fb)}.ring-shadow{position:absolute;left:50%;bottom:54px;transform:translate(-50%);width:108px;height:16px;background:radial-gradient(ellipse,rgba(183,159,227,.28),transparent 70%);border-radius:50%}.ring-animal{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%)}.readout{text-align:center;margin-top:6px;flex:none}.readout-time{font:600 52px var(--font-display);color:var(--plum);letter-spacing:1px;line-height:1}.controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:14px;flex:none}.ctrl-round{width:50px;height:50px;border-radius:50%;border:none;background:#fff;cursor:pointer;box-shadow:0 8px 16px -8px #b79fe3b3;color:var(--soft3);display:flex;align-items:center;justify-content:center;transition:transform .12s ease}.ctrl-round:active{transform:scale(.92)}.ctrl-reset{font:600 22px var(--font-display);padding-bottom:3px}.ctrl-skip{font:700 17px var(--font-display)}.ctrl-play{width:74px;height:74px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(150deg,#ffb0d4,#c79fe6);box-shadow:0 14px 26px -10px #c79fe6e6;display:flex;align-items:center;justify-content:center;transition:transform .12s ease}.ctrl-play:active{transform:scale(.94)}.play-tri{width:0;height:0;border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}.pause-bars{display:flex;gap:6px}.pause-bars span{width:6px;height:24px;background:#fff;border-radius:3px;display:block}.now-chip{margin:auto 18px 18px;background:#ffffffb3;border-radius:18px;padding:11px 14px;display:flex;align-items:center;gap:10px;flex:none}.now-badge{width:30px;height:30px;border-radius:9px;background:#fde4ef;display:flex;align-items:center;justify-content:center;font:700 14px var(--font-display);color:var(--pink);flex:none}.now-label{font:600 10.5px var(--font-body);color:var(--soft3);text-transform:uppercase;letter-spacing:.5px}.now-task{font:600 14px var(--font-display);color:var(--plum);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.session-dots{display:flex;gap:4px}.sdot{width:7px;height:7px;border-radius:50%;display:inline-block}.sdot.on{background:var(--pink)}.sdot.off{background:#e9d8ef}.sheet-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#6e557747;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:60;display:flex;align-items:flex-end}.sheet{width:100%;background:#fffbfe;border-radius:26px 26px 0 0;padding:10px 20px 20px;box-shadow:0 -12px 30px -12px #6e557773;animation:sheet-up .25s cubic-bezier(.3,1.2,.5,1)}@keyframes sheet-up{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}.sheet-grip{width:40px;height:5px;border-radius:3px;background:#e6d8f0;margin:0 auto 10px}.sheet-title{font:600 18px var(--font-display);color:var(--plum);margin-bottom:10px}.set-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0}.set-label{font:600 14px var(--font-body);color:var(--plum)}.stepper{display:flex;align-items:center;gap:8px}.step-btn{width:28px;height:28px;border:none;border-radius:10px;background:#f4eafb;color:var(--purple);font:700 16px var(--font-display);line-height:1;cursor:pointer;transition:transform .1s ease}.step-btn:active{transform:scale(.9)}.step-btn:disabled{opacity:.35;cursor:default}.step-val{min-width:56px;text-align:center;font:700 13px var(--font-display);color:var(--plum)}.switch{width:46px;height:27px;border:none;border-radius:14px;background:#e9dcf3;position:relative;cursor:pointer;transition:background .18s;padding:0}.switch .knob{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #6e55774d;transition:left .18s}.switch.on{background:linear-gradient(150deg,#ffb0d4,#c79fe6)}.switch.on .knob{left:22px}.sheet-done{width:100%;margin-top:12px;border:none;border-radius:16px;padding:12px;background:linear-gradient(150deg,#ffb0d4,#c79fe6);color:#fff;font:600 15px var(--font-display);cursor:pointer;box-shadow:0 10px 20px -10px #c79fe6e6;transition:transform .12s ease}.sheet-done:active{transform:scale(.98)}.name-input{width:130px;border:2px solid #eaddf5;border-radius:12px;padding:7px 11px;background:#fff;outline:none;font:600 13px var(--font-display);color:var(--plum);text-align:right;transition:border-color .15s}.name-input:focus{border-color:var(--pink-2)}.name-input::placeholder{color:var(--soft3)}.onboard-bg{background:linear-gradient(172deg,#fdf3fb,#f3edfb 55%,#eee7fb)}.onboard{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 30px 40px}.onboard-pal{width:150px;height:150px;border-radius:40px;background:radial-gradient(circle at 50% 40%,#fffdff,#fbf1f9);display:flex;align-items:center;justify-content:center;box-shadow:0 18px 34px -18px #c79fe6cc;margin-bottom:26px}.onboard-title{font:600 26px var(--font-display);color:var(--plum);margin-bottom:8px}.onboard-sub{font:600 13.5px var(--font-body);color:var(--soft2);line-height:1.5;max-width:240px;margin-bottom:26px}.onboard-form{width:100%;display:flex;flex-direction:column;gap:12px}.onboard-input{width:100%;border:2px solid #e6d8f0;border-radius:16px;padding:14px 16px;background:#fff;outline:none;font:600 16px var(--font-display);color:var(--plum);text-align:center;transition:border-color .15s}.onboard-input:focus{border-color:var(--pink-2)}.onboard-input::placeholder{color:var(--soft3)}.onboard-go{width:100%;border:none;border-radius:16px;padding:14px;background:linear-gradient(150deg,#ffb0d4,#c79fe6);color:#fff;font:600 16px var(--font-display);cursor:pointer;box-shadow:0 14px 26px -10px #c79fe6e6;transition:transform .12s ease,opacity .15s}.onboard-go:active{transform:scale(.98)}.onboard-go:disabled{opacity:.5;cursor:default;box-shadow:none}.tasks-bg{background:linear-gradient(172deg,#fdf3fb,#efeafb)}.head{padding:6px 22px 0;flex:none}.head-title{font:600 22px var(--font-display);color:var(--plum)}.head-sub{font:600 12.5px var(--font-body);color:var(--soft2)}.prog-card{margin:14px 22px 0;background:linear-gradient(150deg,#fde6f1,#efe4fb);border-radius:22px;padding:14px 16px;display:flex;align-items:center;gap:12px;flex:none}.prog-tile{width:64px;height:64px;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 8px 16px -8px #b79fe399}.prog-count{font:700 16px var(--font-display);color:var(--plum)}.prog-sub{font:600 12px var(--font-body);color:var(--soft2);margin-bottom:7px}.prog-track{height:8px;background:#ffffffb3;border-radius:6px;overflow:hidden}.prog-fill{height:100%;background:linear-gradient(90deg,#ffb0d4,#c79fe6);border-radius:6px;transition:width .3s}.task-list{margin:14px 18px 0;display:flex;flex-direction:column;gap:9px;overflow-y:auto;flex:1;scrollbar-width:none}.task-list::-webkit-scrollbar{display:none}.task-row{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:12px 14px;box-shadow:0 8px 18px -12px #b79fe3b3;border:2px solid transparent;transition:border-color .15s}.task-row.active{border-color:var(--pink-2)}.focus-flag{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:8px;background:#fde4ef;color:var(--pink-3);font:700 9.5px var(--font-display);text-transform:uppercase;letter-spacing:.5px;vertical-align:1px}.task-empty{text-align:center;padding:26px 10px;font:600 13px var(--font-body);color:var(--soft3)}.checkbox{width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;border:2px solid #ddcdec;background:#fff;color:#fff;font:700 13px var(--font-display);line-height:1;transition:background .15s,border-color .15s}.checkbox.done{border-color:var(--pink);background:var(--pink)}.task-text{font:600 15px var(--font-body);color:var(--plum)}.task-text.done{color:#bca9c7;text-decoration:line-through}.cherries{display:flex;gap:4px;margin-top:5px}.cherry{width:9px;height:9px;border-radius:50%;display:inline-block}.cherry.on{background:var(--pink)}.cherry.off{border:1.5px solid #e0cdec;background:#fff}.task-del{border:none;background:transparent;color:#d6c4e4;cursor:pointer;font-size:18px;line-height:1;padding:2px 4px}.task-del:hover{color:var(--pink-3)}.add-row{margin:8px 18px 14px;flex:none}.add-form{border:2px dashed #d9c7e6;border-radius:16px;padding:9px 10px 9px 12px;display:flex;align-items:center;gap:10px}.add-plus{width:24px;height:24px;border-radius:8px;background:#f4eafb;display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;color:var(--purple);flex:none}.add-input{flex:1;min-width:0;border:none;background:transparent;outline:none;font:600 14px var(--font-display);color:var(--plum)}.add-input::placeholder{color:var(--soft3)}.goal-btn{flex:none;display:flex;align-items:center;gap:4px;border:none;border-radius:10px;padding:6px 9px;background:#fde4ef;color:var(--pink-3);font:700 12px var(--font-display);cursor:pointer;transition:transform .1s ease}.goal-btn:active{transform:scale(.92)}.goal-cherry{width:8px;height:8px;border-radius:50%;background:var(--pink);display:inline-block}.coll-bg{background:linear-gradient(172deg,#f4edfb,#fdf3fb)}.coll-grid{margin:16px 18px 0;display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1;align-content:start;overflow-y:auto;scrollbar-width:none}.coll-grid::-webkit-scrollbar{display:none}.coll-card{background:#fff;border-radius:20px;padding:12px 10px 11px;text-align:center;box-shadow:0 10px 20px -14px #b79fe3cc;position:relative}.coll-card.pick{border:2px solid transparent;cursor:pointer;font-family:inherit;transition:border-color .15s,transform .12s ease}.coll-card.pick:active{transform:scale(.97)}.coll-card.duty{border-color:var(--pink-2)}.duty-badge{position:absolute;top:8px;right:8px;padding:2px 7px;border-radius:8px;background:linear-gradient(150deg,#ffb0d4,#c79fe6);color:#fff;font:700 9px var(--font-display);text-transform:uppercase;letter-spacing:.5px;z-index:2}.coll-card.locked{background:#ffffff8c;border:2px dashed #ddcdec;box-shadow:none}.coll-tile{height:78px;border-radius:14px;display:flex;align-items:center;justify-content:center}.coll-tile.q{background:#e7ddf399;font:700 30px var(--font-display);color:#c7b6df}.coll-name{font:700 14px var(--font-display);color:var(--plum);margin-top:7px}.coll-name.locked{font-size:13px;color:var(--soft3)}.coll-meta{font:600 11px var(--font-body);color:var(--soft3)}.coll-meta.locked{color:#c4b0d6}.coll-footer{margin:6px 18px 14px;background:#fff;border-radius:18px;padding:11px 14px;display:flex;align-items:center;gap:10px;flex:none;box-shadow:0 8px 18px -12px #b79fe3b3}.coll-heart{width:34px;height:34px;border-radius:11px;background:linear-gradient(150deg,#ffe3ec,#efe4fb);display:flex;align-items:center;justify-content:center;font:700 16px var(--font-display);color:#e57aa3;flex:none}.coll-foot-title{font:700 13px var(--font-display);color:var(--plum)}.coll-foot-sub{font:600 11px var(--font-body);color:var(--soft3)}.navbar{display:flex;justify-content:space-around;align-items:center;padding:8px 14px calc(8px + env(safe-area-inset-bottom));background:#ffffffb8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(183,159,227,.18);flex:none}.nav-btn{border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 16px;border-radius:14px;color:var(--soft3);font:700 10.5px var(--font-display);transition:color .15s}.nav-btn .nav-icon{font-size:19px;line-height:1}.nav-btn.active{color:var(--plum)}.nav-btn.active .nav-pip{opacity:1}.nav-pip{width:5px;height:5px;border-radius:50%;background:var(--pink);opacity:0;transition:opacity .15s}