:root{color-scheme:light;--bg:#f5f2ea;--paper:#fcfaf6;--ink:#263e33;--green:#344f42;--muted:#68736b;--line:#dcded3;--accent:#bc6848;--water:#b8ccbd;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0}button,input,a{touch-action:manipulation}button{font:inherit;cursor:pointer;border:0;min-height:48px;border-radius:12px;padding:15px 20px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button:hover{filter:brightness(.96)}[hidden]{display:none!important}main{max-width:780px;margin:auto;padding:32px 32px 22px}header{display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--line)}.brand{font-family:Georgia,serif;font-size:36px;letter-spacing:-2px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:17px}.brand span{font:10px Arial,sans-serif;letter-spacing:2px;max-width:110px;line-height:1.6}.pill{font-size:11px;border:1px solid var(--line);padding:8px 12px;border-radius:30px;white-space:nowrap}.intro{padding:35px 0 26px}.eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:700;margin:0 0 15px;color:var(--accent)}h1{font:normal 48px/1.08 Georgia,'Times New Roman',serif;letter-spacing:-1.5px;margin:0 0 14px}p{line-height:1.5;color:var(--muted);font-size:14px}h2{font:normal 23px Georgia,serif;margin:0}.setup{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden}.setup-heading{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 0}.setup-heading>span{font-size:9px;letter-spacing:1.5px;color:var(--muted)}.setup-image{width:100%;height:230px;object-fit:cover;display:block;mix-blend-mode:multiply}.checklist{margin:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:8px 24px 25px}.checklist li{display:flex;gap:11px;align-items:flex-start}.check{font-size:12px;border:1px solid #c4d0c4;border-radius:50%;width:21px;height:21px;display:grid;place-items:center;flex-shrink:0;background:#ecf0e7}.checklist strong{display:block;font-size:13px;font-weight:600}.checklist small{display:block;font-size:11px;color:var(--muted);margin-top:5px}.options{display:flex;justify-content:space-between;gap:12px;margin:22px 3px;font-size:12px}.options label{display:flex;gap:9px;align-items:center;cursor:pointer}input[type=checkbox]{appearance:none;width:30px;height:18px;border-radius:20px;background:#bcc1b6;position:relative;margin:0;flex-shrink:0}input[type=checkbox]:checked{background:var(--green)}input[type=checkbox]:before{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:white;top:3px;left:3px;transition:transform .15s}input[type=checkbox]:checked:before{transform:translateX(12px)}.choose{font-size:12px;margin:25px 0 13px}.brew-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.primary{background:var(--green);color:#fff}.secondary{background:transparent;border:1px solid #c8cec1;color:var(--ink)}.recipe{display:flex;text-align:left;align-items:center;gap:12px;padding:20px}.recipe strong{display:block;font-family:Georgia,serif;font-size:21px;font-weight:normal}.recipe small{display:block;font-size:10px;margin-top:7px;opacity:.8}.arrow{font-size:21px;margin-left:auto}.footnote{font-size:11px;text-align:center;margin:16px 0;color:var(--muted)}footer{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.6px;color:var(--muted);border-top:1px solid var(--line);padding-top:20px;margin-top:32px}.text-button{display:block;margin:auto;background:transparent;text-decoration:underline;font-size:12px;color:var(--green)}.brew-heading{display:flex;justify-content:space-between;align-items:center;padding:30px 0}.brew-heading p{margin:0;font-size:12px}.brew-heading .eyebrow{margin-bottom:8px;font-size:10px}.instruction{text-align:center;min-height:126px}.instruction .eyebrow{margin-bottom:12px}.instruction h1{font-size:58px;margin-bottom:10px}.instruction p:last-child{font-size:13px;margin:0}.visual{max-width:330px;position:relative;margin:5px auto 18px}.visual svg{width:100%;display:block}.ring-track{fill:none;stroke:#e0e2d7;stroke-width:3}.ring-progress{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:886;stroke-dashoffset:886;transform:rotate(-90deg);transform-origin:160px 155px}.cone{fill:#fdfcf8;stroke:var(--green);stroke-width:2}.ribs{fill:none;stroke:#abbcaf;stroke-width:1.3}.lip,.base{stroke:var(--green);stroke-width:3;stroke-linecap:round}.server{fill:#f9fbf6;stroke:var(--green);stroke-width:2}.handle{fill:none;stroke:var(--green);stroke-width:2}.coffee{fill:#9c654a;opacity:.75}.water{fill:var(--water);opacity:.8;transition:y .4s}.surface{fill:none;stroke:#86a792;stroke-width:2}.stream{stroke:#8dbaa5;stroke-width:5;stroke-linecap:round;stroke-dasharray:8 5;animation:pour .6s linear infinite}.drip{stroke:#9c654a;stroke-width:3;stroke-linecap:round;animation:pour 1.2s linear infinite;stroke-dasharray:5 6}[data-action=wait] .stream,[data-action=drain] .stream{opacity:0}[data-paused=true] *{animation-play-state:paused!important}.stage-time{text-align:center;position:relative;margin-top:4px}.stage-time strong{font-size:30px;font-weight:400;font-variant-numeric:tabular-nums}.stage-time span{display:block;color:var(--muted);font-size:11px;margin-top:5px}.time-row{display:flex;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:24px 0}.time-row span{display:block;font-size:9px;letter-spacing:1.7px;color:var(--muted);margin-bottom:7px}.time-row strong{font-size:22px;font-weight:400;font-variant-numeric:tabular-nums}.time-row .next{text-align:right}.time-row .next strong{font-size:13px}.controls{display:flex;gap:10px}.controls button{flex:1;font-size:12px}.finish{width:100%;margin-top:15px}.timeline{margin-top:23px;font-size:12px}.timeline summary{cursor:pointer;color:var(--muted);padding:12px 0}.timeline ol{padding:0;list-style:none}.timeline li{padding:10px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:15px}.timeline li.active{color:var(--accent);font-weight:bold}.done{text-align:center;padding:50px 0 25px}.done-cup{font-size:70px;margin:30px}.done h1{font-size:48px}.result{padding:25px;background:var(--paper);border:1px solid var(--line);border-radius:15px;margin:30px 0;display:flex;flex-direction:column;gap:12px;font-size:12px}.result strong{font-size:40px;font-weight:400}.done button{min-width:220px}dialog{max-width:400px;width:calc(100% - 40px);border:1px solid var(--line);border-radius:18px;padding:28px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#263e3380}@keyframes pour{to{stroke-dashoffset:-26}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}@media(max-width:520px){main{padding:20px 20px 22px}.brand{font-size:30px}.brand span{font-size:8px;max-width:85px}.pill{font-size:9px;padding:7px 9px}.intro{padding:28px 0 20px}h1{font-size:39px}.setup-heading{padding:18px 18px 0}.setup-heading>span{font-size:8px}h2{font-size:21px}.setup-image{height:185px}.checklist{padding:5px 17px 20px;gap:19px 9px}.checklist strong{font-size:12px}.checklist small{font-size:10px;line-height:1.4}.options{font-size:11px}.brew-options{gap:10px}.recipe{padding:17px 13px;gap:8px}.recipe strong{font-size:19px}.recipe small{font-size:9px}.arrow{font-size:18px}.instruction h1{font-size:50px}.visual{max-width:275px}.brew-heading{padding:26px 0}.time-row{margin-top:20px}}@media(max-width:350px){main{padding:16px 14px}.options{flex-direction:column}.checklist{grid-template-columns:1fr}.brew-options{grid-template-columns:1fr}.recipe small{font-size:11px}}
.setup-image{height:auto;max-height:310px;object-fit:contain}
@media(max-width:520px){.setup-image{height:auto;max-height:none}.visual{max-width:220px;margin:0 auto 10px}.brew-heading{padding:20px 0}.instruction{min-height:110px}.time-row{padding:14px 0;margin:15px 0}.stage-time strong{font-size:27px}}

/* Guided preparation, and a view from above for circular pours. */
button:disabled{opacity:.4;cursor:default}
#prep .instruction h1{font-size:43px}
#prep .instruction{min-height:130px}
#prep-detail{max-width:550px;margin:auto;line-height:1.6}
.prep-visual{width:290px;max-width:100%;margin:12px auto}
.prep-visual svg{width:100%;display:block}
.prep-scene{display:none}
[data-action=heat] .heat-scene,[data-action=filter] .filter-scene,[data-action=rinse] .rinse-scene,[data-action=empty] .empty-scene,[data-action=grind] .grind-scene,[data-action=grounds] .grounds-scene,[data-action=tare] .tare-scene,[data-action=ready] .ready-scene{display:block}
.diagram-fill{fill:var(--paper);stroke:var(--green);stroke-width:2.5;stroke-linejoin:round}
.diagram-line{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.svg-value{text-anchor:middle;fill:var(--ink);font:24px Georgia,serif}
.svg-small{text-anchor:middle;fill:var(--muted);font:12px Arial,sans-serif}
.filter-paper{fill:#fff;stroke:#abbcaf;stroke-width:2;animation:fit-filter 2.5s ease-in-out infinite}
.fold-mark{fill:none;stroke:var(--accent);stroke-width:3}
.heat-steam{fill:none;stroke:var(--accent);stroke-width:2;animation:steam 2s ease-in-out infinite}
.paper-bed{fill:#fff;stroke:#c9cec4;stroke-width:1.5}
.coffee-bed,.top-coffee{fill:#986b50;stroke:#805439;stroke-width:1.5}
[data-action=rinse] .coffee-bed{display:none}
.orbit-path{fill:none;stroke:#8cafa0;stroke-width:2;stroke-dasharray:4 5}
.orbit-tip{transform-origin:160px 105px;animation:circle-pour 4s linear infinite}
.water-tip{fill:#7fbaa7;stroke:#fff;stroke-width:2}
.water-trail{fill:none;stroke:#7fbaa7;stroke-width:4;stroke-linecap:round}
[data-action=grounds] .orbit-tip,[data-action=grounds] .orbit-path,[data-action=grounds] .prep-circle-caption,[data-action=ready] .grounds-fall{display:none}
.grounds-fall{fill:#805439;animation:grounds 1.5s ease-in infinite}
.rinse-water{fill:#b8ccbd;transform-origin:160px 120px;animation:empty-server 3s ease-in-out infinite}
.tilted-server{transform-origin:160px 120px;animation:empty-server 3s ease-in-out infinite}
.empty-stream{fill:none;stroke:#8cafa0;stroke-width:5;stroke-dasharray:5 6;animation:pour .6s linear infinite}
.bean{fill:#986b50;stroke:#805439;stroke-width:1.5;transform-origin:160px 112px;animation:grind 1.7s ease-in-out infinite}
.grinder-handle{fill:var(--accent);animation:steam 1s ease-in-out infinite}
.zero-display{animation:zero 2s ease-in-out infinite}
.prep-note{font-size:13px;text-align:center;max-width:540px;margin:8px auto 22px;min-height:42px}
.setup-progress{display:flex;gap:7px;justify-content:center}
.setup-progress span{height:5px;width:30px;border-radius:5px;background:var(--line)}
.setup-progress .passed{background:#99af9a}
.setup-progress .current{background:var(--accent)}
.prep-controls{margin-top:12px}
.pour-top{display:none}
[data-action=pour] .pour-top{display:block}
[data-action=pour] .side-brewer{display:none}
.top-filter{fill:#fff;stroke:var(--green);stroke-width:2}
.pour-orbit{fill:none;stroke:#d7b491;stroke-width:2;stroke-dasharray:3 5}
.brew-orbit-tip{transform-origin:160px 119px;animation:circle-pour 3s linear infinite}
.brew-orbit-tip circle{fill:#a7d1c3;stroke:white;stroke-width:2}
.brew-orbit-tip path{fill:none;stroke:#a7d1c3;stroke-width:4;stroke-linecap:round}
[data-action=pour] .visual svg{max-height:230px}
.visual[data-action=pour] svg{height:230px}
@keyframes circle-pour{to{transform:rotate(360deg)}}
@keyframes steam{0%,100%{opacity:.4;transform:translateY(3px)}50%{opacity:1;transform:translateY(-4px)}}
@keyframes fit-filter{0%,100%{transform:translateY(-6px)}50%{transform:translateY(4px)}}
@keyframes empty-server{0%,100%{transform:rotate(0)}40%,70%{transform:rotate(-23deg)}}
@keyframes grounds{from{transform:translateY(-14px);opacity:0}40%{opacity:1}to{transform:translateY(42px);opacity:0}}
@keyframes grind{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
@keyframes zero{0%,100%{opacity:.45}50%{opacity:1}}
@media(max-width:520px){#prep .instruction h1{font-size:35px}#prep .instruction{min-height:130px}.prep-visual{width:235px;margin:4px auto}.prep-note{font-size:12px;min-height:52px}.prep-controls button{font-size:11px;padding:12px 9px}.visual[data-action=pour] svg{height:200px}.prep-controls{gap:7px}}
@media(prefers-reduced-motion:reduce){.prep-visual *, .visual *{animation:none!important;transition:none!important}}

.grounds-fall{display:none}
[data-action=grounds] .grounds-fall{display:block}
[data-action=rinse] .orbit-tip{animation:spiral-rinse 6s linear infinite}
@keyframes spiral-rinse{0%{transform:rotate(0) scale(.2)}50%{transform:rotate(360deg) scale(1)}100%{transform:rotate(720deg) scale(.2)}}
@media(prefers-reduced-motion:reduce){[data-action=rinse] .orbit-tip{animation:none!important}}
[data-action=swirl] .stream{opacity:0}
[data-action=swirl] .pour-top{display:block;animation:swirl-brewer 1.8s ease-in-out infinite}
[data-action=swirl] .side-brewer,[data-action=swirl] .brew-orbit-tip,[data-action=swirl] .pour-orbit{display:none}
.visual[data-action=swirl] svg{height:230px}
@keyframes swirl-brewer{0%,100%{transform:translate(0,-4px)}25%{transform:translate(4px,0)}50%{transform:translate(0,4px)}75%{transform:translate(-4px,0)}}
.cool-cup{font-size:72px;position:relative;margin:35px auto 10px;width:130px;padding-top:25px}
.cup-steam{position:absolute;top:0;left:45px;font-size:35px;color:var(--muted);animation:steam 3s ease-in-out infinite}
.cool-count strong{display:block;font-size:46px;font-weight:400;font-variant-numeric:tabular-nums}
.cool-count span{display:block;font-size:12px;color:var(--muted);margin:9px 0 25px}
@media(max-width:520px){.visual[data-action=swirl] svg{height:200px}}
@media(prefers-reduced-motion:reduce){[data-action=swirl] .pour-top,.cup-steam{animation:none!important}}

/* Clear action hierarchy, retaining the original palette and illustration. */
header{gap:12px;padding-bottom:14px}
.top-tools{display:flex;align-items:center;gap:5px;margin-left:auto}
.icon-button,.icon-toggle{width:44px;height:44px;min-height:44px;padding:10px;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--muted);border:1px solid transparent;cursor:pointer;position:relative}
.top-tools svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-toggle input{position:absolute;opacity:0;width:100%;height:100%;inset:0;cursor:pointer}
.icon-toggle:has(input:checked){color:var(--green);background:#e7ece3;border-color:#d6dfd0}
.icon-toggle:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
.sound-off{display:none}
.icon-toggle:has(input:not(:checked)) .sound-waves{display:none}
.icon-toggle:has(input:not(:checked)) .sound-off{display:block}
.app-status{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--muted);font-size:10px;min-height:25px;padding-top:8px}
.app-status .quiet-action{font-size:10px;min-height:30px;padding:4px 0}
.intro{padding:22px 0 12px}
.intro .eyebrow{margin-bottom:10px}
.intro p:last-child{max-width:430px;margin:9px 0 0}
.home-illustration{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.home-illustration .setup-image{height:clamp(125px,24svh,220px);max-height:220px;object-fit:contain}
.choose{font-size:12px;margin:16px 0 10px}
.brew-options{gap:10px}
.recipe{border-radius:20px;flex-direction:column;align-items:flex-start;gap:8px;padding:18px;min-height:126px}
.recipe-icon{width:44px;height:32px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.recipe strong{font-size:23px}
.recipe small{font-size:11px;margin-top:5px}
.recipe.secondary{background:var(--paper)}
#availability{margin:10px 0;font-size:11px}
.action-button,.controls .action-button{position:relative;width:100%;min-height:64px;border-radius:22px;font-size:23px;font-weight:600;line-height:1.2;padding:18px 64px 18px 24px;text-align:left;box-shadow:0 4px 0 #243c30;transition:transform .12s,box-shadow .12s}
.action-button:active{transform:translateY(2px);box-shadow:0 2px 0 #243c30}
.quiet-action,.controls .quiet-action{color:var(--muted);background:transparent;border:0;border-radius:8px;box-shadow:none;font-size:12px;min-height:44px;padding:10px 12px}
.prep-controls{justify-content:space-between;gap:14px;margin-top:12px}
.prep-controls button{flex:0 1 auto}
#prep-next{position:sticky;bottom:12px;z-index:2}
#brew .controls{display:block}
#brew .controls .quiet-action{width:auto;display:block;margin:auto}
.done .action-button{min-width:0;max-width:400px}
footer{margin-top:22px}
@media(max-width:520px){
 main{padding:16px 18px 20px}
 .brand{gap:10px}.brand span{font-size:7px;max-width:75px}
 .intro h1{font-size:36px;line-height:1.08}
 .intro p:last-child{font-size:12px;line-height:1.5;max-width:320px}
 .intro{padding:17px 0 12px}
 .home-illustration .setup-image{height:clamp(110px,23svh,185px);max-height:185px}
 .recipe{padding:14px;min-height:118px}.recipe strong{font-size:21px}.recipe small{font-size:10px}
 .action-button,.controls .action-button{font-size:22px}
 .brew-heading{padding:17px 0}
 #prep .instruction{min-height:112px}#prep .instruction h1{font-size:32px}
 .prep-visual{width:205px}
 .prep-note{min-height:0;margin:6px auto 17px;line-height:1.5}
 .prep-controls button{font-size:12px;padding:10px 8px}
 .done{padding-top:30px}
}
@media(max-width:350px){.brew-options{grid-template-columns:1fr 1fr}.brand span{display:none}.recipe{padding:12px 10px}.recipe strong{font-size:20px}.recipe small{font-size:9px}}
@media(max-height:700px) and (max-width:520px){
 .home-illustration .setup-image{height:clamp(90px,19svh,130px)}
 .intro{padding:10px 0}.intro h1{font-size:32px}.intro p:last-child{font-size:11px}
 .recipe{min-height:105px;padding:12px}.choose{margin-top:12px}
 #prep .instruction{min-height:100px}.prep-visual{width:160px}.prep-note{font-size:11px;margin-bottom:10px}
}

.recipe small{font-size:11px;line-height:1.4}
.recipe small span{display:block;margin-top:1px}
@media(max-width:350px){.recipe strong{font-size:18px;white-space:nowrap}.recipe small{font-size:10px}}



/* The artwork blends into the page; phone actions stay within thumb reach. */
.home-illustration{border:0;border-radius:0;background:transparent;overflow:visible}
.home-illustration .setup-image{height:auto;max-height:none;object-fit:cover;mix-blend-mode:multiply;mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 85%,transparent)}
@media(max-width:520px){
 main{padding-bottom:190px}
 .home-illustration{margin-inline:-18px}
 .home-illustration .setup-image{width:100%;height:auto;max-height:none}
 .home-dock{position:fixed;bottom:0;left:0;right:0;z-index:5;padding:25px 18px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,var(--bg) 22px)}
 .home-dock .choose{margin:0 0 8px}
 .home-dock .recipe{min-height:108px}
 .home-dock #availability{margin:8px 0 0}
 #prep-next,#finish,#again{position:fixed;left:18px;right:18px;width:calc(100% - 36px);z-index:5;bottom:calc(18px + env(safe-area-inset-bottom))}
 #prep-next{bottom:calc(70px + env(safe-area-inset-bottom))}
 .prep-controls{position:fixed;bottom:calc(10px + env(safe-area-inset-bottom));left:18px;right:18px;z-index:5;margin:0;background:var(--bg)}
 #brew .controls{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom));left:18px;right:18px;z-index:5}
 #brew:has(#finish:not([hidden])) .controls{bottom:calc(92px + env(safe-area-inset-bottom))}
 #prep:after,#brew:after,#done:after{content:'';position:fixed;bottom:0;left:0;right:0;height:110px;z-index:4;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--bg) 28px)}
 #prep:after{height:155px}
 #brew:has(#finish:not([hidden])):after{height:155px}
}
/* Each main view budgets the available viewport height instead of growing with its artwork. */
main{height:100svh;min-height:560px;display:flex;flex-direction:column;gap:0;padding:18px 24px 12px}
header{flex:none;padding-bottom:8px}
.app-status{flex:none;min-height:23px;padding-top:5px}
main>section:not([hidden]){flex:1;min-height:0;display:flex;flex-direction:column}
footer{flex:none;margin-top:10px;padding-top:8px;font-size:9px}
.intro{flex:none;padding:12px 0 8px}
.intro h1{font-size:clamp(28px,5svh,44px);margin-bottom:8px}
.intro .eyebrow{margin-bottom:8px}
.intro p:last-child{font-size:12px;margin-top:6px}
.home-illustration{flex:1;min-height:80px;overflow:hidden;margin-inline:0}
.home-illustration .setup-image{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center}
.home-dock{position:static;flex:none;padding:0;background:none}
.home-dock .choose{margin:8px 0}
.home-dock .recipe{min-height:96px;padding:12px;flex-direction:row;align-items:center;gap:12px}
.home-dock .recipe strong{font-size:21px}
.home-dock #availability{margin:6px 0 0;font-size:10px}
.brew-heading{flex:none;padding:10px 0}
.instruction,#prep .instruction{flex:none;min-height:0}
.instruction h1,#prep .instruction h1,.done h1{font-size:clamp(28px,4.5svh,42px);margin-bottom:6px}
.instruction .eyebrow{margin-bottom:7px}
#prep-detail,.instruction p:last-child{font-size:12px;line-height:1.4}
.prep-visual{flex:1;min-height:40px;max-height:260px;width:100%;margin:6px auto}
.prep-visual svg{display:block;width:100%;height:100%}
.prep-note{flex:none;min-height:0;font-size:12px;line-height:1.4;margin:4px auto 8px}
#prep-next,#finish,#again{position:relative;inset:auto;width:100%;flex:none;margin:0}
.prep-controls,#brew .controls,#brew:has(#finish:not([hidden])) .controls{position:static;flex:none;margin:6px 0 0;background:none}
.prep-controls{justify-content:space-between}
#prep-status,#brew-status{font-size:10px;line-height:1.3;margin:6px 0 0}
#prep:after,#brew:after,#done:after{display:none}
.visual{display:flex;flex-direction:column;flex:1;min-height:55px;width:100%;max-width:none;max-height:310px;margin:5px auto}
.visual svg,.visual[data-action=pour] svg,.visual[data-action=swirl] svg{flex:1;min-height:0;width:100%;height:100%}
.stage-time{flex:none}.stage-time strong{font-size:25px}.stage-time span{margin-top:2px}
.time-row{flex:none;padding:8px 0;margin:6px 0}.time-row span{margin-bottom:3px}
#brew .controls{margin:0}.timeline{flex:none;margin-top:3px}.timeline summary{padding:7px 0}
#brew:has(.timeline[open]){overflow-y:auto}
#brew .quiet-action{min-height:36px}
.done{padding:15px 0 0;justify-content:center;gap:8px}
.done p{font-size:13px;margin:4px 0}
.done-cup{font-size:60px;margin:8px}
.result{padding:15px;margin:8px 0;gap:6px}.result strong{font-size:32px}
.cool-cup{margin:12px auto 8px;padding-top:20px;font-size:60px}
.cool-count strong{font-size:40px}.cool-count span{margin:5px 0 12px}
@media(min-width:700px){
 #home:not([hidden]){display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:16px 24px}
 #home .intro{align-self:center}.home-illustration{height:100%;min-height:0}.home-dock{grid-column:1/-1}
 #install:not([hidden]){grid-column:1/-1}
}
@media(max-width:520px){
 main{padding:10px 18px calc(10px + env(safe-area-inset-bottom));min-height:480px}
 header{padding-bottom:6px}.brand{font-size:28px}
 .home-illustration{margin-inline:-18px}
 .home-dock .recipe{min-height:94px;gap:8px;padding:10px;flex-direction:column;align-items:flex-start}
 .home-dock .recipe-icon{height:25px;width:38px}.home-dock .recipe strong{font-size:19px}
 .action-button,.controls .action-button{min-height:58px;padding-top:14px;padding-bottom:14px;font-size:21px}
 .intro{padding:8px 0 6px}.intro h1{font-size:clamp(28px,4.8svh,36px)}
 footer{display:none}
 .prep-note{font-size:11px;line-height:1.35}
 .prep-controls button{min-height:36px;padding:6px 8px}
 #prep-status{margin-top:3px;font-size:9px}
 .brew-heading p{font-size:11px}
 .home-dock .choose{margin:6px 0}.home-dock #availability{margin-top:5px}
}
@media(max-height:560px) and (min-width:560px){
 main{min-height:360px;padding-top:8px;padding-bottom:8px}
 footer,.app-status{display:none}
 #prep:not([hidden]),#brew:not([hidden]){display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:4px 18px}
 .brew-heading{grid-column:1/-1;padding:6px 0}.instruction{grid-column:1}.prep-visual,.visual{grid-column:2;grid-row:2/4;margin:0;max-height:none}
 .prep-note,.time-row{grid-column:1;align-self:center}
 #prep-next,#finish,#brew .controls{grid-column:1/-1}.prep-controls,#prep-status,#brew-status,.timeline{grid-column:1/-1;margin:0}
 #prep-status,#brew-status{display:none}.instruction h1,#prep .instruction h1{font-size:30px}
 .action-button,.controls .action-button{min-height:52px;padding-top:12px;padding-bottom:12px}
 .timeline summary{padding:3px 0}
}
@media(min-width:700px) and (min-aspect-ratio:1/1){.home-illustration .setup-image{object-fit:contain}}
@media(min-width:700px) and (max-aspect-ratio:1/1){#home:not([hidden]){display:flex;gap:0}.home-illustration{height:auto}.home-dock{width:100%}}
@media(max-height:560px) and (min-width:560px){
 #cooling:not([hidden]),#done:not([hidden]){display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto minmax(0,1fr) auto;gap:5px 18px;padding:8px 0}
 #cooling>.eyebrow,#cool-title,#cooling>p{grid-column:1}
 #cooling>.cool-cup{grid-column:2;grid-row:1/4;align-self:center}
 #cooling>.cool-count{grid-column:2;grid-row:4}
 #done>.eyebrow{grid-column:1;grid-row:1}#done>.done-cup{grid-column:2;grid-row:1/3}
 #done>h1{grid-column:1;grid-row:2}#done>p{grid-column:1;grid-row:3;align-self:center}
 #done>.result{grid-column:2;grid-row:3;padding:8px;margin:0}#done>#again{grid-column:1/-1;grid-row:4;max-width:none}
 .cool-count span{margin-bottom:0}
}
@media(max-height:560px) and (max-width:559px){
 .done{gap:4px;padding-top:5px}.done p{font-size:12px}
 .done-cup{font-size:45px;margin:2px}.done h1{font-size:28px}
 .result{padding:10px;margin:4px 0;gap:4px}.result strong{font-size:30px}
 .cool-cup{font-size:50px;margin:6px auto;padding-top:18px}.cool-count strong{font-size:34px}
}
@media(max-height:560px) and (min-width:560px) and (max-width:699px){
 #home:not([hidden]){display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:8px 18px}
 #home .intro{align-self:center}.home-illustration{height:100%;min-height:0}.home-dock{grid-column:1/-1}
 .home-illustration .setup-image{object-fit:contain}
}
@media(max-height:560px) and (max-width:559px){
 #brew-status{display:none}.timeline summary{padding:4px 0}
 .time-row{padding:5px 0}.visual{min-height:40px}
 .stage-time strong{font-size:22px}.stage-time span{font-size:10px}
}
@media(min-width:700px) and (min-aspect-ratio:1/1), (max-height:560px) and (min-width:560px){
 .home-illustration{display:flex;align-items:center}
 .home-illustration .setup-image{height:auto;max-height:100%;object-fit:contain}
}
/* Progress and the next action are separate rows in the responsive flow. */
.setup-progress{flex:none;min-height:5px;margin:0 0 14px}
#prep-next{position:relative;inset:auto;margin:0;z-index:auto}
@media(max-height:560px) and (min-width:560px){.setup-progress{grid-column:1/-1;margin-bottom:10px}}
.action-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:1px solid #ffffff30;border-radius:50%;background:#ffffff1c;display:grid;place-items:center;pointer-events:none}
.action-icon svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.action-pause,#pause .action-arrow,.quiet-action .action-icon{display:none}
#pause .action-pause{display:block}
#visual[data-paused=true]~.controls #pause .action-arrow{display:block}
#visual[data-paused=true]~.controls #pause .action-pause{display:none}
/* Reserve a separate bottom area: the main tap target never moves between steps. */
body:has(.action-dock:not([hidden])) main{height:var(--app-height,100dvh);min-height:0}
body[data-screen=prep] footer,body[data-screen=brew] footer,body[data-screen=done] footer{display:none}
#prep:not([hidden]),#brew:not([hidden]),#done:not([hidden]){padding-bottom:calc(132px + env(safe-area-inset-bottom));overflow-y:auto}
.action-dock{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(732px,calc(100% - 36px));height:calc(128px + env(safe-area-inset-bottom));padding:12px 0 calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-rows:64px 36px;gap:4px;z-index:6;background:var(--bg)}
.action-dock:before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.action-dock #prep-next,.action-dock #finish,.action-dock #again,.action-dock #pause.action-button{position:relative;inset:auto;height:64px;min-height:64px;width:100%;max-width:none;margin:0;grid-row:1;grid-column:1}
.action-dock .prep-controls{grid-row:2;grid-column:1;margin:0;align-items:center}
#brew .action-dock>.controls{display:contents}
.action-dock #pause.quiet-action{grid-row:2;grid-column:1;justify-self:center;height:36px;min-height:36px;margin:0;padding:6px 12px}
#prep-status{margin:6px 0 0}
@media(max-height:560px) and (min-width:560px){
 #prep:not([hidden]),#brew:not([hidden]){grid-template-rows:auto auto minmax(0,1fr) auto}
 .action-dock{grid-column:1/-1}
 #done:not([hidden]){grid-template-rows:auto auto minmax(0,1fr)}
}
#prep:not([hidden]),#brew:not([hidden]),#done:not([hidden]){padding-bottom:0;margin-bottom:calc(132px + env(safe-area-inset-bottom))}
#prep-status{display:none}
#brew:has(#visual[data-paused=true]) #finish{visibility:hidden}
@media(max-height:560px) and (max-width:559px){.prep-visual{min-height:20px}.brew-heading{padding:6px 0}}
/* Fit the complete setup inside the available PWA viewport, including device insets. */
main,body:has(.action-dock:not([hidden])) main{height:var(--app-height,100dvh);min-height:0;padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.home-illustration{min-height:0;position:relative;overflow:hidden}
.home-illustration .setup-image{position:absolute;inset:0;width:100%;height:100%;max-height:100%;object-fit:contain}
#home:not([hidden]){display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto auto;gap:0;min-height:0}
#home .intro{min-width:0}.home-dock{min-width:0;width:100%}
@media(max-width:520px){
 main,body:has(.action-dock:not([hidden])) main{padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}
@media(min-width:700px) and (min-aspect-ratio:1/1), (max-height:560px) and (min-width:560px){
 #home:not([hidden]){grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto auto;gap:8px 24px}
 #home .intro{align-self:center}.home-illustration{height:100%;min-height:0}
 .home-dock,#install:not([hidden]){grid-column:1/-1}
}
@media(max-height:560px){
 main,body:has(.action-dock:not([hidden])) main{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom))}
}

/* Keep the dock inside the visual viewport when browser chrome returns after refresh. */
.action-dock{bottom:auto;top:calc(var(--app-height,100dvh) - 128px - env(safe-area-inset-bottom))}
/* This strip has its own horizontal scroll; its fixed height comes from the artwork's space. */
.journey{flex:none;height:62px;min-width:0;margin:4px 0 0;overflow:hidden}
.journey-strip{display:flex;align-items:center;gap:4px;position:relative;list-style:none;margin:0;padding:0 0 4px;height:55px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x;}
.journey-strip::-webkit-scrollbar{display:none}
.journey-step{flex:none;width:30px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#89928a;position:relative}
.journey-step svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.journey-step span{display:none;font-size:10px;line-height:12px;white-space:nowrap}
.journey-step.nearby{width:76px}.journey-step.nearby span{display:block}
.journey-step.current{color:var(--ink);font-weight:700;background:#e5ebdf;border-radius:10px}
.journey-step.passed{color:#9aa59a}
.journey-meter{height:3px;background:var(--line);border-radius:4px;overflow:hidden;margin:0 2px}
.journey-fill{height:100%;width:0;background:var(--accent);transition:width .25s ease}
#prep-count,#step-count,#prep-progress{display:none}
@media(max-height:560px){.journey{height:49px;margin-top:2px}.journey-strip{height:43px}.journey-step{height:39px}.journey-step svg{width:18px;height:18px}.journey-step span{font-size:9px}.brew-heading{padding:5px 0}}
@media(prefers-reduced-motion:reduce){.journey-fill{transition:none}}
@media(max-height:560px) and (max-width:559px){
 #prep .instruction>.eyebrow{display:none}
 #prep .instruction h1{font-size:26px}
}
@media(max-height:560px) and (min-width:560px){
 #prep .instruction>.eyebrow{display:none}
 #prep .instruction h1{font-size:26px}
}
@media(max-height:520px) and (max-width:559px){
 #brew .instruction h1{font-size:26px}
 #brew .instruction .eyebrow{margin-bottom:4px}
 #brew .instruction p:last-child{font-size:11px}
 #brew .brew-heading{padding:3px 0}#brew .brew-heading .eyebrow{margin-bottom:3px}
 #brew .visual{min-height:0;margin:2px auto}
 #brew .stage-time strong{font-size:20px}#brew .stage-time span{font-size:9px}
 #brew .time-row{margin:3px 0;padding:3px 0}#brew .time-row strong{font-size:19px}#brew .time-row .next strong{font-size:11px}
 #brew .timeline summary{padding:2px 0;font-size:10px}
}
@media(max-height:560px) and (min-width:560px){#brew .timeline{margin-top:0}#brew .timeline summary{padding:1px 0}}
@media(max-height:560px) and (min-width:560px){
 .brew-heading .eyebrow{margin-bottom:3px;font-size:9px}.brew-heading p{font-size:10px}
 #prep .instruction h1{font-size:24px}#brew .instruction h1{font-size:26px}
}