@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#25352d;background:#f7f8f2;font-synthesis:none;--ink:#25352d;--muted:#777e72;--accent:#335c43;--paper:#f7f8f2;--line:#e2e6d9}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #5c7cab;outline-offset:4px}button:disabled{cursor:default}button[hidden],[hidden]{display:none!important}.topbar{position:sticky;top:0;z-index:20;background:var(--paper);box-shadow:0 3px 12px #25352d06;max-width:1320px;margin:auto;height:103px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 48px}.brand{display:flex;align-items:center;gap:10px;font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-1px;font-size:25px;color:var(--ink);text-decoration:none}.brand-dot{color:#ce754d;margin-left:-9px}.brand-mark{display:grid;place-items:center;width:32px;height:35px;background:#335c43;color:#f4f7e6;border-radius:9px;font-size:24px;transform:rotate(-8deg);margin-right:2px}.top-actions{display:flex;align-items:center;gap:20px}.playground{font-size:10px;letter-spacing:1.6px;font-weight:700;display:flex;align-items:center;gap:8px}.playground span{width:7px;height:7px;background:#8b9f60;border-radius:50%}main{max-width:1224px;margin:auto;padding:0 48px}.intro{padding:66px 0 59px;display:flex;align-items:center;justify-content:space-between}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#728268;margin:0 0 22px}h1{font-family:Manrope,sans-serif;font-size:clamp(38px,4.4vw,56px);font-weight:650;line-height:1.16;letter-spacing:-2.8px;margin:0}h1 span{color:#829171}.intro-copy{color:#747b6e;font-size:14px;line-height:1.8;margin:22px 0 0}.intro-art{width:290px;height:225px;position:relative;margin-right:60px}.art-note{position:absolute;left:54px;top:11px;width:151px;height:181px;background:#e3ebc9;transform:rotate(10deg);border-radius:9px;box-shadow:7px 10px 0 #e9eddf;padding:30px 22px}.art-note>span{display:block;width:62px;height:8px;border-radius:9px;background:#8c9d65;margin-bottom:22px}.art-note>div{display:flex;gap:12px;align-items:center;margin-top:16px}.art-note b{display:grid;place-items:center;height:16px;width:16px;border:1.5px solid #7d8f60;border-radius:4px;font-size:13px;color:#64794d}.art-note i{width:66px;height:5px;border-radius:5px;background:#b2bf94}.art-note>div:nth-child(3) i{width:48px}.art-spark{position:absolute;right:17px;top:2px;color:#d38a60;font-size:58px;transform:rotate(14deg)}.art-caption{position:absolute;bottom:4px;left:33px;font-family:Georgia,serif;font-style:italic;font-size:16px;color:#8a927d;transform:rotate(-6deg)}.art-arrow{position:absolute;font-size:52px;color:#8a927d;right:18px;bottom:0;transform:rotate(12deg)}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.section-title{display:flex;align-items:center;gap:12px}h2{font-family:Manrope,sans-serif;font-size:20px;letter-spacing:-.6px;font-weight:750;margin:0}.count{background:#e9edde;font-size:11px;min-width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:600}.button{border:0;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:550;font-size:13px;min-height:43px;padding:0 19px;transition:background .2s,transform .2s}.button:active{transform:scale(.97)}.primary{background:#335c43;color:white;box-shadow:0 3px 5px #203f3010}.primary:hover{background:#254b35}.primary>span{font-size:22px;font-weight:400}.quiet{background:#e9edde}.quiet:hover{background:#dfe6d4}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:27px}.filters{display:flex;gap:5px}.filter{font-size:12px;font-weight:500;background:none;border:0;border-radius:7px;padding:10px 14px;color:#7b8275;white-space:nowrap}.filter.active{background:#e8eddf;color:#3c5637}.filter:hover{background:#edf0e6}.search{display:flex;align-items:center;gap:9px;color:#808879}.search>span{font-size:25px}.search input{border:0;background:transparent;max-width:175px;width:100%;font-size:12px;padding:9px 0;color:var(--ink);outline-offset:1px}.search input::placeholder{color:#92988c}.lists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}.list-card{--card:#edf0e5;background:var(--card);border:1px solid #25352d12;border-radius:14px;overflow:hidden;transition:box-shadow .2s;animation:appear .25s ease-out}.list-card:hover{box-shadow:0 7px 18px #25352d08}.card-content{padding:22px 21px 13px}.card-top{display:flex;align-items:center;gap:10px;margin-bottom:19px}.list-emoji{font-size:21px;line-height:1}.list-title{font-family:Manrope,sans-serif;font-weight:750;font-size:16px;letter-spacing:-.4px;width:100%;min-width:0;padding:3px 0;background:none;border:0;color:#2b3d30}.list-title:focus{outline-offset:3px}.icon-button{border:0;background:transparent;border-radius:6px;min-width:32px;min-height:36px;font-size:19px;padding:0;color:#63715d;display:inline-grid;place-items:center}.icon-button:hover{background:#25352d0c}.delete-list{font-size:17px;opacity:.65}.items{display:flex;flex-direction:column;gap:4px}.item{display:flex;align-items:center;gap:11px;min-height:40px;border-radius:6px}.check{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:0;border:1.5px solid #72816785;border-radius:5px;cursor:pointer;position:relative;background:#ffffff20}.check:checked{background:#607950;border-color:#607950}.check:checked:after{content:'✓';position:absolute;inset:0;color:white;font-size:13px;line-height:15px;text-align:center}.item-text{font-size:13px;line-height:1.5;background:transparent;border:0;color:#3f4d3a;width:100%;min-width:0;padding:5px 0}.item.done .item-text{text-decoration:line-through;color:#5f6f59}.remove-item{font-size:19px;min-width:28px;opacity:0;min-height:32px}.item:hover .remove-item,.remove-item:focus-visible{opacity:.8}.add-item{display:flex;gap:9px;align-items:center;margin:13px 0 2px;border-top:1px solid #25352d12;padding-top:12px;color:#778469}.add-item>span{font-size:21px;margin-left:1px}.add-item input{width:100%;background:transparent;border:0;padding:8px 0;font-size:12px;color:#3f4d3a;min-width:0}.add-item input::placeholder{color:#62735a}.add-item button{font-size:17px}.card-footer{padding:12px 21px;display:flex;justify-content:space-between;align-items:center;background:#ffffff1f;border-top:1px solid #25352d10;gap:8px}.progress-label{font-size:10px;letter-spacing:.2px;color:#5c6d50;white-space:nowrap}.card-footer-actions{display:flex;gap:6px;align-items:center}.clear-done{border:0;background:none;font-size:10px;padding:7px 2px;color:#536548}.clear-done:hover{text-decoration:underline}.card-color{appearance:none;border:1px solid #5b6c4c55;background:#ffffff40;width:20px;height:20px;border-radius:50%;position:relative}.card-color:after{content:'';position:absolute;inset:4px;border-radius:50%;background:conic-gradient(#d7e5c0,#f1ddbc,#e4dcef,#d4e5ee,#d7e5c0)}.progress-track{height:3px;background:#25352d0b}.progress-fill{height:100%;background:#82976a;transition:width .25s}.empty{text-align:center;padding:55px 10px 65px;border:1px dashed #cdd7be;border-radius:14px}.empty>span{font-size:36px;color:#7f9269}.empty h3{font-family:Manrope,sans-serif;font-size:20px;letter-spacing:-.7px}.empty p{font-size:14px;color:var(--muted)}.empty .button{margin-top:8px}footer{border-top:1px solid var(--line);margin-top:54px;padding:24px 0 32px;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#8a9083;font-size:10px}footer p{display:flex;align-items:center;gap:8px;margin:0;font-size:11px;color:#737f66}.footer-spark{font-size:21px;color:#89976b}dialog{border:1px solid #dce3d2;border-radius:18px;background:var(--paper);color:var(--ink);padding:28px;width:min(440px,calc(100vw - 32px));box-shadow:0 24px 80px #25352d25}dialog::backdrop{background:#1f302954;backdrop-filter:blur(4px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.field-label,legend{font-size:12px;font-weight:600}.title-field{display:block;width:100%;border:1px solid #d4dcc9;background:white;border-radius:8px;padding:14px;margin:10px 0 22px;font-size:15px}fieldset{border:0;padding:0;margin:0 0 25px}legend{padding:0;margin-bottom:12px}.color-picker{display:flex;gap:14px}.swatch{width:35px;height:35px;border:1px solid #25352d22;border-radius:50%;background:var(--swatch);position:relative;display:grid;place-items:center}.swatch[aria-pressed=true]{outline:2px solid #547345;outline-offset:3px}.swatch[aria-pressed=true]:after{content:'✓';font-weight:700}.dialog-submit{width:100%}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:#2f4937;color:white;padding:13px 21px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 5px 25px #25352d20;white-space:nowrap}.toast.visible{opacity:1;transform:translate(-50%,0)}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(hover:none){.remove-item{opacity:.6}}@media(min-width:1450px){.intro{padding-top:80px;padding-bottom:75px}.lists{gap:25px}}@media(max-width:900px){main{padding:0 30px}.topbar{padding:0 30px}.intro-art{margin-right:0;transform:scale(.85);transform-origin:right center;width:240px}.lists{grid-template-columns:repeat(2,minmax(0,1fr))}.intro{padding-top:48px}h1{font-size:44px}}@media(max-width:600px){.topbar{height:78px;padding:0 22px}.brand{font-size:23px}.playground{font-size:8px;letter-spacing:1.2px}.top-actions{gap:8px}.top-actions .button{font-size:11px;padding:0 10px;min-height:34px}main{padding:0 22px}.intro{padding:37px 0 38px;position:relative}.eyebrow{font-size:8px;letter-spacing:1.6px;margin-bottom:17px}h1{font-size:39px;letter-spacing:-2px}.intro-copy{font-size:12px;line-height:1.7;margin-top:18px}.intro-art{display:none}.section-heading{margin-bottom:20px}h2{font-size:19px}.section-title{gap:8px}.button{font-size:12px;padding:0 14px;min-height:42px}.toolbar{align-items:stretch;flex-direction:column;gap:12px;margin-bottom:20px}.filters{gap:4px}.filter{padding:10px 13px;font-size:12px}.search{border:1px solid var(--line);border-radius:8px;padding:0 12px;gap:9px}.search input{max-width:none;font-size:13px;padding:11px 0}.lists{grid-template-columns:1fr;gap:17px}.card-content{padding:21px 20px 12px}.item{min-height:44px}.item-text{font-size:14px}.remove-item{opacity:.5}.check{width:20px;height:20px}.check:checked:after{line-height:17px}.list-title{font-size:17px}.card-footer{padding:11px 20px}.progress-label,.clear-done{font-size:11px}footer{margin-top:32px;padding:21px 0 28px;flex-direction:column;align-items:flex-start;gap:10px}.toast{max-width:calc(100% - 30px);white-space:normal;text-align:center}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Alternate view: the same checklist items, arranged by status. */
.view-switch{display:inline-flex;gap:3px;background:#e9edde;border:1px solid #dfe5d4;padding:4px;border-radius:10px;margin-bottom:22px}.view-button{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#69765e;border-radius:7px;padding:9px 16px;font-size:12px;font-weight:600;min-height:38px}.view-button span{font-size:19px}.view-button.active{background:var(--paper);color:var(--ink);box-shadow:0 1px 4px #25352d12}.board-hint{font-size:12px;line-height:1.6;color:#77816f;margin:0 0 18px}.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}.board-column{border:1px solid #dfe5d6;background:#eef1e7;border-radius:13px;padding:15px;min-width:0;min-height:270px;transition:background .15s,border-color .15s}.column-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px}.column-heading h3{font-family:Manrope,sans-serif;font-size:13px;font-weight:750;display:flex;align-items:center;gap:9px;margin:0}.column-heading .count{background:#e2e8d9}.stage-dot{width:8px;height:8px;border-radius:50%;background:#9aa68b}.stage-dot.doing{background:#c69256}.stage-dot.done{background:#567e5b}.column-tasks{display:flex;flex-direction:column;gap:12px;min-height:85px}.kanban-task{background:var(--card);border:1px solid #25352d17;border-radius:10px;padding:10px 13px;box-shadow:0 2px 3px #25352d04;min-width:0}.task-top{display:flex;align-items:center;justify-content:space-between;gap:5px}.task-list{font-size:10px;color:#5a6b51;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5}.drag-handle{cursor:grab;font-size:21px;min-width:26px;min-height:30px;color:#708364}.drag-handle:active{cursor:grabbing}.board-task-text{width:100%;background:transparent;border:0;font-size:14px;font-weight:550;color:#33432e;padding:8px 0 15px;min-width:0}.task-done .board-task-text{text-decoration:line-through;color:#68795e}.task-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #25352d12;padding-top:7px;gap:8px}.task-status{font:inherit;font-size:11px;color:#425b38;background:#ffffff55;border:1px solid #25352d20;padding:7px 6px;border-radius:6px;max-width:calc(100% - 38px);min-height:36px;cursor:pointer}.task-status:focus-visible,.board-add select:focus-visible{outline:3px solid #5c7cab;outline-offset:3px}.delete-task{font-size:18px}.column-empty{font-size:12px;color:#819076;text-align:center;line-height:1.7;padding:12px 5px;margin:0}.board-add{margin-top:15px;border-top:1px solid #dbe2d2;padding-top:10px}.board-add>input{width:100%;border:0;background:transparent;padding:9px 0 11px;font-size:12px;color:var(--ink);min-width:0}.board-add>input::placeholder{color:#687c5a}.board-add>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.board-add select{min-width:0;max-width:calc(100% - 38px);border:1px solid #d6decc;border-radius:6px;background:#f7f8f280;color:#617155;font-size:11px;padding:8px;min-height:36px}.board-create-list{margin-top:15px;font-size:11px;width:100%;padding:0 5px}.board-column.drop-target{border-color:#60854c;background:#e0e9d4;outline:2px dashed #8a9f74;outline-offset:3px}.kanban-task.dragging{opacity:.45}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(max-width:900px){.board{gap:12px}.board-column{padding:12px}.task-list{font-size:9px}}@media(max-width:700px){.board{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x proximity;padding:4px 2px 18px;margin:0 -2px;overscroll-behavior-x:contain}.board-column{flex:0 0 85%;scroll-snap-align:start;padding:15px;max-width:360px}.board-hint{font-size:11px}.task-list{font-size:11px}.board-task-text{font-size:15px;padding:10px 0 16px}.task-status,.board-add select{font-size:12px;min-height:40px}.board-add>input{font-size:14px;padding:12px 0}.view-switch{margin-bottom:18px}.view-button{padding:7px 18px}.drag-handle{display:none}}@media(prefers-reduced-motion:reduce){.board{scroll-behavior:auto}}
@media(max-width:700px){.board-hint::after{content:' Swipe to see all columns.'}}