:root{font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:#57445e;font-synthesis:none;--line:#85648720}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:#c2bfdc;background-image:radial-gradient(ellipse at 50% 42%,#f8adcb 0,transparent 57%),linear-gradient(160deg,#b9b9e5,#f6c5cf 60%,#ffe4a0);background-attachment:fixed}button,input{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{opacity:.34;cursor:not-allowed}button:focus-visible,input:focus-visible{outline:2px solid #81568b;outline-offset:3px}button[hidden],[hidden]{display:none!important}.grain{position:fixed;inset:0;opacity:.055;pointer-events:none;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.app{width:100%;max-width:480px;height:100svh;height:100dvh;min-height:500px;margin:auto;display:flex;flex-direction:column;position:relative;padding-top:env(safe-area-inset-top)}.topbar{height:58px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #ffffff38}.topbar h1{font-size:16px;font-weight:500;letter-spacing:2px;margin:0}.topbar h1 span{margin-left:8px;font-size:22px;vertical-align:-2px;color:#8f638e}#volume{font-size:12px;font-weight:500;color:#78617d}#volume small{font-size:10px;font-weight:400}.icon-button{width:36px;height:36px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid #ffffff70;border-radius:50%;background:#fff4;font-size:20px}.icon-button:hover{background:#fffa}#sound{font-size:19px}.icon-button[aria-pressed=true]{background:#765c82;color:#fff}
.stage{flex:1;min-height:0;position:relative;isolation:isolate}#scene{position:absolute;inset:0;touch-action:none}#scene canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}#scene canvas:active{cursor:grabbing}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:70px;font-size:12px;line-height:1.8}.ingredient-rail{position:absolute;top:50%;transform:translateY(-50%);width:62px;display:flex;flex-direction:column;gap:15px;z-index:2}.left-rail{left:12px}.right-rail{right:12px}.ingredient-grid{display:grid;gap:9px}.ingredient-button{width:62px;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:3px 0;border:1px solid #ffffffa3;border-radius:18px;background:linear-gradient(145deg,#ffffff99,#fff5);box-shadow:0 5px 13px #8050710a;font-size:10px;transition:transform .15s,background .15s}.ingredient-button:hover{background:#fffd;transform:scale(1.06)}.ingredient-button:active{transform:scale(.91)}.ingredient-icon{width:37px;height:37px;display:block}.ingredient-icon svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 2px #6744561c)}.ingredient-button.selected{border-color:#a777a4;background:#fffb;box-shadow:0 0 0 2px #bc83ac33}.toast{position:absolute;bottom:12px;left:50%;max-width:calc(100% - 150px);width:max-content;transform:translateX(-50%);padding:8px 12px;font-size:11px;border-radius:20px;background:#fff9edec;box-shadow:0 5px 15px #68445c13;opacity:0;pointer-events:none;transition:opacity .2s;z-index:3;text-align:center;line-height:1.5}.toast.show{opacity:1}
.dock{position:relative;flex-shrink:0;margin:0 12px 12px;padding:12px 16px calc(14px + env(safe-area-inset-bottom));border:1px solid #fffc;border-radius:26px;background:linear-gradient(140deg,#fff9,#fff5);box-shadow:0 12px 30px #8c587c0e}.dock-top{display:flex;align-items:center;gap:8px;justify-content:space-between}#drink-name{width:110px;min-width:0;flex:1;font-size:13px;background:none;border:0;padding:8px 0;border-radius:0;color:#755d7c;text-overflow:ellipsis}.tools{display:flex;gap:5px}.tools .icon-button{width:32px;height:32px;font-size:18px}.sugar-row{display:flex;align-items:center;gap:12px;margin:12px 0 16px;font-size:11px}.sugar-row label{flex-shrink:0}.sugar-row strong{font-size:11px;font-weight:400;width:40px;text-align:right;flex-shrink:0}input[type=range]{width:100%;min-width:0;height:4px;margin:0;accent-color:#a16b97;cursor:pointer}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.primary-button,.secondary-button{height:46px;border-radius:16px;font-size:14px;border:0;font-weight:500;letter-spacing:2px}.primary-button{background:#795681;color:#fffaf0;box-shadow:0 4px 10px #77547825}.primary-button span{font-size:20px;vertical-align:-2px;margin-right:5px}.secondary-button{background:#fff9;color:#75577d;border:1px solid #bb8ca359}.secondary-button span{margin-left:12px;font-size:18px}.volume-track{position:absolute;left:20px;right:20px;bottom:5px;height:2px;background:#90658e0c;border-radius:4px;overflow:hidden}.volume-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#ad82d6,#f9708f,#ffba50);transition:width .3s}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(min-width:600px){body{display:flex;align-items:center;justify-content:center;min-height:100vh}.app{height:min(900px,calc(100dvh - 32px));min-height:500px;border:1px solid #fff8;border-radius:34px;overflow:hidden;box-shadow:0 30px 90px #76608c26;background:linear-gradient(155deg,#babce53b,#ffc2d047,#ffe99857)}.topbar{height:62px}.dock{margin-bottom:16px}}
@media(max-height:700px){.ingredient-rail{width:52px;gap:9px}.ingredient-grid{gap:5px}.ingredient-button{width:52px;height:49px;border-radius:14px;font-size:9px}.ingredient-icon{width:29px;height:29px}.left-rail{left:8px}.right-rail{right:8px}.topbar{height:48px}.dock{padding:8px 12px calc(10px + env(safe-area-inset-bottom));margin-bottom:8px}.sugar-row{margin:9px 0 11px}.primary-button,.secondary-button{height:42px}.tools .icon-button{width:29px;height:29px}.tools{gap:3px}}
@media(max-width:350px){.left-rail{left:5px}.right-rail{right:5px}.topbar{padding:0 12px}.dock{margin-left:8px;margin-right:8px}.ingredient-rail{width:52px}.ingredient-button{width:52px}.tools{gap:3px}.tools .icon-button{width:29px;height:29px}}
@media(orientation:landscape) and (max-height:500px){.app{max-width:740px;min-height:360px}.stage{min-height:200px}.ingredient-rail{top:50%;width:130px;gap:7px}.ingredient-grid{grid-template-columns:repeat(3,1fr);gap:3px}.ingredient-button{width:42px;height:49px;font-size:8px}.ingredient-icon{width:26px;height:26px}.dock{padding:7px 12px}.dock-top{display:none}.sugar-row{margin:0 0 7px}.actions button{height:34px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.ingredient-button{position:relative}.ingredient-button[data-count]:not([data-count=""]):after{content:attr(data-count);position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;border:1px solid #fff;border-radius:20px;background:#a6769e;color:#fff;font-size:9px}