*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;min-height:100vh}:root{--color-primary: #FF8C42;--color-secondary: #0D1B2A;--color-accent: #FFD60A;--color-surface: #1B263B;--color-text: #E0E1DD;--color-text-muted: #8D99AE;--color-danger: #EF233C;--color-success: #06FFA5;--font-display: "DM Serif Display", serif;--font-mono: "Space Mono", monospace;--font-body: "Inter Variable", -apple-system, sans-serif;--space-xs: .5rem;--space-sm: 1rem;--space-md: 1.5rem;--space-lg: 2rem;--space-xl: 3rem;--space-2xl: 4rem;--transition-fast: .15s cubic-bezier(.22, 1, .36, 1);--transition-base: .3s cubic-bezier(.22, 1, .36, 1);--transition-slow: .6s cubic-bezier(.22, 1, .36, 1)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:var(--font-body);color:var(--color-text);background:var(--color-secondary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100%;width:100%}.app{position:relative;height:100vh;width:100vw;display:flex;flex-direction:column;overflow:hidden}.background-gradient{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(255,140,66,.15) 0%,transparent 60%);pointer-events:none;z-index:0}.background-noise{position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:1}.container{position:relative;flex:1;display:grid;grid-template-columns:320px 1fr 400px;gap:var(--space-xl);padding:var(--space-xl);z-index:2;max-width:1800px;margin:0 auto;width:100%}.left-panel{display:flex;align-items:flex-start;padding-top:var(--space-2xl)}.agent-profile{width:100%}.agent-avatar{position:relative;width:160px;height:160px;margin:0 auto var(--space-lg)}.avatar-ring{position:absolute;inset:-8px;border-radius:50%;background:conic-gradient(from 180deg,var(--color-primary),var(--color-accent),var(--color-primary));animation:rotate-slow 20s linear infinite;opacity:.6}.avatar-inner{position:relative;width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,var(--color-surface) 0%,#0f1820 100%);display:flex;align-items:center;justify-content:center;border:3px solid var(--color-secondary)}.avatar-letter{font-family:var(--font-display);font-size:4rem;color:var(--color-primary);font-style:italic}.agent-info{text-align:center}.agent-name{font-family:var(--font-display);font-size:3rem;font-style:italic;color:var(--color-text);margin-bottom:var(--space-xs);letter-spacing:-.02em}.agent-role{font-family:var(--font-mono);font-size:.875rem;color:var(--color-text-muted);margin-bottom:var(--space-xs);text-transform:uppercase;letter-spacing:.1em}.agent-language{font-family:var(--font-mono);font-size:.75rem;color:var(--color-primary);margin-bottom:var(--space-md)}.agent-traits{display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap}.trait-badge{padding:var(--space-xs) var(--space-sm);background:#ff8c421a;border:1px solid rgba(255,140,66,.3);border-radius:100px;font-family:var(--font-mono);font-size:.75rem;color:var(--color-primary);text-transform:capitalize}.center-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xl);padding:var(--space-xl) 0}.sonic-orb-container{position:relative;width:min(100%,600px,50vh);aspect-ratio:1 / 1;max-width:none;max-height:none;display:flex;align-items:center;justify-content:center}.sonic-orb-canvas{position:relative;z-index:2;width:100%;height:100%}.orb-glow{position:absolute;inset:-40px;background:radial-gradient(circle,rgba(255,140,66,.2) 0%,transparent 70%);border-radius:50%;filter:blur(60px);animation:pulse-glow 4s ease-in-out infinite;z-index:1}.call-controls{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);width:100%;max-width:400px}.call-duration{font-family:var(--font-mono);font-size:1.5rem;color:var(--color-primary);letter-spacing:.1em;padding:var(--space-sm) var(--space-lg);background:#ff8c421a;border:1px solid rgba(255,140,66,.3);border-radius:100px}.right-panel{display:flex;align-items:flex-start;padding-top:var(--space-2xl)}.agent-description{width:100%}.description-title{font-family:var(--font-display);font-size:3.5rem;font-style:italic;color:var(--color-text);margin-bottom:var(--space-lg);letter-spacing:-.02em;line-height:1.1}.description-text{font-family:var(--font-body);font-size:1rem;line-height:1.6;color:var(--color-text-muted)}button{cursor:pointer;border:none;font-family:var(--font-mono);font-size:.875rem;text-transform:uppercase;letter-spacing:.1em;transition:all var(--transition-base);outline:none}.btn-primary{padding:var(--space-md) var(--space-xl);background:linear-gradient(135deg,var(--color-primary) 0%,#ff6b1a 100%);color:var(--color-secondary);border-radius:100px;font-weight:700;box-shadow:0 8px 24px #ff8c4266;position:relative;overflow:hidden}.btn-primary:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-primary) 100%);opacity:0;transition:opacity var(--transition-base)}.btn-primary:hover:before{opacity:1}.btn-primary span{position:relative;z-index:1}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-danger{padding:var(--space-md) var(--space-xl);background:#ef233c33;color:var(--color-danger);border:2px solid var(--color-danger);border-radius:100px;font-weight:700}.btn-danger:hover{background:var(--color-danger);color:var(--color-secondary)}.btn-secondary{padding:var(--space-sm) var(--space-lg);background:transparent;color:var(--color-text-muted);border:1px solid rgba(141,153,174,.3);border-radius:100px;font-size:.75rem}.btn-secondary:hover{border-color:var(--color-primary);color:var(--color-primary)}.btn-mute{width:56px;height:56px;padding:0;display:flex;align-items:center;justify-content:center;background:#8d99ae33;color:var(--color-text);border:2px solid rgba(141,153,174,.4);border-radius:50%;cursor:pointer;transition:all var(--transition-base)}.btn-mute:hover{background:#8d99ae4d;border-color:var(--color-primary);color:var(--color-primary)}.btn-mute.muted{background:#ef233c33;color:var(--color-danger);border-color:var(--color-danger)}.btn-mute.muted:hover{background:var(--color-danger);color:var(--color-secondary)}.footer{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg) var(--space-xl);background:#0d1b2acc;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid rgba(255,140,66,.1)}.footer-link{background:none;border:none;color:var(--color-text-muted);font-family:var(--font-mono);font-size:.875rem;cursor:pointer;transition:color var(--transition-fast)}.footer-link:hover{color:var(--color-primary)}.footer-cta{display:flex;align-items:center;gap:var(--space-md)}.footer-text{font-family:var(--font-mono);font-size:.875rem;color:var(--color-text-muted)}.btn-footer-primary{padding:var(--space-sm) var(--space-lg);background:linear-gradient(135deg,#f36,#ff1744);color:#fff;border-radius:6px;font-weight:700}.btn-footer-secondary{padding:var(--space-sm) var(--space-lg);background:#ff8c421a;color:var(--color-primary);border:1px solid rgba(255,140,66,.3);border-radius:6px}.error-toast{position:fixed;top:var(--space-xl);right:var(--space-xl);padding:var(--space-lg);background:#ef233c1a;border:1px solid var(--color-danger);border-radius:12px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:1000;max-width:400px}.error-title{font-family:var(--font-mono);font-size:.875rem;color:var(--color-danger);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--space-xs)}.error-message{font-family:var(--font-body);font-size:.875rem;color:var(--color-text-muted);line-height:1.5}@keyframes rotate-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse-glow{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.5;transform:scale(1.05)}}@media(max-width:1400px){.container{grid-template-columns:280px 1fr 340px;gap:var(--space-lg)}.sonic-orb-container{width:500px;height:500px}.description-title{font-size:3rem}.agent-name{font-size:2.5rem}}@media(max-width:1024px){.container{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;text-align:center}.left-panel,.right-panel{padding-top:var(--space-lg)}.agent-traits{justify-content:center}}@media(max-width:768px){.container{padding:var(--space-md);gap:var(--space-md)}.sonic-orb-container{width:100%;max-width:400px;height:400px}.description-title,.agent-name{font-size:2rem}.footer{flex-direction:column;gap:var(--space-md)}.footer-cta{flex-direction:column;width:100%}}