:root{
  --bg:#faf7f2;--card:#fff;--ink:#2a2622;--muted:#7a716a;--line:#ebe4da;
  --feed:#d9822b;--feed-bg:#fbeedd;--wet:#2f7fb8;--wet-bg:#e3eff8;--dirty:#8a6a3b;--dirty-bg:#f1e8da;
  --green:#3d8a5a;--amber:#c98a12;--red:#c0573a;--grey:#b5aca2;--radius:16px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#15130f;--card:#1f1c18;--ink:#efe9e1;--muted:#a39a90;--line:#332e28;
  --feed:#f0a85a;--feed-bg:#3a2c1c;--wet:#7cb8e6;--wet-bg:#1c2c3a;--dirty:#d2b07c;--dirty-bg:#33291c;
  --green:#7cc79a;--amber:#e8b44f;--red:#f08a6c;--grey:#5e5750;}
}
/* 10pm–6am: dim, warm and dark whatever the phone's setting, for half-asleep eyes */
:root.night{--bg:#0f0c09;--card:#18140f;--ink:#e3d8ca;--muted:#958878;--line:#2a241d;
  --feed:#df9a55;--feed-bg:#2e2216;--wet:#76aed8;--wet-bg:#172431;--dirty:#c6a473;--dirty-bg:#2a2117;
  --green:#76b98f;--amber:#d9a84b;--red:#e08166;--grey:#554d45;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
main{max-width:560px;margin:0 auto;padding:calc(14px + env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom))}
.hidden{display:none!important}
.loading{text-align:center;color:var(--muted);padding:40vh 0}
header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:12px}
h1{font-size:24px;margin:0;letter-spacing:-.02em}
:focus-visible{outline:2.5px solid var(--wet);outline-offset:2px;border-radius:8px}
.iconbtn{color:var(--muted);padding:8px;margin:-8px -8px 0 0;border-radius:12px;display:flex}
.iconbtn:active{background:var(--line)}
h2{font-size:17px;letter-spacing:-.01em;color:var(--ink);margin:28px 2px 8px;font-weight:650;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.h2sub{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:0}
.sub{color:var(--muted);font-size:13px}
button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}
.linkbtn{color:var(--muted);font-size:14px;text-decoration:underline;padding:6px}
.linkbtn.small{font-size:13px;display:block;margin:8px auto 0}
.hint{font-size:12px;color:var(--muted);margin-top:4px}
.hint.center{text-align:center;margin-top:8px}
.note{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5}
.tiny{font-size:11px;color:var(--muted);display:block}
a{color:inherit}

