:root{--bg: #0a0a0f;--surface: rgba(20, 20, 35, .65);--surface-solid: #14142380;--accent: #e94560;--accent-glow: rgba(233, 69, 96, .35);--accent-soft: rgba(233, 69, 96, .12);--text: #f0f0f5;--text-dim: #8888a0;--success: #34d399;--warning: #fbbf24;--danger: #ef4444;--radius: 16px;--radius-sm: 10px;--radius-xs: 6px;--glass-bg: rgba(15, 15, 25, .55);--glass-border: rgba(255, 255, 255, .08);--glass-blur: 20px;--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--transition: .3s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100dvh;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border)}.screen{display:none;opacity:0;transition:opacity .5s ease,transform .5s ease}.screen.active{display:flex;flex-direction:column;opacity:1;transform:translateY(0);animation:screenFadeIn .5s ease forwards}@keyframes screenFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.hidden{display:none!important}#permission-screen{position:relative;align-items:center;justify-content:center;min-height:100dvh;text-align:center;padding:2rem;overflow:hidden}.landing-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:radial-gradient(ellipse 60% 50% at 20% 30%,rgba(233,69,96,.15) 0%,transparent 70%),radial-gradient(ellipse 50% 60% at 80% 70%,rgba(99,102,241,.12) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 50% 50%,rgba(251,191,36,.06) 0%,transparent 60%);animation:meshDrift 12s ease-in-out infinite alternate}@keyframes meshDrift{0%{transform:scale(1) translate(0)}50%{transform:scale(1.05) translate(-2%,3%)}to{transform:scale(1) translate(2%,-2%)}}.permission-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1.25rem;max-width:480px}.logo-lockup{display:flex;align-items:center;gap:12px}.logo-icon{animation:logoSpin 20s linear infinite}@keyframes logoSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.permission-content h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.1}.accent{color:var(--accent)}.tagline{color:var(--text-dim);font-size:1.05rem;line-height:1.5;max-width:380px}.feature-badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.feature-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:100px;font-size:.78rem;font-weight:500;color:var(--text-dim);background:#ffffff0a;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.feature-badge svg{opacity:.7}.btn-primary{position:relative;background:var(--accent);color:#fff;border:none;padding:16px 48px;border-radius:100px;font-family:var(--font);font-size:1.05rem;font-weight:600;cursor:pointer;transition:transform var(--transition),box-shadow var(--transition);overflow:visible}.btn-primary:hover{transform:scale(1.04);box-shadow:0 0 30px var(--accent-glow)}.btn-primary:active{transform:scale(.97)}.btn-pulse{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:100px;border:2px solid var(--accent);opacity:0;animation:ctaPulse 2.5s ease-out infinite;pointer-events:none}@keyframes ctaPulse{0%{transform:scale(1);opacity:.5}to{transform:scale(1.15);opacity:0}}.small{font-size:.78rem;color:var(--text-dim);opacity:.7}.powered-by{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--text-dim);opacity:.5;margin-top:1rem}.powered-by svg{opacity:.6}#cooking-screen{position:relative;width:100vw;height:100dvh;overflow:hidden}#camera-feed{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}.texture-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px 256px}#top-bar{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:flex-start;padding:12px 16px;pointer-events:none}#top-bar>*{pointer-events:auto}#overlay-chips{display:flex;gap:8px;flex-wrap:wrap}.chip{padding:6px 14px;border-radius:100px;font-size:.78rem;font-weight:500;display:flex;align-items:center;gap:6px;animation:chipSlideIn .4s ease backwards}.chip:nth-child(1){animation-delay:.1s}.chip:nth-child(2){animation-delay:.2s}.chip:nth-child(3){animation-delay:.3s}@keyframes chipSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.dot{width:8px;height:8px;border-radius:50%;background:var(--success);animation:dotPulse 2s infinite}@keyframes dotPulse{0%,to{opacity:1;box-shadow:0 0 #34d39966}50%{opacity:.6;box-shadow:0 0 8px 2px #34d39933}}#live-indicator{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:100px;background:#ef444426;border:1px solid rgba(239,68,68,.25);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:.7rem;font-weight:700;letter-spacing:.08em;color:#ef4444;animation:chipSlideIn .4s ease backwards;animation-delay:.15s}.live-dot{width:7px;height:7px;border-radius:50%;background:#ef4444;animation:liveBlink 1.2s ease-in-out infinite}@keyframes liveBlink{0%,to{opacity:1}50%{opacity:.2}}.live-text{text-transform:uppercase}#step-progress{position:absolute;top:56px;left:16px;right:16px;z-index:10;height:4px;border-radius:4px;overflow:hidden;opacity:0;transition:opacity var(--transition)}#step-progress.visible{opacity:1}#step-progress-inner{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#ff6b6b);border-radius:4px;transition:width .6s ease}#speaking-indicator{position:absolute;bottom:200px;left:50%;transform:translate(-50%);z-index:15;display:flex;align-items:center;gap:10px;padding:10px 20px;border-radius:100px;font-size:.82rem;font-weight:500;color:var(--text);animation:fadeSlideUp .3s ease}@keyframes fadeSlideUp{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}#waveform-canvas{display:block}#timer-area{position:absolute;bottom:200px;right:16px;z-index:10;display:flex;flex-direction:column;gap:10px;max-height:50vh;overflow-y:auto;pointer-events:none}.timer-card{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:var(--radius);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);min-width:170px;animation:timerSlideIn .4s ease backwards}@keyframes timerSlideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.timer-ring-wrap{position:relative;width:48px;height:48px;flex-shrink:0}.timer-ring-wrap svg{transform:rotate(-90deg)}.timer-ring-bg{fill:none;stroke:#ffffff0f;stroke-width:3}.timer-ring-fg{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .5s ease}.timer-ring-fg.expired{stroke:var(--warning)}.timer-ring-time{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;font-variant-numeric:tabular-nums}.timer-info{display:flex;flex-direction:column;gap:2px}.timer-label{font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;font-weight:500}.timer-value{font-size:1.1rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}.timer-card.expired .timer-value{color:var(--warning)}#bottom-panel{position:absolute;bottom:0;left:0;right:0;z-index:20;border-radius:var(--radius) var(--radius) 0 0;padding:10px 16px;display:flex;flex-direction:column;gap:8px}#session-badge{display:flex;align-items:center;gap:14px;font-size:.7rem;color:var(--text-dim);white-space:nowrap;overflow-x:auto}#connection-quality{display:flex;align-items:center;gap:6px}.signal-bars{display:flex;align-items:flex-end;gap:2px;height:14px}.signal-bars .bar{width:3px;border-radius:1px;background:var(--text-dim);opacity:.25;transition:opacity var(--transition),background var(--transition)}.bar-1{height:4px}.bar-2{height:7px}.bar-3{height:10px}.bar-4{height:14px}.signal-bars.quality-good .bar{background:var(--success);opacity:1}.signal-bars.quality-ok .bar{background:var(--warning)}.signal-bars.quality-ok .bar-1,.signal-bars.quality-ok .bar-2,.signal-bars.quality-ok .bar-3{opacity:1}.signal-bars.quality-poor .bar{background:var(--danger)}.signal-bars.quality-poor .bar-1,.signal-bars.quality-poor .bar-2{opacity:1}#controls{display:flex;align-items:center;justify-content:center;gap:12px}.btn-danger{display:inline-flex;align-items:center;gap:6px;background:#ef444433;color:#ef4444;border:1px solid rgba(239,68,68,.25);padding:8px 22px;border-radius:100px;font-family:var(--font);font-size:.85rem;font-weight:600;cursor:pointer;transition:background var(--transition),transform var(--transition)}.btn-danger:hover{background:#ef444459;transform:scale(1.03)}#demo-speed-toggle{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--text-dim);cursor:pointer;padding:6px 14px;border-radius:100px}#demo-speed-toggle input{accent-color:var(--accent);width:14px;height:14px}#transcript-panel{position:absolute;bottom:90px;left:16px;z-index:15;width:min(360px,calc(100vw - 32px));max-height:35dvh;border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;transition:max-height var(--transition),opacity var(--transition)}#transcript-panel.collapsed{max-height:38px}#transcript-header{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;font-size:.78rem;font-weight:600;color:var(--text-dim);cursor:pointer;flex-shrink:0}.btn-icon{background:none;border:none;color:var(--text-dim);font-size:.9rem;cursor:pointer;transition:transform var(--transition)}#transcript-panel.collapsed .btn-icon{transform:rotate(180deg)}#transcript-body{flex:1;overflow-y:auto;padding:0 14px 14px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.transcript-entry{display:flex;align-items:flex-start;gap:8px;animation:bubbleSlideIn .3s ease backwards}@keyframes bubbleSlideIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.transcript-avatar{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;flex-shrink:0;margin-top:2px}.transcript-entry.cook .transcript-avatar{background:#6366f133;color:#818cf8}.transcript-entry.chef .transcript-avatar{background:var(--accent-soft);color:var(--accent)}.transcript-bubble{padding:8px 12px;border-radius:12px 12px 12px 4px;font-size:.8rem;line-height:1.45;max-width:280px}.transcript-entry.cook .transcript-bubble{background:#6366f11a;border:1px solid rgba(99,102,241,.15);color:var(--text)}.transcript-entry.chef .transcript-bubble{background:var(--accent-soft);border:1px solid rgba(233,69,96,.15);color:var(--text);border-radius:12px 12px 4px}#error-banner{position:fixed;bottom:0;left:0;right:0;background:#ef4444e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;font-size:.85rem;z-index:100}.reconnecting-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#0a0a1499;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:.95rem;font-weight:500;transition:opacity .3s ease}.reconnecting-overlay.hidden{opacity:0;pointer-events:none}.reconnecting-spinner{width:28px;height:28px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:768px){#transcript-panel{width:380px;bottom:100px}#timer-area,#speaking-indicator{bottom:210px}}@media(min-width:1024px){#transcript-panel{width:400px;max-height:40dvh}}