:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#18213a;background:#f5f7fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{cursor:pointer}.topbar{height:88px;display:flex;justify-content:space-between;align-items:center;padding:0 6%;background:#fff;border-bottom:1px solid #e7ebf2}.brand{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:750;letter-spacing:-.8px}.mark{display:grid;place-items:center;background:#2752e7;color:white;width:31px;height:31px;border-radius:9px;font-size:22px}.brand-divider{height:22px;width:1px;background:#e1e5ed;margin:0 10px}.brand-caption,.personal-space{font-size:14px;letter-spacing:0;font-weight:400;color:#717b8e}.personal-space{background:#f3f5fa;padding:8px 13px;border-radius:20px}main{max-width:850px;margin:70px auto 0;padding:0 24px}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}.eyebrow{color:#65738e;font-size:12px;letter-spacing:2px;font-weight:650;margin:0 0 12px}h1{font-size:48px;line-height:1.15;letter-spacing:-2px;margin:0;font-weight:720}.heading-dot{color:#2752e7}.intro{font-size:16px;color:#758095;margin:12px 0 0}.heading-icon{width:60px;height:60px;border:1px solid #dce3f5;border-radius:18px;background:#edf1ff;display:grid;place-items:center;transform:rotate(-7deg)}.heading-icon svg{width:29px;stroke:#2752e7;stroke-width:2.5;stroke-linecap:round;fill:none}.composer{background:white;padding:26px 28px 20px;border:1px solid #e2e7f0;border-radius:16px;box-shadow:0 4px 18px #18213a03}h2{font-size:16px;font-weight:650;margin:0}form{display:flex;gap:10px;margin-top:17px}.task-field{flex:1;min-width:0}input[type=text]{width:100%;height:50px;padding:0 15px;background:#fafbfe;border:1px solid #dce2ed;border-radius:8px;color:#18213a}input::placeholder{color:#8790a3}select{height:50px;max-width:100%;border:1px solid #dce2ed;border-radius:8px;padding:0 35px 0 13px;background-color:#fff;color:#586278;font-size:14px}.add-button{height:50px;border:none;border-radius:8px;background:#2752e7;color:#fff;padding:0 18px;font-size:14px;font-weight:600;white-space:nowrap;display:flex;gap:9px;align-items:center;justify-content:center}.add-button span{font-size:23px;font-weight:400}.add-button:hover{background:#1d41be}:focus-visible{outline:3px solid #8ba6ff;outline-offset:3px}.form-hint{font-size:12px;color:#7a8598;margin:13px 0 0}.task-panel{margin-top:28px;border:1px solid #e2e7f0;border-radius:16px;background:#fff;overflow:hidden}.list-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:24px 28px;border-bottom:1px solid #edf0f5}.list-heading h2{display:flex;gap:10px;align-items:center}.list-heading h2 span{background:#f0f3f9;color:#6a7690;font-size:12px;padding:3px 7px;border-radius:5px}.list-heading p{font-size:13px;color:#7a8598;margin:0}ul{list-style:none;margin:0;padding:0}.task-row{display:flex;align-items:center;gap:14px;padding:18px 28px;border-bottom:1px solid #edf0f5;min-height:76px}.task-row:last-child{border-bottom:none}.task-checkbox{width:21px;height:21px;flex-shrink:0;accent-color:#2752e7;cursor:pointer;margin:0}.task-label{flex:1;min-width:0;overflow-wrap:anywhere;font-size:16px;line-height:1.5;cursor:pointer}.task-row.done .task-label{text-decoration:line-through;color:#9099aa}.task-category{height:34px;width:115px;padding:0 22px 0 10px;font-size:12px;border-color:transparent;background:#f1f3f8;color:#5d6880;border-radius:6px}.task-category[data-category=Work]{background:#edf1ff;color:#3658b4}.task-category[data-category=Personal]{background:#f2edff;color:#7155a6}.task-category[data-category=Shopping]{background:#e9f6f1;color:#2d765d}.delete-button{display:grid;place-items:center;border:0;background:transparent;color:#8e98aa;flex-shrink:0;width:36px;height:36px;border-radius:6px}.delete-button:hover{background:#fff0f1;color:#bb3b49}.delete-button svg{width:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}#empty-state{text-align:center;padding:48px 20px 52px}.empty-icon{display:grid;place-items:center;background:#f5f7fc;border:1px solid #e9edf5;border-radius:18px;width:64px;height:64px;margin:0 auto 18px}.empty-icon svg{width:37px;fill:none;stroke:#8d9ab5;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}h3{font-size:16px;font-weight:550;margin:0 0 8px}#empty-state p{font-size:14px;color:#8791a4;margin:0}.list-footer{background:#fcfdff;border-top:1px solid #edf0f5;display:flex;justify-content:space-between;gap:10px;padding:16px 28px;color:#8791a4;font-size:12px}.session-note{text-align:center;font-size:12px;color:#8791a4;margin:21px 0 0}footer{text-align:center;font-size:12px;color:#929cae;padding:55px 20px 28px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}@media(max-width:650px){.topbar{height:72px;padding:0 22px}.brand-caption,.brand-divider{display:none}main{margin-top:40px;padding:0 18px}h1{font-size:40px}.composer{padding:23px 20px 18px}form{flex-wrap:wrap}.task-field{flex-basis:100%}.category-field{flex:1}.category-field select{width:100%}.add-button{flex:1}.list-heading{padding:21px 20px}.task-row{padding:16px 20px;gap:10px;flex-wrap:wrap}.task-label{flex-basis:calc(100% - 40px)}.task-category{margin-left:31px}.delete-button{margin-left:auto}.list-footer{padding:15px 20px}.list-footer span:last-child{display:none}.heading-icon{width:50px;height:50px}.personal-space{font-size:12px}}

