/* ===== Habit Bands demo: ported from the Habit Bands site (same author). 1em = 1pt on a 390pt phone. ===== */
.bd{--ground:#F3EFE6;--ink:#16140F;--muted0:#6B655A;--muted:#6B655A;--hair:#D9D3C5;--empty:#E2DCCF;
--c-terracotta:#C4623F;--c-marigold:#D9A441;--c-sage:#93A584;--c-moss:#4F5D3A;--on-terracotta:#16140F;--on-marigold:#16140F;--on-sage:#16140F;--on-moss:#FFFFFF;
--fd:"Fraunces","Iowan Old Style",Georgia,serif;--fb:"Inter",system-ui,sans-serif;--e-out:cubic-bezier(.2,.9,.3,1);--e-io:cubic-bezier(.6,0,.2,1);--e-pop:cubic-bezier(.3,1.35,.5,1)}
.bd .label{font:600 .6875em/1.27 var(--fb);letter-spacing:.136em;text-transform:uppercase}
.bd .muted{color:var(--muted)}
@keyframes bd-rise{0%{transform:scaleY(0)}70%{transform:scaleY(1.05)}100%{transform:scaleY(1)}}
.bd-x{width:min(100%,380px);margin:0 auto;background:#16140F;border-radius:54px;padding:10px;box-shadow:0 0 0 1px rgba(22,20,15,.25),0 24px 60px -24px rgba(22,20,15,.5);container-type:inline-size}
.bd .ts{--bg:var(--ground);--fg:var(--ink);--muted:var(--muted0);position:relative;aspect-ratio:390/844;overflow:hidden;border-radius:44px;background:var(--ground);color:var(--ink);font-size:calc(100cqw * 16 / 390);line-height:1.4}
.bd .ts-status{position:absolute;left:0;right:0;top:0;height:3.4em;display:flex;align-items:center;justify-content:space-between;padding:0 2em 0 2.1em;z-index:3;background:var(--ground);font:600 1em/1 var(--fb)}
.bd .ts-island{position:absolute;left:50%;top:.7em;width:7.6em;height:2.2em;transform:translateX(-50%);background:#16140F;border-radius:1.2em}
.bd .ts-bars{display:flex;gap:.15em;align-items:flex-end;height:.75em}
.bd .ts-bars b{width:.2em;background:var(--ink);border-radius:.05em}
.bd .ts-bars b:nth-child(1){height:35%}
.bd .ts-bars b:nth-child(2){height:55%}
.bd .ts-bars b:nth-child(3){height:78%}
.bd .ts-bars b:nth-child(4){height:100%}
.bd .ts-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:4.15em 1.5em 10em}
.bd .ts-scroll::-webkit-scrollbar{display:none}
.bd .ts-head{display:flex;align-items:center;justify-content:space-between;min-height:2.75em;gap:.5em}
.bd .ts-date{font:italic 400 1.1875em/1.26 var(--fd);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd .ts-btns{display:flex;gap:.5em;flex:none}
.bd .ts-edit{display:inline-flex;align-items:center;gap:.5em;height:2.75em;padding:0 1.5em;border:1px solid var(--ink);border-radius:1.625em;font:500 1em/1 var(--fb)}
.bd .ts-edit svg,.bd .ts-plus svg{width:.875em;height:.875em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bd .ts-plus{width:2.75em;height:2.75em;border-radius:50%;background:var(--ink);color:var(--ground);display:grid;place-items:center}
.bd .ts-plus svg{width:1.375em;height:1.375em}
.bd .ts-day{margin-top:1em}
.bd .ts-day span,.bd .ts-day em{display:block;font:400 3.75em/1.033 var(--fd);letter-spacing:-.023em;white-space:nowrap}
.bd .ts-day em{font-style:italic;color:var(--muted)}
.bd .ts-counter-row{display:flex;justify-content:space-between;align-items:flex-end;gap:1em;margin-top:2em}
.bd .counter{display:flex;align-items:baseline;font-family:var(--fd)}
.bd .counter .n{display:block;font-size:6em;line-height:1;letter-spacing:-.021em;animation:bd-countIn .45s var(--e-pop) both}
.bd .counter .of{font-size:2.125em;line-height:1.12;letter-spacing:-.012em;color:var(--muted);margin:0 0 .06em .06em}
@keyframes bd-countIn{from{opacity:0;transform:translateY(16px)}
}
.bd .today-meta{flex:1;min-width:0;text-align:right;display:grid;gap:.5em;justify-items:end;padding-bottom:.5em}
.bd .today-meta .label{font-size:.6875em;letter-spacing:.136em}
.bd .today-meta i{font:italic 400 1.25em/1.25 var(--fd);animation:bd-fadeDown .5s var(--e-out) both}
@keyframes bd-fadeDown{from{opacity:0;transform:translateY(-6px)}
}
.bd .stackbar{display:flex;gap:.25em;height:.875em;margin-top:1em;align-items:flex-end}
.bd .stackbar span{flex:1;height:100%;border-radius:.1875em;background:var(--empty);transform-origin:50% 100%;transition:background .3s}
.bd .stackbar span.on{background:var(--c);animation:bd-segIn .5s var(--e-pop)}
@keyframes bd-segIn{from{transform:scaleY(.15)}
}
.bd .rows{margin-top:2em;border-bottom:1px solid var(--hair)}
.bd .hrow{display:grid;grid-template-rows:1fr;border-top:1px solid var(--hair)}
.bd .hrow.back{animation:bd-rowIn .5s var(--e-pop) both}
@keyframes bd-rowIn{from{opacity:0;transform:translateY(-10px)}
}
.bd .hrow.checking{grid-template-rows:0fr;opacity:0;border-top-color:transparent;transition:grid-template-rows .45s cubic-bezier(.6,0,.3,1) .75s,opacity .45s cubic-bezier(.6,0,.3,1) .75s,border-top-color 0s 1.2s}
.bd .hrow-clip{overflow:visible;min-height:0}
.bd .hrow.checking .hrow-clip{animation:bd-clipLater 1.2s steps(1,end) forwards}
@keyframes bd-clipLater{0%{overflow:visible}
62%,100%{overflow:hidden}
}
.bd .hrow-in{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:.75em;min-height:6em;padding:1.25em 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bd .hrow-in:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:.5em}
.bd .hrow-in:disabled{cursor:default}
.bd .hnum{font:600 .6875em/1.27 var(--fb);letter-spacing:.11em;color:var(--muted);width:2.2em;align-self:flex-start;padding-top:1.1em;flex:none}
.bd .hmid{flex:1;min-width:0;display:grid;gap:.5em;text-align:left}
.bd .hname{position:relative;display:block;font:500 1.75em/1.143 var(--fd);letter-spacing:-.011em;color:var(--ink);transition:color .15s}
.bd .hrow.checking .hname{color:var(--muted)}
.bd .hname .strike{position:absolute;inset:0;color:transparent;text-decoration:line-through;text-decoration-color:var(--c);text-decoration-thickness:.07em;clip-path:inset(0 100% 0 0)}
.bd .hrow.checking .strike{clip-path:inset(0 0 0 0);transition:clip-path .38s var(--e-io) .18s}
.bd .hnote{font:400 .8125em/1.38 var(--fb);color:var(--muted);margin-top:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd .hmeta{display:flex;flex-wrap:wrap;align-items:center;gap:.35em .75em;min-width:0}
.bd .hmeta .label{font-size:.6875em;letter-spacing:.136em;min-width:0}
.bd .hmeta .hnote-link{flex:none;text-decoration:underline;text-underline-offset:.2em}
.bd .hbox{position:relative;width:2.75em;height:2.75em;flex:none}
.bd .circle{position:absolute;inset:0;border-radius:50%;border:2px solid var(--c);display:grid;place-items:center;overflow:hidden;transition:background .2s,transform .09s}
.bd .circle .fill{position:absolute;inset:0;background:var(--c);opacity:0;transition:opacity .15s}
.bd .circle svg{position:relative;width:1.375em;height:1.375em}
.bd .circle path{fill:none;stroke:var(--on);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24}
.bd .hrow.idle .hrow-in:hover .circle{background:color-mix(in srgb,var(--c) 16%,transparent)}
.bd .hrow.idle .hrow-in:active .circle{transform:scale(.94)}
.bd .hrow.checking .circle{animation:bd-squash .55s linear}
.bd .hrow.checking .fill{opacity:1}
.bd .hrow.checking path{stroke-dashoffset:0;transition:stroke-dashoffset .28s cubic-bezier(.25,.46,.45,.94) .12s}
@keyframes bd-squash{0%{transform:scale(1)}
22%{transform:scale(.84);animation-timing-function:var(--e-pop)}
100%{transform:scale(1)}
}
.bd .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--c);opacity:0;pointer-events:none}
.bd .hrow.checking .ring{animation:bd-ring .65s cubic-bezier(.25,.46,.45,.94)}
@keyframes bd-ring{from{opacity:.7;transform:scale(1)}
to{opacity:0;transform:scale(2.1)}
}
.bd .p{position:absolute;left:1.1875em;top:1.1875em;width:.375em;height:.375em;border-radius:1px;pointer-events:none;animation:bd-burst .75s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes bd-burst{from{opacity:1;transform:none}
to{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.3)}
}
.bd .finale{display:flex;flex-direction:column;gap:1.25em;padding:2em 0 .5em;animation:bd-fadeUp .6s var(--e-out) both}
@keyframes bd-fadeUp{from{opacity:0;transform:translateY(10px)}
}
.bd .finale-bars{display:flex;gap:.5em;height:8.25em;align-items:flex-end}
.bd .finale-bars span{flex:1;max-width:6em;height:100%;border-radius:.25em;transform-origin:50% 100%;animation:bd-rise .8s var(--e-out) both;animation-delay:calc(var(--i) * 90ms)}
.bd .finale-t{font:italic 400 3.75em/1.033 var(--fd);letter-spacing:-.023em;margin:0}
.bd .finale .label{font-size:.6875em;letter-spacing:.136em}
.bd .finale-cta{display:flex;gap:1.25em;align-items:center;flex-wrap:wrap}
.bd .ts-pill{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:3em;padding:0 1.5em;border-radius:1.75em;background:var(--ink);color:var(--ground);font:500 1em/1.25 var(--fb)}
.bd .ts-link{all:unset;cursor:pointer;font:500 .9375em/1.4 var(--fb);text-decoration:underline;text-underline-offset:.2em;padding:.6em 0}
.bd .ts-pill:focus-visible,.bd .ts-link:focus-visible,.bd .ts-chip:focus-visible,.bd .ts-toast button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.bd .ts-done{margin-top:1.5em;display:grid;gap:.75em}
.bd .ts-done>.label{font-size:.6875em;letter-spacing:.136em}
.bd .ts-chips{display:flex;flex-wrap:wrap;gap:.5em}
.bd .ts-chip{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:.5em;min-height:2.75em;padding:0 1em;border-radius:1.375em;border:1px solid var(--hair);font:500 .9375em/1.4 var(--fb);color:var(--ink);animation:bd-fade .3s both;max-width:100%}
.bd .ts-chip i{width:.5em;height:.5em;border-radius:50%;flex:none}
.bd .ts-chip:active{transform:scale(.98)}
@keyframes bd-fade{from{opacity:0}
}
.bd .ts-toast{position:absolute;left:1em;right:1em;bottom:6.2em;min-height:3.25em;border-radius:1em;background:var(--ink);color:var(--ground);display:flex;align-items:center;gap:.75em;padding:0 .5em 0 1.25em;z-index:4;animation:bd-toastIn .25s var(--e-out) both}
.bd .ts-toast span{flex:1;min-width:0;font:500 .9375em/1.4 var(--fb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd .ts-toast button{all:unset;cursor:pointer;min-height:2.75em;padding:0 .75em;display:flex;align-items:center;font:500 .9375em/1 var(--fb);text-decoration:underline;text-underline-offset:.2em}
@keyframes bd-toastIn{from{opacity:0;transform:translateY(12px)}
}
.bd .ts-tabs{position:absolute;left:0;right:0;bottom:0;height:5.4em;display:flex;border-top:1px solid var(--hair);background:var(--ground);z-index:3;padding-bottom:1.2em}
.bd .ts-tabs span{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;font:600 .6875em/1 var(--fb);letter-spacing:.136em;text-transform:uppercase;color:var(--muted);position:relative}
.bd .ts-tabs span.on{color:var(--ink)}
.bd .ts-tabs span.on::before{content:"";position:absolute;top:-1px;width:2.2em;height:2px;background:var(--ink);border-radius:1px}
.bd .ts-tabs svg{width:2.4em;height:2.4em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){.bd .counter .n,.bd .today-meta i,.bd .stackbar span.on,.bd .finale,.bd .finale-bars span,.bd .circle,.bd .ring,.bd .p,.bd .hrow.back,.bd .ts-chip,.bd .ts-toast{animation:none!important}
.bd .hrow.checking{transition:grid-template-rows .15s .5s,opacity .15s .5s,border-top-color 0s .65s}
.bd .hrow.checking .strike,.bd .hrow.checking path,.bd .circle .fill{transition:none}
}