:root{
  --desk:#ecebe6; --card:#ffffff; --ink:#3a3a38; --muted:#9a9a95; --rule:#cfcfca;
  --fill:#4a4a47; --shadow:0 1px 2px rgba(40,40,30,.06),0 12px 40px rgba(40,40,30,.10);
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light; box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
@media (prefers-color-scheme: dark){:root{
  --desk:#151514; --card:#1f1f1d; --ink:#e4e3de; --muted:#7f7e79; --rule:#3a3a37;
  --fill:#d8d7d2; --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 40px rgba(0,0,0,.45); color-scheme:dark}}
[hidden]{display:none!important}
html,body{min-height:100%;margin:0}
body{background:var(--desk);color:var(--ink);font-family:var(--mono);font-weight:300;font-size:14px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:calc(24px + env(safe-area-inset-top,0px));padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:center;gap:18px;-webkit-text-size-adjust:100%}
.card{width:100%;max-width:440px;aspect-ratio:3/5;background:var(--card);border-radius:14px;
  box-shadow:var(--shadow);padding:28px 26px 22px;display:flex;flex-direction:column}
@media (max-width:480px){
  body{padding-top:calc(8px + env(safe-area-inset-top,0px));padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .card{aspect-ratio:auto;min-height:calc(100dvh - 120px);padding:24px 20px 18px}
}
.head{display:grid;grid-template-columns:1fr auto;align-items:start;gap:12px;margin-bottom:22px}
.title{font-size:20px;letter-spacing:.02em;margin:2px 0 0;font-weight:300}
.meta{display:flex;align-items:flex-end;gap:12px}
.label{border:0;border-bottom:1px solid var(--rule);background:transparent;color:var(--ink);font:inherit;font-size:13px;
  width:130px;padding:2px 0;text-align:right;outline:none;border-radius:0}
.label::placeholder{color:var(--muted)}
.dots{display:flex;flex-direction:column;gap:3px}
.dot{width:11px;height:11px;border-radius:50%;border:1px solid var(--muted);background:transparent;padding:0;cursor:pointer}
.dot.on{background:var(--fill);border-color:var(--fill)}
ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;flex:1;justify-content:space-between;gap:4px}
li{display:grid;grid-template-columns:24px 1fr;align-items:end;gap:12px;min-height:42px}
.sig{width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;color:var(--muted);margin-bottom:4px}
.sig svg{display:block;width:22px;height:22px}
.task{border:0;border-bottom:1px solid var(--rule);background:transparent;color:var(--ink);font:inherit;font-size:16px;
  padding:6px 0 5px;outline:none;width:100%;min-width:0;text-align:left;border-radius:0}
.task:focus{border-bottom-color:var(--muted)}
li.done .task{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
li.delegated .task{color:var(--muted)}
/* Yesterday: read-only; unfinished lines are faded and tap to bring over */
.ro .task{cursor:default;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.3em}
.ro .sig{cursor:default}
.ro li.open .task{opacity:.45;cursor:pointer}
.ro li.open .task:hover{opacity:.7}
.ro li.brought .task{color:var(--muted)}
.ro li.brought .task::after{content:" → today";font-size:11px}
.ro .dot{cursor:default}
button:focus-visible,.dot:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.bar{width:100%;max-width:440px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:12px;color:var(--muted)}
.legend{display:flex;gap:14px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend svg{width:14px;height:14px}
.tabs{display:flex;gap:18px}
.tab{font:inherit;font-size:13px;color:var(--muted);background:none;border:0;padding:4px 0;cursor:pointer;border-bottom:1px solid transparent}
.tab[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.note{width:100%;max-width:440px;font-size:11px;color:var(--muted);text-align:center;margin:0}