:root{color:#f7f8ff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#090b17;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}.app-shell{isolation:isolate;background:radial-gradient(circle at 12% 16%,#644fff33,#0000 30%),radial-gradient(circle at 88% 82%,#00d1bc21,#0000 28%),#090b17;place-items:center;min-height:100vh;padding:48px 20px;display:grid;position:relative;overflow:hidden}.app-shell:before,.app-shell:after{z-index:-1;content:"";filter:blur(2px);pointer-events:none;border-radius:50%;width:28rem;height:28rem;position:absolute}.app-shell:before{background:#9946ff2e;top:-16rem;right:-8rem}.app-shell:after{background:#18d2c024;bottom:-18rem;left:-10rem}.todo-card{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:linear-gradient(140deg,#ffffff1b,#ffffff0b);border:1px solid #ffffff21;border-radius:28px;width:min(100%,650px);padding:clamp(24px,5vw,42px);box-shadow:0 32px 80px #00000061,inset 0 1px #ffffff14,0 0 70px #4d48e214}.todo-card__header{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:30px;display:flex}.eyebrow{color:#a7a6ff;letter-spacing:.16em;text-transform:uppercase;margin:0 0 10px;font-size:12px;font-weight:700}h1{color:#fbfbff;letter-spacing:-.055em;margin:0;font-size:clamp(32px,6vw,48px);font-weight:750;line-height:1}.subtitle{color:#a7aabe;max-width:330px;margin:13px 0 0;font-size:14px;line-height:1.55}.progress{color:#d7d6ff;text-align:center;background:#7166ff29;border:1px solid #a7a6ff40;border-radius:999px;min-width:58px;padding:9px 12px;font-size:13px;font-weight:700;box-shadow:0 0 22px #7166ff1f}.todo-form{gap:10px;margin-bottom:24px;display:flex}.todo-form input{color:#f7f8ff;background:#06081452;border:1px solid #ffffff21;border-radius:13px;outline:none;width:100%;min-width:0;padding:14px 16px;transition:border-color .18s,background .18s,box-shadow .18s}.todo-form input::placeholder{color:#777b94}.todo-form input:focus{background:#06081480;border-color:#a09affbf;box-shadow:0 0 0 4px #7267ff29,0 0 22px #7267ff1a}.todo-form button{color:#fff;background:linear-gradient(135deg,#7b6dff,#6352e8);border:1px solid #fff3;border-radius:13px;flex:none;padding:12px 19px;font-weight:700;transition:transform .18s,box-shadow .18s,filter .18s;position:relative;overflow:hidden;box-shadow:0 10px 24px #5c4ae552,inset 0 1px #ffffff3d}.todo-form button:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 13px 28px #5c4ae575,inset 0 1px #ffffff4d}.todo-form button:active{transform:translateY(1px)scale(.98)}.todo-list{gap:10px;margin:0;padding:0;list-style:none;display:grid}.todo-item{background:#ffffff0e;border:1px solid #0000;border-radius:15px;justify-content:space-between;align-items:center;gap:12px;padding:14px 12px 14px 16px;transition:border-color .18s,background .18s,transform .18s;animation:.3s both task-in;display:flex}.todo-item:hover{background:#ffffff17;border-color:#ffffff1f;transform:translate(2px)}.todo-item__content{cursor:pointer;align-items:center;gap:13px;min-width:0;display:flex}.todo-item input{accent-color:#8c7dff;flex:none;width:19px;height:19px;margin:0}.todo-title{overflow-wrap:anywhere;color:#e9eaf6;font-size:15px;line-height:1.4}.todo-title--completed{color:#85899f;-webkit-text-decoration:line-through #676b82;text-decoration:line-through #676b82}.delete-button{color:#858aa2;background:0 0;border:1px solid #0000;border-radius:9px;flex:none;place-items:center;width:32px;height:32px;padding:0;font-size:22px;line-height:1;transition:color .18s,background .18s,border-color .18s;display:grid}.delete-button:hover{color:#ff9eb4;background:#ff4a771f;border-color:#ff759433}.empty-state{color:#999db4;text-align:center;border:1px dashed #ffffff24;border-radius:15px;margin:0;padding:30px 20px;font-size:14px}.todo-form button:focus-visible,.delete-button:focus-visible,.todo-item input:focus-visible{outline-offset:3px;outline:2px solid #aaa2ff}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}@keyframes task-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (width<=480px){.app-shell{padding:20px 14px}.todo-card{border-radius:22px}.todo-card__header{gap:12px}.todo-form{flex-direction:column}.todo-form button{width:100%}}