:root{--paper: #fff5f9;--grid: #ffd9e8;--pink-100: #ffe9f1;--pink-200: #ffd3e4;--pink-300: #ffb3d1;--pink-500: #ff7eb6;--pink-600: #f2569b;--hot: #ff3d8f;--lavender: #e9d9ff;--mint: #d7f7ea;--butter: #fff0a6;--ink: #4a1d36;--ink-soft: #7a4a63;--f-body: "Fredoka", "Nunito", sans-serif;--f-pixel: "Silkscreen", monospace;--f-bowlby: "Bowlby One", cursive;--f-bungee: "Bungee", cursive;--f-chewy: "Chewy", cursive;--f-lilita: "Lilita One", cursive;--f-bubbles: "Rubik Bubbles", cursive;--f-titan: "Titan One", cursive;--bounce: cubic-bezier(.34, 1.56, .64, 1);--pop: cubic-bezier(.15, .8, .3, 1)}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;min-height:100dvh;font-family:var(--f-body);color:var(--ink);background-color:var(--paper);background-image:radial-gradient(60% 45% at 100% 0%,rgba(255,126,182,.18),transparent 70%),radial-gradient(50% 40% at 0% 100%,rgba(233,217,255,.55),transparent 70%),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:100% 100%,100% 100%,28px 28px,28px 28px;overflow-x:hidden}button,input{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0;padding:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.page{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:clamp(28px,6vw,56px) 16px 48px}.hero{position:relative;text-align:center;margin-bottom:36px}.ransom{margin:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px;font-size:clamp(38px,10vw,64px);line-height:1}.ransom-word{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap;margin:0 .18em}.ransom-letter{display:inline-block;font-family:var(--font);font-weight:400;color:var(--ink-letter);background:var(--bg);padding:.08em .16em .02em;border:3px solid #fff;box-shadow:0 0 0 2px var(--pink-300),3px 4px #4a1d3626;transform:rotate(var(--rot)) translateY(var(--y));animation:letter-drop .7s var(--bounce) backwards;animation-delay:calc(var(--i) * 65ms);transition:transform .25s var(--bounce)}.ransom-letter:hover{transform:rotate(calc(var(--rot) * -1)) translateY(-6px) scale(1.08)}@keyframes letter-drop{0%{opacity:0;transform:rotate(var(--rot)) translateY(-40px) scale(1.3)}to{opacity:1;transform:rotate(var(--rot)) translateY(var(--y)) scale(1)}}.tagline{margin:18px 0 0;font-family:var(--f-pixel);font-size:12px;letter-spacing:.08em;color:var(--pink-600);animation:fade-up .6s .7s backwards}.counter{position:absolute;top:-14px;right:-6px;font-family:var(--f-pixel);font-size:11px;font-weight:700;color:var(--ink);background:var(--butter);padding:8px 12px;border:3px solid #fff;border-radius:999px;box-shadow:0 0 0 2px var(--pink-300),3px 3px 0 var(--pink-200);transform:rotate(6deg);animation:sticker-in .5s .9s var(--bounce) backwards}.counter.is-complete{background:var(--hot);color:#fff;transform:rotate(-4deg) scale(1.08)}@keyframes sticker-in{0%{opacity:0;transform:rotate(20deg) scale(.4)}to{opacity:1}}@keyframes fade-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.board-wrap{position:relative}.board{position:relative;z-index:1;background:#fff;border:4px solid #fff;border-radius:24px;padding:22px 20px 18px;box-shadow:0 0 0 3px var(--pink-300),10px 12px 0 var(--pink-200);transform:rotate(-.6deg);animation:fade-up .6s .4s backwards}.board-wrap:before{content:"";position:absolute;top:-18px;right:-26px;bottom:-22px;left:-20px;z-index:0;background:var(--pink-300);border-radius:62% 38% 55% 45%/45% 60% 40% 55%;transform:rotate(2deg);opacity:.55}.tape{position:absolute;top:-14px;width:92px;height:26px;background:#e9d9ffd9;border:2px solid rgba(255,255,255,.9);box-shadow:0 2px #4a1d3614;opacity:.9}.tape-left{left:28px;transform:rotate(-8deg)}.tape-right{right:28px;transform:rotate(7deg);background:#d7f7ead9}.add{display:flex;gap:10px;margin-bottom:16px}.add-input{flex:1;min-width:0;padding:12px 16px;font-size:17px;font-weight:500;background:var(--pink-100);border:3px dashed var(--pink-300);border-radius:16px;outline:none;transition:border-color .2s,background .2s,box-shadow .2s}.add-input::placeholder{color:var(--pink-500);font-weight:400}.add-input:focus{border-style:solid;border-color:var(--hot);background:#fff;box-shadow:0 0 0 4px var(--pink-200)}.add-btn{flex-shrink:0;padding:0 20px;font-family:var(--f-lilita);font-size:18px;letter-spacing:.02em;color:#fff;background:var(--hot);border:3px solid #fff;border-radius:16px;box-shadow:0 0 0 2px var(--hot),3px 4px 0 var(--pink-300);transform:rotate(2deg);transition:transform .2s var(--bounce),box-shadow .2s,opacity .2s}.add-btn:hover:not(:disabled){transform:rotate(-2deg) translateY(-2px) scale(1.04);box-shadow:0 0 0 2px var(--hot),5px 7px 0 var(--pink-300)}.add-btn:active:not(:disabled){transform:rotate(0) translateY(2px);box-shadow:0 0 0 2px var(--hot),1px 1px 0 var(--pink-300)}.add-btn:disabled{opacity:.5;cursor:not-allowed}.filters{display:flex;gap:8px;margin-bottom:18px}.chip{padding:7px 12px;font-family:var(--f-pixel);font-size:10px;letter-spacing:.04em;color:var(--pink-600);background:#fff;border:2px solid var(--pink-300);border-radius:999px;transition:background .15s,color .15s,transform .15s var(--bounce)}.chip:hover{transform:translateY(-2px) rotate(-1deg)}.chip.is-active{color:#fff;background:var(--pink-500);border-color:var(--pink-500);box-shadow:2px 2px 0 var(--pink-200)}.todos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.todo{--tilt: 0deg;position:relative;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;padding:10px 10px 10px 6px;background:#fff;border:3px solid var(--pink-300);border-radius:18px;box-shadow:4px 4px 0 var(--pink-200);transform:rotate(var(--tilt));animation:todo-in .45s var(--bounce) backwards;transition:transform .25s var(--bounce),box-shadow .25s,background .3s,border-color .3s,opacity .3s}.todo:hover{transform:rotate(0) translateY(-2px);box-shadow:6px 7px 0 var(--pink-200);z-index:1}@keyframes todo-in{0%{opacity:0;transform:rotate(var(--tilt)) translateY(14px) scale(.96)}to{opacity:1;transform:rotate(var(--tilt)) translateY(0) scale(1)}}.todo.is-done{background:var(--pink-100);border-color:var(--pink-200);box-shadow:3px 3px 0 var(--pink-100)}.todo.is-dragging{opacity:.35}.todo.is-drag-over{outline:3px dashed var(--hot);outline-offset:4px}.todo-grip{font-size:14px;line-height:1;letter-spacing:-3px;color:var(--pink-300);cursor:grab;-webkit-user-select:none;user-select:none;padding:4px 2px;opacity:.6;transition:opacity .15s}.todo:hover .todo-grip{opacity:1}.todo-check{position:relative;width:38px;height:38px;background:#fff;border:3px solid var(--pink-500);border-radius:12px;display:grid;place-items:center;transition:background .2s,border-color .2s,transform .2s var(--bounce)}.todo-check:hover{background:var(--pink-100);transform:scale(1.08) rotate(-4deg)}.todo-check:active{transform:scale(.92)}.todo-check:focus-visible,.todo-text:focus-visible,.todo-delete:focus-visible,.chip:focus-visible,.add-btn:focus-visible,.link:focus-visible{outline:3px solid var(--hot);outline-offset:3px}.todo-check-bloom{display:grid;place-items:center;transform:scale(0) rotate(-90deg);transition:transform .25s ease-in}.todo-check[aria-checked=true]{border-color:var(--pink-300);background:var(--pink-100)}.todo-check[aria-checked=true] .todo-check-bloom{transform:scale(1) rotate(0);transition:transform .55s var(--bounce)}.todo-text{min-width:0;text-align:left;font-size:17px;font-weight:500;line-height:1.3;padding:4px 2px;border-radius:8px;overflow-wrap:anywhere}.todo-text-inner{display:inline;padding:2px 0;background-image:linear-gradient(var(--hot),var(--hot));background-repeat:no-repeat;background-position:0 56%;background-size:0% 4px;transition:background-size .35s var(--pop),color .3s}.todo.is-done .todo-text-inner{color:var(--ink-soft);background-size:100% 4px}.todo-edit{min-width:0;width:100%;padding:4px 8px;font-size:17px;font-weight:500;background:var(--pink-100);border:2px solid var(--hot);border-radius:8px;outline:none}.todo-delete{width:28px;height:28px;font-size:22px;line-height:1;color:var(--pink-600);background:#fff;border:2px solid var(--pink-300);border-radius:50%;display:grid;place-items:center;padding-bottom:2px;opacity:0;transform:scale(.8);transition:opacity .15s,transform .2s var(--bounce),background .15s,color .15s}.todo:hover .todo-delete,.todo:focus-within .todo-delete{opacity:1;transform:scale(1)}.todo-delete:hover{color:#fff;background:var(--hot);border-color:var(--hot);transform:scale(1.12) rotate(90deg)}@media(hover:none){.todo-delete{opacity:1;transform:scale(1)}.todo-grip{opacity:1}}.empty{margin:22px 0 12px;text-align:center;font-family:var(--f-pixel);font-size:11px;line-height:1.8;color:var(--pink-600);animation:fade-up .4s backwards}.notice{margin:0 0 14px;padding:10px 14px;font-size:14px;font-weight:500;background:var(--butter);border:2px solid #fff;border-radius:12px;box-shadow:0 0 0 2px var(--pink-300);transform:rotate(-.8deg)}.notice-retry,.link{font-weight:600;color:var(--hot);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}.board-foot{display:flex;justify-content:flex-end;margin-top:16px}.link{font-family:var(--f-pixel);font-size:10px;text-decoration:none;color:var(--pink-600);padding:6px 8px;border-radius:8px;transition:background .15s}.link:hover{background:var(--pink-100);text-decoration:underline}.credit{margin:36px 0 0;text-align:center;font-family:var(--f-pixel);font-size:10px;color:var(--pink-500);animation:fade-up .6s 1s backwards}.decor{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden}.decor-star,.decor-daisy{position:absolute}.pixel-star{filter:drop-shadow(1px 0 0 var(--pink-500)) drop-shadow(-1px 0 0 var(--pink-500)) drop-shadow(0 1px 0 var(--pink-500)) drop-shadow(0 -1px 0 var(--pink-500))}.decor-star{animation:twinkle 3.2s ease-in-out infinite}@keyframes twinkle{0%,to{transform:scale(1) rotate(0);opacity:.9}50%{transform:scale(.72) rotate(12deg);opacity:.45}}.decor-daisy{--r: 0deg;opacity:.8;animation:sway 6s ease-in-out infinite}@keyframes sway{0%,to{transform:rotate(var(--r))}50%{transform:rotate(calc(var(--r) + 14deg)) translateY(-4px)}}.daisy-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;pointer-events:none;overflow:hidden}.daisy-burst{position:absolute;width:0;height:0}.daisy-particle{position:absolute;left:-15px;top:-15px;transform-origin:center;filter:drop-shadow(0 2px 2px rgba(74,29,54,.15));animation:daisy-fly 1s var(--pop) forwards}@keyframes daisy-fly{0%{opacity:1;transform:translate(0) rotate(0) scale(.15)}18%{transform:translate(calc(var(--dx) * .35),calc(var(--dy) * .45)) rotate(calc(var(--rot) * .3)) scale(var(--scale))}75%{opacity:1}to{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 48px)) rotate(var(--rot)) scale(calc(var(--scale) * .7))}}@media(max-width:480px){.board{padding:18px 14px 14px;transform:none}.board-wrap:before{top:-12px;right:-14px;bottom:-16px;left:-12px}.counter{position:static;display:inline-block;margin-top:14px;transform:rotate(-2deg)}.tape{width:64px;height:20px;top:-12px}.tape-left{left:14px}.tape-right{right:14px}.add-btn{padding:0 14px;font-size:16px}.decor-daisy{opacity:.45}}@media(prefers-reduced-motion:reduce){.ransom-letter,.tagline,.counter,.board,.todo,.empty,.credit,.decor-star,.decor-daisy{animation:none}.daisy-particle{animation-duration:.5s!important}*{transition-duration:.01ms!important}}