:root{font-family:Segoe UI,Arial,sans-serif;color:#242b3c;background:#f5f6fa;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:760px;margin:auto;padding:32px 24px}header{display:flex;align-items:center;justify-content:space-between}.logo{font-size:32px;font-weight:800;letter-spacing:-2px;text-decoration:none;color:inherit}.logo>span:first-child{color:#6b65d8}.dot{font-size:12px;color:#8a84e5;margin-left:4px}.badge{font-size:12px;color:#74798a;background:#eaecf3;border-radius:20px;padding:8px 12px}.intro{margin:54px 0 28px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#817aa9}h1{font-size:44px;letter-spacing:-1.8px;margin:12px 0}p{line-height:1.6}.intro>p:last-child{color:#7b8191;font-size:15px}.summary{display:flex;gap:38px;align-items:center;padding:24px 28px;border:1px solid #e1e2ee;border-radius:18px;background:#eeedf8;margin-bottom:28px}.summary span{font-size:30px;font-weight:650}.summary p{font-size:11px;color:#777b91;margin:3px 0}.progress-box{flex:1;margin-left:16px}.progress{height:6px;border-radius:8px;background:#dddced;overflow:hidden}.progress i{display:block;background:#847be0;height:100%;width:0;transition:width .3s}.progress-box p{margin-top:10px}.composer{background:white;border:1px solid #e6e8ef;border-radius:18px;padding:24px;box-shadow:0 8px 25px #26264004}#task-form>label{font-size:14px;font-weight:650}input,select,button{font:inherit}#title{display:block;width:100%;border:0;border-bottom:1px solid #eef0f5;padding:16px 0;margin-bottom:16px;font-size:15px;outline:none}input::placeholder{color:#a1a5b4}.form-bottom{display:flex;align-items:end;gap:12px}.field{font-size:10px;color:#85899a;display:grid;gap:5px}.field input,.field select{background:#f6f7fa;border:1px solid #eceef3;border-radius:8px;padding:8px;color:#63697c;font-size:12px}.primary{margin-left:auto;background:#7770ce;color:white;border:0;padding:12px 20px;border-radius:10px;font-weight:600;font-size:13px;cursor:pointer}.primary:hover{background:#655dbb}.tasks{margin-top:34px}.list-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}h2{font-size:19px}h2 span{font-size:11px;background:#e8e9f1;color:#81869a;padding:3px 7px;border-radius:6px;margin-left:5px}#search{width:160px;background:transparent;border:1px solid #e2e5ed;border-radius:8px;padding:8px;font-size:12px}nav{display:flex;gap:5px;border-bottom:1px solid #e3e6ee;margin-bottom:18px;padding-bottom:12px}nav button{background:transparent;border:0;border-radius:8px;color:#898e9e;font-size:12px;padding:9px 14px;cursor:pointer}nav .selected{background:#e9e7f7;color:#7269bf;font-weight:650}.task{display:flex;align-items:center;gap:14px;background:white;border:1px solid #e6e8ef;border-radius:13px;padding:17px;margin-bottom:9px}.check{width:21px;height:21px;accent-color:#8176cc;flex-shrink:0;cursor:pointer}.task-content{flex:1;min-width:0}.task-title{font-size:14px;overflow-wrap:anywhere;display:block}.task.done .task-title{text-decoration:line-through;color:#a0a4b1}.meta{display:flex;gap:10px;color:#9196a5;font-size:10px;margin-top:6px}.important{color:#b18648}.late{color:#bf6969}.edit,.delete{border:0;background:transparent;color:#9b9fb0;cursor:pointer;padding:6px;font-size:12px}.delete:hover{color:#c15f70}.empty{text-align:center;border:1px dashed #dfe2ed;border-radius:14px;padding:38px 18px;color:#9297a8;font-size:13px}.empty strong{display:block;color:#686f83;font-size:16px;margin-bottom:8px}footer{text-align:center;font-size:11px;color:#969bad;line-height:2;margin-top:42px}footer span{font-size:10px;color:#b1b4c2}#notice{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#34384b;color:white;border-radius:10px;padding:12px 18px;font-size:12px;max-width:90%;display:none}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #8b80dc;outline-offset:3px}@media(max-width:500px){main{padding:22px 18px}.intro{margin-top:38px}h1{font-size:35px}.summary{padding:20px;gap:24px}.progress-box{margin-left:0}.summary p{font-size:10px}.composer{padding:18px}.form-bottom{flex-wrap:wrap;gap:8px}.primary{padding:11px 14px}.field input{max-width:136px}.badge{font-size:10px}.task{padding:14px;gap:9px}.edit,.delete{padding:4px;font-size:11px}}@media(max-width:360px){.primary{width:100%;margin-top:6px}.progress-box{display:none}}