:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#111;background:#ef9f2e;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{min-height:100vh;background:#ef9f2e}button,input,textarea,select{font:inherit}.app-shell{position:relative;min-height:100vh;overflow:hidden;background:#ef9f2e}.section{position:relative;width:100%;height:100vh;height:100dvh}.beer-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.beer-bg__canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.beer-bg__grain{position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px;mix-blend-mode:overlay;opacity:.06}.beer-bg__vignette{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 125% 95% at 58% 42%,transparent 62%,rgba(120,70,18,.16) 100%)}.result-fill{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;animation:result-fill-in .76s cubic-bezier(.22,1,.36,1) both;transition:background-color .6s ease}@keyframes result-fill-in{0%{clip-path:circle(0% at 60% 56%)}to{clip-path:circle(150% at 60% 56%)}}@media(prefers-reduced-motion:reduce){.result-fill{animation:none}}.stage-dim{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .3s ease;background:radial-gradient(circle at 64% 50%,#08050200,#0805021f 30%,#06040180 68%,#040200a8)}.stage-dim--on{opacity:1}@media(max-aspect-ratio:1/1),(max-width:720px){.stage-dim{background:radial-gradient(circle at 50% 62%,#08050200,#0805021f 30%,#06040180 68%,#040200a8)}}.viewer-layer,.viewer-loading,.viewer-layer canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.viewer-layer{z-index:1}.viewer-layer canvas{touch-action:none}.viewer-loading{display:grid;place-items:center;color:#fff4e0b3;background:transparent}.intro-copy{position:absolute;top:50%;left:clamp(20px,6vw,214px);transform:translateY(-50%);z-index:2;max-width:clamp(300px,42vw,560px);padding:0;transition:opacity .45s ease}.intro-copy--hidden{opacity:0;pointer-events:none}.intro-kicker{margin:0 0 14px;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#4a2a0a9e}.intro-copy h1{margin:0;max-width:540px;font-size:clamp(2.8rem,5vw,4.8rem);line-height:1.02;font-weight:600;letter-spacing:-.045em;text-wrap:balance;color:#3a2008;text-shadow:0 1px 14px rgba(255,232,190,.35)}.intro-text{margin:22px 0 0;max-width:420px;font-size:1.18rem;line-height:1.55;color:#3a200ac7;letter-spacing:-.01em}.result-panel{position:absolute;top:50%;left:clamp(20px,6vw,214px);transform:translateY(-50%);z-index:2;width:min(420px,42vw,calc(100vw - 268px));--ink: 255, 255, 255}.result-panel--on-light{--ink: 26, 18, 6}.result-title{margin:0;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1.02;font-weight:600;letter-spacing:-.04em;text-transform:uppercase;color:rgb(var(--ink))}.result-desc{margin:16px 0 0;max-width:400px;font-size:1.05rem;line-height:1.55;color:rgba(var(--ink),.78);letter-spacing:-.01em}.result-specs{margin:26px 0 0;border-top:1px solid rgba(var(--ink),.32)}.spec-row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:12px 0;border-bottom:1px solid rgba(var(--ink),.18)}.spec-row dt{flex:none;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(var(--ink),.62)}.spec-row dd{margin:0;text-align:right;font-size:.96rem;font-weight:500;letter-spacing:-.01em;color:rgba(var(--ink),.96)}@keyframes result-reveal{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.result-title,.result-desc,.result-specs .spec-row{opacity:0;animation:result-reveal .35s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i, 0) * 25ms)}@media(prefers-reduced-motion:reduce){.result-title,.result-desc,.result-specs .spec-row{animation:none;opacity:1}}.sound-toggle{position:fixed;top:22px;top:max(22px,calc(env(safe-area-inset-top,0px) + 10px));right:22px;right:max(22px,calc(env(safe-area-inset-right,0px) + 22px));z-index:5;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border-radius:999px;border:1px solid rgba(17,17,17,.08);background:#ffffffb8;color:#111111e6;box-shadow:0 12px 30px #11111124,inset 0 1px #ffffffeb;backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,color .18s ease}.sound-toggle:hover{transform:translateY(-1px) scale(1.04);box-shadow:0 16px 34px #1113,inset 0 1px #fffffff5}.sound-toggle:active{transform:translateY(0) scale(.97)}.sound-toggle[aria-pressed=true]{color:#1111116b}@media(max-width:720px){.sound-toggle{top:16px;top:max(16px,calc(env(safe-area-inset-top,0px) + 10px));right:16px;right:max(16px,calc(env(safe-area-inset-right,0px) + 16px));width:42px;height:42px}}.action-dock{position:absolute;left:50%;bottom:26px;z-index:2;transform:translate(-50%);display:inline-flex;align-items:center;gap:12px;min-height:74px;padding:11px 12px 11px 22px;border-radius:999px;border:1px solid rgba(17,17,17,.08);background:#ffffffb8;box-shadow:0 24px 60px #1111111f,inset 0 1px #ffffffeb;backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2)}.beer-name{width:184px;padding-right:6px;font-size:.96rem;font-weight:500;letter-spacing:-.02em;color:#111111e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-button{position:relative;border:0;border-radius:999px;min-width:148px;padding:16px 26px;font-size:.98rem;font-weight:600;letter-spacing:-.02em;color:#fff;background:linear-gradient(180deg,#383838,#161616 48%,#050505);box-shadow:inset 0 1.5px #ffffff52,inset 0 -8px 14px #0000008c,0 14px 26px #08060252,0 5px 12px #08060247;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease,opacity .18s ease}.action-button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(180deg,#ffffff3d,#ffffff12 30%,#fff0 52%);pointer-events:none}.action-button:hover:not(:disabled){transform:translateY(-1px) scale(1.01);box-shadow:inset 0 1.5px #fff6,inset 0 -8px 14px #0000008c,0 20px 34px #0806025c,0 7px 16px #0806024d}.action-button:active:not(:disabled){transform:translateY(0) scale(.99);box-shadow:inset 0 1px #ffffff38,inset 0 -4px 10px #00000080,0 6px 14px #0806024d}.action-button:disabled{opacity:.62;cursor:default}.action-button--spinning{background:linear-gradient(180deg,#383838,#161616 48%,#050505)}.action-button--slowing{background:#1111116b;color:#ffffffeb}@media(min-width:721px)and (max-width:1024px)and (min-aspect-ratio:1/1){.intro-copy h1{font-size:clamp(2.4rem,4.4vw,3.6rem)}.intro-text{max-width:340px;font-size:1.06rem}.result-desc{max-width:320px}}@media(max-width:720px),(max-aspect-ratio:1/1){.intro-copy{top:clamp(72px,16vh,132px);left:20px;right:20px;transform:none;max-width:none;padding:0}.intro-copy h1{max-width:320px;font-size:clamp(2.1rem,8.5vw,3rem)}.intro-text{margin-top:16px;max-width:280px;font-size:.95rem}.result-panel{top:36px;left:20px;right:20px;bottom:auto;width:auto;transform:none}.result-title{font-size:clamp(1.9rem,7.5vw,2.6rem)}.result-desc{max-width:none;font-size:.95rem}.result-specs{margin-top:14px}.spec-row{padding:9px 0}.action-dock{left:16px;left:calc(env(safe-area-inset-left,0px) + 16px);right:16px;right:calc(env(safe-area-inset-right,0px) + 16px);bottom:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:none;min-height:68px;justify-content:space-between;padding:10px 10px 10px 18px}.beer-name{width:auto;flex:1;min-width:0;font-size:.92rem;overflow:hidden;text-overflow:ellipsis}.action-button{min-width:132px;padding:15px 22px}}