:root { --paper:#f7f6f1; --ink:#161616; --line:#1f1f1f; --muted:#454541; --lavender:#66547f; --mint:#286554; --focus:#6d5ea2; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.page { max-width:68rem; min-height:100vh; margin:auto; padding:1.25rem clamp(1.25rem,5vw,4rem); display:flex; flex-direction:column; }
.masthead { display:flex; justify-content:space-between; border-block:2px solid var(--line); padding:.7rem 0; font-size:.78rem; font-weight:700; letter-spacing:.09em; }
a { color:var(--mint); text-underline-offset:.18em; }
a:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.hero { max-width:44rem; padding:clamp(4rem,15vh,10rem) 0 4rem; }
.eyebrow { color:var(--lavender); font-size:.78rem; font-weight:700; letter-spacing:.11em; }
h1 { margin:.4rem 0 1.5rem; font-size:clamp(2.5rem,8vw,5.8rem); line-height:.94; letter-spacing:-.06em; }
h1 em { color:var(--lavender); font-style:normal; }
.lede { max-width:34rem; color:var(--muted); font-size:1.1rem; line-height:1.55; }
.actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.button { border:2px solid var(--line); color:var(--paper); background:var(--ink); padding:.7rem 1rem; font-weight:700; text-decoration:none; }
.button.secondary { color:var(--ink); background:transparent; }
footer { margin-top:auto; border-top:2px solid var(--line); padding-top:.75rem; color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.09em; }
footer span { color:var(--lavender); padding-inline:.45rem; }
.todos { max-width:48rem; padding:3rem 0; } .identity { color:var(--muted); } .identity span { color:var(--lavender); }
.add-todo { margin:2rem 0; } .add-todo label { display:block; font-size:.78rem; font-weight:700; letter-spacing:.08em; margin-bottom:.4rem; }
.add-todo div { display:flex; } .add-todo input { flex:1; min-width:0; border:2px solid var(--line); border-radius:0; background:transparent; color:var(--ink); font:inherit; padding:.65rem; }
button { border:2px solid var(--line); border-radius:0; background:var(--ink); color:var(--paper); font:inherit; font-weight:700; cursor:pointer; padding:.65rem 1rem; } button:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.todo-list { border-top:2px solid var(--line); list-style:none; margin:0; padding:0; } .todo-list li { align-items:center; border-bottom:1px solid var(--line); display:grid; gap:.65rem; grid-template-columns:auto 1fr auto; padding:.8rem 0; }
.todo-list form { margin:0; } button.check { background:transparent; color:var(--mint); border:0; font-size:1.25rem; padding:.2rem; } button.delete { background:transparent; color:var(--peach,#9a5f46); border:0; font-size:.8rem; padding:.2rem; text-decoration:underline; } .completed span { color:var(--muted); text-decoration:line-through; } .empty { color:var(--muted); grid-template-columns:1fr !important; } .error { color:#8d344d; font-weight:700; }
.masthead nav { display:flex; gap:1rem; } .usage-inline,.muted { color:var(--muted); } .profile { max-width:52rem; padding:3rem 0; width:100%; } .profile h1 { font-size:clamp(2.5rem,6vw,4rem); } .profile-card { border-top:2px solid var(--line); padding:1.5rem 0 2rem; } .profile-card h2 { margin:.2rem 0 1rem; font-size:1.5rem; } .profile-card form { display:grid; gap:.6rem; max-width:32rem; margin-bottom:1.5rem; } .profile-card input { border:2px solid var(--line); background:transparent; font:inherit; padding:.65rem; } .profile-card dl { display:grid; gap:.4rem; } .profile-card dl div { display:grid; grid-template-columns:8rem 1fr; } .profile-card dt { color:var(--muted); } .profile-card dd { margin:0; font-weight:700; } .plan-badge { display:inline-block; border:1px solid var(--lavender); color:var(--ink); padding:.2rem .55rem; font-size:.85rem; font-weight:700; letter-spacing:.04em; } .usage-number { color:var(--lavender); font-size:1.35rem; } progress { width:100%; max-width:32rem; height:1rem; accent-color:var(--mint); border:1px solid var(--line); } .notice { color:var(--mint); font-weight:700; }