*{box-sizing:border-box}html,body{margin:0;background:#ece0cc;color:#433e36;font-family:'Yu Gothic',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;font-weight:bold;cursor:pointer;border:2px solid #95a693;border-radius:5px;color:#435844;background:#fff9eb;padding:9px}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #f6a240;outline-offset:3px}.shell{max-width:540px;margin:auto;background:#fff9ed;box-shadow:0 0 70px #564b3b22}header{height:39px;background:#34443c;color:#fff3d9;display:flex;justify-content:space-between;align-items:center;padding:6px 12px;font-size:10px}header span{font-size:7px;letter-spacing:1px}header button{font-size:9px;padding:3px 6px}.heading{text-align:center;padding:12px 10px 10px;background:#f5e6c9;border-bottom:3px solid #b7a486}.heading p{font-size:10px;letter-spacing:1px;margin:0 0 6px;color:#8d7e65}h1{font-size:25px;margin:0 0 10px;letter-spacing:1px}h1 span{color:#468574}.instruction{background:#fffaf0;border:1px solid #cabb9b;border-radius:4px;padding:8px 4px;font-size:11px;min-height:34px}#machine{position:relative;isolation:isolate;touch-action:pan-y;user-select:none}#machine>img{display:block;width:100%;height:auto;image-rendering:pixelated;pointer-events:none}#liquid,#buttons{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.drink-button{position:absolute;width:14%;height:9.4%;transform:translate(-50%,-50%);border-radius:50%;border:3px solid transparent;background:transparent;pointer-events:auto;touch-action:none;padding:0;box-shadow:none}.drink-button:hover{background:#fff1}.drink-button.pouring{border-color:#fff4b0;background:#fff2;box-shadow:0 0 0 4px #ffc95a88,0 0 24px #fff5ba}.drink-button:focus-visible{outline:4px solid #ffe28b;outline-offset:2px}.drink-button:disabled{cursor:default}.drink-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#pour-label{position:absolute;left:57%;top:73%;max-width:38%;background:#fff8e6ec;color:#405848;border:2px solid #809b86;font-size:10px;padding:5px;pointer-events:none;display:none}#pour-label.active{display:block}.mix-panel{padding:16px 15px 10px;border-top:3px solid #83927d}.mix-top{display:flex;align-items:center;justify-content:space-between}h2{font-size:17px;margin:0}.mix-top strong{font-size:13px;color:#63826b}.volume-track{height:7px;background:#e4ddcd;border-radius:4px;margin:10px 0;overflow:hidden}.volume-track i{display:block;height:100%;width:0;background:#66a187}.mix-detail{display:flex;align-items:center;gap:12px;min-height:140px}#glass-preview{flex:0 0 105px;background:#e7e5d5;border-radius:8px}#preview{display:block;width:105px;height:128px;image-rendering:pixelated}.recipe-wrap{flex:1}#empty{font-size:11px;line-height:2;color:#8a8978}ul{list-style:none;margin:0;padding:0}#recipe li,#result-recipe li{display:flex;align-items:center;gap:6px;font-size:11px;padding:5px 0;border-bottom:1px dashed #d6d0be}li i{display:inline-block;width:9px;height:9px;border:1px solid #b9b49f;flex-shrink:0}li b{margin-left:auto;white-space:nowrap}li span{min-width:48px;text-align:right;font-variant-numeric:tabular-nums}.actions{display:flex;gap:6px;margin-top:14px}.actions button{flex:1;font-size:10px;padding:10px 3px}.primary{background:#4e8e74;color:#fff8e5;border-color:#32664f}.primary:disabled{opacity:.4;cursor:default}#ice[aria-pressed=true]{background:#c9edf1;border-color:#6aa5aa}.help{font-size:9px;line-height:1.8;text-align:center;color:#8c8e7d;margin:12px 0 0}footer{text-align:center;color:#8e8978;font-size:9px;padding:13px;border-top:1px solid #ded6c4}dialog{width:min(430px,92vw);max-height:92dvh;overflow:auto;padding:25px 22px;background:#fff9e9;color:#465143;border:3px solid #70947d;border-radius:9px;text-align:center;box-shadow:6px 7px #304c4455}dialog::backdrop{background:#1c332ba3;backdrop-filter:blur(3px)}#close{position:absolute;top:7px;right:8px;border:0;background:none;font-size:22px;padding:0 5px}dialog small{font-size:9px;letter-spacing:2px;color:#73927d}dialog h2{font-size:19px;margin:12px 0 0}#result-glass{width:110px;height:135px;margin:8px 0;background:#e6e5d5;border-radius:8px;image-rendering:pixelated}.title-label{font-size:10px;margin:0;color:#87917c}#title{font-size:21px;color:#3d8168;line-height:1.5;margin:7px 0}#result-volume{font-size:12px}#result-recipe{padding:6px 0;margin-bottom:10px}dialog>button.primary{display:block;width:100%}#share{font-size:11px;margin-top:10px;width:100%;background:transparent}.note{font-size:9px;color:#96927f}@media(max-width:370px){header span{display:none}h1{font-size:22px}.mix-panel{padding-inline:10px}.actions button{font-size:9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Keep iOS long presses on dispenser controls from selecting text or images. */
#machine,#machine *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#machine img{-webkit-user-drag:none}.drink-button span{pointer-events:none}

.friend-section{border:2px solid #c3cdb1;border-radius:8px;margin:15px 0;padding:10px;background:#f1f0dc}.friend-stage{background:linear-gradient(#dde9dc 80%,#c5d5bb 80%);border-radius:5px;overflow:hidden}#friend{display:block;width:180px;height:144px;margin:0 auto;image-rendering:pixelated}.friend-stage p{font-size:11px;line-height:1.7;min-height:20px;margin:0;padding:0 6px 8px;color:#4a6c56}#feed{margin-top:9px;font-size:13px;width:100%;padding:11px 4px}#feed:disabled{opacity:.7;cursor:default}#friend-reaction{padding:12px 5px 2px}#reaction-label{color:#54836a;font-size:11px}#reaction-text{font-weight:bold;font-size:15px;line-height:1.9;margin:7px 0}#reaction-aside{font-size:9px;letter-spacing:0;color:#8a9078}.sipping canvas{animation:friend-sip .35s steps(2) infinite}@keyframes friend-sip{50%{transform:translateY(3px) rotate(2deg)}}