.brew-main{padding-top:0}.brew-page .drop-header{padding-block:10px}.brew-main h1{margin:0 0 4px;font-size:30px}.brew-hud{grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;max-width:360px;margin:12px auto 8px;display:grid}.brew-hud>div{flex-direction:column;align-items:center;gap:2px;display:flex}.brew-hud span{color:#806522;font-size:9px;font-weight:700}.brew-hud strong{color:#294636;font-variant-numeric:tabular-nums;font-size:26px;font-weight:700;line-height:1.1}.brew-next{justify-content:center;width:64px;height:58px}.brew-next i{border-radius:50%;max-width:40px;max-height:40px;display:block;box-shadow:inset -3px -3px #0000001c}.brew-cup{aspect-ratio:360/480;background:linear-gradient(#fffdf8,#f6eedb);border:3px solid #dfcfaa;border-top-color:#0000;border-radius:6px 6px 38px 38px;width:min(100%,360px,max(240px,75dvh - 153.75px));margin:0 auto;position:relative;overflow:hidden;box-shadow:inset 0 -10px 24px #8f691012,0 6px 20px #8f691014}.brew-canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair;outline-offset:-4px;width:100%;height:100%;display:block}.brew-canvas:focus-visible{outline:3px solid #3977b8}.brew-over{-webkit-backdrop-filter:blur(3px);background:#f8f5ecdd;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:24px;animation:.3s ease-out brew-fade;display:flex;position:absolute;inset:0}.brew-over>strong{color:#294636;font-variant-numeric:tabular-nums;font-size:68px;font-weight:700;line-height:1}.brew-over>span{color:#64665b;margin-bottom:10px;font-size:14px}.brew-over .drop-primary,.brew-over .drop-share{max-width:260px}@keyframes brew-fade{0%{opacity:0}}.brew-ladder{justify-content:center;align-items:center;gap:6px;margin:16px auto 4px;padding:0;list-style:none;display:flex}.brew-ladder li{opacity:.25;display:flex}.brew-ladder li.is-found{opacity:1}.brew-ladder i{border:3px solid #0000;border-radius:50%;width:14px;height:14px;display:block}.brew-ladder li:nth-child(n+6) i{width:17px;height:17px}.brew-ladder li:last-child i{width:20px;height:20px}.brew-ladder-caption{color:#64665b;margin-bottom:18px;font-size:12px}.brew-ladder-caption b{color:#8f6910}@media (max-width:360px){.brew-hud strong{font-size:22px}.brew-ladder{gap:4px}}@media (prefers-reduced-motion:reduce){.brew-over{animation:none}}