/* at a glance */
.glance{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.gl{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:9px 10px;font-size:12px;color:var(--muted);min-width:0}
.gl .k{display:flex;align-items:center;white-space:nowrap}
.gl .k .dot{margin-right:4px}
.gl b{display:block;font-size:21px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin:2px 0 1px;white-space:nowrap}
.gl.feed b{color:var(--feed)} .gl.wet b{color:var(--wet)} .gl.dirty b{color:var(--dirty)}
.gl .at{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl b.bump{animation:bump .5s ease-out}
.gl .at.likely{color:var(--ink);font-weight:600}
.gl .at:empty{display:none}

/* rhythm */
.rhythm{padding:4px 12px}
.rr{display:flex;align-items:baseline;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.rr:last-of-type{border-bottom:0}
.rk{width:68px;flex:none;color:var(--muted);font-size:13px}
.rv{flex:1;font-weight:600}
.rv small{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:1px}
.rc{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}
.rc b{display:block;color:var(--ink);font-weight:600}
.rhythm .note{margin:2px 0 10px}

/* status strip */
.status{display:flex;gap:10px;align-items:flex-start;border-radius:14px;padding:2px 4px;margin:2px 0 14px;font-size:14px}
.status.amber,.status.red{padding:10px 12px;border:1px solid transparent}
.status.amber{background:color-mix(in srgb,var(--amber) 13%,var(--card));border-color:color-mix(in srgb,var(--amber) 30%,transparent)}
.status.red{background:color-mix(in srgb,var(--red) 13%,var(--card));border-color:color-mix(in srgb,var(--red) 32%,transparent)}
.status .dot{margin-top:5px}
.status .txt{flex:1}
.status .txt small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.status button{font-size:13px;font-weight:650;text-decoration:underline;white-space:nowrap;padding:4px 0}
.status .sbtn{margin-top:4px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--grey);margin-right:6px;flex:none;vertical-align:1px}
.dot.green{background:var(--green)} .dot.amber{background:var(--amber)} .dot.red{background:var(--red)} .dot.grey{background:var(--grey)}
.pill{display:inline-block;font-size:12px;padding:4px 10px;border-radius:999px;background:var(--dirty-bg);margin-bottom:10px}

/* actions */
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.big{border-radius:var(--radius);padding:16px 12px;font-size:18px;font-weight:650;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:80px;justify-content:center}
.big small{font-weight:500;font-size:12px;opacity:.85}
.big.feed{background:var(--feed-bg);color:var(--feed);grid-column:1/-1}
.big.wet{background:var(--wet-bg);color:var(--wet)}
.big.dirty{background:var(--dirty-bg);color:var(--dirty)}
.big.both{grid-column:1/-1;background:linear-gradient(90deg,var(--wet-bg),var(--dirty-bg));color:var(--ink);min-height:58px;padding:10px}
.big{transition:transform .12s ease}
.big:active,.timer button:active{transform:scale(.97)}
.big.logged{animation:logged .55s cubic-bezier(.2,.8,.3,1)}

/* timer */
.timer{background:var(--feed-bg);border-radius:var(--radius);padding:16px;margin-bottom:10px}
.timer-top{display:flex;justify-content:space-between;align-items:baseline}
.timer-label{font-weight:700;color:var(--feed);font-size:18px}
.timer-clock{font-size:40px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.timer-split{display:flex;gap:14px;font-size:13px;color:var(--muted);margin:4px 0 12px;font-variant-numeric:tabular-nums}
.timer-btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.timer-btns button{padding:14px 6px;border-radius:12px;font-weight:650}
.timer .ghost{background:var(--card)}
.timer.paused .timer-clock{opacity:.5}
.timer:not(.paused){animation:breathe 4s ease-in-out infinite}

/* intake: bottle ml and time at the breast */
.intake{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.intake .in{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;min-width:0}
.intake .k{display:block;font-size:12px;color:var(--muted)}
.intake b{display:block;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;margin:1px 0}
.intake small{display:block;font-size:11.5px;color:var(--muted);line-height:1.35}
.intake .vs{display:block;font-size:12px;font-weight:600;margin-top:3px}

/* stats */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 8px;text-align:center}
.stat .n{font-size:30px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.stat .l{font-size:12px;color:var(--muted)}
.stat .g{font-size:11px;margin-top:4px;color:var(--muted)}
.stat .n.bump{animation:bump .5s ease-out}
.stat.feed .n{color:var(--feed)} .stat.wet .n{color:var(--wet)} .stat.dirty .n{color:var(--dirty)}

/* watch */
.watch{margin-top:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.watch summary{font-weight:600;font-size:14px;cursor:pointer}
.watch-body{font-size:14px}
.watch ul{margin:4px 0 8px;padding-left:20px}
.watch li{margin:3px 0}
.wh{font-weight:650;margin:12px 0 2px}
.wh.red{color:var(--red)} .wh.amber{color:var(--amber)}

/* table */
.tablecard{padding:6px 10px}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:7px 3px;text-align:center;border-bottom:1px solid var(--line);font-size:14px}
th{font-size:12px;color:var(--muted);font-weight:600}
td:first-child,th:first-child{text-align:left}
tr.avg td{font-weight:700;border-bottom:0}

/* list */
.list{display:flex;flex-direction:column;gap:6px}
.item{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-align:left;width:100%}
.item .t{font-weight:650;font-variant-numeric:tabular-nums;width:46px;flex:none}
.item .d{flex:1}
.item .by{color:var(--muted);font-size:12px}
.item.fresh{animation:fresh 1.6s ease-out}
.daysep{font-size:13px;font-weight:600;color:var(--muted);margin:14px 4px 6px}
.daysep:first-child{margin-top:0}
.daysep span{font-weight:400;margin-left:4px}
.group{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.group .item{border:0;border-radius:0;border-top:1px solid var(--line);padding:11px 14px}
.group .item:first-child{border-top:0}
.group .jitem.milestone{background:var(--feed-bg)}
.group .jitem.auto{background:none;border-style:solid}
.group .jitem.auto .d b{font-weight:550}
.linkbtn.more{display:block;margin:6px auto 0}
.empty{color:var(--muted);text-align:center;padding:16px;font-size:14px}

/* forms & sheets */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:10;animation:fadein .2s ease-out}
.sheet{background:var(--card);width:100%;max-width:560px;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:92vh;overflow:auto;animation:sheetup .3s cubic-bezier(.2,.8,.3,1)}
.sheet h3{margin:0 0 12px;font-size:18px}
.sheet h4{margin:20px 0 6px;font-size:15px;color:var(--ink);font-weight:650}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.seg.three{grid-template-columns:repeat(3,1fr)} .seg.two{grid-template-columns:1fr 1fr}
.seg button{border:1.5px solid var(--line);border-radius:12px;padding:12px 4px;font-weight:600;background:var(--card)}
.seg button.on{border-color:var(--feed);background:var(--feed-bg);color:var(--feed)}
.seg.n button.on{border-color:var(--wet);background:var(--wet-bg);color:var(--wet)}
.bigchoice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.shlabel{font-size:13px;color:var(--muted);font-weight:600;margin:4px 2px 6px}
.bigchoice.bottle button{background:var(--wet-bg);color:var(--wet);font-size:16px}
.mlpick{display:flex;align-items:center;gap:8px}
.mlpick>button{width:52px;height:52px;flex:none;border-radius:14px;border:1.5px solid var(--line);font-size:24px;font-weight:600;background:var(--card)}
.mlval{flex:1;display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:14px;padding:0 14px;background:var(--bg);min-height:52px}
.mlval input{border:0!important;background:none!important;padding:0!important;min-height:0!important;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.mlval span{font-size:16px;color:var(--muted);font-weight:600}
.mlchips,.minchips{margin:8px 0 2px}
.bigchoice button{background:var(--feed-bg);color:var(--feed);border-radius:14px;padding:20px 8px;font-size:18px;font-weight:700}
label.f{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px}
textarea{resize:vertical;min-height:110px;line-height:1.4}
.sheet select{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;min-height:46px}
.sheet select:disabled{opacity:.5}
input[type=number],input[type=datetime-local],input[type=date],input[type=time],input[type=text],textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;-webkit-appearance:none;appearance:none;min-height:46px}
.row{display:flex;gap:8px}.row>*{flex:1;min-width:0}
.btns{display:flex;gap:8px;margin-top:16px}
.btns button{flex:1;padding:14px;border-radius:12px;font-weight:650}
.primary{background:var(--ink);color:var(--bg);border-radius:12px;padding:14px;font-weight:650}
.ghost{border:1.5px solid var(--line);border-radius:12px;padding:14px;font-weight:600}
.danger{color:var(--red);border:1.5px solid var(--line)}
.wide{display:block;width:100%;margin-top:10px}
.divider{height:1px;background:var(--line);margin:16px 0}
.formerr{color:var(--red);font-size:14px;margin-top:10px;min-height:1em}

/* reminders */
.sw{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.sw span{flex:1}
.sw b{display:block;font-weight:600;font-size:15px}
.sw small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.sw input{width:22px;height:22px;flex:none;accent-color:var(--green)}
#quietTimes{margin-top:8px}
.timingtip{background:var(--wet-bg);border-radius:14px;padding:12px 14px;margin:-4px 0 14px;font-size:14px}
.timingtip p{margin:4px 0 10px;color:var(--ink);line-height:1.45}
.timingtip .row button{padding:11px}

/* tappable numbers and info sheets */
.tap{cursor:pointer;position:relative;transition:transform .12s ease}
.tap:active{transform:scale(.98)}
.tap::after{content:"›";position:absolute;top:5px;right:9px;color:var(--muted);font-size:17px;line-height:1;opacity:.55}
.rr.tap{padding-right:16px}
.rr.tap::after{top:50%;right:0;transform:translateY(-50%)}
.ihead{display:flex;align-items:baseline;gap:10px;margin:-2px 0 12px}
.ihead b{font-size:34px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ihead span{color:var(--muted);font-size:14px}
.ihead small{display:block;font-size:12px}
.iguide{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.iguide .dot{margin-top:6px}
.iguide b{display:block;font-weight:650}
.iguide small{display:block;color:var(--muted);font-size:13px;margin-top:2px;line-height:1.4}
.irows{border-top:1px solid var(--line);margin-bottom:6px}
.irows div{display:flex;gap:10px;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.irows span{color:var(--muted);flex:none}
.irows b{font-weight:600;text-align:right}
.ilist{margin:4px 0 10px;padding-left:20px;font-size:14px;line-height:1.45}
.ilist li{margin:4px 0}
.ibody{font-size:15px;line-height:1.5;margin:6px 0 12px}
.iworry{background:color-mix(in srgb,var(--amber) 12%,var(--card));border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.45;margin:6px 0 12px}
.iworry .linkbtn{display:block;padding:6px 0 0;font-weight:650;color:var(--ink)}
.sheet .group{margin-bottom:6px}
.isrc{display:flex;flex-direction:column;gap:4px;margin-top:12px;font-size:12px}
.isrc a{color:var(--muted)}

/* sheets: drag handle */
.grab{width:38px;height:5px;border-radius:3px;background:var(--muted);opacity:.35;margin:-8px auto 12px}
.sheet{touch-action:pan-y}

/* grow */
.gweek{background:color-mix(in srgb,var(--green) 12%,var(--card));border-radius:var(--radius);padding:14px 16px;margin-bottom:12px}
.gweek span{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:2px}
.gweek b{display:block;font-size:18px;font-weight:700;letter-spacing:-.01em}
.gweek p{margin:4px 0 0;font-size:15px;line-height:1.45}
.gcard{padding:12px 14px;border-top:1px solid var(--line)}
.gcard:first-child{border-top:0}
.gcard b{display:block;font-weight:650}
.gcard p{margin:3px 0 4px;font-size:14px;line-height:1.45}
.gcard .ilist{margin:0 0 6px}
.gsrc{font-size:12px;color:var(--muted)}
.gcheck{display:flex;gap:12px;padding:11px 14px;border-top:1px solid var(--line)}
.gcheck:first-child{border-top:0}
.gcheck .when{width:92px;flex:none}
.gcheck .when b{display:block;font-size:13px;font-weight:650}
.gcheck .when small{font-size:12px;color:var(--muted)}
.gcheck.now .when small{color:var(--green);font-weight:650}
.gcheck div b{font-weight:600}
.gcheck div small{display:block;font-size:13px;color:var(--muted);line-height:1.4;margin-top:1px}
.gpast{margin-top:8px}
.gpast summary{font-size:13px;color:var(--muted);cursor:pointer;margin-bottom:6px}
.tummy{margin-bottom:6px}
.tt-top{display:flex;justify-content:space-between;align-items:baseline}
.tt-top span{color:var(--muted);font-size:14px}
.tt-top span b{color:var(--ink);font-size:22px;font-variant-numeric:tabular-nums}
.tt-bar{height:10px;border-radius:5px;background:var(--line);overflow:hidden;margin:8px 0 12px}
.tt-bar i{display:block;height:100%;background:var(--wet);border-radius:5px;transition:width .4s ease}
.tt-add{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tt-add button{background:var(--wet-bg);color:var(--wet);border-radius:12px;padding:12px 4px;font-weight:650;font-size:14px;transition:transform .12s ease}
.tt-add button:active{transform:scale(.96)}
.tt-add button.logged{animation:logged .55s cubic-bezier(.2,.8,.3,1)}
.tt-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tt-list button{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:5px 10px;color:var(--muted)}

/* moments */
.jitem.moment{display:block;padding:0;overflow:hidden}
.mgrid{display:grid;gap:2px;grid-template-columns:1fr 1fr}
.mgrid.n1{grid-template-columns:1fr}
.mph{position:relative;display:block;padding:0;aspect-ratio:1;overflow:hidden;background:var(--line)}
.mgrid.n1 .mph{aspect-ratio:4/3}
.mgrid.n3 .mph:first-child{grid-row:span 2;aspect-ratio:auto}
.mph img{width:100%;height:100%;object-fit:cover;display:block}
.mph span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:#fff;font-size:22px;font-weight:700}
.mtext{display:block;width:100%;text-align:left;padding:10px 14px}
.mtext p{margin:0 0 3px;font-size:15px;line-height:1.4;white-space:pre-wrap}
.mtext small{color:var(--muted);font-size:12px}
.photopick{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px dashed var(--line);border-radius:14px;padding:18px;font-weight:650;cursor:pointer}
.photopick input{position:absolute;opacity:0;width:1px;height:1px}
.mprev{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px}
.mprev img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.viewer{position:fixed;inset:0;z-index:40;background:#000;display:flex;align-items:center;justify-content:center;animation:fadein .15s ease-out}
.viewer img{max-width:100%;max-height:100%;object-fit:contain}
.viewer button{position:absolute;color:#fff;background:rgba(0,0,0,.35);border-radius:999px;width:44px;height:44px;font-size:22px}
.vclose{top:calc(12px + env(safe-area-inset-top));right:12px}
.vprev{left:10px;top:50%;transform:translateY(-50%)}
.vnext{right:10px;top:50%;transform:translateY(-50%)}
.vcount{position:absolute;top:calc(22px + env(safe-area-inset-top));left:0;right:0;text-align:center;color:#fff;font-size:13px}
.vcap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px calc(14px + env(safe-area-inset-bottom));color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));font-size:15px;line-height:1.4}

/* consent and inline links */
.consent{display:flex;gap:10px;align-items:flex-start;margin:16px 0 4px;font-size:14px;line-height:1.45}
.consent input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--green)}
.linkbtn.inline{display:inline;padding:0;font-size:inherit;color:inherit}

/* onboarding */
.ob{padding-top:6vh}
.ob h1{font-size:30px}
.ob h2{font-size:22px;text-transform:none;letter-spacing:0;color:var(--ink);margin:8px 0 6px}
.ob-hero{font-size:52px}
.lead{color:var(--muted);font-size:16px;margin:8px 0 22px}
.tip{background:var(--wet-bg);border-radius:12px;padding:12px;font-size:14px;margin-bottom:14px;line-height:1.45}
.back{color:var(--muted);padding:4px 0}
.keybox{font:600 20px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg);border:1.5px dashed var(--line);border-radius:12px;padding:16px;text-align:center;word-break:break-all;margin:12px 0}
.qr{display:flex;justify-content:center;margin:10px 0}
.qr svg{width:200px;height:200px;background:#fff;padding:8px;border-radius:12px}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(78px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 14px;border-radius:12px;display:flex;gap:14px;align-items:center;z-index:20;font-size:14px;box-shadow:0 6px 24px rgba(0,0,0,.25);width:max-content;max-width:94vw}
.toast{animation:toastin .32s cubic-bezier(.2,.8,.3,1)}
.toast span{white-space:nowrap}
.toast.noted{width:min(94vw,440px)}
.toast .msg{flex:1;min-width:0}
.toast .msg small{display:block;white-space:normal;opacity:.75;font-size:13px;margin-top:2px;line-height:1.35}
.toast button{color:var(--bg);font-weight:700;text-decoration:underline;white-space:nowrap}

/* little moments */
.burst{position:fixed;width:0;height:0;pointer-events:none;z-index:30}
.burst i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;opacity:0;animation:pop 1.1s cubic-bezier(.15,.7,.3,1) forwards}
.burst.big i{width:7px;height:11px;border-radius:2px;animation-duration:1.8s}
.burst i.heart{width:auto;height:auto;background:none!important;font-size:13px;line-height:1;font-style:normal}
.night .burst{opacity:.75}
@keyframes pop{0%{transform:translate(0,0) rotate(0) scale(.3);opacity:1}
  60%{opacity:.95}100%{transform:translate(var(--x),calc(var(--y) + var(--fall))) rotate(var(--r)) scale(1);opacity:0}}
@keyframes logged{0%{transform:scale(.97)}45%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes fresh{0%{background:var(--feed-bg);transform:translateY(-4px);opacity:0}25%{opacity:1;transform:none}100%{background:var(--card)}}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--feed) 16%,transparent)}}
@keyframes fadein{from{opacity:0}}
@keyframes sheetup{from{transform:translateY(40px);opacity:.4}}
@keyframes toastin{from{transform:translate(-50%,16px);opacity:0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 16px calc(6px + env(safe-area-inset-bottom))}
.tabs button{flex:1;max-width:260px;display:flex;flex-direction:column;align-items:center;font-size:21px;line-height:1.1;padding:4px;color:var(--muted);filter:grayscale(1);opacity:.7;transition:opacity .15s,filter .15s}
.tabs button span{font-size:11px;font-weight:650;margin-top:2px}
.tabs button.on{color:var(--ink);filter:none;opacity:1}

/* journal */
.jadd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.jadd button{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 6px;font-size:22px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .12s ease}
.jadd button span{font-size:13px;font-weight:650}
.jadd button:active{transform:scale(.97)}
.jadd button.logged{animation:logged .55s cubic-bezier(.2,.8,.3,1)}
.jitem{align-items:flex-start}
.jitem .ji{font-size:20px;line-height:1.2;width:28px;text-align:center;flex:none}
.jitem .d b{font-weight:650}
.jitem .d small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.jitem .d p{margin:4px 0 0;font-size:14px;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.jitem.milestone{background:var(--feed-bg);border-color:transparent}
.jitem.auto{background:none;border-style:dashed}
.jitem.auto .d b{font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.chips button{border:1.5px solid var(--line);border-radius:999px;padding:7px 11px;font-size:14px;font-weight:600;background:var(--card)}
.chips button.on{border-color:var(--feed);background:var(--feed-bg);color:var(--feed)}

/* weight */
.wcard{padding:12px 12px 8px}
.whead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.wnum{font-size:26px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.wnum small{font-size:14px;font-weight:500;color:var(--muted);margin-left:6px}
.whead .chg{font-size:13px;color:var(--muted)}
.wchart{display:block;width:100%;margin-top:8px;overflow:visible}
.wchart text{fill:var(--muted);font-size:10.5px;font-variant-numeric:tabular-nums}
.wchart .grid{stroke:var(--line);stroke-width:1}
.wchart .line{fill:none;stroke:var(--wet);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.wchart .pt{fill:var(--wet);stroke:var(--card);stroke-width:2}
.wchart .pt.sel{r:6}
.wchart .hit{fill:transparent;cursor:pointer}
.wchart .lbl{fill:var(--ink);font-weight:650;font-size:11px}
.wtip{font-size:13px;color:var(--muted);min-height:1.4em;margin-top:2px;text-align:center}
.wtable{margin-top:8px}
.wtable td,.wtable th{font-size:13px}
.wtable tbody tr{cursor:pointer}
.wempty{color:var(--muted);font-size:14px;padding:6px 2px}
.tt-gap{height:10px}