:root{--text:#5f6472;--text-h:#171923;--bg:#f5f3ff;--surface:#fff;--border:#ded9ef;--accent:#6d4aff;--accent-border:#6d4aff59;--shadow:0 24px 60px #4230791f;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at top left, #e8e2ff 0, transparent 32rem), var(--bg);min-width:320px;min-height:100vh;margin:0}h1,h2,p{margin-top:0}h1,h2{color:var(--text-h)}h1{letter-spacing:-.05em;font-size:clamp(2.5rem,8vw,4.5rem);line-height:1}.todo-app{text-align:left;width:min(720px,100% - 32px);margin:0 auto;padding:72px 0}.app-header{margin-bottom:32px}.app-header h1{margin:4px 0 8px}.eyebrow{color:var(--accent);letter-spacing:.16em;font-size:.75rem;font-weight:800}.todo-panel{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);border-radius:20px;padding:32px}.todo-panel h2{margin-bottom:24px}.todo-form label{color:var(--text-h);margin-bottom:8px;font-weight:700;display:block}.input-row{gap:12px;display:flex}input,button{min-height:44px;font:inherit;border-radius:10px}.input-row input{min-width:0;color:var(--text-h);border:1px solid var(--border);background:var(--bg);flex:1;padding:0 14px}button{color:#fff;background:var(--accent);cursor:pointer;border:0;padding:0 20px;font-weight:700}input:focus-visible,button:focus-visible{outline:3px solid var(--accent-border);outline-offset:2px}.empty-state{border:1px dashed var(--border);text-align:center;border-radius:12px;margin-top:28px;padding:28px 20px}.filters{gap:8px;margin-top:24px;display:flex}.filter-button{min-height:38px;color:var(--text);border:1px solid var(--border);background:0 0;padding:0 14px}.filter-button[aria-pressed=true]{color:#fff;border-color:var(--accent);background:var(--accent)}.todo-list{margin:28px 0 0;padding:0;list-style:none}.todo-list li{color:var(--text-h);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:16px;padding:16px;display:flex}.todo-content{cursor:pointer;flex:1;align-items:center;gap:12px;min-width:0;display:flex}.todo-content span{overflow-wrap:anywhere}.todo-content input{width:20px;height:20px;accent-color:var(--accent)}.todo-list li.completed span{color:var(--text);text-decoration:line-through}.todo-actions{gap:8px;display:flex}.small-button{min-height:36px;padding:0 12px;font-size:.875rem}.secondary-button{color:var(--text-h);border:1px solid var(--border);background:var(--surface)}.danger-button{color:#b42318;background:#fff5f4;border:1px solid #f0b4ae}.edit-form{align-items:center;gap:12px;width:100%;display:flex}.edit-form input{min-width:0;min-height:44px;color:var(--text-h);border:1px solid var(--border);background:var(--bg);font:inherit;border-radius:10px;flex:1;padding:0 12px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=600px){.todo-app{width:min(100% - 24px,720px);padding:36px 0}.app-header{margin-bottom:24px}.todo-panel{border-radius:16px;padding:20px}.input-row,.edit-form{flex-direction:column;align-items:stretch}.input-row button,.edit-form .todo-actions,.edit-form .small-button{width:100%}.filters{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.filter-button{padding-inline:6px}.todo-list li{flex-direction:column;align-items:stretch}.todo-actions{justify-content:flex-end}}
