*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #ff6b35;--primary-dark: #e85a2a;--secondary: #ffc107;--bg-dark: #0a0a0f;--bg-card: rgba(20, 20, 30, .8);--text: #ffffff;--text-muted: #8892a0;--confidence: #4ade80;--excitement: #fbbf24;--stress: #ef4444;--uncertainty: #a78bfa;--calm: #38bdf8;--gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-dark);color:var(--text);min-height:100vh;overflow-x:hidden}.app{position:relative;min-height:100vh;display:flex;flex-direction:column}.bg-gradient{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 20% 20%,rgba(255,107,53,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(255,193,7,.1) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(138,43,226,.05) 0%,transparent 70%);pointer-events:none;z-index:0}.particles{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:0}.header{position:relative;z-index:1;text-align:center;padding:2rem}.logo{display:inline-flex;align-items:center;gap:.75rem}.logo-icon{font-size:2.5rem;animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{filter:drop-shadow(0 0 10px rgba(255,107,53,.5))}50%{filter:drop-shadow(0 0 25px rgba(255,107,53,.8))}}.logo-text{font-size:2.5rem;font-weight:800;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline{margin-top:.5rem;color:var(--text-muted);font-size:1rem;letter-spacing:.1em;text-transform:uppercase}.main{flex:1;display:flex;flex-direction:column;align-items:center;padding:1rem 2rem 2rem;gap:2rem;position:relative;z-index:1}.emotion-display{text-align:center}.emotion-ring{width:140px;height:140px;border-radius:50%;background:var(--bg-card);border:4px solid rgba(255,107,53,.3);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;position:relative;transition:all .5s ease}.emotion-ring:before{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border-radius:50%;background:conic-gradient(from 0deg,var(--primary),var(--secondary),var(--primary));opacity:0;transition:opacity .5s ease;z-index:-1;animation:rotate 3s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.emotion-ring.active:before{opacity:.6}.emotion-ring.active{border-color:transparent}.emotion-icon{font-size:3.5rem;transition:transform .3s ease}.emotion-ring.active .emotion-icon{animation:bounce .6s ease}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.emotion-label{font-size:1.5rem;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.emotion-confidence{color:var(--text-muted);font-size:.9rem;margin-top:.25rem}.visualizer-container{width:100%;max-width:600px;background:var(--bg-card);border-radius:16px;padding:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}#visualizer{width:100%;height:120px;display:block}.record-btn{position:relative;width:200px;height:60px;border:none;background:var(--gradient);border-radius:30px;cursor:pointer;transition:all .3s ease;box-shadow:0 10px 40px #ff6b354d}.record-btn:hover{transform:translateY(-2px);box-shadow:0 15px 50px #ff6b3566}.record-btn:active{transform:translateY(0)}.record-btn-inner{display:flex;align-items:center;justify-content:center;gap:.75rem;color:#fff;font-weight:600;font-size:1rem}.mic-icon{width:24px;height:24px}.pulse-ring{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:34px;border:2px solid var(--primary);opacity:0;pointer-events:none}.record-btn.recording .pulse-ring{animation:pulse-out 1.5s ease-out infinite}@keyframes pulse-out{0%{transform:scale(1);opacity:.8}to{transform:scale(1.3);opacity:0}}.record-btn.recording{background:linear-gradient(135deg,#ef4444,#dc2626);animation:recording-pulse 1s ease-in-out infinite}@keyframes recording-pulse{0%,to{box-shadow:0 10px 40px #ef444466}50%{box-shadow:0 10px 60px #ef444499}}.response-container{display:flex;gap:1rem;max-width:600px;width:100%;background:var(--bg-card);border-radius:20px;padding:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);opacity:0;transform:translateY(20px);transition:all .5s ease}.response-container.visible{opacity:1;transform:translateY(0)}.response-avatar{flex-shrink:0}.avatar-img{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid var(--primary)}.response-content{flex:1}.response-header{font-weight:700;color:var(--primary);margin-bottom:.5rem}.response-text{color:var(--text);line-height:1.6;font-size:1rem}.transcript-container{max-width:600px;width:100%;background:var(--bg-card);border-radius:16px;padding:1rem 1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);display:none}.transcript-container.visible{display:block;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.transcript-label{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.transcript-text{color:var(--text);font-style:italic}.emotion-breakdown{max-width:500px;width:100%;background:var(--bg-card);border-radius:20px;padding:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);opacity:0;transform:translateY(20px);transition:all .5s ease}.emotion-breakdown.visible{opacity:1;transform:translateY(0)}.breakdown-title{font-weight:700;margin-bottom:1rem;text-align:center;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;font-size:.85rem}.breakdown-bars{display:flex;flex-direction:column;gap:.75rem}.bar-item{display:grid;grid-template-columns:100px 1fr 50px;align-items:center;gap:1rem}.bar-label{font-size:.9rem;color:var(--text-muted)}.bar-track{height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden}.bar-fill{height:100%;background:var(--confidence);border-radius:4px;transition:width .5s ease}.bar-fill.excitement{background:var(--excitement)}.bar-fill.stress{background:var(--stress)}.bar-fill.uncertainty{background:var(--uncertainty)}.bar-fill.calm{background:var(--calm)}.bar-value{font-size:.85rem;color:var(--text);text-align:right;font-weight:600}.footer{text-align:center;padding:1.5rem;position:relative;z-index:1}.footer-text{color:var(--text-muted);font-size:.85rem}@media (max-width: 640px){.header{padding:1.5rem 1rem}.logo-text{font-size:2rem}.main{padding:1rem;gap:1.5rem}.emotion-ring{width:120px;height:120px}.emotion-icon{font-size:3rem}.bar-item{grid-template-columns:80px 1fr 40px;gap:.5rem}.bar-label{font-size:.8rem}}.response-container.speaking .avatar-img{animation:speaking .3s ease infinite alternate}@keyframes speaking{0%{transform:scale(1)}to{transform:scale(1.05)}}