:root{--bg:#0a0a0f;--surface:#13131a;--border:#1e1e2e;--accent:#7c6af7;--accent2:#f76a8c;--accent3:#6af7c8;--text:#e8e8f0;--muted:#5a5a7a;--orb-idle:#2a2a4a;--orb-listen:#7c6af7;--orb-speak:#f76a8c}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Inter,system-ui,-apple-system,sans-serif;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:100;opacity:.4;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");position:fixed;inset:0}.ambient{filter:blur(120px);pointer-events:none;z-index:0;border-radius:50%;position:fixed}.ambient-1{background:#7c6af712;width:500px;height:500px;top:-100px;left:-100px}.ambient-2{background:#f76a8c0f;width:400px;height:400px;bottom:-100px;right:-100px}.ambient-3{background:#6af7c80d;width:300px;height:300px;top:40%;left:60%}#root{z-index:1;position:relative}.app-container{flex-direction:column;justify-content:flex-start;align-items:center;gap:2rem;max-width:1200px;min-height:100vh;margin:0 auto;padding:2rem;display:flex}header{text-align:center;margin-bottom:1rem}header h1{background:linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.5rem;font-size:3rem;font-weight:800}header p{color:var(--muted);letter-spacing:.2em;text-transform:uppercase;font-size:.8rem}.main-layout{grid-template-columns:1fr 350px;gap:2rem;width:100%;display:grid}.video-section{flex-direction:column;gap:1rem;display:flex}.video-container{aspect-ratio:16/9;background:var(--surface);border:1px solid var(--border);border-radius:20px;width:100%;position:relative;overflow:hidden;box-shadow:0 20px 40px #0006}.overlay-canvas{pointer-events:none;z-index:5;width:100%;height:100%;position:absolute;top:0;left:0}video{object-fit:cover;width:100%;height:100%}.video-overlay{flex-direction:column;gap:.5rem;display:flex;position:absolute;top:1rem;left:1rem}.status-pill{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border);text-transform:uppercase;background:#00000080;border-radius:99px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.7rem;font-weight:600;display:flex}.status-dot{border-radius:50%;width:8px;height:8px}.status-alert{color:#4ade80}.status-alert .status-dot{background:#4ade80;box-shadow:0 0 10px #4ade80}.status-drowsy{color:#f87171}.status-drowsy .status-dot{background:#f87171;box-shadow:0 0 10px #f87171}.status-pre-drowsy{color:#fbbf24}.status-pre-drowsy .status-dot{background:#fbbf24;box-shadow:0 0 10px #fbbf24}.orb-section{background:var(--surface);border:1px solid var(--border);border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:3rem;padding:3rem;display:flex}.orb-wrapper{justify-content:center;align-items:center;width:250px;height:250px;display:flex;position:relative}.orb{border:1px solid var(--border);cursor:pointer;z-index:2;background:radial-gradient(circle at 35% 35%,#2a2a5a,#0a0a1a);border-radius:50%;justify-content:center;align-items:center;width:180px;height:180px;transition:all .4s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative}.orb.listening{border-color:var(--accent);background:radial-gradient(circle at 35% 35%,#4a3aaa,#1a1040);box-shadow:0 0 40px #7c6af766}.orb.speaking{border-color:var(--accent2);background:radial-gradient(circle at 35% 35%,#aa3a5a,#2a0a14);box-shadow:0 0 40px #f76a8c66}.emotion-card{flex-direction:column;gap:1rem;width:100%;display:flex}.emotion-grid{grid-template-columns:1fr 1fr;gap:.5rem;display:grid}.emotion-pill{border:1px solid var(--border);background:#ffffff08;border-radius:12px;padding:.75rem}.emotion-label{color:var(--muted);text-transform:uppercase;margin-bottom:.25rem;font-size:.6rem}.emotion-value{font-size:.8rem;font-weight:500}.transcript{width:100%;max-height:150px;color:var(--muted);background:#0003;border-radius:12px;flex:1;margin-top:1rem;padding:1rem;font-size:.8rem;line-height:1.5;overflow-y:auto}.telemetry-grid{grid-template-columns:repeat(5,1fr);gap:.5rem;width:100%;margin-top:1rem;display:grid}.telemetry-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem;display:flex}.telemetry-item .label{color:var(--muted);text-transform:uppercase;font-size:.6rem}.telemetry-item .value{color:var(--accent3);font-size:.9rem;font-weight:600}.orb-status-text{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.9rem;font-weight:600;position:absolute;bottom:-10px}.connection-status{color:var(--muted);align-items:center;gap:.5rem;font-size:.6rem;display:flex}.connection-status .status-dot.connected{background:var(--accent3);box-shadow:0 0 8px var(--accent3)}.transcript::-webkit-scrollbar{width:4px}.transcript::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}.transcript-line{border-bottom:1px solid #ffffff0d;margin-bottom:.5rem;padding-bottom:.25rem}.transcript-line span{color:var(--accent);margin-right:.5rem;font-weight:600}@media (width<=900px){.main-layout{grid-template-columns:1fr}}