:root{--paper:#f5f3ee;--card:#fffefa;--ink:#202723;--muted:#777e77;--line:#e8e6df;--green:#426b53;--green-dark:#31553f;--mint:#e8f0e9;--amber:#e5b86d;--shadow:0 16px 45px #26372b0c}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}.shell{max-width:920px;margin:auto;padding:28px 28px 38px}.topbar{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:system-ui,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.7px}.brand-mark{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;background:var(--green);color:white;font-size:21px;font-weight:700}.local-note{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.lock{width:17px;height:17px;border-radius:50%;display:inline-grid;place-items:center;background:#e5ede5;color:var(--green);font-size:7px}.intro{max-width:620px;margin:65px auto 42px;text-align:center}.eyebrow{text-transform:uppercase;letter-spacing:1.6px;font-size:10px;font-weight:700;color:var(--green);margin:0 0 12px}.intro h1{font:800 clamp(34px,6vw,52px)/1.1 system-ui,sans-serif;letter-spacing:-2.2px;margin:0 0 16px}.lede{font-size:15px;line-height:1.7;color:var(--muted);max-width:520px;margin:auto}.overview{background:var(--card);border:1px solid #eeece5;border-radius:18px;padding:28px 32px 24px;box-shadow:var(--shadow)}.overview-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.overview-heading .eyebrow{margin-bottom:7px}.overview h2{font:700 19px system-ui,sans-serif;letter-spacing:-.5px;margin:0}.date-label{font-size:12px;color:var(--muted)}.habit-list{display:grid;gap:11px}.habit-card{border:1px solid var(--line);border-radius:13px;padding:17px 18px 15px}.habit-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.habit-name-wrap{min-width:0}.habit-name{font-weight:600;font-size:14px;overflow-wrap:anywhere}.habit-sub{font-size:11px;color:var(--muted);margin-top:4px}.score{display:flex;align-items:baseline;gap:4px;white-space:nowrap}.score strong{font:700 26px system-ui,sans-serif;letter-spacing:-1px;color:var(--green-dark)}.score span{font-size:11px;color:var(--muted)}.progress-track{height:5px;background:#efeee9;border-radius:5px;margin:14px 0 13px;overflow:hidden}.progress-fill{height:100%;background:var(--green);border-radius:5px;transition:width .25s ease}.habit-foot{display:flex;align-items:center;justify-content:space-between}.today-toggle{border:0;border-radius:8px;padding:8px 12px;background:var(--mint);color:var(--green-dark);font:600 11px system-ui,sans-serif;cursor:pointer;transition:.15s}.today-toggle:hover{background:#dce9de}.today-toggle.done{background:var(--green);color:white}.today-toggle:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #9fbea6;outline-offset:2px}.history{display:flex;align-items:center;gap:4px}.day-dot{width:10px;height:10px;border-radius:3px;background:#eeede7;display:inline-block}.day-dot.on{background:#6e9678}.day-dot.today{outline:1px solid var(--green);outline-offset:2px}.history-caption{font-size:10px;color:var(--muted);margin-left:5px}.delete-button{background:none;border:0;color:#a3a69f;cursor:pointer;font-size:16px;padding:5px}.delete-button:hover{color:#a44c43}.add-form{display:flex;gap:9px;margin-top:17px}.add-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;background:#fff;padding:12px 13px;font:13px system-ui,sans-serif;color:var(--ink)}.add-form input::placeholder{color:#a1a49e}.add-form button{border:0;border-radius:9px;background:var(--green);color:white;padding:0 16px;font:600 12px system-ui,sans-serif;cursor:pointer}.add-form button:hover{background:var(--green-dark)}.empty-state{text-align:center;color:var(--muted);font-size:13px;padding:25px 0 8px}.how-it-works{display:flex;gap:15px;align-items:start;max-width:620px;margin:32px auto 38px}.how-icon{flex:0 0 33px;height:33px;display:grid;place-items:center;border-radius:10px;background:#e8ece3;color:var(--green);font-size:18px}.how-it-works h2{font:700 13px system-ui,sans-serif;margin:1px 0 6px}.how-it-works p{font-size:12px;line-height:1.65;color:var(--muted);margin:0}.how-it-works code{font-size:11px;color:var(--green-dark);background:#eaece5;border-radius:4px;padding:2px 4px}footer{text-align:center;color:#969991;font-size:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){.shell{padding:20px 16px 28px}.local-note{font-size:10px}.intro{margin:52px auto 31px}.intro h1{letter-spacing:-1.5px}.lede{font-size:14px}.overview{padding:22px 16px 18px}.overview-heading{margin-bottom:17px}.habit-card{padding:14px}.day-dot{width:8px;height:8px}.history{gap:3px}.score strong{font-size:24px}.how-it-works{margin:26px 5px 32px}.add-form button{padding:0 12px}.add-form button span{display:none}}
.history{max-width:min(64vw,570px);overflow-x:auto;overflow-y:hidden;padding:3px 2px 5px;scrollbar-width:thin}
.day-dot{flex:0 0 auto}
button.day-dot{border:0;padding:0;cursor:pointer}
button.day-dot:hover{filter:brightness(.88);transform:scale(1.2)}
button.day-dot:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(max-width:600px){.history{max-width:46vw}}