@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesize:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#121212;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{place-items:center;width:100%;min-width:320px;min-height:100dvh;margin:0;display:flex;overflow-x:hidden}#root{width:100%}*{box-sizing:border-box}.app-container{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;width:100%;max-width:1280px;min-height:100dvh;margin:0 auto;padding:1rem;display:flex}.menu{justify-content:center}.menu-buttons{flex-wrap:wrap;justify-content:center;gap:20px;margin-top:40px;display:flex}.menu-btn{color:#fff;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;flex-direction:column;align-items:center;gap:5px;padding:20px 40px;font-size:1.2rem;font-weight:700;transition:all .3s cubic-bezier(.25,1,.5,1);display:flex;box-shadow:0 10px 30px #0003}.menu-btn span{color:#aaa;font-size:.9rem;font-weight:400}.menu-btn:hover{background:#ffffff1a;border-color:#ffffff4d;transform:translateY(-5px);box-shadow:0 15px 40px #0000004d}.nav-btn{z-index:100;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff1a;border:none;border-radius:20px;padding:10px 20px;font-weight:600;transition:background .2s;position:absolute;top:20px;left:20px}.nav-btn:hover{background:#fff3}.full-view{max-width:100%;padding:0}.welcome-message{background:linear-gradient(135deg,#646cff 0%,#a252c8 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0;font-size:3.2em;font-weight:600;line-height:1.1}.subtitle{color:#a0a0a0;margin:0;font-size:1.25em;font-weight:300}.carousel-container{-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;color:#333;background:radial-gradient(circle,#fff 0%,#c4d0df 100%);flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100dvh;display:flex;overflow:hidden}.scene{perspective:1000px;width:220px;height:300px}.carousel{width:100%;height:100%;transform-style:preserve-3d;position:relative}.carousel-item{cursor:pointer;-webkit-tap-highlight-color:transparent;width:200px;height:250px;transform-style:preserve-3d;position:absolute;top:10px;left:10px}.volumetric-layer{width:100%;height:100%;transform-style:preserve-3d;border-radius:40px;transition:transform .3s,box-shadow .3s;position:absolute;top:0;left:0}.volumetric-layer.front{-webkit-box-reflect:below 10px linear-gradient(transparent, transparent 60%, #fff6);backface-visibility:hidden;background:#fafafc;border:45px solid #fff;border-color:#fff #ebebf0 #cfcfd6 #f7f7fa;padding:0;box-shadow:0 10px 30px #00000026}.volumetric-layer.front.highlight{box-shadow:0 15px 40px #fffc, 0 0 20px var(--theme-bg)}.volumetric-layer.side{background:#e8e8e8;border:1px solid #00000005}.volumetric-layer.back{background:#fafafc;border:40px solid #fff;border-color:#fff #ebebf0 #cfcfd6 #f7f7fa;padding:0;box-shadow:0 10px 30px #0000001a}.carousel-instruction{color:#666;letter-spacing:1px;margin-top:80px;font-size:1.2rem;font-weight:600}.mojo-container{perspective:1000px;flex-direction:column;align-items:center;gap:2rem;display:flex}.mojo-box-wrapper{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;width:300px;height:420px;transition:transform .3s;position:relative}.mojo-box-wrapper:hover{transform:translateY(-5px)scale(1.02)}.mojo-box-base{z-index:1;background:#f0f0f5;border:4px solid #e0e0e8;border-radius:65px;justify-content:center;align-items:center;width:100%;height:100%;padding-top:40px;display:flex;position:absolute;top:0;left:0;overflow:hidden;box-shadow:inset 0 10px 20px #0000001a,inset 0 -5px 15px #0000000d,0 15px 35px #0003}.prize{opacity:0;flex-direction:column;align-items:center;gap:10px;transition:all .4s cubic-bezier(.34,1.56,.64,1) .2s;display:flex;transform:translateY(20px)}.mojo-box-wrapper.is-open .prize{opacity:1;transform:translateY(0)}.prize-icon{filter:drop-shadow(0 0 15px #ffd700cc);font-size:4rem}.prize-text{color:#333;text-transform:uppercase;letter-spacing:2px;background:linear-gradient(135deg,#ff007a,#7928ca);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.5rem;font-weight:800}.mojo-box-lid{z-index:2;box-sizing:border-box;touch-action:none;background:#fafafc;border:60px solid #fff;border-color:#fff #ebebf0 #cfcfd6 #f7f7fa;border-radius:65px;width:100%;height:100%;padding:0;transition:transform .6s cubic-bezier(.25,1,.5,1);display:flex;position:absolute;top:0;left:0;box-shadow:0 20px 40px #00000026}.mojo-box-wrapper.is-open .mojo-box-lid,.mojo-box-wrapper.is-dragging .mojo-box-lid{box-shadow:0 30px 50px #00000040}.mojo-label{background:var(--theme-bg,#3e208c);border:4px solid #fff;border-radius:18px;flex-direction:column;align-items:center;width:auto;height:auto;padding:18px;display:flex;position:absolute;inset:-8px;overflow:hidden;transform:translateZ(10px);box-shadow:0 15px 35px #00000040,0 5px 12px #00000026}.mojo-label:before{content:"";pointer-events:none;background:linear-gradient(135deg,#ffffff1a 0%,#0000 100%);position:absolute;inset:0}.caffeine-info{color:#fff;text-align:center;margin-top:10px;margin-bottom:25px;font-size:.9rem;font-weight:600}.caffeine-amt{font-size:1.2rem;font-weight:800;display:block}.logo-text{color:var(--theme-fg,#00bfff);letter-spacing:-2px;text-align:center;margin-bottom:10px;font-family:Inter,sans-serif;font-size:3.8rem;font-weight:900;line-height:.8;position:relative}.logo-subtitle{color:#fff;letter-spacing:2px;margin-bottom:30px;font-size:.8rem;font-weight:600}.flavor-name{color:var(--theme-fg,#00bfff);text-shadow:1px 1px #0000004d;align-self:flex-start;margin-top:auto;margin-bottom:5px;font-size:1.2rem;font-style:italic;font-weight:800;transform:rotate(-5deg)}.package-info{color:#fffc;align-self:flex-start;font-size:.75rem;line-height:1.2}.toggle-button{background:linear-gradient(135deg, var(--theme-fg,#00bfff), var(--theme-bg,#3e208c));color:#fff;cursor:pointer;border:none;border-radius:30px;padding:12px 30px;font-size:1.1rem;font-weight:600;transition:all .2s;box-shadow:0 4px 15px #0000004d}.toggle-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00bfff66}.toggle-button:active{transform:translateY(1px)}.proto2-container{background:#121212;width:100vw;height:100dvh;position:relative}.carousel-view{opacity:1;transition:opacity .5s,transform .5s;transform:scale(1)}.carousel-view.fade-out{opacity:0;transform:scale(1.5)translateZ(100px)}.box-view{flex-direction:column;justify-content:center;align-items:center;height:100dvh;animation:.8s cubic-bezier(.2,.8,.2,1) explodeIn;display:flex}@keyframes explodeIn{0%{opacity:0;filter:blur(10px);transform:scale(.6)translateY(50px)}50%{filter:blur()}to{opacity:1;transform:scale(1)translateY(0)}}.back-btn{color:#fff;cursor:pointer;z-index:100;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;padding:10px 20px;font-weight:600;transition:background .2s;position:absolute;top:20px;left:20px}.back-btn:hover{background:#fff3}
