:root{color-scheme:dark;--page:#000;--surface:#10100f;--hi:#eeede8;--mid:#999991;--low:#6f6f69;--hair:#262623;--accent:#efdc60;--accent-rgb:239,220,96;--marker-ink:#201f13;--serif:"Iowan Old Style","Palatino Linotype",Georgia,serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--hi);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;transition:background .7s,color .7s}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button{border:0;background:none}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button,input{touch-action:manipulation}button{border-radius:5px}a{color:inherit}::selection{background:var(--accent);color:var(--marker-ink)}[hidden]{display:none!important}#field{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}.shell{width:min(100% - 96px,1120px);margin:auto}.topbar{height:120px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-size:17px;letter-spacing:-.5px}.brand svg{width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1 3}.brand-divider{margin:0 9px;color:var(--low)}.top-actions{display:flex;gap:10px}.icon-button{width:40px;height:40px;display:inline-grid;place-items:center;color:var(--mid);transition:color .2s,background .2s}.icon-button:hover{color:var(--hi);background:color-mix(in srgb,var(--hi) 6%,transparent)}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}main{width:min(100%,720px);margin:58px auto 0;padding-bottom:40px;position:relative}main:before{content:"";position:absolute;z-index:-1;inset:-80px -80px -30px;background:var(--page);filter:blur(80px);opacity:.89;pointer-events:none}.eyebrow{display:flex;justify-content:space-between;gap:20px;color:var(--mid);font:11px/1.5 var(--mono);letter-spacing:1.8px}.title-line{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:18px 0 31px}h1{font:400 clamp(2.7rem,5.5vw,4.15rem)/1.13 var(--serif);letter-spacing:-2.6px;margin:0}.title-dot{color:var(--accent-text,var(--accent))}#progress{font:12px var(--mono);color:var(--mid);white-space:nowrap;display:flex;align-items:center;gap:10px}#progress:before{content:"";width:23px;height:23px;border-radius:50%;background:conic-gradient(var(--accent) var(--progress,0%),var(--hair) 0);mask:radial-gradient(transparent 56%,#000 60%)}#add-form{display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--hair);padding:15px 0 19px;margin-bottom:29px}#add-form:focus-within{border-color:var(--accent-text,var(--accent))}.add-symbol{width:28px;color:var(--accent-text,var(--accent));font-size:25px;font-weight:200;text-align:center}#new-task{width:100%;min-width:0;background:none;color:var(--hi);border:0;outline:none;font-size:17px}#new-task::placeholder{color:var(--mid)}.add-submit{width:36px;height:32px;color:var(--mid);font-size:20px;background:color-mix(in srgb,var(--hi) 4%,transparent)}.add-submit:hover{color:var(--accent-text,var(--accent))}.list-heading{display:flex;align-items:center;justify-content:space-between;min-height:30px;margin-bottom:13px;color:var(--mid);font:11px var(--mono);letter-spacing:1.8px}#active-count{color:var(--low);margin-left:10px}.quiet-button{color:var(--mid);font:13px/1.5 var(--sans);letter-spacing:0;padding:6px 0}.quiet-button:hover{color:var(--hi)}#undo{font-size:12px}.task{position:relative}.task-row{position:relative;display:flex;align-items:center;min-height:65px;gap:15px;border-radius:6px;padding:8px 0;transition:background .2s,opacity .25s}.task-row:hover{background:color-mix(in srgb,var(--hi) 2%,transparent)}.check{flex:0 0 21px;height:21px;border:1px solid var(--low);border-radius:5px;margin:0 0 0 4px;padding:2px;display:grid;place-items:center;transition:background .25s,border-color .25s,transform .25s}.check svg{width:14px;height:14px;opacity:0;stroke-width:2}.check:hover{border-color:var(--accent-text,var(--accent));transform:scale(1.09)}.task-title{font:400 23px/1.48 var(--serif);letter-spacing:-.25px;min-width:0;flex:1;text-align:left;padding:3px 0;overflow-wrap:anywhere;border-radius:0}.task-title .text{padding:.04em .11em;margin-left:-.11em;box-decoration-break:clone;-webkit-box-decoration-break:clone}.task.important>.task-row .text{color:var(--marker-ink);background:linear-gradient(178deg,transparent 0 8%,var(--accent) 10% 88%,transparent 92%);border-radius:.1em .04em .13em .06em}.task-tools{display:flex;gap:1px;opacity:0;transition:opacity .2s;flex-shrink:0}.task-row:hover>.task-tools,.task-row:focus-within>.task-tools{opacity:1}.task-tools .icon-button{width:30px;height:34px}.task-tools svg{width:16px;height:16px}.task-tools .marked{color:var(--accent-text,var(--accent))}.drag-handle{position:absolute;left:-29px;top:50%;transform:translateY(-50%);width:28px;height:38px;cursor:grab;touch-action:none;opacity:0;color:var(--low)}.task-row:hover>.drag-handle,.drag-handle:focus-visible{opacity:1}.drag-handle svg{width:15px}.children{margin-left:14px;padding-left:30px;border-left:1px solid var(--hair);margin-top:3px;margin-bottom:15px}.children .task-row{min-height:51px;gap:12px}.children .task-title{font-size:19px;color:var(--mid)}.children .check{width:17px;height:17px;flex-basis:17px;border-radius:4px;margin-left:3px}.children .task:before{content:"";position:absolute;top:25px;left:-30px;width:16px;height:1px;background:var(--hair)}.children .drag-handle{left:-25px;background:var(--page)}.branch-toggle{font:11px var(--mono);color:var(--low);display:flex;gap:5px;align-items:center;padding:4px}.branch-toggle svg{width:12px;transition:transform .2s}.branch-toggle[aria-expanded=true] svg{transform:rotate(90deg)}.branch-composer{display:flex;align-items:center;gap:8px;padding:9px 0 14px 3px}.branch-composer input,.edit-input{color:var(--hi);border:0;border-bottom:1px solid var(--accent);background:transparent;min-width:0;width:100%;padding:7px 0;font-family:var(--serif);font-size:19px;outline:none}.edit-input{flex:1;font-size:23px}.branch-composer button{color:var(--accent-text,var(--accent));font-size:20px;min-width:32px}.done-heading{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--hair);padding-top:18px;margin-top:30px;margin-bottom:7px}.done-heading #toggle-done{font-size:14px}.done-heading #done-count{margin-left:9px;font:11px var(--mono);color:var(--low)}.done .check{background:var(--hair);border-color:var(--hair);color:var(--mid)}.done .check svg{opacity:1}.done .task-title{font-size:20px;color:var(--low);text-decoration:line-through;text-decoration-thickness:1px}.done .task-row{min-height:52px}.done .task-tools{opacity:0}.done .task-row:hover .task-tools,.done .task-row:focus-within .task-tools{opacity:1}.breadcrumb{display:block;font:11px var(--sans);color:var(--low);text-decoration:none;margin-bottom:2px}footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--hair);margin-top:42px;padding-top:19px;font-size:12px;color:var(--low)}footer button{font:12px var(--mono)!important;padding:4px 7px!important;border:1px solid var(--hair)}#example-bar{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--mid);margin:-10px 0 18px;padding:9px 12px;background:color-mix(in srgb,var(--accent) 6%,transparent);border-left:2px solid var(--accent)}#example-bar button{font-size:12px;color:var(--accent-text,var(--accent))}#empty{padding:47px 0 38px;text-align:center;color:var(--mid)}#empty p{font:28px var(--serif);margin:14px 0 12px}.empty-mark{color:var(--accent-text,var(--accent));font:28px var(--serif)}dialog{width:min(390px,calc(100% - 32px));max-height:90svh;overflow-y:auto;background:var(--surface);color:var(--hi);padding:25px 28px 23px;border:1px solid var(--hair);border-radius:14px;box-shadow:0 20px 100px #0008}dialog::backdrop{background:#0007;backdrop-filter:blur(7px)}dialog[open]{animation:dialog-in .25s ease-out}.dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.dialog-heading h2{font:28px var(--serif);letter-spacing:-.7px;margin:0}.dialog-heading .icon-button{width:26px;height:30px}.setting-label{display:block;font-size:12px;color:var(--mid);margin:22px 0 12px}.presets{display:flex;gap:8px}.preset{flex:1;border:1px solid var(--hair);padding:12px 4px 9px;font-size:12px;color:var(--mid)}.preset-preview{display:block;margin:0 auto 9px;width:55px;height:31px;background:var(--preview-bg);border-radius:3px;padding:7px 8px}.preset-preview:before,.preset-preview:after{content:"";display:block;height:4px;width:31px;background:var(--preview-color);transform:rotate(-2deg)}.preset-preview:after{width:21px;margin-top:7px;opacity:.3}.preset[aria-pressed=true]{border-color:var(--accent-text,var(--accent));color:var(--hi)}.swatches{display:flex;justify-content:space-between;gap:6px}.swatch{width:30px;height:30px;padding:5px;border:1px solid transparent;border-radius:50%}.swatch:before{content:"";display:block;background:var(--swatch);width:18px;height:18px;border-radius:50%}.swatch[aria-pressed=true]{border-color:var(--accent-text,var(--accent))}select{width:100%;border:1px solid var(--hair);background:var(--page);color:var(--hi);padding:10px 12px;border-radius:6px;font-size:14px}.switch-row{display:flex;align-items:center;justify-content:space-between;margin-top:23px;font-size:14px}.switch{width:33px;height:20px;border-radius:20px;background:var(--hair);padding:3px;transition:background .2s}.switch:before{content:"";display:block;width:14px;height:14px;background:var(--mid);border-radius:50%;transition:transform .2s}.switch[aria-checked=true]{background:var(--accent)}.switch[aria-checked=true]:before{background:var(--marker-ink);transform:translateX(13px)}.menu{position:fixed;z-index:10;width:190px;padding:6px;background:var(--surface);border:1px solid var(--hair);border-radius:9px;box-shadow:0 12px 45px #0006}.menu button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px;font-size:13px;color:var(--mid)}.menu button:hover,.menu button:focus-visible{color:var(--hi);background:color-mix(in srgb,var(--hi) 7%,transparent);outline:none}.menu .danger{color:#df8e82}.menu hr{border:0;border-top:1px solid var(--hair);margin:5px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:28px;align-items:center;max-width:calc(100% - 32px);padding:13px 18px;border:1px solid var(--hair);background:var(--surface);border-radius:9px;box-shadow:0 8px 40px #0005;font-size:13px}#toast button{color:var(--accent-text,var(--accent));font-size:13px;padding:5px}dl{margin:0}dl div{display:flex;justify-content:space-between;align-items:center;padding:12px 0;gap:15px;border-bottom:1px solid var(--hair);font-size:13px}dd{margin:0;white-space:nowrap}kbd{font:11px var(--mono);padding:3px 5px;border:1px solid var(--hair);border-radius:3px;color:var(--mid)}.small-note{font-size:12px;color:var(--mid);margin:20px 0 0}.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}.dragging{opacity:.25}.drag-ghost{position:fixed;z-index:50;pointer-events:none;background:var(--surface);padding:9px 17px;border:1px solid var(--accent);box-shadow:0 12px 40px #0008;border-radius:7px;font:20px var(--serif);max-width:75vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drop-before>.task-row:before,.drop-after>.task-row:after{content:"";position:absolute;height:2px;background:var(--accent);left:0;right:0;top:0;box-shadow:0 0 8px #efdc6033}.drop-after>.task-row:after{top:auto;bottom:0}.drop-inside>.task-row{background:color-mix(in srgb,var(--accent) 10%,transparent);outline:1px solid var(--accent)}body.drag-active{user-select:none;cursor:grabbing}.task.enter{animation:enter .4s ease-out}.task.exiting{animation:exit .25s ease-in forwards}.decode-glyph{display:inline-block;white-space:pre;text-align:center}.save-error{color:#df8e82!important}@keyframes enter{from{opacity:0;transform:translateY(9px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}@keyframes exit{to{opacity:0;transform:translateY(7px);filter:blur(4px)}}@keyframes dialog-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}body[data-motion=off] *,body[data-motion=off] *:before,body[data-motion=off] *:after{animation:none!important;transition:none!important}
@media(min-width:1500px){main{margin-top:80px}}
@media(hover:none){.task-tools,.drag-handle{opacity:1}.task-tools .highlight-button,.task-tools .branch-button{display:none}.drag-handle{left:-23px;width:22px;color:var(--low)}.done .task-tools{opacity:1}}
@media(max-width:700px){.shell{width:calc(100% - 48px)}.topbar{height:90px}main{margin-top:40px}h1{letter-spacing:-1.8px}.eyebrow{font-size:10px;letter-spacing:1.1px}#local-state{display:none}.title-line{margin-top:16px;margin-bottom:25px}.task-title{font-size:21px}.task-row{gap:12px}.task-tools .highlight-button,.task-tools .branch-button{display:none}.task-tools{opacity:1}.drag-handle{opacity:.65;left:-23px;width:23px}.task-tools .icon-button{width:28px}.children{padding-left:21px;margin-left:14px}.children .task:before{left:-21px;width:10px}.children .task-title{font-size:18px}.children .task-row{gap:9px}.children .children{padding-left:15px;margin-left:7px}.children .children .task:before{left:-15px;width:7px}.children .branch-toggle{font-size:10px;padding:0}.children .drag-handle{left:-22px}.check{margin-left:2px}.title-line #progress{font-size:11px;gap:7px}.title-line #progress:before{width:20px;height:20px}.brand{font-size:15px}.top-actions{gap:5px}main:before{inset:-30px -10px;filter:blur(25px)}.done .task-tools{opacity:1}footer{margin-top:30px}#new-task{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* A continuous field, a soft reading scrim, and the presentation's painted marker. */
body{isolation:isolate}#field{z-index:-2}main:before{z-index:-1;opacity:.84;filter:blur(46px);inset:-50px -38px -25px}.brand{font-family:var(--mono);letter-spacing:1.8px;font-size:14px;color:var(--accent-text,var(--accent))}.brand-divider{letter-spacing:0}.brand svg{display:none}.task-title .text{background-image:linear-gradient(178deg,transparent 0 3%,var(--accent) 7%,color-mix(in srgb,var(--accent) 78%,white) 52%,var(--accent) 92%,transparent 98%);background-repeat:no-repeat;background-position:left center;background-size:0% 100%;padding:.03em .10em;margin:0 -.10em}.task.important>.task-row .text{background-image:linear-gradient(178deg,transparent 0 3%,var(--accent) 7%,color-mix(in srgb,var(--accent) 78%,white) 52%,var(--accent) 92%,transparent 98%);background-repeat:no-repeat;background-position:left center;background-size:100% 100%;box-decoration-break:clone;-webkit-box-decoration-break:clone}.task-title{font-family:Georgia,serif}.task.done .text{background:none}.icon-button svg{stroke-width:1.3}.eyebrow{font-size:12px}.list-heading{font-size:12px}.task-row{min-height:69px}#new-task{font-family:var(--serif);font-size:21px}.add-symbol{font-family:var(--mono);font-size:23px}
@media(max-width:700px){main:before{inset:-24px -8px;filter:blur(24px);opacity:.88}.eyebrow{font-size:12px}.task-row{min-height:63px}#new-task{font-size:19px}}
/* Keep the working list in the first viewport. */
.topbar{height:90px}main{margin-top:30px}h1{font-size:clamp(2.7rem,5.1vw,3.7rem)}.title-line{margin:14px 0 22px}#add-form{margin-bottom:20px}.check{position:relative}.check:before{content:"";position:absolute;inset:-10px}.task-row:focus-within{z-index:1}
@media(min-width:1500px){main{margin-top:50px}}
@media(max-width:700px){.topbar{height:78px}main{margin-top:24px}#progress:before{display:none}.task-tools .icon-button{height:40px;width:32px}.brand{font-size:13px}#example-bar{gap:10px}}

.done .task-title{text-decoration:none}.done .task-title .text{text-decoration:line-through;text-decoration-thickness:1px}