/* Spacious cards and refined controls. */
main{max-width:880px;margin:60px auto 0}
.page-heading{margin-bottom:32px}
h1{font-size:50px}
.composer{padding:28px;border-radius:20px;box-shadow:0 8px 28px rgba(24,33,58,.045)}
input[type=text],select,.add-button{border-radius:11px}
input[type=text]{background:#f8faff;border-color:#dbe2ee;transition:border-color .15s,box-shadow .15s}
input[type=text]:hover{border-color:#b9c7de}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2365738e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:16px;padding-right:36px;transition:border-color .15s,box-shadow .15s}
select:hover{border-color:#b9c7de}
.add-button{padding:0 22px;box-shadow:0 3px 8px rgba(39,82,231,.18);transition:background .15s,box-shadow .15s}
.add-button:hover{box-shadow:0 5px 14px rgba(39,82,231,.24)}
.task-panel{background:transparent;border:0;border-radius:0;overflow:visible;margin-top:30px}
.list-heading{padding:0 4px 18px;border:0}
#task-list{display:flex;flex-direction:column;gap:14px}
.task-row,.task-row:last-child{background:#fff;border:1px solid #e2e7f0;border-radius:16px;padding:20px 24px;min-height:86px;box-shadow:0 3px 12px rgba(24,33,58,.045);transition:border-color .15s,box-shadow .15s}
.task-row:hover{border-color:#cbd6eb;box-shadow:0 5px 18px rgba(24,33,58,.065)}
.task-row.done{background:#fbfcff}
.task-category{height:38px;width:130px;padding:0 33px 0 12px;font-size:14px;border:1px solid #e2e7f0;border-radius:9px;background-color:#f2f4f9}
.delete-button{width:40px;height:40px;border:1px solid #e7ebf2;background:#f8faff;border-radius:10px;color:#6b7891;transition:background .15s,color .15s,border-color .15s}
.delete-button:hover{border-color:#f3c9d0;background:#fff0f1}
#empty-state{background:#fff;border:1px dashed #d5deed;border-radius:16px;padding:44px 20px;box-shadow:0 3px 12px rgba(24,33,58,.025)}
.list-footer{background:transparent;border:0;padding:18px 4px 0}
@media(max-width:650px){main{margin-top:36px;padding:0 18px}h1{font-size:40px}.composer{padding:23px 20px}.task-row,.task-row:last-child{padding:18px;gap:12px}.task-label{flex-basis:calc(100% - 40px)}.task-category{margin-left:33px}.list-heading{align-items:center}.list-heading p{font-size:12px}.page-heading{gap:16px}}
@media(prefers-reduced-motion:reduce){input[type=text],select,.add-button,.task-row,.delete-button{transition:none}}