@font-face{font-family:"Barlow Condensed";src:url("assets/barlow-condensed.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
.coffee-card,.coffee-card *{box-sizing:border-box}
.coffee-card{--ink:#282d24;--muted:#707769;--yellow:#eab633;--paper:#fafbf6;--coffee:#763b21;--target-y:159px;--actual-y:223px;--strength-x:138px;position:relative;background:var(--paper);color:var(--ink);width:100%;padding:25px 24px 20px;border-radius:28px;font-family:"PingFang SC","Microsoft YaHei",sans-serif;box-shadow:0 3px 6px #65480708,0 25px 45px #65480716;line-height:1.5;isolation:isolate}
.coffee-card button{font:inherit}.cc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}.cc-kicker{font-weight:600;letter-spacing:1px}.cc-device{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:12px;white-space:nowrap}.cc-device:before{content:"";width:5px;height:5px;border-radius:50%;background:#6f805b}.cc-title{margin:22px 0 0;font-size:19px;font-weight:500;line-height:1.45;overflow-wrap:anywhere;max-width:100%}.cc-time-block{display:flex;align-items:center;gap:12px;min-height:100px;margin-top:5px}.cc-time-label{font-size:14px;color:var(--muted);align-self:center;padding-top:17px}.cc-countdown{display:flex;align-items:baseline;gap:6px;line-height:1;white-space:nowrap}.cc-digits{font-family:"Barlow Condensed",sans-serif;font-size:88px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-1px;display:flex;line-height:1.02;height:92px;overflow:hidden}.cc-digit{display:inline-block;width:.43em;position:relative}.cc-digit-value{display:block}.cc-digit-value.changed{animation:digit-in .22s cubic-bezier(.2,.8,.2,1)}.cc-unit{font-size:17px;line-height:1.2;margin-left:3px}.cc-time-detail{margin-left:auto;font-size:13px;color:var(--muted);line-height:1.65;padding-top:21px;max-width:90px}.cc-headline{font-size:42px;font-weight:400;line-height:1.35;letter-spacing:-1.8px}.cc-headline + .cc-time-detail{max-width:115px;padding-top:0}.cc-hero-wrap{margin:1px -8px 0;position:relative}.cc-hero{width:100%;position:relative;aspect-ratio:320 / 320;user-select:none;-webkit-user-select:none;container-type:inline-size}.cc-art{position:absolute;width:100%;height:100%;inset:0;overflow:visible}.cc-cup-image{position:absolute;left:0;top:8.4%;width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 7px 6px #61513a12);mix-blend-mode:multiply;z-index:2;transition:opacity .3s,filter .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.cc-scene-light{opacity:0;transition:opacity .35s}.cc-liquid{transition:fill .16s}.cc-liquid-preview{opacity:.19}.cc-crema{opacity:.8}.cc-surface{transition:opacity .2s}.cc-stream{opacity:0;stroke:url(#cc-flow);stroke-width:2.3;stroke-linecap:round}.cc-grinds,.cc-wet,.cc-steam,.cc-check,.cc-pause-mark,.cc-error-mark,.cc-empty-cup,.cc-clock,.cc-stopped-mark{opacity:0;transition:opacity .22s}.cc-glass-filter{fill:#fff;opacity:.08}.cc-target-line{stroke:#8b835d;stroke-width:1;stroke-dasharray:3 4;opacity:.7}.cc-ruler{stroke:#80795b;stroke-width:.7;opacity:.48}.cc-current{font:13px "PingFang SC",sans-serif;fill:#fff7e4;paint-order:stroke;stroke:#4c301c30;stroke-width:2px}.cc-current-label{font-size:10px;fill:#fff7e4}.cc-target-control{position:absolute;left:12%;top:calc(var(--target-pct) * 1%);width:88%;height:44px;transform:translateY(-50%);z-index:5;touch-action:none;cursor:ns-resize;border:0;outline:none;display:block;background:transparent;color:var(--ink);padding:0;writing-mode:vertical-lr;direction:rtl;opacity:0;-webkit-appearance:none;appearance:none}.cc-target-control::-webkit-slider-thumb{appearance:none;width:44px;height:44px;background:transparent}.cc-target-control::-webkit-slider-runnable-track{background:transparent;width:44px;height:100%}.cc-target-control::-moz-range-thumb{width:44px;height:44px;border:0;background:transparent}.cc-target-tag{position:absolute;left:74.6%;top:calc(var(--target-pct) * 1%);z-index:4;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 7px 6px;background:#ecc34e;border:1px solid #d7ac3490;border-radius:9px;color:#3b331e;font-size:12px;line-height:1.2;min-height:50px;pointer-events:none;box-shadow:0 2px 3px #6548070c;transition:background .2s,box-shadow .2s;white-space:nowrap}.cc-target-tag strong{font-family:"Barlow Condensed",sans-serif;font-size:24px;font-weight:400;line-height:1}.cc-target-tag .cc-drag-symbol{font-size:15px;line-height:1}.cc-target-control:focus-visible{opacity:1;outline:2px solid #595f4f;outline-offset:3px;border-radius:5px}.coffee-card.cc-dragging .cc-target-tag{background:#f3d267;box-shadow:0 0 0 4px #eab63320}.coffee-card.cc-dragging .cc-target-line{stroke:#56471e;stroke-dasharray:none}.cc-target-amount{display:flex;align-items:baseline;gap:4px}.cc-target-caption{font-size:12px;font-weight:500;color:#58471e;line-height:1.3}
.cc-strength-control{position:absolute;left:13%;top:76%;width:57%;height:15%;z-index:5;touch-action:none;cursor:ew-resize;padding:0;border:0;background:none;color:transparent;appearance:none;-webkit-appearance:none;opacity:0}.cc-strength-control::-webkit-slider-runnable-track{height:44px;background:transparent}.cc-strength-control::-webkit-slider-thumb{appearance:none;width:36px;height:44px;background:transparent}.cc-strength-control::-moz-range-thumb{width:36px;height:44px;background:transparent;border:0}.cc-strength-control:focus-visible{opacity:1;outline:2px solid #595f4f;outline-offset:2px;border-radius:4px}.cc-strength-arc{fill:none;stroke:#a8aa97;stroke-width:1;opacity:.8}.cc-strength-tick{stroke:#90977e;stroke-width:1}.cc-strength-thumb{fill:var(--yellow);stroke:var(--paper);stroke-width:2;filter:drop-shadow(0 1px 1px #77622220)}.cc-strength-copy{font-size:12px;fill:#717867}.cc-strength-value{fill:#343c2b;font-size:13px}.cc-locked-indicator{stroke:#9a9f8e;fill:none;stroke-width:1.3}.cc-strength-lock{opacity:0}
.cc-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:4px 0 22px}.cc-stage{position:relative;font-size:13px;color:#767d6a;text-align:center;padding:10px 0 0;line-height:1.5}.cc-stage:before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:#e2e6d9;transition:background .25s}.cc-stage.is-past{color:#656e59}.cc-stage.is-past:before{background:#a5ad93}.cc-stage.is-current{color:#323a28;font-weight:500}.cc-stage.is-current:before{background:#eab633}.coffee-card[data-state=brewing] .cc-stage.is-current:before,.coffee-card[data-state=grinding] .cc-stage.is-current:before,.coffee-card[data-state=preinfusion] .cc-stage.is-current:before{background:linear-gradient(90deg,#eab633 45%,#e3e6d8 45%);background-size:220% 100%;animation:stage-flow 2s ease-in-out infinite}.cc-action{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:54px;border:0;border-radius:13px;background:#282d24;color:#fafbf6;padding:14px 18px;cursor:pointer;font-size:15px;font-weight:500;transition:transform .16s cubic-bezier(.2,.8,.2,1),background .2s;position:relative;overflow:hidden}.cc-action:hover{background:#3a4230}.cc-action:active{transform:translateY(1px) scale(.985);transition-duration:.08s}.cc-action:focus-visible{outline:2px solid #6c775b;outline-offset:4px}.cc-action-arrow{font-family:Arial,sans-serif;font-size:21px;line-height:1}.cc-action-lines{display:flex;align-items:center;gap:2px;position:absolute;left:0;top:0;right:0;height:3px;opacity:.65}.cc-action-lines i{display:block;width:25%;height:1px;background:#c8d0b6}.cc-action:disabled{cursor:wait;background:#737a67}.cc-note{font-size:13px;color:#6b735f;line-height:1.7;min-height:41px;margin:12px 0 0;text-align:center;display:flex;justify-content:center;align-items:center;text-wrap:pretty}.cc-toast{font-size:12px;padding:7px 12px;border-radius:8px;color:#fcfaf0;background:#484d3a;position:absolute;bottom:119px;left:50%;transform:translate(-50%,5px);opacity:0;pointer-events:none;z-index:6;white-space:nowrap;transition:transform .18s,opacity .18s}.cc-toast.visible{opacity:1;transform:translate(-50%,0)}
.coffee-card[data-state=ready] .cc-stream{opacity:0}.coffee-card[data-state=ready] .cc-current,.coffee-card[data-state=grinding] .cc-current,.coffee-card[data-state=preinfusion] .cc-current,.coffee-card[data-state=scheduled] .cc-current{opacity:0}.coffee-card[data-state=grinding] .cc-grinds{opacity:1}.cc-grind-bit{fill:#7a4d23;animation:grind-fall 1.2s linear infinite;transform-origin:center}.cc-grind-bit:nth-child(2){animation-delay:-.4s}.cc-grind-bit:nth-child(3){animation-delay:-.8s}.cc-grind-bit:nth-child(4){animation-delay:-.2s}.cc-grind-bit:nth-child(5){animation-delay:-.6s}.coffee-card[data-state=grinding] .cc-scene-light,.coffee-card[data-state=preinfusion] .cc-scene-light{opacity:.35}.coffee-card[data-state=preinfusion] .cc-wet{opacity:1}.cc-wet circle{animation:wet-ripple 1.7s ease-out infinite;transform-origin:140px 50px}.cc-wet circle:nth-child(2){animation-delay:-.6s}.coffee-card[data-state=brewing] .cc-stream{opacity:1;stroke-dasharray:none;animation:flow-shimmer 1.25s ease-in-out infinite}.coffee-card[data-state=brewing] .cc-scene-light{opacity:.48}.coffee-card[data-state=settling] .cc-stream{opacity:.5;stroke-dasharray:1 14;animation:pour 2s linear infinite}.coffee-card[data-state=settling] .cc-wet{opacity:.65}.coffee-card[data-state=paused] .cc-pause-mark{opacity:1}.coffee-card[data-state=paused] .cc-scene-light{opacity:.2}.coffee-card[data-state=paused] .cc-stream{opacity:.25;stroke-dasharray:4 10}.coffee-card[data-state=error] .cc-error-mark{opacity:1}.coffee-card[data-state=error]{--coffee:#765347}.coffee-card[data-state=error] .cc-scene-light{opacity:.8}.coffee-card[data-state=error] .cc-target-line{stroke:#b4664f;stroke-dasharray:2 5}.coffee-card[data-state=error] .cc-target-tag{background:#f0d5b8;border-color:#d5a585}.coffee-card[data-state=error] .cc-device:before{background:#b4664f}.coffee-card[data-state=error] .cc-action{background:#795043}.coffee-card[data-state=done] .cc-check{opacity:1}.coffee-card[data-state=done] .cc-steam{opacity:.7}.coffee-card[data-state=done] .cc-scene-light{opacity:.75}.coffee-card[data-state=done] .cc-target-tag{background:#e6c151}.coffee-card[data-state=done] .cc-check path{stroke-dasharray:30;stroke-dashoffset:0;animation:draw-check .45s ease-out}.coffee-card[data-state=done] .cc-cup-image{transform:translateY(-3px)}.coffee-card[data-state=done] .cc-steam path{animation:steam-rise 2.8s ease-in-out infinite}.coffee-card[data-state=stopped] .cc-stopped-mark{opacity:1}.coffee-card[data-state=stopped] .cc-target-line{opacity:.28}.coffee-card[data-state=empty] .cc-cup-image{opacity:.1;filter:grayscale(1)}.coffee-card[data-state=empty] .cc-empty-cup{opacity:1}.coffee-card[data-state=empty] .cc-target-control,.coffee-card[data-state=empty] .cc-target-tag,.coffee-card[data-state=empty] .cc-ruler,.coffee-card[data-state=empty] .cc-target-caption,.coffee-card[data-state=empty] .cc-strength-control,.coffee-card[data-state=empty] .cc-strength-art,.coffee-card[data-state=empty] .cc-current,.coffee-card[data-state=empty] .cc-target-line{visibility:hidden}.coffee-card[data-state=loading] .cc-cup-image{opacity:.3;filter:blur(4px) grayscale(.3)}.coffee-card[data-state=loading] .cc-target-tag,.coffee-card[data-state=loading] .cc-target-caption,.coffee-card[data-state=loading] .cc-strength-art,.coffee-card[data-state=loading] .cc-current{visibility:hidden}.coffee-card[data-state=loading] .cc-scene-light{opacity:.35;animation:load-light 1.2s ease-in-out infinite}.coffee-card[data-state=scheduled] .cc-clock{opacity:1}.coffee-card[data-state=scheduled] .cc-scene-light{opacity:.2}
.coffee-card.cc-enter .cc-hero-wrap{animation:cup-enter .45s cubic-bezier(.2,.8,.2,1) both}.coffee-card.cc-enter .cc-time-block{animation:text-enter .35s .06s both}.coffee-card.cc-enter .cc-stages{animation:text-enter .3s .12s both}.coffee-card.cc-enter .cc-action{animation:text-enter .3s .18s both}.coffee-card.cc-locked .cc-strength-lock{opacity:1}.coffee-card.cc-locked .cc-strength-thumb{fill:#aeb397}.coffee-card.cc-locked .cc-strength-control{cursor:default}.coffee-card.cc-locked .cc-strength-arc{opacity:.5}.coffee-card.cc-complete .cc-target-control{pointer-events:none}.coffee-card.cc-complete .cc-target-tag .cc-drag-symbol{display:none}
@keyframes pour{to{stroke-dashoffset:-46}}@keyframes stage-flow{0%,100%{background-position:100% 0}50%{background-position:0 0}}@keyframes grind-fall{0%{transform:translateY(-5px);opacity:0}18%{opacity:1}85%{opacity:1}100%{transform:translateY(14px);opacity:0}}@keyframes wet-ripple{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.5);opacity:0}}@keyframes steam-rise{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-5px);opacity:.8}}@keyframes draw-check{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}@keyframes load-light{50%{opacity:.65}}@keyframes cup-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes text-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes digit-in{from{transform:translateY(16px);opacity:.35}to{transform:translateY(0);opacity:1}}
@media(max-width:355px){.coffee-card{padding:23px 20px 18px;border-radius:25px}.cc-digits{font-size:79px;height:85px}.cc-time-block{gap:8px}.cc-time-detail{font-size:12px;max-width:85px}.cc-top{font-size:12px}.cc-device{font-size:11px}.cc-headline{font-size:36px}.cc-title{font-size:18px}.cc-target-tag{padding:6px 5px;gap:4px}.cc-note{font-size:12px}.cc-target-tag strong{font-size:22px}}
@media(prefers-reduced-motion:reduce){.coffee-card *,.coffee-card *:before{animation:none!important;transition:none!important}.cc-digit-value.changed{transform:none}.cc-stream{stroke-dasharray:none!important}}
.coffee-card.cc-pointer-input .cc-target-control:focus-visible,.coffee-card.cc-pointer-input .cc-strength-control:focus-visible{opacity:0;outline:none}

@keyframes flow-shimmer{0%,100%{stroke-width:2.1;opacity:.88}50%{stroke-width:2.6;opacity:1}}