*{box-sizing:border-box;margin:0;padding:0}:root{--serif:"Playfair Display", Georgia, "Times New Roman", serif;--sans:"Inter", -apple-system, "Segoe UI", Roboto, sans-serif;--gold:#d9a441;--ink:#f2ead9;--ink-dim:#f2ead98c}html{scroll-behavior:auto}body{font-family:var(--sans);color:var(--ink);background:#14100c;overflow-x:hidden}#bg{z-index:0;background:radial-gradient(120% 90% at 50% 20%,#ffb05729,#0000 55%),radial-gradient(140% 120% at 50% 110%,#3f220ee6,#0000 60%),linear-gradient(#1d150e 0%,#241811 45%,#150e09 100%);position:fixed;inset:0}#bg:after{content:"";background:radial-gradient(90% 70% at 50% 45%,#0000 55%,#0000008c 100%);position:absolute;inset:0}#styleBtn{color:#f0e8d8;cursor:pointer;background:#ffffff14;border:1px solid #ffffff40;border-radius:999px;margin-top:18px;padding:10px 22px;font:500 14px Inter,sans-serif;transition:background .2s}#styleBtn:hover{background:#ffffff29}#app{z-index:1;position:fixed;inset:0}#app:after{content:"";pointer-events:none;background:radial-gradient(90% 70% at 50% 45%,#0000 55%,#00000073 100%);position:absolute;inset:0}#app canvas{display:block}#frameCanvas{z-index:2;width:100vw;height:100vh;display:none;position:fixed;inset:0}body.frames-mode #app{visibility:hidden}body.frames-mode #frameCanvas{display:block}#frameLoad{letter-spacing:.08em;color:var(--ink-dim);background:#140e098c;border:1px solid #f2ead926;border-radius:999px;padding:8px 14px;font-size:12px;position:absolute;top:24px;right:24px}#spacer{width:1px;position:relative}#menu{z-index:10;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0a070473;flex-direction:column;justify-content:center;align-items:center;gap:48px;padding:32px;transition:opacity .6s,visibility .6s;display:flex;position:fixed;inset:0}#menu.hidden{opacity:0;visibility:hidden;pointer-events:none}.menu-header{text-align:center}.menu-header h1{font-family:var(--serif);letter-spacing:.02em;color:var(--ink);text-shadow:0 2px 30px #d9a44140;font-size:clamp(40px,6vw,72px);font-weight:700}.menu-header p{color:var(--ink-dim);margin-top:14px;font-size:clamp(14px,1.6vw,18px);font-weight:400}#cards{flex-wrap:wrap;justify-content:center;gap:22px;max-width:1100px;display:flex}.menu-footer{text-align:center;font-family:var(--sans);color:var(--ink-dim);margin-top:28px;font-size:13px}.menu-footer p{margin:0}.menu-footer a{color:var(--gold)}.card{cursor:pointer;text-align:center;background:linear-gradient(170deg,#ffebc812,#ffebc805);border:1px solid #d9a44140;border-radius:14px;width:230px;padding:26px 22px 22px;transition:transform .25s,border-color .25s,background .25s,box-shadow .25s}.card:hover{background:linear-gradient(170deg,#ffebc81f,#ffebc80a);border-color:#d9a441b3;transform:translateY(-6px);box-shadow:0 18px 40px #00000073}.card .swatch{border:1px solid #ffffff2e;border-radius:50%;width:64px;height:64px;margin:0 auto 18px;box-shadow:inset 0 -8px 16px #00000059,0 6px 18px #0006}.card h3{font-family:var(--serif);margin-bottom:8px;font-size:24px;font-weight:500}.card p{color:var(--ink-dim);font-size:13px;line-height:1.5}#hud{z-index:5;pointer-events:none;position:fixed;inset:0}#hud:before{content:"";background:radial-gradient(110% 85% at 50% 42%,#0000 55%,#0a060380 100%);position:absolute;inset:0}#backBtn{pointer-events:auto;font-family:var(--sans);color:var(--ink-dim);cursor:pointer;background:#140e098c;border:1px solid #f2ead92e;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:500;transition:color .2s,border-color .2s;position:absolute;top:24px;left:24px}#backBtn:hover{color:var(--ink);border-color:#f2ead980}#drinkTitle{font-family:var(--serif);letter-spacing:.06em;color:var(--ink);opacity:.9;font-size:26px;font-weight:500;position:absolute;top:28px;left:50%;transform:translate(-50%)}#steps{flex-direction:column;gap:18px;display:flex;position:absolute;top:50%;right:32px;transform:translateY(-50%)}.step{color:var(--ink-dim);opacity:.55;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#120c078c;border-radius:999px;justify-content:flex-end;align-items:center;gap:12px;padding:8px 14px;font-size:13px;font-weight:500;transition:opacity .3s,color .3s;display:flex}.step .dot{border:1.5px solid;border-radius:50%;flex:none;width:10px;height:10px;transition:background .3s}.step.active{opacity:1;color:var(--gold)}.step.done{opacity:.8;color:var(--ink)}.step.done .dot{background:currentColor}#pourLabel{text-align:center;opacity:0;transition:none;position:absolute;bottom:12vh;left:50%;transform:translate(-50%)}#pourName{font-family:var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px;font-size:15px;font-weight:600}#pourAmount{font-family:var(--serif);color:var(--gold);text-shadow:0 4px 30px #d9a44159;font-variant-numeric:tabular-nums;font-size:clamp(44px,6vw,72px);font-weight:700;line-height:1}#pourAmount .unit{color:var(--ink-dim);font-size:.42em;font-weight:500}#scrollHint{color:var(--ink-dim);letter-spacing:.18em;text-transform:uppercase;flex-direction:column;align-items:center;gap:10px;font-size:13px;transition:opacity .4s;display:flex;position:absolute;bottom:40px;left:50%;transform:translate(-50%)}#scrollHint .arrow{background:linear-gradient(180deg, var(--ink-dim), transparent);width:1px;height:34px;animation:1.8s ease-in-out infinite hintPulse;position:relative}@keyframes hintPulse{0%,to{opacity:.9;transform:translateY(0)}50%{opacity:.4;transform:translateY(8px)}}#finale{opacity:0;pointer-events:none;justify-content:center;align-items:flex-end;padding-bottom:9vh;display:flex;position:absolute;inset:0}#finale.visible{pointer-events:auto}.finale-inner{text-align:center}.finale-kicker{letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;font-size:13px}#finaleName{font-family:var(--serif);margin-bottom:12px;font-size:clamp(36px,5vw,58px);font-weight:700}#finaleRecipe{color:var(--ink-dim);margin-bottom:26px;font-size:15px}#againBtn{font-family:var(--sans);letter-spacing:.06em;color:#1c130a;cursor:pointer;background:linear-gradient(#e8b95c,#c9932f);border:none;border-radius:999px;padding:14px 30px;font-size:14px;font-weight:600;transition:transform .2s,box-shadow .2s;box-shadow:0 10px 30px #d9a44159}#againBtn:hover{transform:translateY(-2px);box-shadow:0 14px 36px #d9a44180}@media (width<=700px){#steps{display:none}#drinkTitle{font-size:18px;top:auto;bottom:24px;left:50%}#backBtn{padding:8px 14px;font-size:13px}#pourLabel{bottom:12vh}#scrollHint{bottom:60px}#menu{justify-content:flex-start;gap:32px;padding:56px 20px 40px;overflow-y:auto}.card{width:min(320px,100%);padding:18px 20px}.card .swatch{width:48px;height:48px;margin-bottom:12px}.card h3{font-size:21px}}