@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{min-height:100vh;min-height:100dvh}button{font:inherit;cursor:pointer}a{text-decoration:none;color:inherit}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}:root{--pixel-black: #0f0f23;--pixel-dark: #1a1a2e;--pixel-shadow: #16213e;--pixel-blue: #0f3460;--pixel-purple: #533483;--pixel-magenta: #e94560;--pixel-gold: #f4d03f;--pixel-honey: #f39c12;--pixel-amber: #e67e22;--pixel-orange: #d35400;--pixel-brown: #8b4513;--pixel-bone: #ffeaa7;--pixel-bone-mid: #dfe6e9;--pixel-bone-dark: #b2bec3;--pixel-green: #00ff88;--pixel-cyan: #00d4ff;--pixel-red: #ff4757;--pixel-white: #f8f8f2;--glow-gold: rgba(244, 208, 63, .6);--glow-green: rgba(0, 255, 136, .5);--glow-cyan: rgba(0, 212, 255, .4);--glow-red: rgba(255, 71, 87, .5);--font-pixel: "Press Start 2P", monospace;--font-retro: "VT323", monospace;--px: 4px;--space-xs: calc(var(--px) * 2);--space-sm: calc(var(--px) * 4);--space-md: calc(var(--px) * 6);--space-lg: calc(var(--px) * 8);--space-xl: calc(var(--px) * 12);--space-2xl: calc(var(--px) * 16)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;image-rendering:pixelated;image-rendering:crisp-edges}html,body,#root{height:100%;width:100%}body{font-family:var(--font-retro);background:var(--pixel-black);color:var(--pixel-white);overflow-x:hidden;-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset}.app{min-height:100vh;display:flex;flex-direction:column;background:var(--pixel-black);position:relative;overflow:hidden}.app:before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 100% 100% at 50% 50%,transparent 0%,transparent 70%,rgba(0,0,0,.3) 100%);pointer-events:none;z-index:1000}.crt-overlay{position:fixed;inset:0;pointer-events:none;z-index:999}.crt-overlay:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(0,0,0,.15) 2px,rgba(0,0,0,.15) 4px);animation:scanlineFlicker .05s infinite}.crt-overlay:after{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,#ff000005,#00ff0005,#0000ff05 66%,#ff000005);background-size:3px 1px;opacity:.5}@keyframes scanlineFlicker{0%,to{opacity:1}50%{opacity:.98}}.screen-flicker{position:fixed;inset:0;pointer-events:none;z-index:998;animation:screenFlicker 8s infinite;background:transparent}@keyframes screenFlicker{0%,to{opacity:0}92%{opacity:0}93%{opacity:.02;background:#ffffff05}94%{opacity:0}96%{opacity:.01;background:#ffffff03}97%{opacity:0}}.pixel-background{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}.pixel-stars{position:absolute;inset:0;background-image:radial-gradient(2px 2px at 20% 15%,var(--pixel-gold) 50%,transparent 50%),radial-gradient(2px 2px at 40% 35%,var(--pixel-cyan) 50%,transparent 50%),radial-gradient(2px 2px at 60% 20%,var(--pixel-white) 50%,transparent 50%),radial-gradient(2px 2px at 80% 40%,var(--pixel-gold) 50%,transparent 50%),radial-gradient(2px 2px at 15% 60%,var(--pixel-white) 50%,transparent 50%),radial-gradient(2px 2px at 35% 80%,var(--pixel-cyan) 50%,transparent 50%),radial-gradient(2px 2px at 70% 70%,var(--pixel-gold) 50%,transparent 50%),radial-gradient(2px 2px at 90% 85%,var(--pixel-white) 50%,transparent 50%),radial-gradient(2px 2px at 5% 90%,var(--pixel-gold) 50%,transparent 50%),radial-gradient(2px 2px at 50% 50%,var(--pixel-cyan) 50%,transparent 50%);animation:twinkleStars 3s ease-in-out infinite alternate}@keyframes twinkleStars{0%{opacity:.3}to{opacity:.6}}.pixel-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(15,52,96,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(15,52,96,.1) 1px,transparent 1px);background-size:32px 32px;animation:gridPulse 4s ease-in-out infinite}@keyframes gridPulse{0%,to{opacity:.3}50%{opacity:.5}}.pixel-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 0%,transparent 50%,rgba(15,15,35,.8) 100%)}.header{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;padding:var(--space-xl) var(--space-lg) var(--space-md);text-align:center}.logo{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.logo-icon{font-size:2rem;filter:drop-shadow(0 0 8px var(--glow-gold));animation:pixelBounce 1s ease-in-out infinite}@keyframes pixelBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.logo-text{font-family:var(--font-pixel);font-size:2.5rem;letter-spacing:.15em;color:var(--pixel-gold);text-shadow:4px 4px 0 var(--pixel-orange),-2px -2px 0 var(--pixel-honey),0 0 20px var(--glow-gold),0 0 40px var(--glow-gold);animation:titleGlow 2s ease-in-out infinite alternate}@keyframes titleGlow{0%{text-shadow:4px 4px 0 var(--pixel-orange),-2px -2px 0 var(--pixel-honey),0 0 20px var(--glow-gold),0 0 40px var(--glow-gold)}to{text-shadow:4px 4px 0 var(--pixel-orange),-2px -2px 0 var(--pixel-honey),0 0 30px var(--glow-gold),0 0 60px var(--glow-gold),0 0 80px rgba(244,208,63,.3)}}.tagline{font-family:var(--font-retro);font-size:1.5rem;color:var(--pixel-bone);letter-spacing:.3em;text-transform:uppercase;margin-top:var(--space-xs);text-shadow:2px 2px 0 var(--pixel-brown)}.ca-display{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:var(--space-sm);padding:8px 16px;background:#0f0f23cc;border:2px solid var(--pixel-gold);border-radius:4px;cursor:pointer;transition:all .2s ease;position:relative}.ca-display:hover{background:#f4d03f26;border-color:var(--pixel-honey);transform:translateY(-2px);box-shadow:0 4px 12px #f4d03f4d}.ca-label{font-family:var(--font-pixel);font-size:.85rem;color:var(--pixel-cyan);text-shadow:0 0 8px var(--glow-cyan)}.ca-address{font-family:var(--font-retro);font-size:1.1rem;color:var(--pixel-gold);letter-spacing:.05em;text-shadow:0 0 10px var(--glow-gold);word-break:break-all}.ca-copy-icon{font-size:1.1rem;cursor:pointer}.ca-copied-tooltip{position:absolute;top:-28px;left:50%;transform:translate(-50%);background:var(--pixel-green);color:var(--pixel-black);padding:4px 12px;border-radius:4px;font-family:var(--font-pixel);font-size:.6rem;white-space:nowrap;box-shadow:0 0 10px var(--glow-green)}.hero-hook{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);margin-top:var(--space-xs);padding:var(--space-md) var(--space-xl);background:var(--pixel-dark);position:relative;max-width:520px;margin-left:auto;margin-right:auto;border:4px solid var(--pixel-gold);box-shadow:inset 0 0 0 4px var(--pixel-black),inset 0 0 0 8px var(--pixel-honey),0 8px #00000080,0 0 30px var(--glow-gold)}.hero-hook:before,.hero-hook:after{content:"";position:absolute;width:12px;height:12px;background:var(--pixel-gold)}.hero-hook:before{top:-8px;left:-8px;box-shadow:calc(100% + 4px) 0 0 var(--pixel-gold),0 calc(100% + 4px) 0 var(--pixel-gold),calc(100% + 4px) calc(100% + 4px) 0 var(--pixel-gold)}.hook-line{font-family:var(--font-pixel);font-size:.85rem;line-height:1.8;color:var(--pixel-white);text-shadow:2px 2px 0 var(--pixel-shadow);text-align:center}.migration-text{color:var(--pixel-green);text-shadow:0 0 5px var(--pixel-green),0 0 10px var(--pixel-green),0 0 20px var(--pixel-green),0 0 40px rgba(0,255,136,.6),0 0 60px rgba(0,255,136,.4),2px 2px 0 rgba(0,80,50,.8);animation:migrationGlow 1.5s ease-in-out infinite alternate}@keyframes migrationGlow{0%{text-shadow:0 0 5px var(--pixel-green),0 0 10px var(--pixel-green),0 0 20px var(--pixel-green),0 0 40px rgba(0,255,136,.6),2px 2px 0 rgba(0,80,50,.8);filter:brightness(1)}to{text-shadow:0 0 8px var(--pixel-green),0 0 15px var(--pixel-green),0 0 30px var(--pixel-green),0 0 50px rgba(0,255,136,.8),0 0 80px rgba(0,255,136,.5),2px 2px 0 rgba(0,80,50,.8);filter:brightness(1.15)}}.migration-hook{border-color:var(--pixel-gold);box-shadow:inset 0 0 0 4px var(--pixel-black),inset 0 0 0 8px #fc06,0 8px #00000080,0 0 30px #ffcc004d}.migration-hook:before,.migration-hook:after{background:var(--pixel-gold)!important}.hook-progress{font-family:var(--font-retro);font-size:1.3rem;color:var(--pixel-cyan);letter-spacing:.1em}.hook-percent{font-family:var(--font-pixel);font-size:1.1rem;color:var(--pixel-green);text-shadow:0 0 10px var(--glow-green);animation:percentBlink 1s steps(2) infinite}@keyframes percentBlink{0%,to{opacity:1}50%{opacity:.8}}.connection-status{position:absolute;top:var(--space-md);right:var(--space-md);display:flex;align-items:center;gap:var(--space-xs);font-family:var(--font-pixel);font-size:.6rem;letter-spacing:.1em;color:var(--pixel-white);padding:var(--space-xs) var(--space-sm);background:var(--pixel-dark);border:2px solid var(--pixel-green);box-shadow:0 4px #00000080}.status-dot{width:8px;height:8px;background:var(--pixel-green);box-shadow:0 0 8px var(--glow-green);animation:dotPulse 1s steps(2) infinite}@keyframes dotPulse{0%,to{opacity:1}50%{opacity:.5}}.connection-status.disconnected{border-color:var(--pixel-red)}.connection-status.disconnected .status-dot{background:var(--pixel-red);box-shadow:0 0 8px var(--glow-red)}.hero-info{position:relative;z-index:10;text-align:center;padding:0 var(--space-lg) var(--space-md);max-width:800px;margin:0 auto}.hero-info .myth-text{font-family:var(--font-retro);font-size:1.4rem;line-height:1.6;color:var(--pixel-bone);margin-bottom:var(--space-lg);text-shadow:2px 2px 0 var(--pixel-black);padding:var(--space-md);background:#1a1a2ecc;border:2px solid var(--pixel-blue)}.hero-info .myth-text strong{color:var(--pixel-gold);text-shadow:0 0 10px var(--glow-gold)}.steps-row{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);flex-wrap:wrap}.steps-row .step{display:flex;flex-direction:column;align-items:center;gap:8px;padding:var(--space-sm);background:var(--pixel-dark);border:2px solid var(--pixel-purple);transition:all .2s steps(3)}.steps-row .step:hover{border-color:var(--pixel-gold);transform:translateY(-4px);box-shadow:0 4px 0 var(--pixel-shadow)}.steps-row .step-icon{font-size:1.8rem;filter:drop-shadow(0 0 4px var(--glow-gold))}.steps-row .step-label{font-family:var(--font-pixel);font-size:.5rem;color:var(--pixel-cyan);text-transform:uppercase;letter-spacing:.05em}.step-arrow{font-family:var(--font-pixel);color:var(--pixel-gold);font-size:1rem;text-shadow:0 0 8px var(--glow-gold);animation:arrowBlink .5s steps(2) infinite}@keyframes arrowBlink{0%,to{opacity:1}50%{opacity:.3}}.main{flex:1;display:flex;align-items:center;justify-content:center;position:relative;z-index:5;padding:var(--space-xs) var(--space-md) 0}.chamber-container,.graduated-container,.trapped-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.trapped-bees{position:relative;width:100%;max-width:700px;display:flex;flex-direction:column;align-items:center}.specimen-display{position:relative;width:100%;aspect-ratio:1;max-height:75vh}.bee-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:10;pointer-events:none}.progress-display{position:relative;width:80%;max-width:400px;margin:-32% auto 0;z-index:20}.progress-bar-track{width:100%;height:24px;background:var(--pixel-black);border:4px solid var(--pixel-gold);box-shadow:inset 0 0 0 2px var(--pixel-shadow),0 4px #00000080,0 0 20px var(--glow-gold);position:relative;overflow:hidden}.progress-bar-track:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0px,transparent 18px,rgba(0,0,0,.3) 18px,rgba(0,0,0,.3) 20px);z-index:2;pointer-events:none}.progress-bar-fill{height:100%;position:relative;transition:width .3s steps(10);background:linear-gradient(180deg,var(--pixel-green) 0%,var(--pixel-green) 30%,#00cc6e 30%,#00cc6e 70%,#00aa5a 70%,#00aa5a 100%);box-shadow:inset 0 -4px #0000004d,0 0 10px var(--glow-green)}.progress-bar-fill:after{content:"";position:absolute;top:2px;left:0;right:0;height:6px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);animation:pixelShine 2s steps(8) infinite}@keyframes pixelShine{0%{transform:translate(-100%)}to{transform:translate(200%)}}.progress-stats{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-sm);font-family:var(--font-pixel);font-size:.65rem}.progress-percent{font-size:.9rem;color:var(--pixel-green);text-shadow:0 0 10px var(--glow-green)}.progress-sol{color:var(--pixel-cyan);font-size:.6rem}.progress-urgency{text-align:center;margin-top:var(--space-xs);font-family:var(--font-pixel);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pixel-gold);animation:urgencyFlash 1s steps(2) infinite}@keyframes urgencyFlash{0%,to{opacity:1}50%{opacity:.5}}.progress-urgency.critical{color:var(--pixel-red);text-shadow:0 0 10px var(--glow-red);animation:criticalFlash .3s steps(2) infinite}@keyframes criticalFlash{0%,to{opacity:1;color:var(--pixel-red)}50%{opacity:1;color:var(--pixel-gold)}}.phase-badge{position:absolute;top:5%;left:50%;transform:translate(-50%);font-family:var(--font-pixel);font-size:.7rem;letter-spacing:.15em;text-shadow:2px 2px 0 var(--pixel-black),0 0 15px currentColor;z-index:20;padding:var(--space-xs) var(--space-sm);background:var(--pixel-dark);border:2px solid currentColor}.trade-feed{position:fixed;bottom:var(--space-2xl);right:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-xs);align-items:flex-end;z-index:50}.trade-item{font-family:var(--font-pixel);font-size:.55rem;padding:var(--space-xs) var(--space-sm);background:var(--pixel-dark);border:2px solid var(--pixel-purple);color:var(--pixel-white)}.trade-item.buy{border-color:var(--pixel-green);color:var(--pixel-green);box-shadow:0 0 10px var(--glow-green)}.trade-item.sell{border-color:var(--pixel-red);color:var(--pixel-red);box-shadow:0 0 10px var(--glow-red)}.vessel-overlay,.trade-feed-overlay{display:none}.bee-swarm{position:fixed;inset:0;background:var(--pixel-black);overflow:hidden}.graduation-title{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:20}.risen-title{font-family:var(--font-pixel);font-size:3rem;color:var(--pixel-gold);text-shadow:4px 4px 0 var(--pixel-orange),8px 8px 0 var(--pixel-brown),0 0 40px var(--glow-gold),0 0 80px var(--glow-gold);margin-bottom:var(--space-lg);animation:titlePulse 1s steps(3) infinite alternate}@keyframes titlePulse{0%{transform:scale(1)}to{transform:scale(1.02)}}.risen-subtitle{font-family:var(--font-pixel);font-size:.8rem;letter-spacing:.3em;color:var(--pixel-cyan);text-shadow:0 0 20px var(--glow-cyan)}.graduation-stats{margin-top:var(--space-xl)}.grad-stat{font-family:var(--font-pixel);font-size:.7rem;color:var(--pixel-green);background:var(--pixel-dark);padding:var(--space-sm) var(--space-lg);border:2px solid var(--pixel-green);display:inline-flex;align-items:center;gap:var(--space-sm);box-shadow:0 0 20px var(--glow-green)}.grad-stat:before{content:"●";animation:dotBlink .5s steps(2) infinite}@keyframes dotBlink{0%,to{opacity:1}50%{opacity:0}}.action-buttons{display:flex;gap:var(--space-lg);justify-content:center;margin-top:var(--space-xl)}.action-btn{font-family:var(--font-pixel);font-size:.65rem;letter-spacing:.05em;padding:var(--space-sm) var(--space-lg);text-decoration:none;cursor:pointer;transition:all .1s steps(3);position:relative}.action-btn.primary{background:var(--pixel-gold);color:var(--pixel-black);border:4px solid var(--pixel-honey);box-shadow:0 4px 0 var(--pixel-orange),0 0 20px var(--glow-gold)}.action-btn.primary:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--pixel-orange),0 0 30px var(--glow-gold)}.action-btn.primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--pixel-orange),0 0 15px var(--glow-gold)}.action-btn.secondary{background:transparent;color:var(--pixel-cyan);border:4px solid var(--pixel-cyan);box-shadow:0 4px 0 var(--pixel-blue)}.action-btn.secondary:hover{background:#00d4ff1a;transform:translateY(-2px);box-shadow:0 6px 0 var(--pixel-blue),0 0 20px var(--glow-cyan)}.honeycomb-overlay{display:none}.footer{position:relative;z-index:10;text-align:center;padding:var(--space-lg);border-top:2px solid var(--pixel-purple);background:linear-gradient(180deg,transparent 0%,rgba(15,15,35,.5) 100%)}.footer-links{display:flex;justify-content:center;align-items:center;gap:var(--space-lg);margin-bottom:var(--space-md)}.footer-links a{font-family:var(--font-pixel);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pixel-cyan);text-decoration:none;padding:var(--space-xs) var(--space-sm);border:2px solid transparent;transition:all .2s steps(3)}.footer-links a:hover{color:var(--pixel-gold);border-color:var(--pixel-gold);text-shadow:0 0 10px var(--glow-gold)}.footer-divider{width:8px;height:8px;background:var(--pixel-purple)}.mythology-note{font-family:var(--font-retro);font-size:1.2rem;color:var(--pixel-bone-dark);max-width:500px;margin:0 auto;text-shadow:1px 1px 0 var(--pixel-black)}.demo-controls{position:fixed;bottom:var(--space-md);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-sm);background:var(--pixel-dark);border:2px solid var(--pixel-red);padding:var(--space-xs) var(--space-md);z-index:100}.demo-badge{font-family:var(--font-pixel);font-size:.5rem;color:var(--pixel-red);animation:demoBlink .5s steps(2) infinite}@keyframes demoBlink{0%,to{opacity:1}50%{opacity:.3}}.demo-btn{font-family:var(--font-pixel);font-size:.5rem;color:var(--pixel-cyan);background:transparent;border:2px solid var(--pixel-cyan);padding:var(--space-xs) var(--space-sm);cursor:pointer;transition:all .1s steps(3)}.demo-btn:hover{background:var(--pixel-cyan);color:var(--pixel-black)}@media(max-width:768px){.logo-text{font-size:1.5rem}.tagline{font-size:1rem;letter-spacing:.2em}.hero-hook{margin-top:var(--space-md);padding:var(--space-sm) var(--space-md)}.hook-line{font-size:.65rem}.specimen-display{max-height:55vh}.progress-display{width:85%}.progress-bar-track{height:20px}.risen-title{font-size:2rem}.action-buttons{flex-direction:column;gap:var(--space-md)}.steps-row{gap:var(--space-xs)}.steps-row .step{padding:var(--space-xs)}.steps-row .step-icon{font-size:1.4rem}.steps-row .step-label{font-size:.4rem}}@media(max-width:480px){.logo-text{font-size:1.2rem;letter-spacing:.1em}.hero-hook:before{display:none}.hook-line{font-size:.55rem}.connection-status{font-size:.5rem;top:var(--space-sm);right:var(--space-sm)}.phase-badge,.progress-stats{font-size:.55rem}.risen-title{font-size:1.5rem}.footer-links a{font-size:.5rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
