@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@600;700;800&display=swap');
:root{font-family:'DM Mono',monospace;color:#17211b;background:#e9eee8}*{box-sizing:border-box}body{margin:0}.shell{max-width:960px;margin:auto;padding:56px 28px 80px}.hero{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid #bdc9bd;padding-bottom:38px}.eyebrow{font-size:11px;letter-spacing:2px;color:#64806a;margin:0 0 16px}.hero h1{font:800 clamp(42px,8vw,84px)/.92 Syne;margin:0;letter-spacing:-4px}.hero h1 span{color:#e65d3f}.intro{color:#68756b;margin:22px 0 0}.count{font:800 54px Syne;color:#e65d3f}.count small{font:12px 'DM Mono';color:#68756b}.new-task{margin:42px 0 58px}.new-task h2,.list-heading h2{font:700 20px Syne;margin:0 0 18px}.task-form{display:grid;grid-template-columns:1.2fr 1.5fr auto auto;gap:10px;align-items:center}.task-form input:not([type=checkbox]),.edit-panel input{border:1px solid #bdc9bd;background:#f8faf7;border-radius:6px;padding:14px;font:13px inherit;color:inherit}.check{font-size:11px;white-space:nowrap;color:#68756b}.check input{accent-color:#e65d3f;margin-right:6px}button{border:0;border-radius:5px;background:#17211b;color:#f8faf7;padding:14px 18px;font:500 12px inherit;cursor:pointer}button b{font-size:17px;margin-left:8px}.list-heading{display:flex;justify-content:space-between;align-items:center}.list-heading span{font-size:11px;color:#e65d3f}.task{display:flex;align-items:center;gap:18px;background:#f8faf7;border:1px solid #d4ddd3;border-radius:8px;padding:21px 20px;margin:10px 0}.task.is-priority{border-left:4px solid #e65d3f}.task-mark{width:24px;height:24px;border:1px solid #b7c4b8;border-radius:50%;display:grid;place-items:center;color:#e65d3f;font-weight:bold}.task-content{flex:1}.task h3{font:600 16px Syne;margin:0}.task p{font-size:12px;color:#758078;margin:8px 0 0}.task-actions{display:flex;gap:10px}.task-actions button{background:transparent;color:#718077;padding:6px;font-size:11px}.task-actions .delete{color:#c35c4a}.edit-panel{padding:14px 20px;margin-top:-8px;background:#dae5da;border-radius:0 0 8px 8px}.edit-panel form{display:flex;gap:8px;flex-wrap:wrap}.edit-panel input{flex:1;min-width:180px;padding:10px}.edit-panel button{padding:10px 14px}.edit-panel .cancel{background:transparent;color:#17211b}.notice,.errors{padding:13px 16px;border-radius:6px;font-size:12px;margin:20px 0}.notice{background:#d4ead6;color:#35623c}.errors{background:#f6d8d2;color:#9b4232}.empty{text-align:center;padding:45px 20px;border:1px dashed #bdc9bd;color:#758078;font-size:12px}.empty strong{font:600 18px Syne;color:#17211b}@media(max-width:700px){.shell{padding:34px 18px}.hero{align-items:start}.count{font-size:34px}.task-form{grid-template-columns:1fr}.task-form button{width:100%}.task{align-items:start;padding:16px 12px;gap:10px}.task-actions{flex-direction:column;gap:0}.task-actions button{padding:4px}.hero h1{letter-spacing:-2px}}