:root{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-card: #172033;--bg-tertiary: #334155;--bg-elevated: #1e293b;--glass-bg: rgba(30, 41, 59, .6);--glass-bg-light: rgba(51, 65, 85, .4);--glass-bg-strong: rgba(15, 23, 42, .85);--glass-border: rgba(255, 255, 255, .08);--glass-border-hover: rgba(255, 255, 255, .12);--glass-blur: 16px;--glass-blur-strong: 24px;--accent-primary: #34d399;--accent-primary-hover: #6ee7b7;--accent-secondary: #10b981;--accent-tertiary: rgba(52, 211, 153, .1);--accent-sky: #38bdf8;--accent-success: #34d399;--accent-warning: #fbbf24;--accent-danger: #f87171;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-tertiary: #64748b;--text-muted: #475569;--border-color: rgba(148, 163, 184, .12);--border-subtle: rgba(255, 255, 255, .04);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .2);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .25);--shadow-md: 0 4px 16px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .03);--shadow-lg: 0 12px 40px rgba(0, 0, 0, .4);--shadow-glow: 0 0 32px rgba(52, 211, 153, .12);--radius-xs: 6px;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 18px;--radius-xl: 24px;--radius-full: 9999px;--transition-fast: .12s cubic-bezier(.4, 0, .2, 1);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1);--font-display: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;--font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-sans: var(--font-body);--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--text-4xl: 2.5rem;--text-5xl: 3rem;--leading-tight: 1.2;--leading-snug: 1.4;--leading-normal: 1.6;--leading-relaxed: 1.75;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--space-8: 40px;--space-9: 48px;--space-10: 64px;--space-12: 96px}[data-theme=light]{--bg-primary: #fafbfc;--bg-secondary: #f1f5f9;--bg-card: #ffffff;--bg-tertiary: #e2e8f0;--bg-elevated: #ffffff;--glass-bg: rgba(255, 255, 255, .72);--glass-bg-light: rgba(255, 255, 255, .56);--glass-bg-strong: rgba(255, 255, 255, .95);--glass-border: rgba(0, 0, 0, .06);--glass-border-hover: rgba(0, 0, 0, .1);--accent-primary: #059669;--accent-primary-hover: #10b981;--accent-secondary: #047857;--accent-tertiary: rgba(5, 150, 105, .08);--text-primary: #0f172a;--text-secondary: #475569;--text-tertiary: #64748b;--text-muted: #94a3b8;--border-color: rgba(0, 0, 0, .08);--border-subtle: rgba(0, 0, 0, .04);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .06);--shadow-md: 0 4px 16px rgba(0, 0, 0, .08);--shadow-lg: 0 12px 40px rgba(0, 0, 0, .1);--shadow-glow: 0 0 24px rgba(5, 150, 105, .08)}[data-theme=light] .settings-overlay{background:#f8fafcb3}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--text-primary);background:var(--bg-primary);min-height:100vh;overflow-x:hidden;text-rendering:optimizeLegibility}#root{min-height:100vh}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg-primary),0 0 0 4px var(--accent-primary)}::selection{background:#34d39940;color:var(--text-primary)}.backend-offline-banner{position:fixed;top:0;left:0;right:0;z-index:9999;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;background:#b91c1c;color:#fff;font-size:13px;font-weight:600}.offline-icon{font-size:16px}.app{min-height:100vh;background:var(--bg-primary);position:relative}.interactive-background{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.homepage{min-height:100vh;padding:0}.home-header{position:sticky;top:0;z-index:100;background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-bottom:1px solid var(--glass-border)}.home-header-inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:none;padding:var(--space-4) var(--space-8)}.home-logo{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--text-primary);background:none;border:none;cursor:pointer;padding:var(--space-2) 0;letter-spacing:-.02em;transition:color var(--transition-fast)}.logo-icon{height:32px;width:32px;object-fit:contain}.home-logo:hover{color:var(--accent-primary)}.home-nav-links{display:flex;align-items:center;justify-content:center;gap:var(--space-4);flex:1}.home-nav-links button{padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);background:none;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.home-nav-links button:hover{color:var(--text-primary);background:#ffffff0d}.home-settings-btn{padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);background:none;border:1px solid var(--glass-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.home-settings-btn:hover{color:var(--text-primary);border-color:var(--glass-border-hover)}.glass-btn{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);color:var(--text-primary);border-radius:var(--radius-md);transition:all var(--transition-base);padding:var(--space-2) var(--space-3)}.glass-btn:hover{background:var(--glass-bg-light);border-color:var(--glass-border-hover);transform:rotate(90deg)}.hero{max-width:720px;margin:0 auto;padding:var(--space-10) var(--space-6);overflow:visible}.hero-centered .hero-content{text-align:center;max-width:none;overflow:visible}.hero-centered .hero-description{margin-left:auto;margin-right:auto}.hero-content{max-width:560px;overflow:visible}.hero-badge{display:inline-block;padding:var(--space-2) var(--space-4);background:var(--accent-tertiary);border:1px solid rgba(52,211,153,.2);border-radius:var(--radius-full);font-family:var(--font-display);font-size:var(--text-xs);font-weight:600;color:var(--accent-primary);margin-bottom:var(--space-6);text-transform:uppercase;letter-spacing:.1em}.hero-title{font-family:var(--font-display);font-size:clamp(3rem,7vw,7rem);font-weight:800;line-height:1.2;margin-bottom:var(--space-6);color:var(--text-primary);letter-spacing:-.03em;padding:.1em}.hero-title-oneline{white-space:nowrap;display:flex;align-items:baseline;justify-content:center;flex-wrap:nowrap}.hero-title-text{color:var(--accent-primary);padding:.1em}.hero-title-cursor{-webkit-text-fill-color:initial;color:var(--accent-primary);animation:cursor-blink .7s step-end infinite;margin-left:2px}@keyframes cursor-blink{50%{opacity:0}}.hero-highlight{background:linear-gradient(135deg,var(--accent-primary),var(--accent-primary-hover));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-description{font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text-secondary);margin-bottom:var(--space-8);max-width:500px}.hero-cta,.hero-cta-2{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-7);min-width:320px;margin-top:var(--space-4);background:var(--accent-primary);color:#0f172a;font-family:var(--font-display);font-size:var(--text-base);font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base)}.hero-cta:hover,.hero-cta-2:hover{background:var(--accent-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-glow)}.cta-arrow{font-size:var(--text-lg);transition:transform var(--transition-base)}.hero-cta:hover .cta-arrow,.hero-cta-2:hover .cta-arrow{transform:translate(4px)}.hero-cta-3{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-7);min-width:320px;margin-top:var(--space-4);background:transparent;color:var(--accent-danger);font-family:var(--font-display);font-size:var(--text-base);font-weight:600;border:1px solid var(--accent-danger);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base)}.hero-cta-3:hover{background:var(--accent-danger);color:#fff;transform:translateY(-2px)}.hero-cta-3:hover .cta-arrow{transform:translate(4px)}.hero-cta-grid{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center;margin-top:var(--space-6)}.hero-cta-grid .hero-cta{min-width:200px;flex:1}.hero-cta-outline{background:transparent!important;color:var(--accent-primary)!important;border:1px solid var(--accent-primary)!important}.hero-cta-outline:hover{background:var(--accent-tertiary)!important}.hero-secondary-nav{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:var(--space-6)}.features{max-width:1200px;margin:64px auto;padding:48px 0}.features-title{font-family:var(--font-display);text-align:center;font-size:var(--text-3xl);font-weight:700;margin-bottom:var(--space-9);color:var(--text-primary);letter-spacing:-.02em}.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.feature-card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-5);text-align:center;transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.feature-card:hover{border-color:var(--glass-border-hover);transform:translateY(-2px);background:var(--glass-bg-light);box-shadow:var(--shadow-md)}.feature-icon{font-size:2.5rem;margin-bottom:var(--space-4);opacity:.9}.feature-card h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-2);color:var(--text-primary)}.feature-card p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-secondary)}.tech-section{max-width:800px;margin:48px auto;text-align:center}.tech-title{font-size:22px;font-weight:600;margin-bottom:24px;color:var(--text-primary)}.tech-grid{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.tech-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-5) var(--space-6);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.tech-item:hover{border-color:var(--glass-border-hover);transform:translateY(-2px);background:var(--glass-bg-light)}.tech-icon{font-size:28px}.tech-name{font-size:13px;font-weight:500;color:var(--text-secondary)}.home-footer{margin-top:64px;padding:64px 32px 24px;background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-top:1px solid var(--glass-border)}.footer-content{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:48px;justify-content:space-between}.footer-brand{flex:1;min-width:250px;max-width:350px}.footer-logo{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--space-4);display:block}.footer-brand p{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);margin-bottom:var(--space-6)}.footer-social{display:flex;gap:var(--space-4)}.footer-social a{color:var(--text-secondary);text-decoration:none;font-size:var(--text-sm);transition:color var(--transition-fast)}.footer-social a:hover{color:var(--accent-primary)}.footer-links-grid{display:flex;gap:64px;flex-wrap:wrap}.footer-column{display:flex;flex-direction:column;gap:var(--space-3);min-width:140px}.footer-column h4{font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-2)}.footer-column button,.footer-column a{background:none;border:none;padding:0;color:var(--text-secondary);font-size:var(--text-sm);text-align:left;cursor:pointer;text-decoration:none;transition:color var(--transition-fast)}.footer-column button:hover,.footer-column a:hover{color:var(--accent-primary)}.footer-bottom{max-width:1200px;margin:64px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.05);text-align:center}.footer-bottom p{color:var(--text-tertiary);font-size:var(--text-xs)}.legal-page{padding:var(--space-6);max-width:800px;margin:0 auto;min-height:100vh}.legal-content{margin-top:var(--space-4);padding:var(--space-4) 0;display:flex;flex-direction:column;gap:var(--space-8)}.legal-section h2{font-family:var(--font-display);font-size:var(--text-lg);color:var(--text-primary);margin-bottom:var(--space-3);font-weight:600}.legal-section p{color:var(--text-secondary);line-height:var(--leading-relaxed);font-size:var(--text-base)}.legal-footer{margin-top:var(--space-8);padding-top:var(--space-4);border-top:1px solid var(--border-subtle);color:var(--text-tertiary);font-size:var(--text-sm);text-align:right}.tracker-page{padding:var(--space-6)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--border-subtle)}.header-left{display:flex;align-items:center;gap:var(--space-4)}.back-btn{padding:var(--space-2) var(--space-4);background:var(--glass-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all var(--transition-base)}.back-btn:hover{color:var(--text-primary);border-color:var(--glass-border-hover);background:var(--glass-bg-light)}.header h1{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;color:var(--text-primary);letter-spacing:-.03em}.header-status{display:flex;align-items:center;gap:10px}.status-indicator{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:12px;color:var(--text-secondary)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-success);animation:pulse 2s infinite}.status-dot.offline{background:var(--accent-danger);animation:none}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.settings-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:16px;cursor:pointer;transition:all var(--transition-base)}.settings-btn:hover{background:var(--accent-primary);border-color:var(--accent-primary)}.main-content{display:grid;grid-template-columns:1fr 340px;gap:16px}.video-section{display:flex;flex-direction:column;gap:12px}.video-section .card{display:flex;flex-direction:column;gap:16px;padding:20px}.video-section .card h3{margin:0;font-size:15px;color:var(--text-primary)}.video-section input[type=file]{padding:10px;background:var(--bg-secondary);border-radius:var(--radius-md);border:1px dashed var(--border-color);color:var(--text-secondary)}.video-container{position:relative;background:#000;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--glass-border);aspect-ratio:16/9;box-shadow:var(--shadow-md)}.video-feed{width:100%;height:100%;object-fit:cover;display:block}.feedback-toast{position:absolute;bottom:12px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#000c;color:#f59e0b;border-radius:var(--radius-md);font-size:12px;font-weight:600;z-index:10}.feedback-icon{font-size:14px}.video-overlay{position:absolute;bottom:12px;left:12px;display:flex;gap:6px}.overlay-badge{padding:4px 10px;background:#000000bf;border-radius:var(--radius-md);font-size:11px;font-weight:600;color:#fff}.overlay-badge.recording{background:#ef4444e6;animation:recordingPulse 1s infinite}@keyframes recordingPulse{0%,to{opacity:1}50%{opacity:.7}}.control-panel{display:flex;gap:var(--space-2);flex-wrap:wrap}.btn{display:flex;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-2) var(--space-4);font-size:13px;font-weight:600;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-base);flex:1;min-width:120px;line-height:1.4}.btn:active{transform:scale(.98)}.btn-capture{background:var(--accent-primary);color:#0c0c0e;border-color:var(--accent-primary)}.btn-capture:hover{background:var(--accent-secondary);border-color:var(--accent-secondary);box-shadow:var(--shadow-glow)}.btn-capture:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-quit{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-quit:hover{background:#f871711a;border-color:var(--accent-danger);color:var(--accent-danger)}.sidebar{display:flex;flex-direction:column;gap:var(--space-3)}.card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);transition:all var(--transition-base)}.card:hover{border-color:var(--glass-border-hover)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}.card-title{font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em}.card-badge{padding:var(--space-1) var(--space-3);background:#ffffff0f;border:1px solid var(--glass-border);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:500;color:var(--text-tertiary)}.buffer-progress{margin-bottom:16px}.progress-bar{height:6px;background:var(--bg-secondary);border-radius:var(--radius-xs);overflow:hidden;margin-bottom:6px}.progress-fill{height:100%;background:var(--accent-primary);border-radius:var(--radius-xs);transition:width var(--transition-base)}.progress-text{display:flex;justify-content:space-between;font-size:11px;color:var(--text-secondary)}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat-item{padding:12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);text-align:center;box-shadow:var(--shadow-sm);transition:all var(--transition-base)}.stat-item:hover{border-color:var(--accent-primary);transform:translateY(-1px)}.stat-value{font-size:20px;font-weight:700;color:var(--accent-primary);margin-bottom:2px}.stat-label{font-size:10px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.graph-container{height:180px;position:relative}.graph-canvas{width:100%;height:100%;border-radius:var(--radius-md)}.graph-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.legend-item{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary)}.legend-dot{width:6px;height:6px;border-radius:50%}.hands-indicator{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);margin-top:10px}.hand-icon{font-size:20px}.hand-status{font-size:12px;color:var(--text-secondary)}.hand-status.detected{color:var(--accent-success)}.settings-overlay{position:fixed;inset:0;background:#0f172a99;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn var(--transition-base)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-modal{background:var(--glass-bg-strong);backdrop-filter:blur(var(--glass-blur-strong));-webkit-backdrop-filter:blur(var(--glass-blur-strong));border:1px solid var(--glass-border);border-radius:var(--radius-xl);width:100%;max-width:520px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;animation:slideUp var(--transition-slow);box-shadow:var(--shadow-lg)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-color)}.settings-header h2{font-size:15px;font-weight:600;color:var(--text-primary)}.settings-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-full);color:var(--text-secondary);font-size:14px;cursor:pointer;transition:all var(--transition-base)}.settings-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.settings-content{padding:20px;overflow-y:auto;flex:1}.settings-section{margin-bottom:24px}.settings-section:last-child{margin-bottom:0}.settings-section h3{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border-color)}.setting-row:last-child{border-bottom:none}.setting-row.slider-row{flex-direction:column;align-items:stretch;gap:10px}.setting-info{display:flex;flex-direction:column;gap:2px}.setting-label{font-size:13px;font-weight:500;color:var(--text-primary)}.setting-description{font-size:12px;color:var(--text-secondary)}.theme-toggle{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base)}.theme-toggle:hover{border-color:var(--accent-primary)}.theme-toggle.light{background:#fef3c7;border-color:#f59e0b}.theme-toggle.dark{background:var(--bg-tertiary);border-color:var(--accent-primary)}.theme-icon{font-size:18px}.theme-text{font-size:13px;font-weight:600;color:var(--text-primary)}.num-hands-selector{display:flex;gap:6px}.num-hands-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:16px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base)}.num-hands-btn:hover{border-color:var(--accent-primary)}.num-hands-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.settings-select{padding:.5rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:14px;min-width:140px}.slider-container{display:flex;align-items:center;gap:16px}.settings-slider{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:var(--bg-secondary);border-radius:var(--radius-xs);outline:none}.settings-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--accent-primary);border-radius:50%;cursor:pointer;transition:transform var(--transition-base);box-shadow:0 0 0 2px var(--bg-secondary)}.settings-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.slider-value{min-width:52px;padding:6px 12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:13px;font-weight:700;color:var(--accent-primary);text-align:center}.save-message{padding:12px 16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:13px;color:var(--text-primary);text-align:center;margin-top:16px}.settings-footer{display:flex;gap:10px;padding:16px 20px;border-top:1px solid var(--border-color)}.btn-secondary{flex:1;background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{border-color:var(--accent-primary)}.btn-primary{flex:2;background:var(--accent-primary);color:#fff;border:1px solid var(--accent-primary)}.btn-primary:hover{background:var(--accent-secondary);border-color:var(--accent-secondary)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.video-preview{width:100%;margin-top:10px;border-radius:var(--radius-md)}.transcript-box{padding:12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:14px}.transcript-letters{display:inline}.transcript-char{cursor:pointer;padding:1px 2px;border-radius:2px;transition:background .15s}.transcript-char:hover{background:var(--bg-tertiary)}.transcript-char.highlight{background:var(--accent-primary);color:var(--bg-primary);line-height:1.5}.error-text{color:var(--accent-danger);margin-top:8px;font-size:13px}@media(max-width:1200px){.features-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:1024px){.main-content{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.home-header-inner{flex-wrap:wrap;padding:var(--space-3) var(--space-4)}.home-nav-links{order:3;width:100%;justify-content:center;padding-top:var(--space-2);border-top:1px solid var(--glass-border);margin-top:var(--space-2)}.home-nav-links button{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.home-logo{font-size:var(--text-base)}.hero{padding:var(--space-6) var(--space-4)}.hero-title{font-size:clamp(1.25rem,6vw,2rem)}.hero-cta-grid{flex-direction:column}.hero-cta-grid .hero-cta{min-width:100%}.features-grid{grid-template-columns:1fr}.tech-grid{gap:var(--space-3)}.tech-item{padding:var(--space-4) var(--space-5)}}.prediction-card{background:var(--bg-card);border:1px solid var(--accent-primary)}.card-badge.active{background:var(--accent-success);border-color:var(--accent-success);color:#fff}.prediction-display{text-align:center;padding:20px 0}.predicted-letter{font-size:64px;font-weight:800;color:var(--accent-primary);line-height:1;margin-bottom:12px;animation:letterPop .15s ease}@keyframes letterPop{0%{transform:scale(.9);opacity:.5}to{transform:scale(1);opacity:1}}.confidence-bar-container{height:6px;background:var(--bg-secondary);border-radius:var(--radius-xs);overflow:hidden;margin-bottom:6px}.confidence-bar-fill{height:100%;background:var(--accent-primary);border-radius:var(--radius-xs);transition:width var(--transition-base)}.confidence-text{font-size:12px;color:var(--text-secondary)}.no-prediction{font-size:14px;color:var(--text-secondary);padding:32px 0}.top3-predictions{display:flex;flex-direction:column;gap:8px;padding:6px 0}.top3-item{display:grid;grid-template-columns:28px 40px 1fr 44px;align-items:center;gap:10px;padding:10px 12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:all var(--transition-base)}.top3-item.primary{background:var(--accent-tertiary);border:1px solid var(--accent-primary)}.top3-item:not(.primary){opacity:.75}.top3-rank{font-size:11px;font-weight:600;color:var(--text-secondary);text-align:center}.top3-item.primary .top3-rank{color:var(--accent-primary)}.top3-letter{font-size:24px;font-weight:800;text-align:center;color:var(--accent-primary)}.top3-item:not(.primary) .top3-letter{font-size:20px;color:var(--text-primary)}.top3-bar-container{height:6px;background:var(--bg-primary);border-radius:var(--radius-xs);overflow:hidden}.top3-bar-fill{height:100%;border-radius:var(--radius-xs);transition:width var(--transition-base)}.top3-item.primary .top3-bar-fill{background:var(--accent-primary)}.top3-item:not(.primary) .top3-bar-fill{background:var(--text-secondary);opacity:.4}.top3-confidence{font-size:12px;font-weight:600;color:var(--text-secondary);text-align:right}.top3-item.primary .top3-confidence{color:var(--accent-primary)}.word-prediction-bar{display:flex;align-items:center;gap:.5rem;padding:.5rem;margin-top:.5rem;background:var(--accent-tertiary);border:1px solid var(--accent-primary);border-radius:var(--radius-sm)}.word-label{font-size:11px;font-weight:600;color:var(--text-secondary)}.word-value{font-weight:700;color:var(--accent-primary)}.word-conf{font-size:11px;color:var(--text-secondary)}.mode-selector{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border-color)}.mode-label{font-size:12px;color:var(--text-secondary)}.mode-buttons{display:flex;gap:6px}.mode-btn{padding:6px 12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:11px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base)}.mode-btn:hover{border-color:var(--accent-primary);color:var(--text-primary)}.mode-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.ai-badge{background:var(--accent-tertiary);border:1px solid var(--accent-primary);color:var(--accent-primary);border-radius:var(--radius-md);padding:4px 10px;font-size:11px;font-weight:600}.ai-badge span{margin-right:4px}@media(max-width:640px){.tracker-page{padding:12px}.header{flex-direction:column;gap:12px;text-align:center}.header-left{flex-direction:column}.sidebar{grid-template-columns:1fr}.control-panel{flex-direction:column}.btn{width:100%}.settings-modal{margin:12px;max-height:calc(100vh - 24px)}}.video-container{position:relative}.prediction-overlay{position:absolute;bottom:16px;left:50%;transform:translate(-50%);width:75%;background:var(--glass-bg-strong);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:12px 20px;display:flex;justify-content:center;align-items:center;z-index:10}.prediction-content{text-align:center}.prediction-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-secondary);margin-bottom:2px;font-weight:600}.prediction-text{margin:0;font-family:var(--font-display);font-size:var(--text-3xl);font-weight:800;color:var(--text-primary);min-height:40px}.ar-prediction-overlay{position:absolute;top:50%;right:20px;transform:translateY(-50%);transition:left .1s ease-out,top .1s ease-out;background:var(--glass-bg-strong);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:12px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;pointer-events:none}.ar-letter{font-size:56px;font-weight:800;line-height:1;color:var(--accent-primary);animation:arLetterPop .15s ease-out}@keyframes arLetterPop{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.ar-confidence{margin-top:6px;font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}.ar-toggle-hint{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:var(--accent-tertiary);border:1px solid var(--accent-primary);border-radius:var(--radius-md);font-size:11px;color:var(--accent-primary)}.ar-toggle-hint kbd{padding:2px 5px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:10px}.shortcuts-hint{display:flex;gap:6px;font-size:11px;color:var(--text-secondary)}.shortcut-key{display:inline-flex;align-items:center;gap:3px;padding:3px 6px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:10px;color:var(--text-secondary)}.shortcut-key:hover{border-color:var(--accent-primary);color:var(--accent-primary)}@media(max-width:768px){.ar-prediction-overlay{top:auto;bottom:70px;right:50%;transform:translate(50%);padding:12px 20px}.ar-letter{font-size:40px}.ar-confidence{font-size:12px}}@media(max-width:480px){.ar-prediction-overlay{padding:10px 16px;border-radius:var(--radius-md)}.ar-letter{font-size:36px}}.fullscreen-btn{position:absolute;bottom:10px;right:10px;width:36px;height:36px;background:#18181bd9;border:1px solid var(--border-color);border-radius:var(--radius-md);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-base);z-index:15}.fullscreen-btn:hover{background:var(--accent-primary);border-color:var(--accent-primary)}.video-container.fullscreen{background:#000}.video-container.fullscreen .video-feed{object-fit:contain;max-height:100vh}.sentence-builder-card{background:var(--bg-card);border:1px solid var(--border-color)}.sentence-display{font-family:var(--font-display);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:12px;min-height:52px;font-size:20px;font-weight:600;font-family:var(--font-mono);letter-spacing:1.5px;color:var(--text-primary);word-break:break-all;position:relative}.sentence-display .placeholder{color:var(--text-secondary);font-size:12px;font-weight:400;letter-spacing:normal}.sentence-display .last-added{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:var(--accent-success);color:#fff;padding:3px 6px;border-radius:var(--radius-md);font-size:10px;font-weight:600;animation:fadeSlide .5s ease-out forwards}@keyframes fadeSlide{0%{opacity:0;transform:translateY(-50%) translate(8px)}20%{opacity:1;transform:translateY(-50%) translate(0)}to{opacity:0}}.sentence-controls{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}.btn-small{padding:6px 10px;font-size:11px;border-radius:var(--radius-md)}.shortcut-hints{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;font-size:10px;color:var(--text-secondary)}.shortcut-hints span{display:flex;align-items:center;gap:3px}.shortcut-hints kbd{padding:2px 5px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:9px}.confusion-matrix-card{background:var(--bg-card);border:1px solid var(--border-color)}.letter-frequency-grid{display:flex;flex-direction:column;gap:6px}.frequency-item{display:grid;grid-template-columns:28px 1fr 36px;align-items:center;gap:8px}.frequency-letter{font-size:15px;font-weight:700;text-align:center;color:var(--accent-primary)}.frequency-bar{height:6px;background:var(--bg-primary);border-radius:var(--radius-xs);overflow:hidden}.frequency-fill{height:100%;background:var(--accent-primary);border-radius:var(--radius-xs);transition:width var(--transition-base)}.frequency-count{font-size:11px;font-weight:600}.confusion-pairs{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border-color)}.confusion-label{font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:.5rem}.confusion-grid{display:flex;flex-wrap:wrap;gap:.5rem}.confusion-pair{display:inline-flex;align-items:center;gap:.25rem;font-size:12px;padding:.2rem .5rem;background:var(--bg-primary);border-radius:var(--radius-sm)}.confusion-true{font-weight:700;color:var(--accent-primary)}.confusion-arrow,.confusion-alt{color:var(--text-secondary)}.confusion-pair .confusion-count{font-size:10px;color:var(--text-tertiary)}.avg-confidence{margin-top:10px;padding:8px;background:var(--accent-tertiary);border:1px solid var(--accent-primary);border-radius:var(--radius-md);font-size:12px;font-weight:600;color:var(--accent-primary);text-align:center}.no-data{padding:20px;text-align:center;color:var(--text-secondary);font-size:13px}.word-suggestions{display:flex;align-items:center;gap:6px;padding:8px 0;flex-wrap:wrap}.suggestions-label{font-size:14px;line-height:1}.suggestion-chip{padding:5px 12px;background:#6366f11a;border:1px solid rgba(99,102,241,.3);border-radius:var(--radius-md);color:#818cf8;font-size:12px;font-weight:600;cursor:pointer;transition:all var(--transition-base);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.5px}.suggestion-chip:hover{background:#6366f133;border-color:#6366f1;color:#a5b4fc;transform:translateY(-1px)}.hero-cta-secondary{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);flex:1;background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text-secondary);font-size:var(--text-sm);font-weight:500;border:1px solid var(--glass-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base)}.hero-cta-secondary:hover{border-color:var(--glass-border-hover);color:var(--text-primary);background:var(--glass-bg-light)}.btn-speak{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);transition:all var(--transition-base)}.btn-speak:hover{border-color:#6366f1;color:#6366f1}.btn-speak.speaking{background:#6366f126;border-color:#6366f1;color:#6366f1;animation:speakPulse 1.5s ease-in-out infinite}@keyframes speakPulse{0%,to{opacity:1}50%{opacity:.7}}.btn-save-session{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary)}.btn-save-session:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.guide-filter-bar{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);flex-wrap:wrap}.guide-search{flex:1;min-width:200px;padding:var(--space-2) var(--space-3);background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:14px;font-family:inherit;outline:none;transition:border-color var(--transition-base)}.guide-search::placeholder{color:var(--text-tertiary)}.guide-search:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-tertiary)}.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-3)}.guide-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-5);transition:all var(--transition-base);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--space-1)}.guide-card:hover{border-color:var(--accent-primary);transform:translateY(-1px);background:var(--glass-bg-light)}.guide-card-char{font-size:40px;font-weight:800;color:var(--accent-primary);line-height:1}.guide-card-emoji{font-size:28px;line-height:1}.guide-card-type{display:inline-block;width:fit-content;padding:2px 8px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary)}.guide-card-desc{font-size:13px;line-height:1.5;color:var(--text-secondary);margin:0}.history-actions{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}.history-list{display:flex;flex-direction:column;gap:12px}.history-card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);transition:all var(--transition-base)}.history-card:hover{border-color:var(--glass-border-hover)}.history-delete-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all var(--transition-base)}.history-delete-btn:hover{background:var(--accent-danger);border-color:var(--accent-danger);color:#fff}.history-sentence{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:12px;font-size:18px;font-weight:600;font-family:var(--font-mono);letter-spacing:1.5px;color:var(--text-primary);word-break:break-all;min-height:44px}.history-sentence .placeholder{color:var(--text-secondary);font-size:12px;font-weight:400;letter-spacing:normal}.history-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.history-stat{display:flex;flex-direction:column;align-items:center;padding:10px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.history-stat .stat-value{font-size:18px}.history-stat .stat-label{font-size:9px}.history-letters{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.history-letter-chip{padding:4px 8px;background:var(--accent-tertiary);border:1px solid var(--accent-primary);border-radius:var(--radius-md);font-size:12px;font-weight:600;color:var(--accent-primary)}.history-letter-chip small{font-weight:400;opacity:.7;margin-left:2px}.quiz-setup{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);padding:var(--space-9) var(--space-5);text-align:center}.quiz-setup-title{font-size:28px;font-weight:700;color:var(--text-primary);letter-spacing:-.02em}.quiz-setup-subtitle{font-size:14px;color:var(--text-secondary);max-width:400px;line-height:1.6}.quiz-difficulty-grid{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center}.quiz-difficulty-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-6) var(--space-7);background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);min-width:160px;box-shadow:var(--shadow-sm)}.quiz-difficulty-card:hover{border-color:var(--accent-primary);transform:translateY(-1px)}.quiz-difficulty-card.selected{border-color:var(--accent-primary);background:var(--accent-tertiary)}.quiz-diff-icon{font-size:36px}.quiz-diff-label{font-size:14px;font-weight:700;color:var(--text-primary)}.quiz-diff-rounds{font-size:11px;color:var(--text-secondary)}.quiz-alltime-stats{display:flex;gap:20px}.quiz-stat-mini{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 20px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md)}.quiz-start-btn{padding:14px 48px!important;font-size:16px!important;font-weight:700;margin-top:8px}.quiz-progress-bar{height:4px;background:var(--bg-secondary);border-radius:2px;margin-bottom:16px;overflow:hidden}.quiz-progress-fill{height:100%;background:var(--accent-primary);border-radius:2px;transition:width .3s ease}.quiz-playing-layout{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}@media(max-width:900px){.quiz-playing-layout{grid-template-columns:1fr}}.quiz-video-section{display:flex;flex-direction:column;gap:10px}.quiz-video-section .video-container{position:relative;border-radius:var(--radius-md);overflow:hidden}.quiz-video-section .video-feed{width:100%;display:block}.quiz-match-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.quiz-match-ring{width:100px;height:100px}.ring-bg{fill:none;stroke:#ffffff26;stroke-width:6}.ring-fill{fill:none;stroke:var(--accent-primary);stroke-width:6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dasharray .05s linear}.quiz-match-text{font-size:14px;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7)}.quiz-feedback-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;color:#fff;animation:feedbackPop .3s ease;pointer-events:none;z-index:20}.quiz-feedback-overlay.correct{background:#10b98180}.quiz-feedback-overlay.timeout,.quiz-feedback-overlay.wrong{background:#ef444466}@keyframes feedbackPop{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.quiz-ai-reading{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md)}.quiz-ai-label{font-size:12px;color:var(--text-secondary)}.quiz-ai-letter{font-size:24px;font-weight:800;color:var(--text-primary);transition:color .15s ease}.quiz-ai-letter.matching{color:var(--accent-primary)}.quiz-ai-conf{font-size:12px;color:var(--text-secondary);margin-left:auto}.quiz-info-section{display:flex;flex-direction:column;gap:12px}.quiz-target-card{text-align:center}.quiz-timer{font-size:14px;font-weight:700;font-family:var(--font-mono)}.quiz-target-display{padding:20px}.quiz-target-letter{font-family:var(--font-display);font-size:96px;font-weight:900;color:var(--accent-primary);line-height:1;animation:letterPop .15s ease}.quiz-skip-btn{width:100%;margin-top:8px}.quiz-score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 0}.quiz-score-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md)}.quiz-upcoming{display:flex;gap:8px;padding:8px 0;align-items:center}.quiz-upcoming-letter{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:16px;font-weight:700;color:var(--text-secondary)}.quiz-upcoming-more{font-size:12px;color:var(--text-secondary)}.quiz-results{display:flex;flex-direction:column;align-items:center;gap:24px;padding:20px}.quiz-results-grade{font-size:32px;font-weight:800;color:var(--accent-primary);animation:feedbackPop .3s ease}.quiz-results-stats{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.quiz-result-stat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 24px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);min-width:100px}.quiz-result-stat.big{background:var(--accent-tertiary);border-color:var(--accent-primary)}.quiz-result-stat .stat-value{font-size:24px;font-weight:800;color:var(--text-primary)}.quiz-result-stat.big .stat-value{font-size:36px;color:var(--accent-primary)}.quiz-results-breakdown{width:100%;max-width:500px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:16px}.quiz-rounds-list{display:flex;flex-direction:column;gap:6px;margin-top:12px}.quiz-round-item{display:grid;grid-template-columns:40px 40px 40px 50px 30px;gap:8px;align-items:center;padding:8px 12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:13px}.quiz-round-item.correct{border-left:3px solid var(--accent-primary)}.quiz-round-item.wrong{border-left:3px solid #ef4444}.round-num{color:var(--text-secondary);font-size:11px}.round-target{font-weight:800;color:var(--accent-primary);font-size:16px}.round-answer{font-weight:600;color:var(--text-primary)}.round-time{font-size:11px;color:var(--text-secondary);text-align:right}.round-icon{text-align:center}.quiz-results-actions{display:flex;gap:12px}.practice-select{max-width:600px;margin:40px auto;text-align:center}.practice-select h2{margin-bottom:8px}.practice-subtitle{color:var(--text-secondary);margin-bottom:24px}.practice-letter-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.practice-letter-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;transition:all var(--transition-base)}.practice-letter-btn:hover{border-color:var(--accent-primary);background:var(--accent-tertiary)}.practice-mastered{text-align:center;padding:60px}.mastered-badge{font-size:24px;font-weight:700;color:var(--accent-primary);margin-bottom:16px}.mastered-letter{font-size:72px;font-weight:700;margin:24px 0}.practice-playing-layout{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start;padding:16px}.practice-video-section{display:flex;flex-direction:column;gap:10px}.practice-video-section .video-container{position:relative;border-radius:var(--radius-md);overflow:hidden}.practice-target-section{display:flex;flex-direction:column;gap:16px}