:root{color-scheme:dark;--panel: #16213b;--panel-edge: #24345c;--ink: #f4f6fc;--muted: #9aa7c7;--accent: #4f8cff;--accent-ink: #0b1526;--row: #1d2c4f;--danger: #ff7a7a}*{-webkit-tap-highlight-color:transparent}:focus{outline:none}button:focus,input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:2px}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:#05070d;color:var(--ink);font:15px/1.45 system-ui,-apple-system,Segoe UI,sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}#app{width:600px;max-width:100%;height:600px;max-height:calc(100vh - 48px);background:var(--panel);border:1px solid var(--panel-edge);border-radius:20px;display:flex;flex-direction:column;overflow:hidden}.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SF Mono,Menlo,monospace}#bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--panel-edge)}#bar h1{margin:0;font-size:19px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.back{border:1px solid var(--panel-edge);background:transparent;color:var(--ink);font-size:22px;line-height:1;width:34px;height:34px;border-radius:10px;cursor:pointer}.back:hover{border-color:var(--accent)}.progress{color:var(--muted);font-size:13px;white-space:nowrap}#list-view,#detail-view{flex:1;display:flex;flex-direction:column;min-height:0}#list-view[hidden],#detail-view[hidden]{display:none}.scroll{flex:1;overflow-y:auto;padding:12px 14px}.items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.item{display:flex;align-items:center;gap:10px;background:var(--row);border-radius:12px;padding:8px 10px}.item.is-done .name{color:var(--muted);text-decoration:line-through}.circle{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--muted);background:transparent;color:#fff;font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.circle.on{background:var(--accent);border-color:var(--accent)}.circle:hover{border-color:var(--accent)}.tick{transform:translateY(-1px)}.row{flex:1;display:flex;align-items:baseline;gap:12px;background:transparent;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:2px 0;min-width:0}.name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.due{flex:none;font-size:12.5px;color:var(--muted)}.due.late{color:var(--danger);font-weight:600}.empty{color:var(--muted);text-align:center;margin:26px 0}.completed{margin-top:14px}.completed-head{display:flex;align-items:center;gap:8px;width:100%;background:transparent;border:0;color:var(--muted);font:inherit;cursor:pointer;padding:6px 2px}.completed-head .chevron{display:inline-block;transition:transform .15s ease;font-size:18px}.completed-head[aria-expanded=true] .chevron{transform:rotate(90deg)}.completed-label{font-weight:600}.count{font-size:13px}.add{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--panel-edge)}.add input{flex:1;border:1px solid var(--panel-edge);border-radius:10px;background:#0f1830;color:var(--ink);font:inherit;padding:9px 12px}.add input::placeholder{color:var(--muted)}.add button{width:40px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-size:22px;line-height:1;cursor:pointer}.detail-head{display:flex;align-items:center;gap:12px;padding:16px 18px 6px}.detail-head .circle{width:32px;height:32px}.detail-headings{min-width:0}.detail-headings h2{margin:0;font-size:18px;overflow-wrap:anywhere}.detail-due{margin:2px 0 0;color:var(--muted);font-size:13px}.detail-label{padding:10px 18px 4px;color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}.detail-text{margin:0 18px 18px;flex:1;resize:none;border:1px solid var(--panel-edge);border-radius:12px;background:#0f1830;color:var(--ink);font:inherit;padding:12px;min-height:0}.circle{transition:background-color .15s,border-color .15s}.item.leaving{overflow:hidden;pointer-events:none}.item.leaving .tick{animation:tick-in .22s ease-out}.item.collapsing{padding-top:0;padding-bottom:0;opacity:0;transition:height .28s ease,padding .28s ease,margin .28s ease,opacity .2s ease}.item.entering{animation:row-in .32s ease-out}@keyframes tick-in{0%{transform:translateY(-1px) scale(.2)}to{transform:translateY(-1px) scale(1)}}@keyframes row-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.completed-head .chevron,.circle{transition:none}.item.entering,.item.leaving .tick{animation:none}}