.app-container{position:relative;width:100vw;height:100vh;background:#000;overflow:hidden}.page-wrapper{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.performance-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.camera-feed{position:absolute;top:20px;right:20px;width:320px;height:240px;border-radius:12px;overflow:hidden;border:2px solid rgba(255,165,0,.3);box-shadow:0 0 20px #ffa50033;z-index:100;transform:scale(.75);transform-origin:top right;transition:all .3s ease}.camera-feed:hover{transform:scale(.85);border-color:#ffa50080;box-shadow:0 0 30px #ffa5004d}.audio-start-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000000b3;backdrop-filter:blur(4px);z-index:1000;transition:all .5s ease}.audio-start-overlay.fading-out{opacity:0;pointer-events:none}.audio-card{background:linear-gradient(135deg,#000000f2,#111827f2);backdrop-filter:blur(12px);border-radius:16px;border:2px solid rgba(255,165,0,.7);padding:2rem;box-shadow:0 0 40px #ffa50066,inset 0 1px #ffffff1a,0 1px 3px #0000001f;transform:scale(1);transition:all .3s ease}.audio-card:hover{transform:scale(1.02);box-shadow:0 0 60px #ffa50080,inset 0 1px #ffffff26}.control-button{position:relative;padding:.75rem 1.5rem;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:8px;border:1px solid rgba(251,146,60,.5);box-shadow:0 4px 15px #f973164d;transition:all .3s ease;cursor:pointer;overflow:hidden}.control-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #f9731666}.control-button:active{transform:translateY(0)}.control-button:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 50%);opacity:0;transition:opacity .3s ease}.control-button:hover:after{opacity:1}.status-indicator{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#000c;border:1px solid rgba(255,165,0,.3);border-radius:20px;font-size:.875rem;color:#ffffffe6}.status-dot{width:8px;height:8px;border-radius:50%;animation:pulse 2s ease-in-out infinite}.status-dot.active{background:#22c55e;box-shadow:0 0 10px #22c55e80}.status-dot.inactive{background:#ef4444;box-shadow:0 0 10px #ef444480}.status-dot.loading{background:#fb923c;box-shadow:0 0 10px #fb923c80}.feature-list{display:flex;flex-direction:column;gap:.75rem;margin:1.5rem 0}.feature-item{display:flex;align-items:center;gap:.75rem;color:#ffffffe6;font-size:.875rem}.feature-dot{width:6px;height:6px;background:#fb923c;border-radius:50%;flex-shrink:0}.s3-title{font-size:2rem;font-weight:700;letter-spacing:.05em;background:linear-gradient(135deg,#fff,#fdba74);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;margin-bottom:.5rem}.s3-subtitle{font-size:1.125rem;color:#fdba74;font-weight:500;text-align:center;margin-bottom:1rem}.loading-spinner{width:20px;height:20px;border:2px solid rgba(251,146,60,.3);border-top-color:#fb923c;border-radius:50%;animation:spin 1s linear infinite}.loading-container{display:flex;align-items:center;gap:.75rem;color:#fdba74;font-size:.875rem;font-weight:500}.decoration-orb{position:absolute;border-radius:50%;pointer-events:none;animation:float 3s ease-in-out infinite}.decoration-orb.small{width:8px;height:8px;background:#fb923c33}.decoration-orb.medium{width:12px;height:12px;background:#fb923c26;animation-delay:.5s}.decoration-orb.large{width:16px;height:16px;background:#fb923c1a;animation-delay:1s}.divider-line{width:48px;height:4px;background:linear-gradient(90deg,#f97316,#fdba74);border-radius:2px;margin:0 auto}.fade-enter{opacity:0;transform:translateY(20px)}.fade-enter-active{opacity:1;transform:translateY(0);transition:all .5s ease-out}.fade-exit{opacity:1;transform:scale(1)}.fade-exit-active{opacity:0;transform:scale(.95);transition:all .3s ease-in}@media (max-width: 768px){.audio-card{width:90%;padding:1.5rem}.s3-title{font-size:1.5rem}.s3-subtitle{font-size:1rem}.camera-feed{width:160px;height:120px;transform:scale(1)}}@media (max-width: 640px){.control-button{padding:.5rem 1rem;font-size:.875rem}.feature-item{font-size:.75rem}}@media (prefers-color-scheme: dark){.app-container{background:#000}.audio-card{background:linear-gradient(135deg,#000000fa,#111827fa)}}@media print{.camera-feed,.control-button,.loading-spinner{display:none!important}}@tailwind base;@tailwind components;@tailwind utilities;:root{--purple-400: rgb(192 132 252);--purple-500: rgb(168 85 247);--purple-600: rgb(147 51 234);--pink-400: rgb(244 114 182);--pink-500: rgb(236 72 153);--pink-600: rgb(219 39 119);--white-100: rgba(255, 255, 255, 1);--white-90: rgba(255, 255, 255, .9);--white-80: rgba(255, 255, 255, .8);--white-70: rgba(255, 255, 255, .7);--white-60: rgba(255, 255, 255, .6);--white-50: rgba(255, 255, 255, .5);--white-40: rgba(255, 255, 255, .4);--white-20: rgba(255, 255, 255, .2);--white-10: rgba(255, 255, 255, .1);--white-5: rgba(255, 255, 255, .05);--black-100: rgba(0, 0, 0, 1);--black-80: rgba(0, 0, 0, .8);--black-40: rgba(0, 0, 0, .4)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0;overflow:hidden}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;background-color:#000;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation}@keyframes fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .8s ease-out forwards}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes glowPulse{0%,to{box-shadow:0 0 20px #ffa50066}50%{box-shadow:0 0 40px #ffa50099}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.animate-spin{animation:spin 1s linear infinite}.animate-fadeIn{animation:fadeIn .8s ease-out forwards}.animate-fadeOut{animation:fadeOut .5s ease-out forwards}.animate-float{animation:float 3s ease-in-out infinite}.animate-glowPulse{animation:glowPulse 2s ease-in-out infinite}.backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.backdrop-blur-md{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.backdrop-blur-lg{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.s3-card{background:linear-gradient(135deg,var(--black-95) 0%,var(--gray-900) 100%);border-radius:16px;border:2px solid rgba(255,165,0,.7);box-shadow:0 0 40px #ffa50066,inset 0 1px #ffffff1a,0 1px 3px #0000001f;transition:all .3s ease}.s3-card:hover{transform:scale(1.02);box-shadow:0 0 60px #ffa50080,inset 0 1px #ffffff26}.s3-button{position:relative;padding:1rem 2rem;background:linear-gradient(135deg,var(--orange-500) 0%,var(--orange-600) 100%);color:#fff;font-size:1.125rem;font-weight:700;border-radius:.5rem;border:1px solid rgba(251,146,60,.5);box-shadow:0 10px 25px #f9731680;transition:all .3s ease;overflow:hidden;cursor:pointer}.s3-button:hover{transform:scale(1.05);box-shadow:0 15px 35px #f9731699}.s3-button:active{transform:scale(.95)}.s3-button:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--orange-600) 0%,var(--orange-700) 100%);opacity:0;transition:opacity .3s ease}.s3-button:hover:before{opacity:1}.orb{position:absolute;border-radius:50%;pointer-events:none}.orb-orange{background:radial-gradient(circle,rgba(255,165,0,.3) 0%,transparent 70%)}.orb-purple{background:radial-gradient(circle,rgba(139,92,246,.3) 0%,transparent 70%)}.orb-cyan{background:radial-gradient(circle,rgba(6,182,212,.3) 0%,transparent 70%)}.grid-pattern{position:absolute;inset:0;pointer-events:none;opacity:.03;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:50px 50px}.gpu-accelerated{transform:translateZ(0);will-change:transform}.no-select{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.frame-glow{position:absolute;inset:0;pointer-events:none;z-index:0;--frame-thickness: 20px;background:linear-gradient(to top,#0000,#000),linear-gradient(to right,#0000,#000),linear-gradient(to bottom,#0000,#000),linear-gradient(to left,#0000,#000);background-repeat:no-repeat;background-size:100% var(--frame-thickness),var(--frame-thickness) 100%,100% var(--frame-thickness),var(--frame-thickness) 100%;background-position:top,right,bottom,left;border-radius:.5rem}.overflow-x-auto::-webkit-scrollbar{display:none}.overflow-x-auto{-ms-overflow-style:none;scrollbar-width:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0003;border-radius:4px}::-webkit-scrollbar-thumb{background:var(--purple-500);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--purple-600)}button,a,[role=button]{-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}@media (max-width: 768px){html{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}p,h1,h2,h3,h4,h5,h6,li,td,th,span{-webkit-user-select:text;user-select:text}}