:root{--ink:#0f2e3b;--ink-soft:#4a7080;--paper:#edf6f4;--card:#fff;--line:#d6e7e4;--water-deep:#0e7c86;--water:#2bb3c0;--water-light:#8fe3ea;--peach:#ff8a5b;--lemon:#ffce4f;--berry:#f2789f;--f-display:"Fredoka", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;--f-body:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;--f-mono:"Space Mono", ui-monospace, Consolas, monospace;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:40px;--r-sm:10px;--r:18px;--r-lg:28px;--r-pill:999px;--shadow-card:0 2px 10px #0f2e3b0f;--shadow-pop:0 8px 28px #0e7c8629;--spring:cubic-bezier(.34, 1.32, .52, 1);--smooth:cubic-bezier(.22, .61, .36, 1)}*{box-sizing:border-box}html,body{height:100%}body{font-family:var(--f-body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;background-image:radial-gradient(circle at 12% 18%,#8fe3ea59 0,#0000 28%),radial-gradient(circle at 88% 8%,#ffce4f38 0,#0000 24%);background-attachment:fixed;margin:0;font-size:15px;line-height:1.6}#ios-status-bar-fill{height:env(safe-area-inset-top,0px);background:var(--card);z-index:9999;position:fixed;top:0;left:0;right:0}h1,h2,h3{font-family:var(--f-display);letter-spacing:-.01em;margin:0;font-weight:600}p{margin:0}button{font:inherit;color:inherit}.svg-defs{width:0;height:0;position:absolute;overflow:hidden}.ic{fill:currentColor;vertical-align:-.14em;flex:none;width:1em;height:1em;display:inline-block}.app-logo{--size:34px;align-items:center;gap:10px;display:inline-flex}.app-logo__mark{width:var(--size);aspect-ratio:1/1.16;clip-path:url(#dropClip);background:var(--ink);flex:none;position:relative}.app-logo__body{clip-path:url(#dropClip);background:var(--water-light);position:absolute;inset:6.5%;overflow:hidden}.app-logo__fill{background:var(--water-deep);height:46%;position:absolute;bottom:0;left:-20%;right:-20%}.app-logo__gloss{background:#ffffffe6;border-radius:50%;width:17%;height:9%;position:absolute;top:19%;left:31%;transform:rotate(-25deg)}.app-logo__face{position:absolute;inset:0}.app-logo__face i{display:block;position:absolute}.app-logo__face .eye{aspect-ratio:1/1.15;background:var(--ink);border-radius:50%;width:12%;top:32%}.app-logo__face .eye--l{left:29%}.app-logo__face .eye--r{right:29%}.app-logo__face .eye:after{content:"";background:#fff;border-radius:50%;width:40%;height:36%;position:absolute;top:12%;left:14%}.app-logo__face .blush{background:var(--peach);opacity:.55;border-radius:50%;width:11%;height:6%;top:39%}.app-logo__face .blush--l{left:19%}.app-logo__face .blush--r{right:19%}.app-logo__face .mouth{border-bottom:calc(var(--size) * .055) solid var(--ink);border-radius:0 0 60% 60%/0 0 100% 100%;width:21%;height:11%;top:43%;left:50%;transform:translate(-50%)}.app-logo__word{font-family:var(--f-display);letter-spacing:-.01em;white-space:nowrap;font-size:17px;font-weight:600;line-height:1.15}.app-logo__word small{font-family:var(--f-mono);letter-spacing:.16em;color:var(--ink-soft);text-transform:uppercase;font-size:9px;font-weight:400;display:block}.app-logo--xl{--size:132px}.app-logo--xl .app-logo__word{font-size:34px}.app-logo--xl .app-logo__word small{font-size:12px}.app-logo--xl .app-logo__fill:before{content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22' preserveAspectRatio='none'%3E%3Cpath d='M0 13 Q30 3 60 13 T120 13 V22 H0 Z' fill='%230e7c86'/%3E%3C/svg%3E");background-repeat:repeat-x;background-size:50% 100%;width:200%;height:10px;animation:4s linear infinite waveSlide;position:absolute;bottom:100%;left:0}.app-logo--mono .app-logo__mark{background:#f4fdfc}.app-logo--mono .app-logo__word{color:#f4fdfc}.app-logo--mono .app-logo__word small{color:#f4fdfcb3}.app-logo--bob .app-logo__mark{animation:mascotBob 3.2s var(--smooth) infinite}@keyframes mascotBob{0%,to{transform:translateY(0)rotate(0)}30%{transform:translateY(-7px)rotate(-4deg)}65%{transform:translateY(2px)rotate(3deg)}}.appbar{justify-content:space-between;align-items:center;gap:var(--s3);z-index:90;background:var(--paper);margin:calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s5);padding:var(--s4) var(--s5) var(--s3);border-bottom:1px solid var(--line);display:flex;position:sticky;top:0}.appbar .app-logo{--size:30px}.appbar .app-logo__word{font-size:15px}.cupgrid{gap:var(--s2);display:grid}.cupgrid__item{cursor:pointer;border-radius:var(--r);transition:transform .18s var(--spring), background .2s var(--smooth);background:0 0;border:0;padding:8px 2px 6px;position:relative}.cupgrid__item .cup{width:100%;max-width:54px;margin:0 auto}.cupgrid__item .cup__water{transition:height .75s var(--spring)}.cupgrid__item .idx{font-family:var(--f-mono);color:var(--ink-soft);margin-top:5px;font-size:10px;display:block}.cupgrid__item:hover{background:#f1fbfa;transform:translateY(-3px)}.cupgrid__item[disabled]{cursor:default}.cupgrid__item[disabled]:hover{background:0 0;transform:none}.cupgrid__item.is-next .cup__line .body{stroke-dasharray:7 6}.cupgrid__item.is-next .cup{animation:nextCupPulse 2.4s var(--smooth) infinite}.cupgrid__item.is-next .idx{color:var(--peach);font-weight:700}@keyframes nextCupPulse{0%,to{transform:scale(1)}40%{transform:scale(1.09)}}.cupgrid__item.is-done .idx{color:var(--water-deep)}.cupgrid-note{margin-top:var(--s3);align-items:baseline;gap:6px;display:flex}.cupgrid-note b{font-family:var(--f-display);font-size:20px}.shell{width:100%;max-width:480px;padding:var(--s5) var(--s5) 104px;margin:0 auto}.shell--wide{max-width:960px}.topbar{justify-content:space-between;align-items:flex-start;gap:var(--s4);margin-bottom:var(--s6);display:flex}.eyebrow{font-family:var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-size:11px}.topbar h1{margin-top:2px;font-size:24px;line-height:1.25}.iconbtn{cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);width:44px;height:44px;transition:transform .16s var(--spring), box-shadow .16s var(--smooth);flex:none;place-items:center;font-size:19px;display:grid;position:relative}.iconbtn:hover{box-shadow:var(--shadow-card);transform:translateY(-2px)}.iconbtn .dot{background:var(--berry);border:2px solid var(--card);border-radius:50%;width:9px;height:9px;position:absolute;top:6px;right:6px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow-card)}.card+.card,.stats+.card,.card+.stats{margin-top:var(--s4)}.card__title{justify-content:space-between;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4);display:flex}.card__title h2{font-size:17px}.card__title .eyebrow{flex:none}.cup-wrap{justify-content:center;align-items:flex-end;gap:var(--s3);padding:var(--s2) 0 var(--s5);flex-wrap:wrap;display:flex;position:relative}.companion-mascot{flex:none;margin-bottom:12px}.cup-stage{z-index:1;position:relative}.cup{aspect-ratio:100/132;--fill:60%;width:216px;position:relative}.cup__glass{clip-path:url(#cupClip);background:linear-gradient(100deg,#ffffffeb,#edf6f4eb);position:absolute;inset:0;overflow:hidden}.cup__line{z-index:8;pointer-events:none;position:absolute;inset:0;overflow:visible}.cup__line .body{fill:none;stroke:var(--ink);stroke-width:3.2px;stroke-linecap:round;stroke-linejoin:round}.cup__line .rim{fill:#ffffff4d;stroke:var(--ink);stroke-width:3.2px}.cup__line .shine{fill:none;stroke:#ffffffe6;stroke-width:6px;stroke-linecap:round}.cup__water{height:var(--fill);background:linear-gradient(180deg, var(--water) 0%, var(--water-deep) 100%);transition:height 1s var(--spring);z-index:2;position:absolute;bottom:0;left:-10%;right:-10%}.cup__wave{background-repeat:repeat-x;background-size:50% 100%;width:200%;height:20px;position:absolute;bottom:100%;left:0}.cup__wave--back{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q30 0 60 12 T120 12 V22 H0 Z' fill='%232bb3c0' opacity='0.55'/%3E%3C/svg%3E");animation:5.5s linear infinite reverse waveSlide}.cup__wave--front{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22' preserveAspectRatio='none'%3E%3Cpath d='M0 13 Q30 3 60 13 T120 13 V22 H0 Z' fill='%232bb3c0'/%3E%3C/svg%3E");animation:3.6s linear infinite waveSlide}@keyframes waveSlide{0%{transform:translate(0)}to{transform:translate(-50%)}}.cup__ripple{left:50%;bottom:var(--fill);aspect-ratio:4;opacity:0;z-index:4;pointer-events:none;width:54%;transition:bottom 1s var(--spring);border:2px solid #ffffffe6;border-radius:50%;position:absolute;transform:translate(-50%,50%)}.cup.is-splash .cup__ripple{animation:rippleOut .85s var(--smooth)}@keyframes rippleOut{0%{opacity:0;transform:translate(-50%,50%)scale(.25)}30%{opacity:1}to{opacity:0;transform:translate(-50%,50%)scale(1.6)}}.cup__drops{z-index:3;pointer-events:none;position:absolute;inset:0;overflow:hidden}.cup__drops .ic{color:#fff;opacity:0;animation:6s linear infinite dropRise;position:absolute;bottom:-18px;transform:rotate(180deg)}.cup__drops .ic:first-child{font-size:13px;animation-duration:6.4s;animation-delay:0s;left:24%}.cup__drops .ic:nth-child(2){font-size:9px;animation-duration:4.8s;animation-delay:1.1s;left:44%}.cup__drops .ic:nth-child(3){font-size:16px;animation-duration:7.6s;animation-delay:2.3s;left:62%}.cup__drops .ic:nth-child(4){font-size:10px;animation-duration:5.4s;animation-delay:3.4s;left:72%}.cup__drops .ic:nth-child(5){font-size:11px;animation-duration:8s;animation-delay:4.6s;left:35%}@keyframes dropRise{0%{opacity:0;transform:translateY(0)rotate(180deg)scale(.6)}14%{opacity:.55}to{opacity:0;transform:translateY(-280px)rotate(180deg)scale(1)}}.cup__num{z-index:5;font-family:var(--f-display);pointer-events:none;-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;font-weight:600;display:flex;position:absolute;inset:0}.cup__num .v{letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-size:52px;line-height:1}.cup__num .u{font-family:var(--f-mono);letter-spacing:.16em;margin-top:6px;font-size:12px}.cup__num--dry{color:var(--ink)}.cup__num--wet{color:#f4fdfc;z-index:6;clip-path:inset(calc(100% - var(--fill)) 0 0 0);transition:clip-path 1s var(--spring)}.cup__ticks{z-index:7;pointer-events:none;position:absolute;inset:0}.cup__ticks span{right:19%;bottom:var(--at);background:var(--line);width:20px;height:3px;transition:background .4s var(--smooth), width .4s var(--spring);border-radius:2px;position:absolute}.cup__ticks span.is-filled{background:#ffffffe6;width:26px}.cup__ticks .goal{width:30px}.cup__ticks .goal b{font:700 9px/1 var(--f-mono);letter-spacing:.1em;color:var(--ink-soft);transition:color .4s var(--smooth);position:absolute;bottom:7px;right:0}.cup__ticks .goal.is-filled{width:30px}.cup__ticks .goal.is-filled b{color:#f4fdfc}.cup.is-goal{animation:cupCheer .8s var(--spring)}@keyframes cupCheer{0%,to{transform:translateY(0)rotate(0)}25%{transform:translateY(-10px)rotate(-3deg)}55%{transform:translateY(0)rotate(2.5deg)}80%{transform:translateY(-4px)rotate(-1deg)}}.splash{pointer-events:none;z-index:20;position:absolute;inset:0}.splash i{opacity:0;width:24px;height:28px;position:absolute;top:44%;left:50%}.splash i .ic{width:100%;height:100%}.cup-stage.is-goal .splash i{animation:splashOut 1.15s var(--smooth) forwards}.splash i:first-child{--x:-122px;--y:-128px;--r:-30deg;color:var(--water);animation-delay:0s}.splash i:nth-child(2){--x:112px;--y:-150px;--r:26deg;color:var(--water-deep);animation-delay:50ms}.splash i:nth-child(3){--x:-164px;--y:-36px;--r:-64deg;color:var(--water-light);animation-delay:.1s}.splash i:nth-child(4){--x:152px;--y:-58px;--r:58deg;color:var(--lemon);animation-delay:.15s}.splash i:nth-child(5){--x:-58px;--y:-178px;--r:-12deg;color:var(--water-light);animation-delay:.2s}.splash i:nth-child(6){--x:62px;--y:-186px;--r:16deg;color:var(--peach);animation-delay:.24s}.splash i:nth-child(7){--x:-96px;--y:-186px;--r:-44deg;color:var(--water);animation-delay:.3s}.splash i:nth-child(8){--x:24px;--y:-206px;--r:8deg;color:var(--water-deep);animation-delay:.34s}@keyframes splashOut{0%{opacity:0;transform:translate(-50%,-50%)scale(.3)rotate(0)}22%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.1) rotate(var(--r))}}.cheer-mascot{z-index:21;opacity:0;pointer-events:none;position:absolute;top:0;left:50%}.cup-stage.is-goal .cheer-mascot{animation:cheerPop 1.9s var(--spring) forwards}@keyframes cheerPop{0%{opacity:0;transform:translate(-50%,10%)scale(.4)rotate(0)}28%{opacity:1;transform:translate(-50%,-74%)scale(1.06)rotate(-7deg)}52%{transform:translate(-50%,-64%)scale(1)rotate(5deg)}82%{opacity:1;transform:translate(-50%,-68%)scale(1)rotate(-2deg)}to{opacity:0;transform:translate(-50%,-86%)scale(.95)rotate(0)}}.dropfall{pointer-events:none;z-index:0;position:absolute;inset:-10% 0 0;overflow:hidden}.dropfall .ic{color:var(--water);opacity:0;animation:linear infinite dropFall;position:absolute;top:-6%}.dropfall .ic:first-child{font-size:16px;animation-duration:9s;animation-delay:0s;left:6%}.dropfall .ic:nth-child(2){font-size:10px;animation-duration:11s;animation-delay:2.4s;left:20%}.dropfall .ic:nth-child(3){font-size:20px;animation-duration:8s;animation-delay:1.2s;left:78%}.dropfall .ic:nth-child(4){font-size:12px;animation-duration:12s;animation-delay:4s;left:90%}.dropfall .ic:nth-child(5){font-size:9px;animation-duration:10s;animation-delay:6s;left:66%}.dropfall .ic:nth-child(6){font-size:13px;animation-duration:13s;animation-delay:3.2s;left:34%}@keyframes dropFall{0%{opacity:0;transform:translateY(-24px)scale(.85)}15%{opacity:.22}85%{opacity:.18}to{opacity:0;transform:translateY(380px)scale(1)}}.progress-line{text-align:center;margin-bottom:var(--s5)}.progress-line strong{font-family:var(--f-display);font-size:19px;font-weight:600}.progress-line .sub{color:var(--ink-soft);margin-top:2px;font-size:13px}.badge-goal{margin:0 auto var(--s3);border-radius:var(--r-pill);background:var(--lemon);width:fit-content;color:var(--ink);animation:badgeIn .5s var(--spring);align-items:center;gap:6px;padding:6px 14px;font-size:13px;font-weight:700;display:none}.is-goal-state .badge-goal{display:flex}@keyframes badgeIn{0%{opacity:0;transform:scale(.7)translateY(8px)}to{opacity:1;transform:none}}.btn{cursor:pointer;min-height:48px;font-family:var(--f-display);border:2px solid var(--ink);border-radius:var(--r-pill);background:var(--card);color:var(--ink);box-shadow:0 4px 0 var(--ink);transition:transform .12s var(--smooth), box-shadow .12s var(--smooth), background .2s var(--smooth);justify-content:center;align-items:center;gap:7px;padding:0 18px;font-size:16px;font-weight:600;display:inline-flex;position:relative}.btn:hover{box-shadow:0 5px 0 var(--ink);transform:translateY(-1px)}.btn:active{box-shadow:0 0 0 var(--ink);transform:translateY(4px)}.btn--primary{background:var(--peach)}.btn--water{background:var(--water-deep);color:#f4fdfc}.btn--ghost{box-shadow:none;border-style:dashed}.btn--ghost:hover{box-shadow:none;background:#f6fbfa;transform:translateY(-1px)}.btn--block{width:100%}.btn[disabled]{opacity:.45;box-shadow:none;cursor:not-allowed;transform:none}.btn .ic{opacity:.85;font-size:15px}.btn__drip{width:14px;height:16px;color:var(--water-deep);opacity:0;pointer-events:none;z-index:2;margin-left:-7px;position:absolute;bottom:4px;left:50%}.btn.is-drip .btn__drip{animation:dripOut .72s var(--smooth)}@keyframes dripOut{0%{opacity:0;transform:translateY(-12px)scaleY(.7)}28%{opacity:1;transform:translateY(0)scaleY(1.2)}to{opacity:0;transform:translateY(38px)scaleY(1.45)}}.quick-add{gap:var(--s3);grid-template-columns:1fr 1fr auto;display:grid}.quick-add .btn{padding:0 10px}.quick-add .btn .ml{font-family:var(--f-mono);opacity:.75;font-size:12px}.log{margin:0;padding:0;list-style:none}.log li{align-items:center;gap:var(--s3);padding:var(--s3) 0 var(--s3) var(--s6);border-bottom:1px dashed var(--line);animation:rowIn .45s var(--smooth) backwards;display:flex;position:relative}.log li:last-child{border-bottom:0}.log li .ic{color:var(--water);font-size:16px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.log li:after{content:"";background:var(--line);width:1px;position:absolute;top:calc(50% + 12px);bottom:-6px;left:7px}.log li:last-child:after{display:none}.log .t{font-family:var(--f-mono);color:var(--ink-soft);flex:none;width:52px;font-size:13px}.log .amt{font-family:var(--f-display);font-weight:600}.log .tag{color:var(--ink-soft);margin-left:auto;font-size:12px}@keyframes rowIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:none}}.state-demo{border:2px dashed var(--line);border-radius:var(--r);padding:var(--s4)}.state-demo+.state-demo{margin-top:var(--s3)}.state-demo .eyebrow{margin-bottom:var(--s2)}.empty{text-align:center;padding:var(--s4) 0}.empty .ic{color:var(--line);font-size:34px}.empty b{margin:var(--s2) 0 2px;font-family:var(--f-display);display:block}.skel{height:12px;animation:pulseSkel 1.4s var(--smooth) infinite;background:#e6efee;border-radius:8px}.skel+.skel{margin-top:8px}@keyframes pulseSkel{0%,to{opacity:1}50%{opacity:.45}}.notice{gap:var(--s3);padding:var(--s3);border-radius:var(--r-sm);background:#ffeeea;border:1px solid #ffc9b8;align-items:flex-start;font-size:13px;display:flex}.notice b{display:block}.tabbar{z-index:80;gap:var(--s1);background:var(--card);border:2px solid var(--ink);border-radius:var(--r-pill);box-shadow:0 4px 0 var(--ink);padding:6px;display:flex;position:fixed;bottom:14px;left:50%;transform:translate(-50%)}.tabbar a{min-width:84px;min-height:44px;padding:0 var(--s3);color:var(--ink-soft);border-radius:var(--r-pill);transition:background .18s var(--smooth), color .18s var(--smooth);flex-direction:column;justify-content:center;align-items:center;gap:1px;font-size:11px;text-decoration:none;display:flex}.tabbar a em{font-size:17px;font-style:normal;line-height:1}.tabbar a .ic{font-size:17px}.tabbar a:hover{color:var(--ink);background:#f0f9f8}.tabbar a[aria-current=page]{background:var(--water-deep);color:#f4fdfc}.field{margin-bottom:var(--s5)}.field>label,.field>.lbl{margin-bottom:var(--s2);font-weight:500;display:block}.hint{color:var(--ink-soft);font-size:13px}.slider-row{align-items:baseline;gap:var(--s3);margin-bottom:var(--s2);display:flex}.slider-row .big{font-family:var(--f-display);font-variant-numeric:tabular-nums;transition:color .2s var(--smooth);font-size:40px;font-weight:600;line-height:1}.slider-row .unit{font-family:var(--f-mono);color:var(--ink-soft);font-size:13px}.big.is-bump{animation:numBump .35s var(--spring)}@keyframes numBump{0%{transform:scale(1)}45%{color:var(--water-deep);transform:scale(1.14)}to{transform:scale(1)}}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:30px}input[type=range]::-webkit-slider-runnable-track{border-radius:var(--r-pill);background:linear-gradient(90deg, var(--water) var(--pct,50%), var(--line) var(--pct,50%));border:1px solid var(--line);height:10px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--card);border:3px solid var(--ink);width:30px;height:30px;box-shadow:0 2px 0 var(--ink);transition:transform .14s var(--spring);border-radius:50%;margin-top:-11px}input[type=range]::-webkit-slider-thumb:active{transform:scale(1.12)}input[type=range]::-moz-range-track{border-radius:var(--r-pill);background:var(--line);height:10px}input[type=range]::-moz-range-progress{border-radius:var(--r-pill);background:var(--water);height:10px}input[type=range]::-moz-range-thumb{background:var(--card);border:3px solid var(--ink);border-radius:50%;width:26px;height:26px}.chips{gap:var(--s2);flex-wrap:wrap;display:flex}.chip{border:2px solid var(--line);border-radius:var(--r-pill);background:var(--card);cursor:pointer;min-height:44px;transition:transform .14s var(--spring), border-color .18s var(--smooth), background .18s var(--smooth);align-items:center;gap:6px;padding:0 16px;font-size:14px;display:inline-flex}.chip:hover{border-color:var(--water);transform:translateY(-2px)}.chip.is-on{background:var(--water-deep);border-color:var(--water-deep);color:#f4fdfc;font-weight:500}.cards-pick{gap:var(--s2);grid-template-columns:repeat(3,1fr);display:grid}.pick{padding:var(--s4) var(--s2);text-align:center;cursor:pointer;border:2px solid var(--line);border-radius:var(--r);background:var(--card);transition:transform .16s var(--spring), border-color .18s var(--smooth), background .18s var(--smooth)}.pick:hover{border-color:var(--water);transform:translateY(-3px)}.pick em{font-size:26px;font-style:normal;line-height:1.2;display:block}.pick b{margin-top:6px;font-size:14px;font-weight:600;display:block}.pick small{color:var(--ink-soft);font-size:11px}.pick.is-on{border-color:var(--water-deep);background:#e6f7f8}.pick.is-on small{color:var(--water-deep)}.switch-row{justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s3) 0;display:flex}.switch{cursor:pointer;border:2px solid var(--ink);border-radius:var(--r-pill);background:var(--line);width:60px;height:34px;transition:background .22s var(--smooth);flex:none;padding:3px}.switch span{background:var(--card);border:2px solid var(--ink);width:24px;height:24px;transition:transform .26s var(--spring);border-radius:50%;display:block}.switch.is-on{background:var(--water)}.switch.is-on span{transform:translate(26px)}.seg{border-radius:var(--r-pill);background:#e3f1ef;gap:2px;padding:4px;display:inline-flex}.seg button{cursor:pointer;border-radius:var(--r-pill);min-height:40px;transition:background .2s var(--smooth), color .2s var(--smooth);background:0 0;border:0;padding:0 18px;font-weight:500}.seg button.is-on{background:var(--card);color:var(--ink);box-shadow:var(--shadow-card)}input[type=time],input[type=number],input[type=text]{width:100%;min-height:48px;font:inherit;font-family:var(--f-mono);color:var(--ink);background:var(--card);border:2px solid var(--line);border-radius:var(--r-sm);padding:0 14px}.stepdots{margin-bottom:var(--s4);gap:6px;display:flex}.stepdots i{border-radius:var(--r-pill);background:var(--line);height:6px;transition:background .3s var(--smooth);flex:1}.stepdots i.is-on{background:var(--water-deep)}.step{display:none}.step.is-active{animation:stepIn .42s var(--smooth);display:block}@keyframes stepIn{0%{opacity:0;transform:translate(26px)scale(.985)}to{opacity:1;transform:none}}.previewbar{z-index:80;align-items:center;gap:var(--s4);width:100%;max-width:480px;padding:var(--s3) var(--s5) calc(var(--s4) + env(safe-area-inset-bottom));background:var(--card);border-top:2px solid var(--ink);border-radius:var(--r-lg) var(--r-lg) 0 0;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -6px 24px #0f2e3b1a}.previewbar__num{flex:1}.previewbar__num .big{font-family:var(--f-display);font-variant-numeric:tabular-nums;font-size:30px;font-weight:600;line-height:1.1;display:inline-block}.previewbar__num .unit{font-family:var(--f-mono);color:var(--ink-soft);font-size:12px}.cup--mini{width:48px}.cup--mini .cup__line .body,.cup--mini .cup__line .rim{stroke-width:5.5px}.cup--mini .cup__wave{height:8px}.streak{align-items:center;gap:var(--s4);background:var(--water-deep);color:#f4fdfc;border:2px solid var(--ink);border-radius:var(--r-lg);padding:var(--s5);box-shadow:0 5px 0 var(--ink);margin-bottom:var(--s4);display:flex}.streak .n{font-family:var(--f-display);font-size:54px;font-weight:700;line-height:.9}.streak .n small{margin-left:4px;font-size:17px;font-weight:500}.streak p{opacity:.85;font-size:13px}.week{gap:var(--s2);align-items:flex-end;display:flex}.week .day{text-align:center;flex:1}.week .day .cup{width:100%}.week .day .cup__glass{background:#ffffffe6}.week .day .pct{font-family:var(--f-mono);color:var(--ink-soft);margin-bottom:5px;font-size:10px;display:block}.week .day .lbl{color:var(--ink-soft);margin-top:6px;font-size:12px;display:block}.week .day.is-today{background:#ffce4f52;border-radius:16px;padding:6px 3px}.week .day.is-today .lbl{color:var(--ink);font-weight:700}.week .day.is-miss .cup__line .body{stroke-dasharray:5 5}.dropgrid{gap:var(--s2);grid-template-columns:repeat(7,1fr);display:grid}.drop{aspect-ratio:1/1.16;clip-path:url(#dropClip);transition:transform .16s var(--spring);background:#e3f1ef;position:relative}.drop:hover{z-index:2;transform:scale(1.16)}.drop b{height:var(--v,0%);background:var(--water);transition:height .5s var(--spring);position:absolute;bottom:0;left:0;right:0}.drop.is-full b{background:var(--water-deep)}.drop.is-full:after{content:"✓";color:#f4fdfc;z-index:4;justify-content:center;font-size:11px;font-weight:700;display:flex;position:absolute;inset:34% 0 0}.drop.is-empty{background:repeating-linear-gradient(45deg,#f4faf9 0 4px,#e7f0ef 4px 8px)}.drop u{z-index:3;background:#fffc;border-radius:50%;width:24%;height:13%;position:absolute;top:36%;left:20%;transform:rotate(-24deg)}.drop em{z-index:3;font-style:normal;font-family:var(--f-mono);color:var(--ink-soft);text-align:center;font-size:8px;position:absolute;top:16%;left:0;right:0}.stats{gap:var(--s3);grid-template-columns:repeat(3,1fr);display:grid}.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s3);text-align:center}.stat .v{font-family:var(--f-display);font-size:26px;font-weight:600;line-height:1.1}.stat .k{color:var(--ink-soft);margin-top:2px;font-size:12px}.legend{gap:var(--s3);margin-top:var(--s4);color:var(--ink-soft);flex-wrap:wrap;font-size:12px;display:flex}.legend span{align-items:center;gap:6px;display:inline-flex}.legend i{clip-path:url(#dropClip);width:13px;height:15px;display:block}.rowlink{align-items:center;gap:var(--s3);width:100%;min-height:56px;padding:var(--s3) 0;cursor:pointer;border:0;border-bottom:1px dashed var(--line);text-align:left;background:0 0;display:flex}.rowlink:last-child{border-bottom:0}.rowlink em{flex:none;width:28px;font-size:20px;font-style:normal}.rowlink .k{flex:1}.rowlink .k small{color:var(--ink-soft);font-size:12px;display:block}.rowlink .go{color:var(--ink-soft)}.rowlink:hover{background:#f6fbfa}.timeline-preview{height:52px;margin-top:var(--s3);border-top:2px dashed var(--line);position:relative}.timeline-preview .ic{top:-10px;left:var(--at);color:var(--water);animation:pingDot 2.4s var(--smooth) infinite;font-size:17px;position:absolute;transform:translate(-50%)}@keyframes pingDot{0%,70%,to{transform:translate(-50%)scale(1)}12%{transform:translate(-50%)scale(1.45)}}.timeline-preview .cap{font-family:var(--f-mono);color:var(--ink-soft);font-size:11px;position:absolute;top:18px}.timeline-preview .cap.right{right:0}.danger{color:#c2413f}.sheet-scrim{z-index:199;animation:fade .35s var(--smooth);background:#0f2e3b73;position:fixed;inset:0}@keyframes fade{0%{opacity:0}to{opacity:1}}.sheet{z-index:200;background:var(--card);border-top:3px solid var(--ink);border-radius:var(--r-lg) var(--r-lg) 0 0;max-width:480px;padding:var(--s6) var(--s5) var(--s5);animation:sheetUp .42s var(--spring);margin:0 auto;position:fixed;bottom:0;left:0;right:0}@keyframes sheetUp{0%{transform:translateY(102%)}to{transform:none}}.sheet__mascot{filter:drop-shadow(0 4px #0f2e3b26);position:absolute;top:0;right:24px;transform:translateY(-82%)}.sheet__grip{border-radius:var(--r-pill);background:var(--line);width:44px;height:5px;margin:-14px auto var(--s4)}.sheet h2{margin-bottom:var(--s2);font-size:20px}.sheet .hint{margin-bottom:var(--s4)}.sheet .btn{margin-top:var(--s2)}.howto{margin:0 0 var(--s4);counter-reset:s;padding:0;list-style:none}.howto li{align-items:center;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px dashed var(--line);display:flex}.howto li:last-child{border-bottom:0}.howto--steps li:before{counter-increment:s;content:counter(s);background:var(--water-light);width:26px;height:26px;color:var(--ink);font-family:var(--f-mono);border-radius:50%;flex:none;place-items:center;font-size:12px;font-weight:700;display:grid}.howto .key{border:1.5px solid var(--ink);background:#f4faf9;border-radius:8px;align-items:center;gap:4px;padding:3px 8px;font-size:13px;display:inline-flex}.howto .ic{color:var(--water-deep);flex:none;font-size:18px}.arrow-hint{animation:bobDown 1.4s var(--smooth) infinite;font-size:26px;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}@keyframes bobDown{0%,to{transform:translate(-50%)}50%{transform:translate(-50%,9px)}}.platform-note{gap:var(--s2);border-radius:var(--r-sm);padding:var(--s3);background:#fff6e6;align-items:flex-start;font-size:13px;display:flex}a:focus-visible,button:focus-visible,input:focus-visible,.chip:focus-visible,.pick:focus-visible,.switch:focus-visible{outline:3px solid var(--peach);outline-offset:3px;border-radius:var(--r-sm)}.rise{animation:rise .6s var(--smooth) backwards}.rise:nth-child(2){animation-delay:60ms}.rise:nth-child(3){animation-delay:.12s}.rise:nth-child(4){animation-delay:.18s}@keyframes rise{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@media (width>=900px){.shell--split{gap:var(--s8);max-width:940px;padding-top:var(--s8);grid-template-columns:380px 1fr;align-items:start;display:grid}.shell--split .col-hero{top:var(--s7);position:sticky}.shell--split .appbar,.shell--split .topbar{grid-column:1/-1}.cup{width:250px}.cup--mini{width:48px}.cup__num .v{font-size:60px}.tabbar{bottom:20px;left:50%}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}