:root{color:#fff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#020617;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}.page-shell{max-width:48rem;min-height:100vh;margin:0 auto;padding:2.5rem 1rem;display:flex}.todo-card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffff1a;border:1px solid #ffffff1a;border-radius:1.5rem;width:100%;margin:auto 0;padding:2rem;box-shadow:0 25px 50px -12px #0000004d}.hero{flex-direction:column;gap:.5rem;margin-bottom:2rem;display:flex}.eyebrow{color:#67e8f9;letter-spacing:.3em;text-transform:uppercase;margin:0;font-size:.875rem;font-weight:700}h1{letter-spacing:-.04em;margin:0;font-size:clamp(2.25rem,8vw,3rem);line-height:1}.description{color:#cbd5e1;margin:0}.todo-form{gap:.75rem;display:flex}.todo-form input{color:#fff;background:#0f172acc;border:1px solid #ffffff1a;border-radius:1rem;outline:none;flex:1;min-width:0;min-height:3rem;padding:0 1rem;transition:border-color .2s,box-shadow .2s}.todo-form input::placeholder{color:#64748b}.todo-form input:focus{border-color:#67e8f9;box-shadow:0 0 0 4px #67e8f91a}.todo-form button{color:#020617;background:#22d3ee;border:0;border-radius:1rem;min-height:3rem;padding:0 1.5rem;font-weight:800;transition:background .2s,transform .2s}.todo-form button:hover{background:#67e8f9}.todo-form button:active{transform:scale(.95)}.toolbar{color:#cbd5e1;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-top:1.5rem;font-size:.875rem;display:flex}.filters{gap:.5rem;display:flex}.filters button{color:#fff;background:#ffffff1a;border:0;border-radius:999px;align-items:center;gap:.375rem;padding:.375rem .75rem;font-weight:600;transition:background .2s;display:inline-flex}.filter-count{text-align:center;background:#ffffff26;border-radius:999px;min-width:1.25rem;padding:.125rem .375rem;font-size:.75rem;line-height:1}.filters button.active .filter-count{color:#fff;background:#020617}.filters button:hover{background:#fff3}.filters button.active{color:#020617;background:#fff}.todo-list{flex-direction:column;gap:.75rem;margin:1.5rem 0 0;padding:0;list-style:none;display:flex}.todo-item{background:#0f172ab3;border:1px solid #ffffff1a;border-radius:1rem;align-items:center;gap:.75rem;padding:.75rem;display:flex;box-shadow:0 10px 15px -3px #0000001a}.toggle{background:0 0;border:2px solid #64748b;border-radius:999px;flex:none;width:1.5rem;height:1.5rem;padding:0}.toggle.done{background:#67e8f9;border-color:#67e8f9}.todo-text{overflow-wrap:anywhere;flex:1;min-width:0}.todo-text.done{color:#64748b;text-decoration:line-through}.delete{color:#94a3b8;background:0 0;border:0;border-radius:.75rem;padding:.5rem .75rem;font-size:.875rem;font-weight:700;transition:background .2s,color .2s}.delete:hover{color:#fecdd3;background:#ffffff1a}.empty-state{color:#94a3b8;text-align:center;border:1px dashed #ffffff26;border-radius:1rem;margin-top:2rem;padding:2rem}.clear-done{color:#fecdd3;background:0 0;border:1px solid #fda4af4d;border-radius:1rem;width:100%;margin-top:1.5rem;padding:.875rem 1rem;font-weight:700;transition:background .2s}.clear-done:hover{background:#fb71851a}@media (width<=640px){.page-shell{padding-inline:1rem}.todo-card{padding:1.5rem}.todo-form{flex-direction:column}}