:root{color:#172033;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f7f8fb;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400;line-height:1.5}body,h1,p{margin:0}h1{color:#111827;letter-spacing:0;font-size:clamp(40px,7vw,64px);line-height:1}.app{place-items:center;min-height:100svh;padding:48px 20px;display:grid}.todo-panel{gap:28px;width:min(720px,100%);display:grid}.intro{gap:10px;display:grid}.eyebrow{color:#2563eb;letter-spacing:.08em;text-transform:uppercase;font-size:14px;font-weight:700}.summary{color:#586174;max-width:560px}.todo-form{gap:10px;display:grid}.todo-form label{color:#293244;font-size:15px;font-weight:700}.form-row{grid-template-columns:1fr auto;gap:10px;display:grid}input[type=text]{box-sizing:border-box;color:#172033;width:100%;font:inherit;background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:12px 14px}input[type=text]:focus{border-color:#2563eb;outline:3px solid #bfdbfe}button{color:#fff;font:inherit;cursor:pointer;background:#2563eb;border:0;border-radius:8px;padding:12px 16px;font-weight:700}button:hover{background:#1d4ed8}button:focus-visible{outline-offset:2px;outline:3px solid #93c5fd}.todo-list{gap:10px;margin:0;padding:0;list-style:none;display:grid}.todo-item{background:#fff;border:1px solid #e2e8f0;border-radius:10px;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:12px;display:grid}.todo-item label{align-items:center;gap:10px;min-width:0;display:flex}.todo-item input{accent-color:#2563eb;width:18px;height:18px}.todo-item span{color:#172033;overflow-wrap:anywhere}.todo-item.completed span{color:#8a94a6;text-decoration:line-through}.todo-item button{color:#b91c1c;background:#fee2e2}.todo-item button:hover{background:#fecaca}@media (width<=560px){.app{align-items:start;padding-top:32px}.form-row,.todo-item{grid-template-columns:1fr}.form-row button,.todo-item button{width:100%}}