:root{--ypai-bg-primary: #030304;--ypai-bg-secondary: #020202;--ypai-purple-primary: #6b28d0;--ypai-purple-secondary: #5e22b0;--ypai-purple-accent: #6b28d0;--ypai-purple-dark: #4a1b90;--ypai-purple-light: #8b5cf6;--ypai-purple-glow: #a855f7;--ypai-text-primary: #ffffff;--ypai-text-secondary: rgba(255, 255, 255, .8);--ypai-text-tertiary: rgba(255, 255, 255, .6);--ypai-glass-border: rgba(255, 255, 255, .07);--ypai-glass-bg: rgba(255, 255, 255, .025);--ypai-glass-highlight: rgba(255, 255, 255, .04);--ypai-status-recording: #ef4444;--ypai-status-paused: #f59e0b;--ypai-status-ready: #10b981;--ypai-status-error: #dc2626;--ypai-transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--ypai-transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--ypai-transition-smooth: .4s cubic-bezier(.16, 1, .3, 1);--font-serif: "Lora", Georgia, serif;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "SF Mono", "Monaco", "Consolas", "Liberation Mono", monospace}.ypai-speaking-section{position:relative;min-height:100vh;padding:4rem 0;overflow:hidden;background:var(--ypai-bg-primary)}.ypai-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:var(--ds-z-base);pointer-events:none}.ypai-gradient{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(168,85,247,.1),transparent 55%),radial-gradient(ellipse 60% 50% at 50% 120%,rgba(139,92,246,.07),transparent 55%),radial-gradient(ellipse 40% 40% at 80% 50%,rgba(107,40,208,.04),transparent 50%)}.ypai-mesh{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(var(--ypai-glass-border) 1px,transparent 1px),linear-gradient(90deg,var(--ypai-glass-border) 1px,transparent 1px);background-size:50px 50px;opacity:.02}.ypai-container{position:relative;z-index:var(--ds-z-raised);max-width:1400px;margin:0 auto;padding:0 2rem}.ypai-speaking-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr);gap:var(--ds-space-10);align-items:start}@media(max-width:1024px){.ypai-speaking-grid{grid-template-columns:1fr;gap:var(--ds-space-6)}}.ypai-card{background:linear-gradient(135deg,#0f172aa6,#0a0f1e8c);backdrop-filter:blur(48px) saturate(1.15);-webkit-backdrop-filter:blur(48px) saturate(1.15);border:1px solid var(--ypai-glass-border);border-radius:var(--ds-radius-2xl);padding:var(--ds-space-8);position:relative;box-shadow:0 0 0 1px #a855f70a inset,0 1px #ffffff08 inset,0 8px 32px #00000073,0 2px 8px #0003;transition:box-shadow var(--ypai-transition-smooth),border-color var(--ypai-transition-smooth),transform var(--ypai-transition-smooth)}.ypai-card:hover{border-color:#a855f71f;box-shadow:0 0 0 1px #a855f70f inset,0 1px #ffffff0a inset,0 12px 40px #00000080,0 4px 12px #00000040,0 0 24px #a855f70a;transform:translateY(-1px)}.ypai-card-premium{border:1px solid rgba(168,85,247,.15);box-shadow:0 0 0 1px #a855f714 inset,0 1px #ffffff0a inset,0 12px 40px #0000008c,0 0 60px #a855f714}.ypai-card-premium:hover{border-color:#a855f738;box-shadow:0 0 0 1px #a855f71a inset,0 1px #ffffff0d inset,0 16px 48px #0009,0 0 80px #a855f71a;transform:translateY(-2px)}.ypai-card:before{content:"";position:absolute;top:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06) 30%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.06) 70%,transparent);border-radius:0 0 1px 1px;pointer-events:none}.ypai-speaking-meta{position:sticky;top:2rem}.eyebrow{font-family:var(--font-sans);font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ypai-purple-light);margin-bottom:var(--ds-space-4)}.ypai-speaking-progress{width:100%;height:5px;background:#ffffff0f;border-radius:var(--ds-radius-pill);overflow:hidden;margin-bottom:var(--ds-space-6);position:relative;box-shadow:inset 0 1px 2px #0000004d}.ypai-speaking-progress-fill{height:100%;background:linear-gradient(90deg,var(--ypai-purple-dark),var(--ypai-purple-primary),var(--ypai-purple-light));border-radius:var(--ds-radius-pill);transition:width .5s cubic-bezier(.4,0,.2,1);position:relative;box-shadow:0 0 12px #a855f766}.ypai-speaking-progress-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.25) 50%,transparent 100%);animation:ypai-progress-shimmer 2.5s ease-in-out infinite}@keyframes ypai-progress-shimmer{0%{transform:translate(-100%)}to{transform:translate(200%)}}.ypai-speaking-progress-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--ds-space-2);font-family:var(--font-sans);font-size:.75rem;font-weight:600;color:var(--ypai-text-tertiary)}.ypai-speaking-progress-label .ypai-progress-percent{color:var(--ypai-purple-light);font-variant-numeric:tabular-nums}.ypai-speaking-title{font-family:var(--font-serif);font-size:1.75rem;font-weight:600;color:var(--ypai-text-primary);margin:0 0 1.25rem;letter-spacing:-.02em;line-height:1.3}.ypai-speaking-tags{display:flex;flex-wrap:wrap;gap:var(--ds-space-3);margin-bottom:var(--ds-space-6)}.ypai-tag{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;background:#a855f714;border:1px solid rgba(168,85,247,.2);border-radius:var(--ds-radius-pill);font-family:var(--font-sans);font-size:.8125rem;font-weight:500;color:var(--ypai-text-secondary);transition:background var(--ypai-transition-fast),border-color var(--ypai-transition-fast),transform var(--ypai-transition-fast),box-shadow var(--ypai-transition-fast)}.ypai-tag:hover{background:#a855f724;border-color:#a855f759;transform:translateY(-1px);box-shadow:0 4px 12px #a855f71a}.ypai-tag-icon{display:inline-flex;align-items:center;font-size:.875rem;opacity:.8}.ypai-speaking-instructions{list-style:none;padding:0;margin:0 0 1.5rem}.ypai-speaking-instructions li{font-family:var(--font-sans);font-size:.9375rem;line-height:1.65;color:var(--ypai-text-secondary);padding:.5rem 0 .5rem 1.75rem;position:relative;margin-bottom:var(--ds-space-1);border-radius:var(--ds-radius-md);transition:background var(--ypai-transition-fast)}.ypai-speaking-instructions li:hover{background:#ffffff05}.ypai-speaking-instructions li:before{content:"";position:absolute;left:.25rem;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:var(--ds-radius-full);background:var(--ypai-purple-primary);box-shadow:0 0 6px #6b28d066}.ypai-speaking-instructions--numbered{counter-reset:instruction-counter}.ypai-speaking-instructions--numbered li{counter-increment:instruction-counter;padding-left:2.25rem}.ypai-speaking-instructions--numbered li:before{content:counter(instruction-counter);width:20px;height:20px;border-radius:var(--ds-radius-full);background:#a855f71f;border:1px solid rgba(168,85,247,.25);color:var(--ypai-purple-light);font-size:.6875rem;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:none;left:0;top:.625rem;transform:none}.ypai-speaking-counter{display:flex;align-items:center;gap:var(--ds-space-3);font-family:var(--font-sans);font-size:.875rem;padding-top:var(--ds-space-4);border-top:1px solid rgba(255,255,255,.06)}.ypai-speaking-counter .completed{color:#10b981;font-weight:600;display:inline-flex;align-items:center;gap:.375rem}.ypai-speaking-counter .separator{color:#fff3}.ypai-speaking-counter .remaining{color:#ffffff80;font-weight:500;display:inline-flex;align-items:center;gap:.375rem}.ypai-session-info{display:flex;flex-direction:column;gap:0}.ypai-session-info-row{display:flex;justify-content:space-between;align-items:center;padding:.625rem 0;border-bottom:1px solid rgba(255,255,255,.04);font-family:var(--font-sans);font-size:.8125rem}.ypai-session-info-row:last-child{border-bottom:none}.ypai-session-info-row .ypai-info-label{color:var(--ypai-text-tertiary);font-weight:500}.ypai-session-info-row .ypai-info-value{color:var(--ypai-text-primary);font-weight:600;font-variant-numeric:tabular-nums}.ypai-speaking-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ds-space-8);margin-bottom:var(--ds-space-4)}.ypai-speaking-prompt{flex:1}.ypai-speaking-prompt .eyebrow{margin-bottom:var(--ds-space-2)}.ypai-speaking-question{font-family:var(--font-serif);font-size:1.6rem;font-weight:600;letter-spacing:-.02em;color:#ffffffe0;margin:0;line-height:1.35}.ypai-speaking-question .gradient{background:linear-gradient(135deg,var(--ypai-purple-light),var(--ypai-purple-glow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.ypai-speaking-timer{display:flex;flex-direction:column;align-items:flex-end;gap:.375rem;flex-shrink:0}.ypai-timer-label{font-family:var(--font-sans);font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ffffff73}.ypai-timer-value{display:inline-flex;align-items:center;padding:.625rem 1.25rem;border-radius:var(--ds-radius-lg);background:#080c18cc;border:1px solid rgba(168,85,247,.2);font-family:var(--font-mono);font-size:1.125rem;font-weight:600;color:var(--ypai-text-primary);letter-spacing:.06em;font-variant-numeric:tabular-nums;box-shadow:0 2px 8px #0000004d,0 0 0 1px #a855f70d inset;transition:border-color var(--ypai-transition-normal),box-shadow var(--ypai-transition-normal),color var(--ypai-transition-normal)}.ypai-timer-value--recording{border-color:#ef444459;box-shadow:0 2px 8px #0000004d,0 0 16px #ef44441f}.ypai-timer-value--ready{border-color:#10b98159;color:#6ee7b7;box-shadow:0 2px 8px #0000004d,0 0 16px #10b9811f}.ypai-timer-large{font-family:var(--font-sans);font-size:2.75rem;font-weight:600;color:var(--ypai-text-primary);letter-spacing:-.02em;line-height:1;text-align:center;font-variant-numeric:tabular-nums;padding:1rem 0}.ypai-speaking-video{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;border-radius:var(--ds-radius-2xl);overflow:hidden;margin-bottom:var(--ds-space-5);border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 1px #00000080,0 8px 32px #00000080,0 0 60px -20px #a855f726;transition:box-shadow var(--ypai-transition-smooth),border-color var(--ypai-transition-smooth)}.ypai-speaking-video--recording{border-color:#ef444426;box-shadow:0 0 0 1px #00000080,0 8px 32px #00000080,0 0 60px -10px #ef44441f}.ypai-speaking-video--ready{border-color:#10b98126;box-shadow:0 0 0 1px #00000080,0 8px 32px #00000080,0 0 60px -10px #10b9811f}.ypai-speaking-video:before{content:"";position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,transparent 100%);z-index:var(--ds-z-raised);pointer-events:none}.ypai-video-element{width:100%;height:100%;object-fit:cover;display:block}.ypai-recording-badge{position:absolute;top:1rem;left:1rem;z-index:var(--ds-z-raised);display:flex;align-items:center;gap:.625rem;padding:.5rem 1rem .5rem .75rem;background:#000000b3;border:1px solid rgba(239,68,68,.4);border-radius:var(--ds-radius-md);font-family:var(--font-sans);font-size:.75rem;font-weight:700;letter-spacing:.06em;color:#fca5a5;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 4px 16px #0006,0 0 24px #ef444426;text-transform:uppercase;animation:ypai-badge-appear .3s cubic-bezier(.16,1,.3,1)}@keyframes ypai-badge-appear{0%{opacity:0;transform:scale(.9) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.recording-dot{width:10px;height:10px;background:var(--ypai-status-recording);border-radius:var(--ds-radius-full);box-shadow:0 0 8px #ef444499;animation:ypai-rec-pulse 1.5s ease-in-out infinite;flex-shrink:0}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes ypai-rec-pulse{0%,to{opacity:1;box-shadow:0 0 8px #ef444499;transform:scale(1)}50%{opacity:.6;box-shadow:0 0 16px #ef4444cc,0 0 4px #ef4444;transform:scale(1.15)}}.ypai-recording-badge-text{font-family:var(--font-sans);font-size:.6875rem;font-weight:800;letter-spacing:.1em;color:#ef4444}.ypai-recording-badge-timer{font-family:var(--font-mono);font-size:.8125rem;font-weight:600;color:#ffffffe6;font-variant-numeric:tabular-nums;margin-left:var(--ds-space-1);padding-left:.625rem;border-left:1px solid rgba(255,255,255,.15)}.ypai-min-reached-badge{position:absolute;top:1rem;right:1rem;z-index:var(--ds-z-raised);display:flex;align-items:center;gap:var(--ds-space-2);padding:.5rem 1rem;background:#000000b3;border:1px solid rgba(16,185,129,.4);border-radius:var(--ds-radius-md);font-family:var(--font-sans);font-size:.75rem;font-weight:700;letter-spacing:.04em;color:#6ee7b7;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 4px 16px #0006,0 0 24px #10b9811a;animation:ypai-badge-appear .3s cubic-bezier(.16,1,.3,1)}.ypai-camera-error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:var(--ds-z-raised);padding:1.25rem 1.75rem;background:#140a0ad9;border:1px solid rgba(239,68,68,.35);border-radius:var(--ds-radius-xl);font-family:var(--font-sans);font-size:.9375rem;color:#fca5a5;text-align:center;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 8px 32px #00000080,0 0 32px #ef444414;max-width:80%;line-height:1.5}.ypai-status-indicator{display:inline-flex;align-items:center;gap:var(--ds-space-2);padding:.5rem 1rem;border-radius:var(--ds-radius-md);font-family:var(--font-sans);font-size:.8125rem;font-weight:600;transition:all var(--ypai-transition-normal)}.ypai-status-indicator--recording{background:#ef44441f;border:1px solid rgba(239,68,68,.3);color:#fca5a5}.ypai-status-indicator--recording .ypai-status-dot{width:8px;height:8px;border-radius:var(--ds-radius-full);background:#ef4444;animation:ypai-rec-pulse 1.5s ease-in-out infinite}.ypai-status-indicator--paused{background:#f59e0b1f;border:1px solid rgba(245,158,11,.3);color:#fde68a}.ypai-status-indicator--paused .ypai-status-dot{width:8px;height:8px;border-radius:var(--ds-radius-full);background:#f59e0b;animation:ypai-amber-pulse 2s ease-in-out infinite}@keyframes ypai-amber-pulse{0%,to{opacity:1}50%{opacity:.5}}.ypai-status-indicator--ready{background:#10b9811f;border:1px solid rgba(16,185,129,.3);color:#6ee7b7}.ypai-status-indicator--ready .ypai-status-dot{width:8px;height:8px;border-radius:var(--ds-radius-full);background:#10b981;box-shadow:0 0 6px #10b98180}.ypai-status-indicator--error{background:#dc26261f;border:1px solid rgba(220,38,38,.3);color:#fca5a5}.ypai-status-indicator--error .ypai-status-dot{width:8px;height:8px;border-radius:var(--ds-radius-xs);background:#dc2626}.ypai-task-nav{display:flex;align-items:center;justify-content:center;gap:var(--ds-space-4);padding:.75rem 0}.ypai-task-nav-label{font-family:var(--font-sans);font-size:.8125rem;font-weight:600;color:var(--ypai-text-tertiary)}.ypai-task-nav-label .ypai-task-current{color:var(--ypai-purple-light);font-size:1.25rem;font-weight:700}.ypai-task-nav-label .ypai-task-total{color:var(--ypai-text-tertiary)}.ypai-task-dots{display:flex;gap:6px;align-items:center}.ypai-task-dot{width:8px;height:8px;border-radius:var(--ds-radius-full);background:#ffffff1f;transition:all var(--ypai-transition-normal)}.ypai-task-dot--completed{background:var(--ypai-status-ready);box-shadow:0 0 4px #10b98166}.ypai-task-dot--current{background:var(--ypai-purple-light);box-shadow:0 0 6px #8b5cf680;transform:scale(1.25)}.ypai-task-transition{animation:ypai-task-slide-in .4s cubic-bezier(.16,1,.3,1)}@keyframes ypai-task-slide-in{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.ypai-speaking-actions{display:flex;gap:var(--ds-space-4);align-items:center;justify-content:center}.ypai-btn-primary{flex:1;max-width:300px;padding:1rem 2rem;background:linear-gradient(135deg,var(--ypai-purple-secondary),var(--ypai-purple-primary));border:1px solid rgba(168,85,247,.3);border-radius:var(--ds-radius-lg);font-family:var(--font-sans);font-size:1rem;font-weight:600;color:var(--ypai-text-primary);cursor:pointer;transition:transform var(--ypai-transition-normal),box-shadow var(--ypai-transition-normal),border-color var(--ypai-transition-normal);box-shadow:0 4px 16px #a855f733,0 1px #ffffff14 inset}.ypai-btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 28px #a855f759,0 1px #ffffff1a inset;border-color:#a855f780}.ypai-btn-primary:active:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 16px #a855f740,0 1px #ffffff0f inset}.ypai-btn-primary:disabled{opacity:.5;cursor:not-allowed}.ypai-btn-secondary{flex:1;max-width:200px;padding:1rem 2rem;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:var(--ds-radius-lg);font-family:var(--font-sans);font-size:1rem;font-weight:500;color:var(--ypai-text-secondary);cursor:pointer;transition:background var(--ypai-transition-fast),border-color var(--ypai-transition-fast),color var(--ypai-transition-fast),transform var(--ypai-transition-fast)}.ypai-btn-secondary:hover:not(:disabled){background:#ffffff12;border-color:#fff3;color:var(--ypai-text-primary);transform:translateY(-1px)}.ypai-btn-secondary:active:not(:disabled){transform:translateY(0);background:#ffffff0d}.ypai-btn-secondary:disabled{opacity:.4;cursor:not-allowed}.device-selector{margin-bottom:var(--ds-space-6);padding:1rem 1.25rem;background:linear-gradient(135deg,#ffffff08,#ffffff04);border-radius:var(--ds-radius-lg);border:1px solid rgba(255,255,255,.06);transition:border-color var(--ypai-transition-normal),box-shadow var(--ypai-transition-normal)}.device-selector:hover{border-color:#a855f726}.device-selector:focus-within{border-color:#a855f740;box-shadow:0 0 0 3px #a855f70f}.device-selector label{display:block;font-family:var(--font-sans);font-size:.8125rem;font-weight:600;color:var(--ypai-text-tertiary);margin-bottom:var(--ds-space-2);letter-spacing:.02em}.device-selector select{width:100%;padding:.75rem 2.25rem .75rem 1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:var(--ds-radius-md);color:var(--ypai-text-primary);font-family:var(--font-sans);font-size:.9375rem;cursor:pointer;transition:all var(--ypai-transition-fast);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center;background-size:12px}.device-selector select:hover{background-color:#ffffff12;border-color:#a855f74d}.device-selector select:focus{outline:none;border-color:var(--ypai-purple-primary);box-shadow:0 0 0 3px #a855f71f;background-color:#ffffff0f}.device-selector select option{background:#1a1a2e;color:var(--ypai-text-primary);padding:var(--ds-space-2)}.error-banner{padding:1.25rem 1.5rem;background:linear-gradient(135deg,#ef44441a,#ef44440f);border:1px solid rgba(239,68,68,.25);border-left:3px solid rgba(239,68,68,.6);border-radius:var(--ds-radius-lg);margin-bottom:var(--ds-space-6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 4px 16px #ef44440f}.error-banner h3{font-family:var(--font-sans);font-size:1rem;font-weight:700;color:#fca5a5;margin:0 0 .375rem}.error-banner p{font-family:var(--font-sans);font-size:.9375rem;line-height:1.6;color:#fca5a5bf;margin:0}.success-banner{padding:1.25rem 1.5rem;background:linear-gradient(135deg,#10b9811a,#10b9810f);border:1px solid rgba(16,185,129,.25);border-left:3px solid rgba(16,185,129,.6);border-radius:var(--ds-radius-lg);margin-bottom:var(--ds-space-6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 4px 16px #10b9810f}.success-banner h3{font-family:var(--font-sans);font-size:1rem;font-weight:700;color:#6ee7b7;margin:0 0 .375rem}.success-banner p{font-family:var(--font-sans);font-size:.9375rem;line-height:1.6;color:#6ee7b7bf;margin:0}.warning-banner{padding:1.25rem 1.5rem;background:linear-gradient(135deg,#f59e0b1a,#f59e0b0f);border:1px solid rgba(245,158,11,.25);border-left:3px solid rgba(245,158,11,.6);border-radius:var(--ds-radius-lg);margin-bottom:var(--ds-space-6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 4px 16px #f59e0b0f}.warning-banner h3{font-family:var(--font-sans);font-size:1rem;font-weight:700;color:#fde68a;margin:0 0 .375rem}.warning-banner p{font-family:var(--font-sans);font-size:.9375rem;line-height:1.6;color:#fde68abf;margin:0}@media(max-width:1024px){.ypai-speaking-meta{position:static}}@media(max-width:640px){.ypai-speaking-section{padding:2rem 0}.ypai-container{padding:0 1rem}.ypai-card{padding:var(--ds-space-5);border-radius:var(--ds-radius-xl)}.ypai-card:before{left:18px;right:18px}.ypai-speaking-header{flex-direction:column;gap:var(--ds-space-4)}.ypai-speaking-timer{align-items:flex-start;width:100%;flex-direction:row;gap:var(--ds-space-3)}.ypai-timer-value{font-size:1rem;padding:.5rem 1rem}.ypai-speaking-question{font-size:1.25rem}.ypai-speaking-title{font-size:1.5rem}.ypai-speaking-actions{flex-direction:column}.ypai-btn-primary,.ypai-btn-secondary{max-width:100%;width:100%}.ypai-speaking-tags{gap:var(--ds-space-2)}.ypai-tag{font-size:.75rem;padding:.375rem .75rem}.ypai-speaking-video{border-radius:var(--ds-radius-lg);margin-bottom:var(--ds-space-4)}.ypai-recording-badge{top:.75rem;left:.75rem;padding:.375rem .75rem;font-size:.6875rem;gap:var(--ds-space-2)}.recording-dot{width:8px;height:8px}.ypai-min-reached-badge{top:.75rem;right:.75rem;padding:.375rem .75rem;font-size:.6875rem}.ypai-speaking-instructions li{font-size:.875rem;padding:.375rem 0 .375rem 1.5rem}.ypai-timer-large{font-size:2rem}.device-selector{padding:.875rem 1rem}.device-selector select{font-size:.875rem;padding:.625rem 2rem .625rem .875rem}.error-banner,.success-banner,.warning-banner{padding:1rem 1.25rem;border-radius:var(--ds-radius-md)}}@media(max-width:375px){.ypai-card{padding:var(--ds-space-4);border-radius:var(--ds-radius-xl)}.ypai-speaking-question{font-size:1.125rem}.ypai-speaking-title{font-size:1.375rem}}.hidden{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.min-h-screen.bg-\[#030304\]{min-height:100vh;background-color:#030304;background-image:radial-gradient(ellipse at top,#7e22ce33,#030304,#030304);padding:var(--ds-space-4)}@media(min-width:1024px){.min-h-screen.bg-\[#030304\]{padding:var(--ds-space-8)}}.grid.grid-cols-1.lg\:grid-cols-\[350px_1fr\]{display:grid;grid-template-columns:1fr;gap:var(--ds-space-6)}@media(min-width:1024px){.grid.grid-cols-1.lg\:grid-cols-\[350px_1fr\]{grid-template-columns:350px 1fr;gap:var(--ds-space-8);max-width:1400px;margin:0 auto}}aside.rounded-2xl.p-6.border.border-white\/5.bg-white\/5.backdrop-blur-xl{border-radius:var(--ds-radius-xl);padding:var(--ds-space-6);border:1px solid rgba(255,255,255,.07);background:linear-gradient(135deg,#ffffff0f,#ffffff08);backdrop-filter:blur(48px) saturate(1.15);-webkit-backdrop-filter:blur(48px) saturate(1.15);box-shadow:0 0 0 1px #ffffff08 inset,0 8px 32px #0000004d}.rounded-xl.bg-white\/5.border.border-white\/10.p-4{border-radius:var(--ds-radius-lg);background:linear-gradient(135deg,#ffffff0f,#ffffff08);border:1px solid rgba(255,255,255,.1);padding:var(--ds-space-4);box-shadow:var(--ds-shadow-2)}.rounded-lg.bg-green-500\/10.border.border-green-500\/20{border-radius:var(--ds-radius-md);background:linear-gradient(135deg,#22c55e1f,#22c55e14);border:1px solid rgba(34,197,94,.2);padding:.75rem 1rem;display:flex;align-items:center;gap:var(--ds-space-2);transition:all var(--ypai-transition-fast)}.rounded-lg.bg-red-500\/10.border.border-red-500\/20{border-radius:var(--ds-radius-md);background:linear-gradient(135deg,#ef44441f,#ef444414);border:1px solid rgba(239,68,68,.2);padding:.75rem 1rem;display:flex;align-items:center;gap:var(--ds-space-2);transition:all var(--ypai-transition-fast)}.rounded-lg.bg-yellow-500\/10.border.border-yellow-500\/20{border-radius:var(--ds-radius-md);background:linear-gradient(135deg,#eab3081f,#eab30814);border:1px solid rgba(234,179,8,.2);padding:.75rem 1rem;transition:all var(--ypai-transition-fast)}.rounded-2xl.overflow-hidden.border.border-white\/10.shadow-\[0_0_40px_-10px_rgba\(168\,85\,247\,0\.15\)\]{border-radius:var(--ds-radius-2xl);overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 0 1px #0006,0 0 48px -10px #a855f72e,0 8px 32px #0006}.rounded-xl.bg-red-500\/10.border.border-red-500\/20.p-4{border-radius:var(--ds-radius-lg);background:linear-gradient(135deg,#ef44441f,#ef444412);border:1px solid rgba(239,68,68,.2);padding:var(--ds-space-4);box-shadow:0 4px 16px #ef44440f}.bg-purple-600.border.border-purple-500{background:linear-gradient(135deg,#8b5cf6,#9333ea);border:1px solid rgb(168,85,247);border-radius:var(--ds-radius-lg);padding:1rem 1.5rem;font-weight:600;transition:all var(--ypai-transition-normal);box-shadow:0 4px 16px #8b5cf633,0 1px #ffffff14 inset}.bg-purple-600.border.border-purple-500:hover:not(:disabled){background:linear-gradient(135deg,#7e22ce,#8b5cf6);transform:translateY(-1px);box-shadow:0 8px 24px #8b5cf64d,0 1px #ffffff1a inset}.bg-white\/5.border.border-white\/10{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:var(--ds-radius-lg);padding:1rem 1.5rem;transition:all var(--ypai-transition-fast)}.bg-white\/5.border.border-white\/10:hover:not(:disabled){background:#ffffff14;border-color:#ffffff26;transform:translateY(-1px)}@media(prefers-reduced-motion:reduce){.ypai-speaking-progress-fill:after,.recording-dot,.ypai-status-indicator--recording .ypai-status-dot,.ypai-status-indicator--paused .ypai-status-dot{animation:none}.ypai-task-transition,.ypai-recording-badge{animation:none}.ypai-card,.ypai-card-premium,.ypai-tag,.ypai-btn-primary,.ypai-btn-secondary{transition-duration:.01ms}}.recorder-dashboard{min-height:100vh;width:100%;background-color:#030304;background-image:radial-gradient(ellipse at top,#581c8733,#030304,#030304);display:grid;grid-template-columns:1fr;gap:var(--ds-space-8);padding:var(--ds-space-4)}@media(min-width:1024px){.recorder-dashboard{grid-template-columns:350px 1fr;gap:var(--ds-space-8);max-width:1400px;margin:0 auto;padding:var(--ds-space-8)}.recorder-grid{grid-template-columns:1fr 380px!important;gap:var(--ds-space-8)!important}}.glass-panel{background-color:#ffffff0d!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:var(--ds-radius-xl);padding:var(--ds-space-6)}.video-frame{border:1px solid rgba(255,255,255,.1);border-radius:var(--ds-radius-xl);overflow:hidden;box-shadow:0 0 40px -10px #a855f733;position:relative}.video-frame video{width:100%;aspect-ratio:16 / 9;object-fit:cover;background-color:#000}.glass-button{background-color:#8b5cf6;color:#fff;border:1px solid rgba(168,85,247,1);border-radius:var(--ds-radius-lg);padding:1rem 1.5rem;font-weight:500;cursor:pointer;transition:background-color .2s}.glass-button:hover:not(:disabled){background-color:#6d28d9}.glass-button:disabled{opacity:.4;cursor:not-allowed}.glass-button-secondary{background-color:#ffffff0d;color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:var(--ds-radius-lg);padding:1rem 1.5rem;font-weight:500;cursor:pointer;transition:background-color .2s}.glass-button-secondary:hover{background-color:#ffffff1a}.text-purple-brand{color:#c4b5fd}.text-white-90{color:#ffffffe6}.text-white-60{color:#fff9}.text-white-40{color:#fff6}.status-card-green{background-color:#22c55e1a;border:1px solid rgba(34,197,94,.2);border-radius:var(--ds-radius-lg);padding:var(--ds-space-4)}.status-card-red{background-color:#ef44441a;border:1px solid rgba(239,68,68,.2);border-radius:var(--ds-radius-lg);padding:var(--ds-space-4)}.status-card-yellow{background-color:#eab3081a;border:1px solid rgba(234,179,8,.2);border-radius:var(--ds-radius-lg);padding:var(--ds-space-4)}.error-banner{background-color:#ef44441a;border:1px solid rgba(239,68,68,.3);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--ds-radius-xl);padding:var(--ds-space-6);box-shadow:0 0 40px -10px #ef444433}.error-banner h3{color:#f87171;font-weight:600;font-size:1rem;margin-bottom:var(--ds-space-2)}.error-banner p{color:#fca5a5;font-size:.875rem;line-height:1.5}*,*:before,*:after{box-sizing:border-box}html{color-scheme:dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}html,body{margin:0;padding:0;height:100%;background:var(--ypai-bg-primary, var(--ypai-bg-void));color:var(--ypai-text-primary, var(--ypai-text-primary));font-family:var( --font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif )}body{min-height:100vh;overflow-x:hidden}.rec-bg-layers{position:fixed;inset:0;z-index:var(--ds-z-base);overflow:hidden;pointer-events:none}.rec-bg-gradient{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150%;height:150%;background:radial-gradient(ellipse at center,rgba(107,40,208,.07) 0%,rgba(139,92,246,.04) 30%,transparent 70%)}.rec-bg-mesh{position:absolute;inset:0;background-image:linear-gradient(rgba(255 255 255 / .06) 1px,transparent 1px),linear-gradient(90deg,rgba(255 255 255 / .06) 1px,transparent 1px);background-size:50px 50px;opacity:.015}.rec-bg-orb{position:absolute;border-radius:var(--ds-radius-full);filter:blur(120px);opacity:.4;will-change:transform}.rec-orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(139,92,246,.3),transparent 70%);top:-10%;right:-10%;animation:rec-float-1 25s ease-in-out infinite}.rec-orb-2{width:500px;height:500px;background:radial-gradient(circle,rgba(var(--ypai-purple-glow-rgb) / .25),transparent 70%);bottom:-5%;left:-5%;animation:rec-float-2 30s ease-in-out infinite}.rec-orb-3{width:400px;height:400px;background:radial-gradient(circle,rgba(139,92,246,.2),transparent 70%);top:40%;left:50%;animation:rec-float-3 20s ease-in-out infinite}@keyframes rec-float-1{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-40px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}@keyframes rec-float-2{0%,to{transform:translate(0) scale(1)}33%{transform:translate(-40px,30px) scale(1.08)}66%{transform:translate(25px,-25px) scale(.92)}}@keyframes rec-float-3{0%,to{transform:translate(-50%) scale(1)}33%{transform:translate(calc(-50% - 30px),35px) scale(1.06)}66%{transform:translate(calc(-50% + 20px),-30px) scale(.94)}}@media(prefers-reduced-motion:reduce){.rec-bg-orb{animation:none!important}}.rec-loading-skeleton{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:var(--ds-space-8);gap:var(--ds-space-6)}#react-root>.rec-loading-skeleton:not(:only-child){display:none}.rec-skeleton-header{display:flex;flex-direction:column;align-items:center;gap:var(--ds-space-3);width:100%;max-width:600px}.rec-skeleton-pill{width:180px;height:28px;border-radius:var(--ds-radius-pill);background:#8b5cf614;border:1px solid rgba(139,92,246,.12);animation:rec-shimmer 2s ease-in-out infinite}.rec-skeleton-title{width:320px;max-width:80%;height:32px;border-radius:var(--ds-radius-md);background:#ffffff0a;animation:rec-shimmer 2s ease-in-out infinite .1s}.rec-skeleton-subtitle{width:240px;max-width:60%;height:18px;border-radius:var(--ds-radius-sm);background:#ffffff08;animation:rec-shimmer 2s ease-in-out infinite .2s}.rec-skeleton-video{width:100%;max-width:720px;aspect-ratio:16 / 9;border-radius:var(--ds-radius-xl);background:#ffffff05;border:1px solid rgba(255 255 255 / .04);box-shadow:0 0 40px -10px rgba(var(--ypai-purple-glow-rgb) / .08);animation:rec-shimmer 2s ease-in-out infinite .3s}.rec-skeleton-actions{display:flex;gap:var(--ds-space-4);justify-content:center}.rec-skeleton-btn{width:160px;height:48px;border-radius:var(--ds-radius-lg);background:linear-gradient(135deg,#5e22b026,#6b28d01a);border:1px solid rgba(var(--ypai-purple-glow-rgb) / .15);animation:rec-shimmer 2s ease-in-out infinite .4s}.rec-skeleton-btn--secondary{background:#ffffff08;border:1px solid rgba(255 255 255 / .06);animation-delay:.5s}.rec-loading-label{font-family:var(--font-sans, "Inter", sans-serif);font-size:.875rem;color:#fff6;letter-spacing:.02em;margin-top:var(--ds-space-2);animation:rec-shimmer 2s ease-in-out infinite .6s}@keyframes rec-shimmer{0%,to{opacity:1}50%{opacity:.5}}@media print{.rec-bg-layers,.rec-loading-skeleton,video,.video-frame,.ypai-speaking-video,.ypai-speaking-actions,.ypai-btn-primary,.ypai-btn-secondary,.ypai-button-group,.device-selector,.ypai-recording-badge,.ypai-min-reached-badge{display:none!important}html,body{background:#fff!important;color:#000!important}#react-root{min-height:auto!important}#react-root:before{content:"GTR Video Collection — Recording Session";display:block;font-family:Lora,Georgia,serif;font-size:1.5rem;font-weight:600;padding:2rem 0 1rem;border-bottom:2px solid #eee;margin-bottom:var(--ds-space-4)}}