:root{--bg: #1c1829;--ink: #f4f1ea;--muted: color-mix(in srgb, var(--ink) 62%, transparent);--font: "Pixelify Sans", ui-monospace, monospace;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}img,canvas{image-rendering:pixelated;display:block}.nav{position:fixed;inset:0 0 auto;z-index:10;display:flex;justify-content:center;align-items:center;padding:20px clamp(16px,4vw,40px)}.socials{position:absolute;right:clamp(16px,4vw,40px);display:flex;align-items:center;gap:2px}.social{display:grid;place-items:center;width:36px;height:36px;color:var(--ink);opacity:.85;transition:opacity .2s}.social:hover{opacity:1}.social svg{width:20px;height:20px;fill:currentColor}.logo{display:block;width:clamp(80px,8vw,110px);aspect-ratio:1013 / 283;background:var(--ink);-webkit-mask:url(/logo.svg) center / contain no-repeat;mask:url(/logo.svg) center / contain no-repeat}.hero{height:100vh}.stage{position:relative;height:100vh;display:grid;place-items:center;overflow:hidden}.title{position:absolute;top:50%;left:50%;translate:-50% -50%;margin:0;font-weight:700;font-size:clamp(90px,24vw,400px);letter-spacing:-.02em;line-height:1;color:var(--ink);opacity:.08;white-space:nowrap;pointer-events:none}.drink{position:relative;width:min(58vmin,540px);aspect-ratio:1}.drink canvas,.drink .live{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.drink .live{opacity:0;transition:opacity .25s}.drink.settled .live{opacity:1}.info{--gutter: clamp(16px, 5vw, 72px);position:absolute;left:var(--gutter);top:50%;translate:0 -50%;width:max(160px,min(30vw,360px,calc((100vw - min(58vmin,540px)) / 2 - var(--gutter) - 24px)))}.info-label{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}.info-text{margin:0;font-size:clamp(28px,3.4vw,52px);line-height:1.05;font-weight:500}.caption{position:absolute;bottom:clamp(56px,10vh,96px);left:0;right:0;display:flex;justify-content:center;gap:18px;align-items:baseline;font-size:14px;letter-spacing:.08em;text-transform:uppercase}.caption .name{font-size:clamp(20px,2.2vw,28px);letter-spacing:0;text-transform:none}.caption .counter,.caption .family{color:var(--muted)}.progress{position:absolute;bottom:28px;left:50%;translate:-50% 0;width:min(240px,50vw);height:2px;background:color-mix(in srgb,var(--ink) 20%,transparent)}.progress span{display:block;height:100%;width:0;background:var(--ink)}.hint{position:absolute;top:30px;left:clamp(16px,4vw,40px);margin:0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}@media(max-width:820px){.hint{display:none}.info{left:16px;right:16px;top:84px;translate:none;width:auto;text-align:center}.info-label{margin-bottom:6px}.info-text{font-size:clamp(22px,6.4vw,32px)}.caption{flex-direction:column;align-items:center;gap:6px}}.info-link{color:inherit;text-decoration:none;border-bottom:3px solid currentColor;padding-bottom:2px;transition:opacity .2s ease}.info-link:hover,.info-link:focus-visible{opacity:.6}.bar-nav{color:var(--ink);opacity:.85;text-decoration:none;font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;margin-right:10px;transition:opacity .2s}.bar-nav:hover{opacity:1}@media(max-width:520px){.bar-nav{font-size:10px;margin-right:6px}}a.logo{cursor:pointer;transition:opacity .2s}a.logo:hover{opacity:.75}.bar-nav.is-back{border:2px solid color-mix(in srgb,var(--ink) 30%,transparent);padding:5px 10px;margin-right:12px}.bar-nav.is-back:hover{border-color:color-mix(in srgb,var(--ink) 65%,transparent)}