:root {color-scheme:dark; font-family:system-ui,sans-serif; background:#111720; color:#f4f6f9; line-height:1.5}
* {box-sizing:border-box} body {margin:0} header,main {width:min(960px,calc(100% - 32px));margin:auto} header {display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 0;border-bottom:1px solid #354052} a {color:#91b9f8} main {padding:48px 0} h1 {font-size:clamp(2.5rem,7vw,4.5rem);line-height:1.05;letter-spacing:-.05em;margin:0} .eyebrow {color:#91b9f8} .heading,.toolbar,nav {display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between} nav {justify-content:start;margin:24px 0} button,input,select,textarea {font:inherit;border:1px solid #637086;border-radius:8px;padding:10px 14px;min-height:44px} button {cursor:pointer;background:#24344d;color:#f4f6f9} button:hover {background:#344b6c} button[aria-pressed=true],#add button,#edit>button {background:#ffdf61;color:#172033;border-color:#ffdf61} input,select,textarea {background:#19212d;color:inherit;min-width:0} :focus-visible {outline:3px solid #91b9f8;outline-offset:3px} #add {display:flex;gap:12px;margin-bottom:20px} #add input {flex:1} .toolbar {font-size:.9rem;justify-content:start;margin-bottom:24px} .task-row {display:flex;gap:8px;align-items:center;border-bottom:1px solid #354052;padding:10px 0; margin-left:calc(min(var(--depth),4)*14px)} .task-name {flex:1;text-align:left;border:0;background:transparent;overflow-wrap:anywhere} .task-name small {display:block;color:#b3becf} .task-row.done .task-name strong {text-decoration:line-through;color:#b3becf} .task-row input {width:24px;height:24px;min-height:24px;accent-color:#ffdf61} .check-label {min-width:44px;min-height:44px;display:grid;place-items:center} .hint {color:#b3becf;margin-top:32px} dialog {background:#19212d;color:#f4f6f9;border:1px solid #637086;border-radius:16px;width:min(520px,calc(100% - 32px));max-height:90dvh;padding:24px} dialog::backdrop {background:#07111fcc} dialog label {display:grid;gap:6px;margin:16px 0} .close {float:right} #status {color:#b3becf;min-height:24px} .sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .conflict {border:1px solid #ffdf61;padding:16px;border-radius:8px;margin:16px 0}.conflict button {margin:4px} @media(max-width:520px){header {align-items:start}header a{font-size:.85rem}.heading{align-items:start} .task-row {flex-wrap:wrap}.task-name{flex-basis:50%} main{padding-top:28px}}