:root{font-family:system-ui,sans-serif;color:#223b32;background:#f8f7f2}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer}.app{max-width:950px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:23px 28px;border-bottom:1px solid #e9ece6}.brand{display:flex;gap:12px;align-items:center}.brand strong{display:block;font-size:19px}.brand small{display:block;color:#829188;font-size:11px;margin-top:3px}.brandIcon{display:grid;place-items:center;background:#286348;color:#fff;width:39px;height:39px;border-radius:12px}.demoPill{background:#eef2e6;color:#5c785b;border-radius:20px;padding:8px 12px;font-size:10px;font-weight:800}main{max-width:670px;margin:auto;padding:34px 20px 70px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.eyebrow,.overline{font-size:10px;font-weight:800;letter-spacing:.12em;color:#729382}.heading h1{font-size:32px;margin:9px 0 5px}.heading p,.progress p{font-size:13px;color:#8b9790;margin:0}.wave{color:#d0a870}.dateChip{background:#e5eee7;padding:10px 16px;color:#34634a;font-size:12px;border-radius:20px;font-weight:700}.card{background:#fff;border:1px solid #ecefe9;border-radius:18px;box-shadow:0 6px 22px #23402a06}.progress{padding:23px 26px}.progressTop{display:flex;justify-content:space-between;align-items:center}.progress h2{font-size:19px;margin:8px 0 18px}.count strong{font-size:28px;color:#306c4f}.count span{color:#a1aaa3}.track{height:9px;background:#eaf0e9;border-radius:50px;overflow:hidden;margin-bottom:11px}.track span{height:100%;background:#4c956b;display:block;border-radius:50px}.progress p{margin-top:8px}nav{display:flex;gap:25px;border-bottom:1px solid #e4e9e4;margin:29px 0 19px}nav button{display:flex;align-items:center;gap:8px;border:0;background:none;padding:0 4px 15px;font-weight:700;font-size:13px;color:#94a29a;border-bottom:2px solid transparent}nav button.active{color:#2d7050;border-color:#2d7050}.areas{display:grid;gap:12px}.area{overflow:hidden}.areaTitle{background:transparent;border:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:17px 22px;text-align:left}.areaTitle>div{display:flex;align-items:center;gap:11px}.areaTitle strong{font-size:14px}.areaTitle small{color:#8c9a90;font-size:11px}.areaTitle svg.up{transform:rotate(-90deg)}.areaDot{width:10px;height:10px;border-radius:4px;background:#a6c6ac}.taskList{border-top:1px solid #f0f2ef}.task{display:flex;gap:13px;align-items:flex-start;padding:15px 20px;border-top:1px solid #f4f5f1;cursor:pointer}.task:first-child{border-top:0}.task input{position:absolute;opacity:0;width:22px;height:22px}.fakeCheck{width:21px;height:21px;border:1.5px solid #c6d3c9;border-radius:7px;display:grid;place-items:center;color:transparent;flex-shrink:0}.task input:focus-visible+.fakeCheck{outline:3px solid #b9dabf}.task input:checked+.fakeCheck{background:#4d916b;border-color:#4d916b;color:#fff}.taskText{flex:1}.taskText>span{display:block;font-size:13px;font-weight:600}.task.done .taskText>span{text-decoration:line-through;color:#9aaa9f}.taskText small{display:block;color:#9da8a0;font-size:11px;margin-top:5px}.task em{font-style:normal;color:#9b7d43;background:#f8f1df;padding:5px 7px;border-radius:6px;font-size:9px;font-weight:700}.noteCard{padding:25px}.noteCard h2{margin:0 0 7px;font-size:21px}.noteCard p,.info{font-size:13px;color:#829188;line-height:1.6}.noteCard label{display:block;font-size:13px;font-weight:700;margin:20px 0 8px}.noteCard textarea{width:100%;padding:15px;border:1px solid #d9e2d9;border-radius:10px;background:#fbfcf9;color:#253a2d}.info{margin-top:10px}.footerActions{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:24px}.finish{width:100%;border:0;border-radius:11px;background:#286348;color:#fff;font-size:14px;font-weight:700;padding:16px;display:flex;gap:9px;align-items:center;justify-content:center}.finish:disabled{background:#9fb9aa}.reset{display:flex;align-items:center;gap:7px;border:0;background:none;color:#8b9b90;font-size:12px}.disclaimer{display:flex;align-items:center;gap:9px;color:#a2aaa1;font-size:11px;text-align:center;line-height:1.5;margin-top:7px}@media(max-width:540px){header{padding:17px 19px}main{padding:25px 14px 55px}.heading{align-items:flex-start}.dateChip{padding:9px 10px}.areaTitle{padding:16px}.task{padding:15px}.areaTitle>div{flex-wrap:wrap;gap:8px}.progress{padding:20px}}.saveNote{margin-top:13px;width:100%;border:0;border-radius:10px;background:#286348;color:#fff;font-weight:700;padding:13px}.saveNote:hover{background:#1f5039}.saveNote:focus-visible{outline:3px solid #97c2a4;outline-offset:2px}.dateSelect{display:flex;gap:7px;overflow-x:auto;padding:13px 0}.dateSelect button{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;gap:4px;min-width:74px;padding:11px;border:1px solid #d9e2d9;border-radius:12px;background:#fff;color:#335a45}.dateSelect button.selected{background:#286348;color:#fff;border-color:#286348}.dateSelect small{font-size:10px;opacity:.75}.inlineRow{display:flex;align-items:center;gap:10px;border-top:1px solid #edf0eb;padding:12px 0}.inlineRow>div,.inlineRow>span{flex:1}.inlineRow strong{display:block;font-size:13px}.inlineRow small{display:block;color:#81948a;margin-top:5px;text-transform:capitalize}.inlineRow button{border:1px solid #dce4dd;background:#fff;color:#286348;border-radius:9px;padding:8px 10px;font-size:12px}.inlineRow .saveNote{width:auto;margin:0;background:#286348;color:#fff}.noteCard input,.noteCard select{width:100%;min-width:0;padding:11px;border:1px solid #d9e2d9;border-radius:9px;background:#fff}.noteCard select{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}.noteCard .inlineRow input{flex:1}.noteCard .saveNote{display:flex;align-items:center;justify-content:center;gap:8px}.noteCard button:disabled{opacity:.55;cursor:not-allowed}.editor{margin:12px 0;border:2px solid #bcd5c1}.areaTitle{cursor:default}nav{gap:20px}.heading h1{font-size:29px}@media(max-width:540px){.inlineRow{flex-wrap:wrap}.inlineRow>div{min-width:100%}.noteCard{padding:20px}.dateSelect{margin-right:-15px}}
