:root { --fg:#1a1a1a; --bg:#fff; --muted:#4a4a4a; --accent:#0b57d0; --line:#c8c8c8; --warn:#fff4d6; }
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin:0; color:var(--fg); background:var(--bg); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.5; }
main, header, footer { max-width:40rem; margin:0 auto; padding:1rem; }
h1 { font-size:1.75rem; margin:.5rem 0; }
a { color:var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible { outline:3px solid #000; outline-offset:2px; box-shadow:0 0 0 5px #fff; }
.notice { background:var(--warn); border:1px solid #c9a227; border-radius:.5rem; padding:.75rem 1rem; margin:1rem 0; display:flex; gap:.75rem; align-items:flex-start; justify-content:space-between; }
.notice p { margin:0; }
form.add { display:flex; gap:.5rem; margin:1rem 0; }
form.add input[type=text] { flex:1; min-width:0; font-size:1.125rem; padding:.6rem; border:2px solid var(--muted); border-radius:.4rem; }
button { font:inherit; padding:.6rem .9rem; min-height:44px; border:2px solid var(--accent); background:var(--accent); color:#fff; border-radius:.4rem; cursor:pointer; }
button.secondary { background:#fff; color:var(--accent); }
#list { list-style:none; padding:0; margin:0; }
#list li { display:flex; align-items:center; gap:.75rem; padding:.5rem 0; border-bottom:1px solid var(--line); }
#list li label { flex:1; font-size:1.25rem; overflow-wrap:anywhere; display:flex; align-items:center; gap:.75rem; min-height:44px; }
#list input[type=checkbox] { width:1.5rem; height:1.5rem; flex:none; }
#list li.done label span { text-decoration:line-through; color:var(--muted); }
.empty { color:var(--muted); }
.opts { margin:1rem 0; }
.pro { margin-top:2rem; padding-top:1rem; border-top:1px solid var(--line); }
.pro p { margin:.5rem 0; }
footer { color:var(--muted); font-size:.9rem; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (min-width:60rem) { body { font-size:1.15rem; } }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }
@media print { button, form, .notice, .opts, .pro { display:none; } body { font-size:20pt; } }