:root{--brand-blue: #0066FF;--brand-blue-hover: #0052FF;--brand-blue-glow: rgba(0, 102, 255, .4);--brand-cyan: #06B6D4;--brand-purple: #8B5CF6;--color-success: #10B981;--color-warning: #F59E0B;--color-danger: #EF4444;--bg-main: #080B18;--bg-surface: rgba(14, 19, 38, .75);--bg-surface-hover: rgba(22, 30, 60, .85);--bg-card: rgba(18, 25, 50, .6);--bg-input: rgba(10, 14, 30, .8);--border-glass: rgba(0, 102, 255, .18);--border-glass-hover: rgba(0, 102, 255, .4);--border-subtle: rgba(255, 255, 255, .08);--text-primary: #F1F5F9;--text-secondary: #94A3B8;--text-muted: #64748B;--gradient-brand: linear-gradient(135deg, #0066FF 0%, #8B5CF6 50%, #06B6D4 100%);--gradient-glow: linear-gradient(135deg, rgba(0, 102, 255, .3), rgba(139, 92, 246, .3));--radius-sm: 8px;--radius-md: 12px;--radius-lg: 18px;--radius-xl: 24px;--radius-full: 9999px;--shadow-card: 0 10px 30px -5px rgba(0, 0, 0, .5), 0 0 20px rgba(0, 102, 255, .08);--shadow-glow: 0 0 35px rgba(0, 102, 255, .35);--trans-fast: .15s cubic-bezier(.4, 0, .2, 1);--trans-normal: .3s cubic-bezier(.4, 0, .2, 1);--trans-bounce: .5s cubic-bezier(.175, .885, .32, 1.275);--font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", monospace}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-sans);background-color:var(--bg-main);color:var(--text-primary);min-height:100vh;overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}.app-background{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;overflow:hidden;pointer-events:none}.glow-orb{position:absolute;border-radius:var(--radius-full);filter:blur(120px);opacity:.25;animation:floatOrb 12s ease-in-out infinite alternate}.orb-1{top:-10%;left:10%;width:500px;height:500px;background:var(--brand-blue)}.orb-2{bottom:-15%;right:5%;width:600px;height:600px;background:var(--brand-purple);animation-delay:-4s}.orb-3{top:40%;right:35%;width:400px;height:400px;background:var(--brand-cyan);animation-delay:-8s}@keyframes floatOrb{0%{transform:translate(0) scale(1)}to{transform:translate(40px,30px) scale(1.15)}}.app{max-width:1440px;margin:0 auto;padding:1.25rem 1.5rem 2.5rem}.header{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1.5rem;background:var(--bg-surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-glass);border-radius:var(--radius-lg);margin-bottom:1.5rem;box-shadow:var(--shadow-card)}.brand{display:flex;align-items:center;gap:1rem}.logo-wrapper{position:relative;width:48px;height:48px;display:flex;align-items:center;justify-content:center}.brand-logo{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 0 12px var(--brand-blue-glow));transition:transform var(--trans-bounce)}.logo-wrapper:hover .brand-logo{transform:scale(1.1) rotate(-5deg)}.logo-pulse{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:var(--radius-full);border:2px solid var(--brand-blue);opacity:.4;animation:pulseRing 3s ease-out infinite}@keyframes pulseRing{0%{transform:scale(.85);opacity:.8}to{transform:scale(1.3);opacity:0}}.brand-title-group{display:flex;align-items:center;gap:.5rem}.brand-text h1{font-size:1.5rem;font-weight:800;letter-spacing:-.5px;line-height:1.1}.gradient-text{background:var(--gradient-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.version-badge{font-size:.7rem;font-weight:700;padding:.15rem .45rem;background:#0066ff26;color:var(--brand-blue);border:1px solid rgba(0,102,255,.3);border-radius:var(--radius-sm)}.tagline{font-size:.78rem;color:var(--text-secondary);font-weight:500}.header-actions{display:flex;align-items:center;gap:.75rem}.status-chip{display:flex;align-items:center;gap:.5rem;padding:.4rem .85rem;background:#ffffff0a;border:1px solid var(--border-subtle);border-radius:var(--radius-full);font-size:.82rem;font-weight:600;color:var(--text-secondary)}.status-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--color-warning);box-shadow:0 0 10px var(--color-warning);transition:background var(--trans-normal)}.status-chip.ready .status-dot{background:var(--color-success);box-shadow:0 0 10px var(--color-success)}.status-chip.active .status-dot{background:var(--brand-blue);box-shadow:0 0 10px var(--brand-blue);animation:dotBlink 1.5s infinite alternate}@keyframes dotBlink{0%{opacity:.4}to{opacity:1}}.control-btn{display:flex;align-items:center;gap:.4rem;padding:.5rem .85rem;border-radius:var(--radius-md);border:1px solid var(--border-glass);background:#ffffff08;color:var(--text-secondary);font-family:var(--font-sans);font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--trans-normal)}.control-btn:hover{border-color:var(--brand-blue);color:var(--text-primary);background:#0066ff1f;box-shadow:0 0 15px #06f3}.control-btn.active{color:var(--brand-blue);border-color:#06f6;background:#0066ff1a}.main-content{display:grid;grid-template-columns:1fr 400px;gap:1.5rem}.camera-studio{display:flex;flex-direction:column;gap:1rem;background:var(--bg-surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-glass);border-radius:var(--radius-xl);padding:1.25rem;box-shadow:var(--shadow-card)}.studio-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:.5rem;border-bottom:1px solid var(--border-subtle)}.studio-title{display:flex;align-items:center;gap:.5rem;color:var(--brand-blue);font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:.5px}.fps-meter{font-family:var(--font-mono);font-size:.78rem;padding:.2rem .6rem;background:#0006;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--brand-cyan)}.camera-container{position:relative;width:100%;aspect-ratio:4 / 3;background:#04060e;border-radius:var(--radius-lg);overflow:hidden;border:2px solid var(--border-glass);box-shadow:inset 0 0 40px #000c}.camera-container video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-container canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;transform:scaleX(-1);pointer-events:none}.camera-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;background:radial-gradient(circle at center,#0e1326f2,#080b18fa);text-align:center;z-index:10;transition:opacity var(--trans-normal)}.overlay-brand{margin-bottom:1rem}.overlay-logo{width:80px;height:80px;filter:drop-shadow(0 0 20px var(--brand-blue-glow));animation:overlayFloat 4s ease-in-out infinite alternate}@keyframes overlayFloat{0%{transform:translateY(0)}to{transform:translateY(-8px)}}.camera-overlay h3{font-size:1.4rem;font-weight:800;margin-bottom:.5rem;color:var(--text-primary)}.camera-overlay p{font-size:.9rem;color:var(--text-secondary);max-width:420px;margin-bottom:1.5rem}.btn-primary{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.75rem;background:var(--brand-blue);color:#fff;font-family:var(--font-sans);font-size:1rem;font-weight:700;border:none;border-radius:var(--radius-md);cursor:pointer;box-shadow:0 4px 20px var(--brand-blue-glow);transition:all var(--trans-normal)}.btn-primary:hover{background:var(--brand-blue-hover);transform:translateY(-2px);box-shadow:0 8px 30px var(--brand-blue-glow)}.camera-hint{margin-top:1.25rem;font-size:.8rem;color:var(--text-muted)}kbd{display:inline-block;padding:.15rem .45rem;font-family:var(--font-mono);font-size:.75rem;color:var(--brand-cyan);background:#ffffff14;border:1px solid var(--border-subtle);border-radius:4px}.camera-hud{position:absolute;top:1rem;left:1rem;right:1rem;display:flex;justify-content:space-between;pointer-events:none;z-index:5}.hand-status{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem 1rem;border-radius:var(--radius-full);font-size:.85rem;font-weight:700;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all var(--trans-normal)}.hand-status.no-hand{background:#0f172acc;color:var(--text-secondary);border:1px solid var(--border-subtle)}.hand-status.hand-detected{background:#10b98133;color:#34d399;border:1px solid rgba(16,185,129,.4);box-shadow:0 0 15px #10b9814d}.camera-controls-bar{display:flex;justify-content:space-between;align-items:center;padding-top:.5rem}.btn-secondary{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;background:#ffffff0d;border:1px solid var(--border-glass);border-radius:var(--radius-md);color:var(--text-secondary);font-family:var(--font-sans);font-size:.88rem;font-weight:600;cursor:pointer;transition:all var(--trans-normal)}.btn-secondary:hover{background:#ef444426;border-color:#ef444466;color:var(--color-danger)}.shortcut-hints{display:flex;gap:1rem;font-size:.78rem;color:var(--text-muted)}.results-dashboard{display:flex;flex-direction:column;gap:1.25rem}.dashboard-card{background:var(--bg-surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-glass);border-radius:var(--radius-xl);padding:1.25rem;box-shadow:var(--shadow-card)}.card-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.card-icon-badge{width:36px;height:36px;border-radius:var(--radius-md);background:#0066ff1f;border:1px solid rgba(0,102,255,.3);color:var(--brand-blue);display:flex;align-items:center;justify-content:center}.card-title-group h2{font-size:1.05rem;font-weight:800;line-height:1.2}.card-title-group .subtitle{font-size:.75rem;color:var(--text-muted)}.current-letter-card{text-align:center}.letter-display{display:flex;flex-direction:column;align-items:center;gap:1rem}.letter-circle-glow{position:relative;width:140px;height:140px;display:flex;align-items:center;justify-content:center}.detected-letter{font-size:3.5rem;font-weight:900;font-family:var(--font-mono);color:var(--text-primary);text-shadow:0 0 20px var(--brand-blue-glow);transition:transform var(--trans-bounce)}.detected-letter.active-pop{animation:letterPop .3s cubic-bezier(.175,.885,.32,1.275);color:var(--brand-cyan)}@keyframes letterPop{0%{transform:scale(.6)}50%{transform:scale(1.25)}to{transform:scale(1)}}.progress-ring{position:absolute;top:0;right:0;bottom:0;left:0;transform:rotate(-90deg)}.progress-ring-bg{fill:transparent;stroke:#ffffff0f;stroke-width:6}.progress-ring-fill{fill:transparent;stroke:var(--brand-blue);stroke-width:6;stroke-linecap:round;stroke-dasharray:389;stroke-dashoffset:389;transition:stroke-dashoffset .2s ease,stroke var(--trans-normal)}.confidence-container{width:100%}.confidence-info{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-secondary);margin-bottom:.35rem}.confidence-info strong{color:var(--brand-cyan);font-family:var(--font-mono)}.confidence-bar{width:100%;height:8px;background:#ffffff14;border-radius:var(--radius-full);overflow:hidden;margin-bottom:.5rem}.confidence-fill{height:100%;width:0%;background:var(--gradient-brand);border-radius:var(--radius-full);transition:width var(--trans-normal)}.confidence-text{font-size:.78rem;color:var(--text-muted)}.word-box{min-height:80px;padding:1rem;background:var(--bg-input);border:1px solid var(--border-glass);border-radius:var(--radius-lg);margin-bottom:1rem;display:flex;align-items:center;overflow-x:auto}.word-display{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;width:100%}.word-placeholder{color:var(--text-muted);font-size:.85rem;font-style:italic}.letter-chip{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:38px;padding:0 .6rem;background:linear-gradient(135deg,#0066ff40,#8b5cf640);border:1px solid rgba(0,102,255,.4);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-mono);font-weight:800;font-size:1.1rem;box-shadow:0 2px 8px #0000004d;animation:chipAppear .25s cubic-bezier(.175,.885,.32,1.275)}.letter-chip.space-chip{min-width:24px;background:#ffffff0d;border-color:var(--border-subtle)}@keyframes chipAppear{0%{opacity:0;transform:scale(.5) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.word-toolbar{display:flex;flex-wrap:wrap;gap:.5rem}.btn-tool{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .8rem;background:#ffffff0a;border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-secondary);font-family:var(--font-sans);font-size:.8rem;font-weight:600;cursor:pointer;transition:all var(--trans-normal)}.btn-tool:hover{background:#ffffff1a;color:var(--text-primary)}.btn-tool-primary{background:#0066ff26;border-color:#06f6;color:var(--brand-blue)}.btn-tool-primary:hover{background:var(--brand-blue);color:#fff}.btn-tool-danger{margin-left:auto}.btn-tool-danger:hover{background:#ef444433;border-color:#ef444466;color:var(--color-danger)}.tabs-header{display:flex;gap:.5rem;border-bottom:1px solid var(--border-subtle);padding-bottom:.75rem;margin-bottom:1rem}.tab-btn{display:flex;align-items:center;gap:.4rem;padding:.45rem .85rem;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-muted);font-family:var(--font-sans);font-size:.82rem;font-weight:700;cursor:pointer;transition:all var(--trans-normal)}.tab-btn:hover{color:var(--text-secondary)}.tab-btn.active{background:#0066ff1f;color:var(--brand-blue);border:1px solid rgba(0,102,255,.3)}.tab-content{display:none}.tab-content.active{display:block}.search-box{display:flex;align-items:center;gap:.5rem;padding:.5rem .85rem;background:var(--bg-input);border:1px solid var(--border-glass);border-radius:var(--radius-md);margin-bottom:.85rem;color:var(--text-muted)}.search-box input{width:100%;background:transparent;border:none;outline:none;color:var(--text-primary);font-family:var(--font-sans);font-size:.85rem}.search-box input::placeholder{color:var(--text-muted)}.alphabet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:.5rem;max-height:200px;overflow-y:auto;padding-right:.25rem}.alphabet-grid::-webkit-scrollbar,.history-list::-webkit-scrollbar{width:5px}.alphabet-grid::-webkit-scrollbar-thumb,.history-list::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:var(--radius-full)}.letter-card{display:flex;flex-direction:column;align-items:center;justify-content:center;height:48px;background:#ffffff08;border:1px solid var(--border-subtle);border-radius:var(--radius-md);font-family:var(--font-mono);font-weight:800;font-size:1rem;color:var(--text-secondary);cursor:pointer;transition:all var(--trans-normal)}.letter-card:hover{border-color:var(--brand-blue);color:var(--brand-blue);background:#0066ff1a;transform:translateY(-2px)}.letter-card.active-detected{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);box-shadow:0 0 15px var(--brand-blue-glow)}.history-actions{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--text-muted);margin-bottom:.75rem}.btn-text-danger{background:none;border:none;color:var(--color-danger);font-family:var(--font-sans);font-size:.78rem;font-weight:600;cursor:pointer}.history-list{display:flex;flex-direction:column;gap:.4rem;max-height:200px;overflow-y:auto}.history-item{display:flex;justify-content:space-between;align-items:center;padding:.45rem .75rem;background:#ffffff08;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:.82rem}.history-letter{font-family:var(--font-mono);font-weight:800;color:var(--brand-cyan)}.history-time{color:var(--text-muted);font-size:.75rem}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#04060ed9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:100;opacity:0;pointer-events:none;transition:opacity var(--trans-normal)}.modal-backdrop.open{opacity:1;pointer-events:auto}.modal-content{width:100%;max-width:520px;background:var(--bg-main);border:1px solid var(--border-glass);border-radius:var(--radius-xl);padding:1.75rem;box-shadow:0 20px 50px #000c;transform:scale(.9);transition:transform var(--trans-bounce)}.modal-backdrop.open .modal-content{transform:scale(1)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-subtle)}.modal-title{display:flex;align-items:center;gap:.75rem}.modal-logo{width:32px;height:32px}.modal-close{background:none;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer}.guide-step{display:flex;gap:1rem;margin-bottom:1rem}.step-num{width:28px;height:28px;border-radius:var(--radius-full);background:var(--brand-blue);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}.step-info h4{font-size:.95rem;margin-bottom:.2rem}.step-info p{font-size:.82rem;color:var(--text-secondary)}.keyboard-shortcuts-guide{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border-subtle)}.keyboard-shortcuts-guide h4{font-size:.9rem;margin-bottom:.5rem}.keyboard-shortcuts-guide ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;font-size:.8rem;color:var(--text-secondary)}.toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%) translateY(100px);padding:.75rem 1.5rem;background:var(--brand-blue);color:#fff;font-weight:700;font-size:.88rem;border-radius:var(--radius-full);box-shadow:0 10px 30px var(--brand-blue-glow);z-index:200;opacity:0;transition:all var(--trans-bounce)}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#04060ef2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:300;opacity:0;pointer-events:none;visibility:hidden;transition:opacity var(--trans-normal),visibility var(--trans-normal)}.loading-overlay.visible{opacity:1;pointer-events:auto;visibility:visible}.loading-box{text-align:center}.loading-logo{width:90px;height:90px;margin-bottom:1.5rem;filter:drop-shadow(0 0 25px var(--brand-blue-glow));animation:loadingPulse 2s ease-in-out infinite alternate}@keyframes loadingPulse{0%{transform:scale(.95);opacity:.8}to{transform:scale(1.08);opacity:1}}.loading-spinner{position:relative;width:60px;height:60px;margin:0 auto 1.5rem}.spinner-ring{position:absolute;top:0;right:0;bottom:0;left:0;border:3px solid transparent;border-top-color:var(--brand-blue);border-radius:50%;animation:spin 1s linear infinite}.spinner-ring:nth-child(2){top:6px;right:6px;bottom:6px;left:6px;border-top-color:var(--brand-cyan);animation-duration:1.5s;animation-direction:reverse}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-weight:600;color:var(--text-secondary);font-size:.95rem}@media (max-width: 1024px){.main-content{grid-template-columns:1fr}}@media (max-width: 640px){.header{flex-direction:column;align-items:flex-start;gap:1rem}.header-actions{width:100%;justify-content:space-between}.shortcut-hints{display:none}}