:root{--bg-travertine: #ece5d8;--font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-display: "Sarina", cursive;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}html,body{width:100%;height:100%;overflow:hidden;background-color:var(--bg-travertine);font-family:var(--font-sans);color:#fff;-webkit-font-smoothing:antialiased}.loading-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,#241e19,#14110e);transition:opacity .45s cubic-bezier(.2,.8,.2,1),visibility .45s}.loading-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.loading-card{width:min(340px,calc(100vw - 40px));padding:28px 28px 24px;border-radius:28px;display:flex;flex-direction:column;align-items:center;gap:16px;background:#1c1814b8}.loading-logo{font-family:var(--font-display);font-weight:400;font-size:46px;line-height:1.2;color:#ede2d3;text-shadow:0 2px 18px rgba(0,0,0,.28)}.loading-bar-track{width:100%;height:10px;border-radius:999px;background:#ffffff1f;overflow:hidden;box-shadow:inset 0 1px 2px #00000047}.loading-bar-fill{width:0%;height:100%;border-radius:999px;background:#ede2d3eb;transition:width .22s cubic-bezier(.2,.8,.2,1)}.loading-label{font-family:var(--font-sans);font-size:14px;font-weight:500;color:#ffffffad;font-variant-numeric:tabular-nums}#canvas-container{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;z-index:1;cursor:crosshair}.vignette{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,#0e0a0699,#0e0a064d 8%,#0e0a0617 17%,#0e0a0600 27%)}.ui{transition:opacity .35s ease}body.hide-ui .ui{opacity:0!important;pointer-events:none!important}.title{position:fixed;left:3vw;top:max(20px,2.2vw);z-index:10;margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(36px,4.4vw,64px);line-height:1.25;color:#ede2d3;text-shadow:0 2px 18px rgba(0,0,0,.25);pointer-events:none}.smoke{background:#14110e80;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(255,255,255,.09);box-shadow:0 10px 30px #00000038,inset 0 1px #ffffff0f}.menu-btn{position:fixed;right:max(12px,2.6vw);top:max(22px,2.8vw);z-index:20;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#ffffffeb}.menu-btn:hover{background:#1e1a169e}.menu-btn:focus-visible,.col:focus-visible,.menu button:focus-visible,.menu input[type=range]:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:2px}.menu{position:fixed;right:max(12px,2.6vw);top:calc(max(22px,2.8vw) + 46px);z-index:20;width:280px;max-width:calc(100vw - 24px);max-height:calc(100vh - max(22px,2.8vw) - 58px);overflow-y:auto;border-radius:18px;padding:12px;font-size:13px;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .2s ease,transform .2s ease;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}.menu.open{opacity:1;transform:none;pointer-events:auto}.sec{padding:8px 4px 10px;border-bottom:1px solid rgba(255,255,255,.07)}.sec:last-child{border-bottom:0}.sec h4{margin:0 0 7px;font-size:12px;font-weight:500;color:#ffffff80}.seg{display:flex;gap:2px;background:#ffffff0f;border-radius:10px;padding:2px}.seg button{flex:1;border:0;background:transparent;color:#ffffffb3;font:inherit;font-size:12.5px;padding:6px 4px;border-radius:8px;cursor:pointer}.seg button.on{background:#ffffff29;color:#fff}.row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}.row label{color:#ffffffd9}.row .val{font-variant-numeric:tabular-nums;color:#ffffff8c;font-size:12px}input[type=range]{width:100%;accent-color:#f3ead8;margin:4px 0 0;cursor:pointer}.tog{width:34px;height:20px;border-radius:10px;background:#ffffff2e;position:relative;border:0;cursor:pointer;flex:none}.tog:disabled{opacity:.45;cursor:default}.tog:after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s ease}.tog.on{background:#f3ead8bf}.tog.on:after{transform:translate(14px)}.act{display:flex;width:100%;justify-content:space-between;align-items:center;border:0;background:transparent;color:#ffffffe6;font:inherit;padding:7px 6px;border-radius:8px;cursor:pointer;text-align:left}.act:hover,.act.on{background:#ffffff12}.act.danger{color:#ffb4a3}kbd{font:11.5px var(--font-mono);color:#ffffff80;border:1px solid rgba(255,255,255,.15);border-radius:5px;padding:0 5px}.hint{color:#ffffff80;font-size:12px;line-height:1.45}.picker{position:fixed;left:50%;bottom:max(22px,3.6vw);z-index:15;transform:translate(-50%);border-radius:28px;padding:8px;height:62px;transition:height .38s cubic-bezier(.2,.8,.2,1),border-radius .38s;overflow:hidden;display:flex;gap:8px}.picker.open{height:154px;border-radius:30px}.pours{display:flex;flex-direction:column}.iconrow{flex:1;display:flex;align-items:center;gap:3px}.ibtn{width:52px;height:46px;border:0;border-radius:16px;background:transparent;color:#ffffff9e;display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}.ibtn:hover{color:#fff;background:#ffffff12}.ibtn.on{background:#ffffff29;color:#fff}.ibtn:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:1px}.sep{width:1px;background:#ffffff1a;margin:8px 0}.wheels{display:flex;flex-direction:column;justify-content:center}.cols{display:flex;gap:6px;height:46px;transition:height .38s cubic-bezier(.2,.8,.2,1)}.picker.open .cols{height:138px}.col{position:relative;width:152px;height:100%;perspective:420px;cursor:grab;outline:none;border-radius:16px;touch-action:none}.col.dragging{cursor:grabbing}.band{position:absolute;left:0;right:0;top:50%;height:46px;transform:translateY(-50%);border-radius:16px;background:#ffffff21;pointer-events:none}.item{position:absolute;left:0;right:0;top:50%;height:46px;margin-top:-23px;display:grid;place-items:center;font-size:18px;color:#ffffff8c;white-space:nowrap;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .32s,color .2s;pointer-events:auto}.col.dragging .item{transition:none}.item.sel{color:#fff;font-weight:600;font-size:19px}.firsthint{position:fixed;left:50%;bottom:calc(max(22px,3.6vw) + 74px);z-index:12;transform:translate(-50%);font-size:13.5px;color:#ffffffd1;text-shadow:0 1px 6px rgba(0,0,0,.5);white-space:nowrap;pointer-events:none;transition:opacity .6s ease}.firsthint.gone,.picker.open~.firsthint{opacity:0}.stats{position:fixed;right:max(12px,2.6vw);bottom:max(12px,2.6vw);z-index:12;font:12px var(--font-mono);color:#ffffffbf;padding:6px 10px;border-radius:10px;display:none;pointer-events:none}.stats.on{display:block}.toast-banner{position:fixed;top:max(22px,2.8vw);left:50%;z-index:25;transform:translate(-50%) translateY(-8px);color:#ffffffeb;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1)}.toast-banner.visible{opacity:1;transform:translate(-50%) translateY(0)}.perf-overlay{position:fixed;top:76px;left:3vw;z-index:20;display:flex;align-items:center;gap:7px;background:#14110ec7;color:#faf6f0;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 24px #00000038;padding:5px 12px;border-radius:999px;font-family:var(--font-mono)}.perf-item{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;font-size:.6rem;color:#faf6f0}.perf-lbl{font-size:.48rem;letter-spacing:.06em;color:#faf6f094}.perf-total{padding-left:6px;border-left:1px solid rgba(255,255,255,.18);color:#f3b36b;font-weight:600}@media(max-width:560px){.ibtn{width:42px}.col{width:112px}.item{font-size:15px}.item.sel{font-size:16px}}@media(prefers-reduced-motion:reduce){.picker,.cols,.item,.menu,.ui,.firsthint,.toast-banner,.tog:after{transition:none!important}}