:root{color:#323;font-family:Helvetica Neue,Verdana,Helvetica,Arial,sans-serif;font-size:18px;line-height:1.5}*{box-sizing:border-box}html{min-height:100%;margin:0;padding:0}body{min-height:100vh;margin:0;padding:0;background:linear-gradient(to bottom,#1e528ee6 0,#26588933,#9da6714d);background-attachment:fixed;color:#ddd;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}.app-shell{width:min(600px,100%);margin:0 auto;padding:0 0 .25rem}.app-header{display:grid;grid-template-columns:4rem 1fr 4rem;align-items:start;min-height:4.75rem;padding-top:.5rem}.title-block{grid-column:2;min-width:0;text-align:center}h1{margin:.15rem 0 0;color:#ddd;font-size:1.85rem;font-weight:700;line-height:1.2;overflow-wrap:anywhere}.editable-title{display:block;width:100%;border:0;margin:.15rem 0 0;padding:0;background:transparent;color:#ddd;font-size:1.85rem;font-weight:700;line-height:1.2;overflow-wrap:anywhere}.title-edit-input{display:block;width:100%;min-height:2.6rem;border:1px solid rgba(255,255,255,.35);border-radius:3px;margin-top:.25rem;padding:.35rem .5rem;background-color:#ffffffd1;color:#1f2937;font-size:1.3rem;font-weight:700;text-align:center}.status-pill{display:inline-flex;gap:.35rem;flex-wrap:wrap;justify-content:center;margin:0;padding:.05rem .45rem;border-radius:999px;color:#2a2e37;font-size:.62rem;font-weight:700;letter-spacing:.04em;line-height:1.4;text-transform:uppercase}.status-pill-connected{background:#b4e6b4d9}.status-pill-connecting,.sync-saving{background:#ffe282d9}.status-pill-offline,.sync-error{background:#ffa0a0e6}.status-pill span+span:before{content:"·";margin-right:.35rem}.back-button,.round-button,.icon-button,.delete-list,.edit-list{display:inline-grid;place-items:center;border:0;background:transparent;color:#aaa;font-size:2rem;font-weight:700;line-height:1}.back-button{grid-column:1;width:3.75rem;height:3.75rem;padding:0;font-size:0}.back-button:before{content:"<";font-size:2.5rem}.back-button[hidden]{display:block;visibility:hidden}.inline-back{display:inline-grid;visibility:visible}.round-button{width:3.4rem;height:3.4rem;margin:0;font-size:2.5rem}.page-panel{padding:0 .25rem 1rem}.create-form{display:flex;gap:.4rem;align-items:center;margin:.75rem 1rem 1rem}.create-form input,.edit-input{display:block;width:100%;min-width:0;min-height:3rem;border:1px solid rgba(255,255,255,.3);border-radius:3px;padding:.5rem;background-color:#ffffffb3;color:#333}.create-form .round-button{flex:0 0 auto;width:3.4rem;min-width:3.4rem;font-size:2.2rem}ul{margin:0;padding:0}li{position:relative;display:block;min-height:3rem;margin:.25rem;border-radius:3px;list-style-type:none;background-color:#ffffffb8}li.drop-target{outline:3px solid rgba(0,153,255,.9);outline-offset:2px;background-color:#d2ebfff2}li.drop-target:before{content:"";position:absolute;top:-.3rem;left:.35rem;right:.35rem;height:.25rem;border-radius:999px;background:#09f;box-shadow:0 0 .45rem #0099ffd9}.list-nav li{display:grid;grid-template-columns:auto auto auto 1fr;align-items:stretch}.list-row{cursor:grab}.list-link{display:block;width:100%;border:0;padding:.75rem 1rem;background:transparent;color:#07599f;font-weight:700;text-align:left;text-decoration:none}.list-link:hover{text-decoration:underline}.unchecked-count{float:right;color:#334155}.delete-list{width:3rem;margin-left:.1rem;color:#aaa}.edit-list{width:3rem;color:#475569;font-size:1.35rem;font-weight:700}.todos{margin-top:0}.todo{display:grid;grid-template-columns:auto auto 1fr auto;gap:.4rem;align-items:center;padding:.25rem}.todo input[type=checkbox]{width:1.35rem;height:1.35rem;margin:.5rem}.todo-text{display:block;width:100%;border:0;padding:1rem .5rem;background:transparent;color:#1f2937;font-weight:600;text-align:left}.todo.completed .todo-text{color:#64748b;text-decoration:line-through}.drag-handle{display:inline-grid;place-items:center;width:2rem;color:#475569;cursor:move;font-size:1.3rem;font-weight:700;letter-spacing:-.2rem}.list-drag-handle{align-self:stretch;margin-left:.25rem}.icon-button{width:2.8rem;min-height:2.8rem;color:#475569}.edit-input{margin:.35rem 0}.message,.error{margin:1rem;text-align:center}.message{color:silver}.error{border-radius:3px;padding:.75rem;background:#ffcdcde6;color:#6b1111}.empty{min-height:15rem;display:grid;place-content:center}@media(max-width:430px){:root{font-size:17px}h1,.editable-title{font-size:1.55rem}}