:root{--bg: #fff6ec;--card: #ffffff;--ink: #3d3229;--muted: #8a7a6b;--primary: #ff8a5c;--primary-dark: #e9764c;--done: #58c08a;--done-bg: #eaf9f0;--accent: #ffd66b;--danger: #d9534f;--radius: 20px;--shadow: 0 4px 16px rgba(120, 80, 40, .1)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased}.screen{max-width:480px;margin:0 auto;padding:20px 16px calc(40px + env(safe-area-inset-bottom));min-height:100dvh;display:flex;flex-direction:column;gap:16px}.screen.center{align-items:center;justify-content:center;text-align:center}h1{font-size:1.5rem;line-height:1.25;margin:0}.muted{color:var(--muted);margin:0}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.character{width:clamp(120px,38vw,170px);margin:0 auto;animation:floaty 3.5s ease-in-out infinite}.character svg{display:block;width:100%;height:auto}.character.cheer{animation:cheer .7s ease,floaty 3.5s ease-in-out .7s infinite}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes cheer{0%{transform:scale(1)}30%{transform:scale(1.12) rotate(-3deg)}60%{transform:scale(.96) rotate(2deg)}to{transform:scale(1)}}.head{text-align:center;display:flex;flex-direction:column;gap:6px}.head.compact .character{width:clamp(90px,26vw,120px)}.hello{margin:4px 0 0;color:var(--muted);font-weight:600}.reason{margin:0;color:var(--muted)}.today{text-align:center}.date{margin:0 0 12px;font-weight:700;color:var(--primary-dark)}.bar{height:16px;border-radius:999px;background:#f3e6d7;overflow:hidden}.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--primary));transition:width .5s ease}.count{margin:10px 0 0}.all-done{margin:10px 0 0;font-weight:700;color:var(--done);animation:rise .4s ease}.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.steps li{display:flex;align-items:center;gap:8px}.step{flex:1;display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px;border:2px solid transparent;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);font:inherit;font-weight:600;color:var(--ink);text-align:left;cursor:pointer;transition:transform .12s ease,background .2s ease;-webkit-tap-highlight-color:transparent}.step:not(:disabled):active{transform:scale(.97)}.step:disabled{cursor:default}.step.done{background:var(--done-bg);border-color:var(--done);color:var(--ink)}.step-check{flex:none;width:32px;height:32px;border-radius:50%;border:2.5px solid #e8d9c8;display:grid;place-items:center;font-size:19px;color:#fff;background:transparent;transition:all .2s ease}.step.done .step-check{background:var(--done);border-color:var(--done);animation:pop .35s ease}.step-name{flex:1}.step-state{flex:none;font-size:.8rem;font-weight:700;color:var(--done);text-transform:lowercase}.undo{flex:none;border:none;background:none;font:inherit;font-size:.8rem;color:var(--muted);text-decoration:underline;cursor:pointer;padding:8px 2px}@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.25)}to{transform:scale(1)}}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 20px;border:none;border-radius:999px;background:var(--primary);color:#fff;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .12s ease;-webkit-tap-highlight-color:transparent}.button:active{transform:scale(.97)}.button:disabled{opacity:.6;cursor:default}.button.ghost{background:transparent;color:var(--primary-dark)}.button.small{min-height:40px;padding:8px 14px;font-size:.9rem}.banner{background:#fff3d6;border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}.banner p{margin:0 0 10px}.banner-actions{display:flex;gap:8px;flex-wrap:wrap}.form{display:flex;flex-direction:column;gap:16px}.form label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.95rem}.form input,.form textarea{font:inherit;font-weight:500;color:var(--ink);background:#fbf6ef;border:2px solid #eadfd2;border-radius:14px;padding:12px 14px;outline:none;width:100%}.form input:focus,.form textarea:focus{border-color:var(--primary)}.form textarea{resize:vertical}.steps-field{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.steps-field legend{font-weight:700;font-size:.95rem;padding:0;margin-bottom:4px}.hint{margin:0;font-size:.85rem;color:var(--muted);font-weight:500}.step-row{display:flex;gap:8px;align-items:center}.remove-step{flex:none;width:40px;height:40px;border:none;border-radius:50%;background:#f3e6d7;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}.form-error{margin:0;color:var(--danger);font-weight:600}.foot{margin-top:auto;text-align:center}.edit-link{color:var(--muted);font-size:.85rem;text-decoration:none}.edit-link:hover{text-decoration:underline}.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%);background:var(--ink);color:#fff;padding:12px 22px;border-radius:999px;font-weight:700;box-shadow:0 6px 20px #3c281440;animation:toast-in .3s ease;max-width:min(92vw,440px);text-align:center;z-index:10}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(12px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.loader{font-size:2rem;color:var(--muted);animation:floaty 1.2s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.character,.character.cheer,.loader{animation:none}}