:root{color-scheme:light dark;--ground:#f2f2f7;--card:#ffffff;--text:#1c1c1e;--secondary:#8e8e93;--tertiary:#c7c7cc;--separator:rgba(60,60,67,0.12);--accent:#007aff;--destructive:#ff3b30;--shadow:0 1px 2px rgba(0,0,0,0.04),0 8px 24px rgba(0,0,0,0.04);--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI Variable","Segoe UI",Inter,Roboto,system-ui,sans-serif}@media (prefers-color-scheme:dark){:root{--ground:#000000;--card:#1c1c1e;--text:#f2f2f7;--secondary:#8e8e93;--tertiary:#48484a;--separator:rgba(84,84,88,0.6);--accent:#0a84ff;--destructive:#ff453a;--shadow:none}}*{box-sizing:border-box}body,html{margin:0;padding:0}body{background:var(--ground);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.35;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.page{max-width:560px;margin:0 auto;padding:clamp(40px,10vh,96px) 20px 80px}.header{padding:0 4px 18px}.title{margin:0;font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.15}.subtitle{margin:6px 0 0;color:var(--secondary);font-size:17px;min-height:1.35em}.card{background:var(--card);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}.card--done{opacity:.85}.list{list-style:none;margin:0;padding:0}.row{display:flex;align-items:center;gap:14px;min-height:52px;padding:0 16px;position:relative}.empty:before,.list .row:before{content:"";position:absolute;left:52px;right:0;top:0;height:1px;background:var(--separator)}.card--done .list .row:first-child:before{display:none}.row--input{margin:0}.plus{width:22px;height:22px;display:grid;place-items:center;color:var(--accent);flex:none}.plus svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.input{flex:1 1;min-width:0;height:52px;border:0;outline:none;background:transparent;color:var(--text);font:inherit;padding:0}.input::placeholder{color:var(--secondary)}.empty{margin:0;padding:16px 16px 18px 52px;color:var(--secondary);position:relative}.tick{flex:none;padding:0;border:0;background:none;cursor:pointer;place-items:center;color:var(--accent)}.tick,.tick__ring{width:22px;height:22px;display:grid;border-radius:50%}.tick__ring{border:1.5px solid var(--tertiary);place-items:center;transition:border-color .16s ease,background-color .16s ease,transform .16s ease}.tick:focus-visible .tick__ring,.tick:hover .tick__ring{border-color:var(--accent)}.tick:active .tick__ring{transform:scale(.9)}.tick--done .tick__ring,.tick:active .tick__ring{background:var(--accent);border-color:var(--accent)}.tick__ring svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.text{flex:1 1;min-width:0;padding:14px 0;overflow-wrap:anywhere}.row--done .text{color:var(--secondary);text-decoration:line-through;-webkit-text-decoration-color:var(--tertiary);text-decoration-color:var(--tertiary)}.delete{flex:none;width:28px;height:28px;margin-right:-6px;border:0;border-radius:50%;background:none;color:var(--secondary);cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .14s ease,color .14s ease,background-color .14s ease}.delete svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.delete:focus-visible,.row:focus-within .delete,.row:hover .delete{opacity:1}.delete:focus-visible,.delete:hover{color:var(--destructive);background:color-mix(in srgb,var(--destructive) 10%,transparent)}@media (hover:none){.delete{opacity:.55}}.delete:disabled,.tick:disabled{cursor:default}.delete:focus-visible,.tick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.notice{margin:12px 4px 0;color:var(--destructive);font-size:15px}.completed{margin-top:36px}.completed__heading{margin:0 4px 10px;font-size:15px;font-weight:600;color:var(--secondary)}.completed__count{font-weight:400}@media (prefers-reduced-motion:reduce){*{transition:none!important}}