:root{--primary: #3b82f6;--secondary: #9333ea;--dark: #0f172a;--darker: #020617;--light: #60a5fa;--text: #e2e8f0;--gradient: linear-gradient(135deg, #3b82f6, #9333ea);--matrix-gradient: linear-gradient( 0deg, rgba(0, 0, 0, .9) 0%, rgba(15, 23, 42, .7) 100% );--shadow: 0 10px 30px rgba(59, 130, 246, .15);--radius: 4px;--transition: all .3s ease;--glass-border: rgba(59, 130, 246, .3);--glitch-timing: .2s;--accent: #22d3ee;--accent-dark: #0891b2}@font-face{font-family:Cyberspace;src:url(https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap)}*{margin:0;padding:0;box-sizing:border-box;font-family:Share Tech Mono,monospace}body{background-color:var(--dark);color:var(--text);background-image:repeating-linear-gradient(0deg,rgba(15,23,42,.15),rgba(15,23,42,.15) 1px,transparent 1px,transparent 2px)}.app-container{display:flex;flex-direction:column;min-height:100vh;max-width:1400px;margin:0 auto;padding:2rem}.header{text-align:center;margin-bottom:3rem;animation:glitchIn 1s ease;position:relative}.header h1{font-size:3.5rem;color:var(--primary);margin-bottom:1rem;letter-spacing:2px;text-transform:uppercase;font-weight:700;text-shadow:0 0 5px var(--primary),0 0 10px var(--primary);position:relative}.header h1:before,.header h1:after{content:attr(data-text);position:absolute;width:100%;height:100%;top:0;left:0;opacity:.8}.header h1:before{animation:glitch-1 2s infinite linear alternate-reverse;left:2px;text-shadow:-1px 0 #ff00c8;clip:rect(24px,550px,90px,0)}.header h1:after{animation:glitch-2 3s infinite linear alternate-reverse;left:-2px;text-shadow:-1px 0 #0a7aff;clip:rect(85px,550px,140px,0)}.tagline{font-size:1.2rem;color:var(--text);max-width:600px;margin:0 auto;letter-spacing:1px;border-top:1px solid rgba(0,255,65,.3);border-bottom:1px solid rgba(0,255,65,.3);padding:.5rem 0;position:relative}.content-container{display:flex;flex:1;gap:2rem;margin-bottom:2rem;position:relative}.content-container:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(to bottom,transparent 0%,rgba(59,130,246,.05) 50%,transparent 100%);pointer-events:none;animation:scan 8s linear infinite}.left-panel{flex:1;display:flex;flex-direction:column;background:rgba(10,10,10,.8);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:0 0 15px #00ff4133;overflow:hidden;transition:var(--transition);position:relative}.visualizer-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden;pointer-events:none}.step-indicator,.interaction-panel{position:relative;z-index:1;background:rgba(10,10,10,.5)}.step-indicator{display:flex;flex-direction:column;padding:2rem;gap:1.5rem;background:rgba(10,10,20,.7);position:relative;margin-top:1rem;backdrop-filter:blur(5px);border-bottom:1px solid var(--glass-border);box-shadow:0 5px 15px #0003}.vessel{width:120px;height:120px;border-radius:10px;background:rgba(15,23,42,.9);border:2px solid var(--primary);position:relative;overflow:hidden;box-shadow:0 0 15px #3b82f633;transition:all .8s cubic-bezier(.68,-.55,.27,1.55)}.vessel:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,var(--darker),var(--primary),var(--darker));box-shadow:0 0 8px var(--primary);animation:scan-horizontal 2s linear infinite;opacity:.7}.vessel-fill{position:absolute;bottom:0;left:0;width:100%;height:0%;background:linear-gradient(to top,rgba(59,130,246,.3),rgba(147,51,234,.2));transition:height 1s cubic-bezier(.68,-.55,.27,1.55);z-index:1}.vessel-container.filled .vessel-fill{height:75%;background:linear-gradient(to top,rgba(34,211,238,.6),rgba(59,130,246,.3),rgba(147,51,234,.2));position:relative;overflow:hidden}.vessel-container.filled .vessel-fill:after{content:"";position:absolute;top:0;left:0;width:200%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:liquid-shimmer 3s infinite linear}@keyframes liquid-shimmer{0%{transform:translate(-50%)}to{transform:translate(0)}}.vessel-container.sealed .vessel-fill{height:100%;background:linear-gradient(to top,rgba(34,211,238,.7),rgba(59,130,246,.5),rgba(147,51,234,.4));animation:pulsate-glow 4s infinite alternate;position:relative}.vessel-container.sealed .vessel-fill:before{content:"";position:absolute;width:100%;height:100%;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.3) 0%,transparent 20%),radial-gradient(circle at 70% 60%,rgba(255,255,255,.3) 0%,transparent 20%);animation:bubbles 10s infinite ease-in-out}@keyframes pulsate-glow{0%{opacity:.8;filter:brightness(.9) contrast(1.1)}to{opacity:1;filter:brightness(1.2) contrast(1.2)}}@keyframes bubbles{0%,to{background-position:30% 20%,70% 60%}25%{background-position:35% 25%,65% 55%}50%{background-position:25% 15%,75% 65%}75%{background-position:30% 25%,70% 50%}}.vessel-seal{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background:rgba(15,23,42,.4);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center}.vessel-seal:before{content:"";width:40px;height:40px;border-radius:50%;background:rgba(34,211,238,.3);box-shadow:0 0 20px #22d3ee99;animation:pulse 2s infinite}.vessel-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;border-radius:50%;background:rgba(59,130,246,.1);box-shadow:0 0 20px #3b82f666;z-index:0;transition:all .8s ease}.vessel-container.filled .vessel-glow{width:100%;height:100%}.vessel-container.sealed .vessel-glow{width:110%;height:110%;background:rgba(34,211,238,.1);box-shadow:0 0 30px #22d3ee4d}.audio-visualizer{position:absolute;inset:0;width:100%;height:100%;z-index:3;display:flex;justify-content:center;align-items:center;overflow:hidden;background:rgba(0,0,0,.2);border-radius:4px;perspective:1500px;transform-style:preserve-3d;backdrop-filter:blur(2px)}.audio-visualizer{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:hidden;background:rgba(0,0,0,.2);border-radius:4px;backdrop-filter:blur(2px)}.audio-visualizer canvas{width:100%;height:100%;display:block}.audio-visualizer:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(0,0,0,0) 0%,rgba(0,10,30,.6) 70%,rgba(0,20,40,.9) 100%);z-index:-1;opacity:.8;pointer-events:none}.audio-visualizer:after{content:"Initializing cosmic visualizer...";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fffc;font-size:14px;opacity:.8;text-shadow:0 0 10px rgba(0,150,255,.8);pointer-events:none;animation:pulse 2s infinite}.audio-visualizer canvas+.audio-visualizer:after{display:none}@keyframes pulse{0%{opacity:.4}50%{opacity:.8}to{opacity:.4}}.central-orb{position:absolute;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0%,var(--accent) 20%,var(--primary) 50%,rgba(8,8,32,.3) 90%),url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");box-shadow:0 0 40px var(--primary),0 0 80px var(--accent),0 0 120px #22d3ee80,inset 0 0 20px #fffc,inset 0 0 40px #0096ff66;z-index:1;transform-origin:center;transition:transform .15s ease-out,opacity .15s ease-out;will-change:transform,opacity,filter,box-shadow;filter:blur(.5px) contrast(1.2)}.wormhole{position:absolute;width:300px;height:300px;background:conic-gradient(from 0deg,transparent,var(--primary),var(--accent),var(--secondary),transparent);border-radius:50%;z-index:0;animation:rotate 10s linear infinite;opacity:.1;filter:blur(8px);transform:perspective(800px) rotateX(60deg) scale(1.5,.5)}.dimension-portal{position:absolute;width:100%;height:100%;background:repeating-radial-gradient(circle at center,transparent 0px,transparent 20px,rgba(34,211,238,.02) 20px,rgba(34,211,238,.02) 25px),repeating-radial-gradient(circle at center,transparent 0px,transparent 50px,rgba(59,130,246,.03) 50px,rgba(59,130,246,.03) 55px);border-radius:50%;z-index:0;opacity:.6;transform-origin:center;animation:pulse-slow 4s infinite alternate,rotate-slow 20s linear infinite reverse}@keyframes pulse-slow{0%{transform:scale(.95);opacity:.5}to{transform:scale(1.05);opacity:.7}}@keyframes rotate-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotate{0%{transform:perspective(800px) rotateX(60deg) scale(1.5,.5) rotate(0)}to{transform:perspective(800px) rotateX(60deg) scale(1.5,.5) rotate(360deg)}}.cosmic-spark{position:absolute;width:1px;height:1px;background-color:#fff;border-radius:50%;box-shadow:0 0 4px #fff,0 0 8px var(--accent);opacity:0;z-index:3}.nebula-cloud{position:absolute;background:radial-gradient(ellipse at center,rgba(34,211,238,.2) 0%,rgba(59,130,246,.1) 40%,rgba(147,51,234,.05) 70%,transparent 100%);border-radius:50%;filter:blur(15px);mix-blend-mode:screen;opacity:0;z-index:0;animation:nebula-float 15s infinite alternate ease-in-out;transform-origin:center}@keyframes nebula-float{0%{transform:translateY(-5%) scale(.9) rotate(-5deg);opacity:.3}50%{transform:translateY(0) scale(1) rotate(0);opacity:.6}to{transform:translateY(5%) scale(.95) rotate(5deg);opacity:.4}}.energy-field{position:absolute;inset:-20%;border-radius:50%;background:repeating-conic-gradient(from 0deg,transparent 0deg,transparent 10deg,rgba(34,211,238,.02) 10deg,rgba(34,211,238,.02) 15deg);opacity:.3;z-index:0;animation:energy-pulse 8s infinite alternate ease-in-out}@keyframes energy-pulse{0%{transform:scale(.9) rotate(0);opacity:.2}to{transform:scale(1.1) rotate(90deg);opacity:.4}}.energy-flare{position:absolute;width:200%;height:200%;background:radial-gradient(ellipse at center,rgba(34,211,238,.3) 0%,rgba(59,130,246,.1) 30%,rgba(0,0,0,0) 70%);pointer-events:none;mix-blend-mode:screen;animation:flare-pulse 2s ease-in-out infinite;z-index:0}@keyframes flare-pulse{0%,to{opacity:.2;transform:scale(.8)}50%{opacity:.6;transform:scale(1.2)}}.wave-ring{position:absolute;border:3px solid var(--accent);border-radius:50%;width:30px;height:30px;opacity:1;z-index:0;animation:wave-expand 2s cubic-bezier(.215,.61,.355,1) forwards;pointer-events:none;mix-blend-mode:screen}@keyframes wave-expand{0%{width:30px;height:30px;opacity:.9;border-width:4px;box-shadow:0 0 20px var(--accent),inset 0 0 10px var(--primary)}40%{opacity:.7;border-width:2px;box-shadow:0 0 15px var(--accent),inset 0 0 5px var(--primary)}to{width:400px;height:400px;opacity:0;border-width:1px;box-shadow:none}}@keyframes particle-float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(180deg)}}.recording-duration{position:absolute;top:-25px;left:0;width:100%;text-align:center;font-size:.9rem;color:var(--accent);text-shadow:0 0 4px var(--accent)}.vessel-container.recording .vessel{border-color:var(--accent);box-shadow:0 0 25px #22d3ee66;animation:pulse-recording 1.5s infinite alternate}@keyframes pulse-recording{0%{box-shadow:0 0 15px #22d3ee66}to{box-shadow:0 0 35px #22d3eeb3}}.vessel-container.welcome .vessel{transform:scale(.9);opacity:.7}.vessel-container.record .vessel{transform:scale(1);opacity:1}.vessel-container.mint .vessel{transform:scale(1.05);border-color:var(--secondary)}.vessel-container.email .vessel,.vessel-container.complete .vessel{transform:scale(1.1);border-color:var(--accent);box-shadow:0 0 25px #22d3ee4d}@keyframes scan-horizontal{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes pulsate{0%{opacity:.7}50%{opacity:.9}to{opacity:.7}}.step{display:flex;align-items:center;gap:1rem;opacity:.4;transition:var(--transition)}.step.active{opacity:1}.step.completed{opacity:.8}.step-required{font-size:.7rem;color:#ff6b6b;margin-left:8px;text-shadow:0 0 5px #ff6b6b;animation:pulse 1s infinite alternate;vertical-align:super}.step-number{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--dark);color:#fff;font-weight:700;transition:var(--transition)}.step.active .step-number{background:var(--primary);transform:scale(1.1)}.step.completed .step-number{background:var(--secondary)}.interaction-panel{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.record-container{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.microphone{width:120px;height:120px;border-radius:4px;background:var(--darker);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 15px #3b82f64d,inset 0 0 10px #00000080;position:relative;transition:var(--transition);border:1px solid var(--primary)}.microphone:hover{transform:scale(1.05);box-shadow:0 0 20px #3b82f680,inset 0 0 10px #00000080}.microphone:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,transparent,var(--accent),transparent);animation:scan-line 2s linear infinite}.mic-icon-default,.mic-icon-active{font-size:3rem;color:var(--primary);filter:drop-shadow(0 0 5px var(--primary))}.mic-icon-active{animation:pulse 1s infinite alternate}.microphone.recording{box-shadow:0 0 0 10px #6c63ff1a;animation:pulse 2s infinite}.recording-waves{position:absolute;width:100%;height:100%;border-radius:50%;background:transparent;border:2px solid var(--primary);animation:expand 1.5s infinite;opacity:0}.mint-container{display:flex;flex-direction:column;align-items:center;gap:2rem;width:100%;max-width:400px}.mint-button{width:100%;padding:1rem;background:var(--darker);color:var(--primary);font-weight:700;font-size:1rem;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden;border:1px solid var(--primary);text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 5px var(--primary);box-shadow:0 0 10px #00ff414d,inset 0 0 15px #00000080}.mint-button:before{content:"";position:absolute;top:-2px;left:-2px;width:calc(100% + 4px);height:calc(100% + 4px);background:linear-gradient(45deg,var(--primary),transparent,var(--secondary),transparent,var(--primary),transparent,var(--secondary),transparent,var(--primary));background-size:400%;z-index:-1;animation:glowing 20s linear infinite;opacity:0;transition:opacity .3s}.mint-button:hover:before{opacity:1}.mint-button:hover{color:#fff;box-shadow:0 0 20px #00ff4180,inset 0 0 15px #00000080;background-color:#00ff411a}.mint-button.minting{background:linear-gradient(270deg,var(--darker),rgba(0,255,65,.1),var(--darker));background-size:200% 100%;animation:gradient-move 2s linear infinite}.mint-button.minting:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:2px;background:var(--primary);animation:slide 1.5s infinite}.mint-button.complete{background:rgba(0,100,0,.5);border-color:var(--light);color:var(--light)}.nft-info{background:rgba(108,99,255,.05);padding:1.5rem;border-radius:var(--radius);text-align:center;animation:fadeIn .5s ease}.email-form{width:100%;max-width:400px;display:flex;flex-direction:column;gap:1rem}.email-input-container{position:relative;display:flex;align-items:center;border:1px solid var(--glass-border);background:rgba(0,0,0,.3)}.email-icon{padding:0 10px;color:var(--primary);font-size:1.2rem}.email-form input{padding:1rem;border:none;background:transparent;color:var(--primary);font-size:1rem;transition:var(--transition);width:100%}.email-form input::placeholder{color:#00ff4180}.email-form input:focus{outline:none;box-shadow:0 0 0 2px var(--primary)}.subscribe-button{padding:1rem;border:1px solid var(--primary);background:var(--darker);color:var(--primary);font-weight:700;cursor:pointer;transition:var(--transition);text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden}.subscribe-button:before{content:"";position:absolute;left:-100%;top:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,255,65,.2),transparent);transition:.5s}.subscribe-button:hover:before{left:100%}.subscribe-button:hover{background:rgba(0,255,65,.1);box-shadow:0 0 10px #00ff414d}.completion-message{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem;animation:fadeIn .5s ease}.checkmark-circle{width:80px;height:80px;border-radius:50%;background:#4caf50;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.checkmark{width:30px;height:15px;border-left:4px solid white;border-bottom:4px solid white;transform:rotate(-45deg) translate(3px,-5px)}.chat-container{width:400px;display:flex;flex-direction:column;background:rgba(10,10,10,.8);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:0 0 15px #00ff4133;overflow:hidden;transition:var(--transition);position:relative}.chat-container:before{content:"SECURE TRANSMISSION";position:absolute;top:0;left:0;width:100%;text-align:center;padding:5px;font-size:.7rem;background:var(--accent);color:var(--darker);letter-spacing:1px}.chat-messages{flex:1;padding:2rem 1.5rem 1.5rem;overflow-y:auto;max-height:500px;display:flex;flex-direction:column;gap:1rem;background:linear-gradient(rgba(0,0,0,.2) 50%,rgba(0,0,0,.3) 50%),linear-gradient(90deg,rgba(59,130,246,.03),rgba(59,130,246,.03) 1px,transparent 1px,transparent 5px);background-size:100% 2px,5px 100%;font-family:Share Tech Mono,monospace}.message{display:flex;margin-bottom:.5rem;position:relative}.message.user{justify-content:flex-end}.message-bubble{max-width:80%;padding:.8rem 1.2rem;border-radius:0;animation:typewriter .3s steps(30);border:1px solid var(--glass-border);position:relative;overflow:hidden}.message-bubble:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%}.message.agent .message-bubble{background:rgba(15,23,42,.7);color:var(--light);font-family:Share Tech Mono,monospace;margin-left:10px}.message.agent .message-bubble:before{background:var(--primary)}.message.user .message-bubble{background:rgba(30,41,59,.7);color:var(--text);margin-right:10px;text-shadow:0 0 2px var(--accent)}.message.user .message-bubble:before{background:var(--secondary)}.chat-input-container{display:flex;padding:1rem;border-top:1px solid var(--glass-border);background:rgba(0,10,0,.5);position:relative}.chat-input-container:before{content:"> ";color:var(--primary);font-size:1.2rem;align-self:center;margin-right:8px}.chat-input-container input{flex:1;padding:.8rem 0;border:none;background:transparent;color:var(--primary);font-size:.9rem;font-family:Share Tech Mono,monospace}.chat-input-container input::placeholder{color:#00ff4180}.chat-input-container input:focus{outline:none}.chat-input-container button{padding:.5rem 1rem;background:transparent;color:var(--primary);border:1px solid var(--primary);cursor:pointer;transition:var(--transition);margin-left:10px}.chat-input-container button:hover{background:rgba(0,255,65,.1);box-shadow:0 0 10px #00ff414d}.quick-responses{display:flex;flex-wrap:wrap;gap:8px;padding:10px 15px;border-top:1px solid var(--glass-border)}.quick-response-btn{background:rgba(15,23,42,.7);border:1px solid var(--primary);color:var(--primary);padding:8px 12px;font-size:.85rem;cursor:pointer;transition:var(--transition);border-radius:2px;text-align:left;position:relative;overflow:hidden}.quick-response-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(59,130,246,.1),transparent);transition:.5s}.quick-response-btn:hover:before{left:100%}.quick-response-btn:hover{background:rgba(59,130,246,.1);box-shadow:0 0 8px #3b82f64d;transform:translateY(-2px)}footer{text-align:center;padding:1.5rem 0;color:#888;font-size:.9rem}@keyframes glitchIn{0%{opacity:0;transform:translateY(10px);clip-path:inset(0 0 100% 0)}20%{clip-path:inset(33% 0 66% 0)}35%{clip-path:inset(66% 0 33% 0)}50%{clip-path:inset(33% 0 66% 0);transform:translateY(5px)}60%{clip-path:inset(10% 0 90% 0)}70%{clip-path:inset(83% 0 17% 0)}80%,to{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}}@keyframes glitch-1{0%{clip:rect(20px,9999px,15px,0)}5%{clip:rect(18px,9999px,94px,0)}10%{clip:rect(62px,9999px,78px,0)}15%{clip:rect(62px,9999px,13px,0)}20%{clip:rect(80px,9999px,85px,0)}25%{clip:rect(63px,9999px,3px,0)}30%{clip:rect(75px,9999px,88px,0)}35%{clip:rect(54px,9999px,8px,0)}40%{clip:rect(66px,9999px,24px,0)}45%{clip:rect(29px,9999px,44px,0)}50%{clip:rect(29px,9999px,92px,0)}55%{clip:rect(66px,9999px,100px,0)}60%{clip:rect(67px,9999px,3px,0)}65%{clip:rect(84px,9999px,40px,0)}70%{clip:rect(84px,9999px,12px,0)}75%{clip:rect(58px,9999px,88px,0)}80%{clip:rect(24px,9999px,8px,0)}85%{clip:rect(65px,9999px,52px,0)}90%{clip:rect(38px,9999px,32px,0)}95%{clip:rect(90px,9999px,98px,0)}to{clip:rect(86px,9999px,67px,0)}}@keyframes glitch-2{0%{clip:rect(48px,9999px,29px,0)}5%{clip:rect(14px,9999px,66px,0)}10%{clip:rect(10px,9999px,13px,0)}15%{clip:rect(10px,9999px,9px,0)}20%{clip:rect(77px,9999px,38px,0)}25%{clip:rect(53px,9999px,35px,0)}30%{clip:rect(42px,9999px,23px,0)}35%{clip:rect(22px,9999px,35px,0)}40%{clip:rect(39px,9999px,88px,0)}45%{clip:rect(81px,9999px,61px,0)}50%{clip:rect(50px,9999px,26px,0)}55%{clip:rect(59px,9999px,26px,0)}60%{clip:rect(44px,9999px,62px,0)}65%{clip:rect(23px,9999px,81px,0)}70%{clip:rect(90px,9999px,59px,0)}75%{clip:rect(15px,9999px,61px,0)}80%{clip:rect(83px,9999px,98px,0)}85%{clip:rect(34px,9999px,52px,0)}90%{clip:rect(10px,9999px,81px,0)}95%{clip:rect(82px,9999px,92px,0)}to{clip:rect(95px,9999px,33px,0)}}@keyframes pulse{0%{box-shadow:0 0 #3b82f6b3;filter:brightness(1)}70%{box-shadow:0 0 0 15px #3b82f600;filter:brightness(1.5)}to{box-shadow:0 0 #3b82f600;filter:brightness(1)}}@keyframes expand{0%{transform:scale(1);opacity:.5}to{transform:scale(1.5);opacity:0}}@keyframes scan{0%{background-position:0 0}to{background-position:0 100%}}@keyframes scan-line{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes typewriter{0%{width:0}to{width:100%}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes slide{0%{left:-100%}to{left:100%}}@media (max-width: 1100px){.content-container{flex-direction:column}.chat-container{width:100%}}@media (max-width: 768px){.app-container{padding:1rem}.header h1{font-size:2.5rem}.step-indicator{padding:1.5rem}}@media (max-width: 480px){.header h1{font-size:2rem}.microphone{width:100px;height:100px}.mic-icon{width:40px;height:40px}.mic-icon:before{width:15px;height:30px;bottom:-5px;left:12.5px}#visualizer-container{position:relative;width:100%;height:100%;min-height:300px;overflow:hidden;border-radius:12px;background:linear-gradient(to bottom,#000022,#000011);box-shadow:0 0 30px #0096ff33 inset;z-index:5}#visualizer-container canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important}#visualizer-container:before{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:0 0 15px 2px #00c8ff80;pointer-events:none;z-index:10;opacity:.6}@keyframes particlePulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}#visualizer-container{--audio-level: 0;transition:box-shadow .1s ease-out}#visualizer-container[data-audio-active=true]{box-shadow:0 0 calc(30px + var(--audio-level) * 50px) rgba(0,150,255,calc(.2 + var(--audio-level) * .6))}@keyframes audioGlow{0%{opacity:.3;box-shadow:0 0 15px 2px #00c8ff4d}to{opacity:.8;box-shadow:0 0 30px 5px #00c8ffcc}}#visualizer-container[data-audio-active=true]:before{animation:audioGlow .2s alternate infinite}}.connect-wallet-button{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 12px;background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%);border:none;border-radius:12px;color:#fff;font-weight:600;font-size:.8rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;width:130px}.connect-wallet-button:hover{transform:translateY(-2px);box-shadow:0 6px 8px -1px #00000026,0 4px 6px -1px #0000001a;background:linear-gradient(135deg,#4f46e5 0%,#4338ca 100%)}.connect-wallet-button:active{transform:translateY(0)}.connect-wallet-button .wallet-icon{font-size:1.2rem}.connect-wallet-button:disabled{background:#e5e7eb;cursor:not-allowed;transform:none}.playback-controls{display:flex;flex-direction:column;align-items:center;gap:1rem}.playback-button,.rerecord-button{padding:.8rem 1.5rem;border-radius:8px;border:none;cursor:pointer;font-size:1rem;transition:all .2s ease}.playback-button{background-color:#4caf50;color:#fff}.playback-button:hover{background-color:#45a049}.rerecord-button{background-color:#f0f0f0;color:#333}.rerecord-button:hover{background-color:#e0e0e0}.proceed-text{margin-top:1rem;color:#666;font-size:.9rem;text-align:center}.decrypt-button{margin-top:1rem;padding:12px 24px;color:#fff;background:linear-gradient(145deg,#4ade80 0%,#22c55e 100%);border:none;border-radius:8px;font-weight:500;letter-spacing:.05em;cursor:pointer;display:flex;align-items:center;gap:8px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:all .3s ease}.decrypt-button:hover{transform:translateY(-2px) scale(1.05);background:linear-gradient(145deg,#22c55e 0%,#16a34a 100%);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.decrypt-button:active{transform:translateY(1px)}
