@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/JetBrainsMono-Variable.woff2) format("woff2")}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/SpaceGrotesk-Variable.woff2) format("woff2")}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body{min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;color:currentColor}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a24;--bg-elevated: #22222e;--text-primary: #e8e8ed;--text-secondary: #8888a0;--text-muted: #55556a;--accent-primary: #00d4aa;--accent-secondary: #7c3aed;--accent-warning: #f59e0b;--accent-error: #ef4444;--accent-success: #10b981;--key-bg: #1e1e2a;--key-bg-hover: #2a2a38;--key-border: #333344;--key-active: #00d4aa;--finger-pinky: #ff6b6b;--finger-ring: #ffa94d;--finger-middle: #ffd43b;--finger-index-left: #69db7c;--finger-index-right: #b197fc;--finger-thumb: #74c0fc;--border-radius: 8px;--border-radius-lg: 16px;--transition: all .2s cubic-bezier(.4, 0, .2, 1)}html,body,#root{height:100%;width:100%;overflow-x:hidden}body{font-family:Space Grotesk,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 20% 20%,rgba(0,212,170,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(124,58,237,.08) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 0%,var(--bg-primary) 100%);pointer-events:none;z-index:-1}.app{min-height:100vh;display:flex;flex-direction:column;padding:20px;max-width:1600px;width:100%;margin:0 auto}.header{text-align:center;margin-bottom:30px}.header h1{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}.header p{color:var(--text-secondary);font-size:1rem}.header-options{margin-top:16px}.header-toggles{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.header-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:.85rem;color:var(--text-secondary);transition:var(--transition);padding:6px 10px;background:var(--bg-tertiary);border-radius:var(--border-radius);border:1px solid transparent}.header-toggle:hover{color:var(--text-primary);border-color:var(--key-border)}.header-toggle input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.header-toggle .toggle-switch{position:relative;width:32px;height:18px;background:var(--bg-secondary);border-radius:9px;border:1px solid var(--key-border);transition:var(--transition);flex-shrink:0}.header-toggle .toggle-switch:after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--text-muted);top:2px;left:2px;transition:var(--transition)}.header-toggle input:checked+.toggle-switch{background:var(--accent-primary);border-color:var(--accent-primary)}.header-toggle input:checked+.toggle-switch:after{left:16px;background:#fff}.header-toggle input:checked~span:last-child{color:var(--text-primary)}.toggle-divider{width:1px;height:24px;background:var(--key-border)}.layout-selector{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--bg-tertiary);border-radius:var(--border-radius);border:1px solid transparent;transition:var(--transition)}.layout-selector:hover{border-color:var(--key-border)}.layout-selector label{font-size:.85rem;color:var(--text-secondary);white-space:nowrap}.layout-selector select{background:var(--bg-secondary);border:1px solid var(--key-border);border-radius:4px;padding:4px 8px;font-family:Space Grotesk,sans-serif;font-size:.85rem;color:var(--text-primary);cursor:pointer;transition:var(--transition);min-width:130px}.layout-selector select:hover{border-color:var(--accent-primary)}.layout-selector select:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 2px #00d4aa33}.layout-selector select option{background:var(--bg-secondary);color:var(--text-primary);padding:8px}@media(width<=600px){.header-toggles{gap:8px}.header-toggle{padding:4px 8px;font-size:.75rem}.header-toggle .toggle-switch{width:28px;height:16px}.header-toggle .toggle-switch:after{width:10px;height:10px;top:2px;left:2px}.header-toggle input:checked+.toggle-switch:after{left:14px}.toggle-divider{height:20px}.layout-selector{padding:4px 8px}.layout-selector label{font-size:.75rem}.layout-selector select{font-size:.75rem;padding:3px 6px;min-width:100px}}.main-content{display:grid;grid-template-columns:1fr 400px;gap:24px;flex:1;width:100%}.left-column{display:flex;flex-direction:column;gap:24px;min-width:0;overflow:hidden}.right-column{display:flex;flex-direction:column;gap:16px}.right-column .keyboard-container{padding:10px;overflow:hidden}.right-column .keyboard,.right-column .keyboard-row{gap:2px}.right-column .keyboard-row:nth-child(5){align-self:center}.right-column .keyboard .key{min-width:22px;height:22px;font-size:.5rem;border-radius:4px}.right-column .keyboard .key.space{width:160px}.right-column .keyboard .key.backspace,.right-column .keyboard .key.tab{width:42px}.right-column .keyboard .key.caps,.right-column .keyboard .key.enter{width:48px}.right-column .keyboard .key.shift{width:60px}.right-column .keyboard .key.home-key:after{bottom:4px;width:8px;height:2px}.right-column .finger-legend{gap:6px;margin-top:8px;font-size:.6rem}.right-column .finger-legend .legend-dot{width:6px;height:6px}.camera-block{display:flex;flex-direction:column;gap:16px}.camera-block .camera-container{aspect-ratio:16/10}@media(max-width:1024px){.main-content{grid-template-columns:1fr}}@media(max-width:768px){.app{padding:12px}.header h1{font-size:1.8rem}.keyboard-container{padding:16px}.key{min-width:36px;height:36px;font-size:.7rem}.key.space{width:260px}.key.backspace,.key.tab{width:70px}.key.caps,.key.enter{width:80px}.key.shift{width:100px}.keyboard-row{gap:4px}.text-display{padding:20px;font-size:1.2rem}}@media(max-width:600px){.app{padding:8px}.header{margin-bottom:16px}.header h1{font-size:1.5rem}.header p{font-size:.85rem}.main-content{gap:16px}.keyboard-container{padding:10px}.key{min-width:28px;height:28px;font-size:.55rem;border-radius:4px}.key.space{width:180px}.key.backspace,.key.tab{width:50px}.key.caps,.key.enter{width:56px}.key.shift{width:70px}.keyboard,.keyboard-row{gap:3px}.text-display{padding:16px;font-size:1rem;min-height:100px;line-height:1.8}.finger-legend{gap:8px;font-size:.6rem}.legend-dot{width:8px;height:8px}.controls{flex-wrap:wrap}.btn{padding:8px 16px;font-size:.8rem}}@media(max-width:480px){.key{min-width:22px;height:22px;font-size:.45rem;border-radius:3px}.key.space{width:140px}.key.backspace,.key.tab{width:38px}.key.caps,.key.enter{width:44px}.key.shift{width:54px}.keyboard,.keyboard-row{gap:2px}.text-display{padding:12px;font-size:.9rem}.finger-legend{display:none}}@media(max-width:320px){.app{padding:4px}.header h1{font-size:1.2rem}.header p{font-size:.75rem}.key{min-width:18px;height:18px;font-size:.4rem;border-radius:2px}.key.space{width:100px}.key.backspace,.key.tab{width:30px}.key.caps,.key.enter{width:36px}.key.shift{width:44px}.text-display{padding:8px;font-size:.8rem;min-height:80px}.controls{gap:6px}.btn{padding:6px 12px;font-size:.7rem}.stats-panel{padding:12px}.stat-value{font-size:1.2rem}}.typing-section{display:flex;flex-direction:column;gap:24px}.text-display{background:var(--bg-secondary);border:1px solid var(--key-border);border-radius:var(--border-radius-lg);padding:32px;font-family:JetBrains Mono,monospace;font-size:1.5rem;line-height:2;letter-spacing:.5px;min-height:150px;box-sizing:border-box}.text-display .word{display:inline-block;white-space:nowrap}.text-display .char{transition:var(--transition)}.text-display .char.correct{color:var(--accent-success)}.text-display .char.incorrect{color:var(--accent-error);text-decoration:underline}.text-display .char.current{background:var(--accent-primary);color:var(--bg-primary);border-radius:2px;padding:2px 1px;animation:pulse 1s ease-in-out infinite}.text-display .char.pending{color:var(--text-muted)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.keyboard-container{background:var(--bg-secondary);border:1px solid var(--key-border);border-radius:var(--border-radius-lg);padding:24px;overflow-x:auto}.keyboard{display:flex;flex-direction:column;gap:6px;align-items:flex-start;width:-moz-fit-content;width:fit-content;margin:0 auto}.keyboard-row{display:flex;gap:6px}.keyboard-row:nth-child(5){align-self:center}.key{border:1px solid var(--key-border);border-radius:var(--border-radius);min-width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-family:JetBrains Mono,monospace;font-size:.85rem;font-weight:600;text-transform:uppercase;color:var(--bg-primary);transition:var(--transition);cursor:default;position:relative}.key[data-finger=left-pinky],.key[data-finger=right-pinky]{background:var(--finger-pinky);border-color:color-mix(in sRGB,var(--finger-pinky) 70%,black)}.key[data-finger=left-ring],.key[data-finger=right-ring]{background:var(--finger-ring);border-color:color-mix(in sRGB,var(--finger-ring) 70%,black)}.key[data-finger=left-middle],.key[data-finger=right-middle]{background:var(--finger-middle);border-color:color-mix(in sRGB,var(--finger-middle) 70%,black)}.key[data-finger=left-index]{background:var(--finger-index-left);border-color:color-mix(in sRGB,var(--finger-index-left) 70%,black)}.key[data-finger=right-index]{background:var(--finger-index-right);border-color:color-mix(in sRGB,var(--finger-index-right) 70%,black)}.key[data-finger=left-thumb],.key[data-finger=right-thumb]{background:var(--finger-thumb);border-color:color-mix(in sRGB,var(--finger-thumb) 70%,black)}.key:not([data-finger]){background:var(--key-bg);color:var(--text-secondary)}.key.home-key:after{content:"";position:absolute;bottom:8px;left:50%;transform:translate(-50%);width:12px;height:3px;background:#0006;border-radius:2px}.key.active{filter:brightness(1.3);transform:scale(.95);box-shadow:0 0 20px #ffffff4d}.key.highlight{box-shadow:0 0 0 3px var(--bg-primary),0 0 0 5px #fff,0 0 25px #ffffff80;transform:scale(1.05);z-index:10}.key.space{width:350px}.key.backspace,.key.tab{width:90px}.key.caps,.key.enter{width:100px}.key.shift{width:130px}.stats-panel{background:var(--bg-secondary);border:1px solid var(--key-border);border-radius:var(--border-radius-lg);padding:24px}.stats-panel h3{font-size:1rem;color:var(--text-secondary);margin-bottom:20px;text-transform:uppercase;letter-spacing:1px}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.stat-item{background:var(--bg-tertiary);border-radius:var(--border-radius);padding:16px;text-align:center}.stat-value{font-size:2rem;font-weight:700;font-family:JetBrains Mono,monospace}.stat-value.primary{color:var(--accent-primary)}.stat-value.success{color:var(--accent-success)}.stat-value.warning{color:var(--accent-warning)}.stat-value.error{color:var(--accent-error)}.stat-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:4px}.camera-section{display:flex;flex-direction:column;gap:16px}.camera-container{background:var(--bg-secondary);border:1px solid var(--key-border);border-radius:var(--border-radius-lg);overflow:hidden;position:relative;aspect-ratio:4/3}.camera-container video,.camera-container canvas{width:100%;height:100%;object-fit:cover}.camera-container canvas{position:absolute;top:0;left:0}.camera-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--text-muted)}.camera-placeholder svg{width:64px;height:64px;opacity:.5}.camera-selector{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-tertiary);border-radius:var(--border-radius);margin-bottom:8px}.camera-selector label{font-size:.8rem;color:var(--text-secondary);white-space:nowrap}.camera-selector select{flex:1;background:var(--bg-secondary);border:1px solid var(--key-border);border-radius:4px;padding:6px 10px;font-family:Space Grotesk,sans-serif;font-size:.85rem;color:var(--text-primary);cursor:pointer;transition:var(--transition)}.camera-selector select:hover{border-color:var(--accent-primary)}.camera-selector select:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 2px #00d4aa33}.camera-selector select option{background:var(--bg-secondary);color:var(--text-primary)}.desk-view-hint{font-size:.7rem;color:var(--accent-success);white-space:nowrap}.desk-view-tip{background:linear-gradient(135deg,#00d4aa1a,#7c3aed1a);border:1px solid var(--accent-primary);border-radius:var(--border-radius);padding:10px 14px;font-size:.8rem;color:var(--text-secondary);margin-bottom:8px}.desk-view-tip strong{color:var(--accent-primary)}.camera-toggle{background:var(--accent-primary);color:var(--bg-primary);border:none;border-radius:var(--border-radius);padding:12px 24px;font-family:Space Grotesk,sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition)}.camera-toggle:hover{background:#00e6b8;transform:translateY(-2px)}.camera-toggle.active{background:var(--accent-error)}.finger-status{background:var(--bg-secondary);border:1px solid var(--key-border);border-radius:var(--border-radius-lg);padding:20px}.finger-status h3{font-size:.85rem;color:var(--text-secondary);margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}.hands-display{display:flex;gap:24px;justify-content:center}.hand{display:flex;flex-direction:column;align-items:center;gap:8px}.hand-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase}.fingers{display:flex;gap:4px}.finger-indicator{width:24px;height:32px;border-radius:12px 12px 6px 6px;border:2px solid transparent;transition:var(--transition);opacity:.4}.finger-indicator.active{transform:translateY(-4px);box-shadow:0 4px 12px #0000004d;opacity:1}.finger-indicator.pinky{background:var(--finger-pinky);border-color:color-mix(in sRGB,var(--finger-pinky) 70%,black)}.finger-indicator.ring{background:var(--finger-ring);border-color:color-mix(in sRGB,var(--finger-ring) 70%,black)}.finger-indicator.middle{background:var(--finger-middle);border-color:color-mix(in sRGB,var(--finger-middle) 70%,black)}.finger-indicator.thumb{background:var(--finger-thumb);border-color:color-mix(in sRGB,var(--finger-thumb) 70%,black);width:28px;height:24px;border-radius:6px}.hand:first-child .finger-indicator.index{background:var(--finger-index-left);border-color:color-mix(in sRGB,var(--finger-index-left) 70%,black)}.hand:last-child .finger-indicator.index{background:var(--finger-index-right);border-color:color-mix(in sRGB,var(--finger-index-right) 70%,black)}.expected-finger{margin-top:16px;padding:12px;background:var(--bg-tertiary);border-radius:var(--border-radius);text-align:center}.expected-finger .label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase}.expected-finger .finger-name{font-size:1.1rem;font-weight:600;margin-top:4px}.controls{display:flex;gap:12px;justify-content:center;margin-top:16px}.btn{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--key-border);border-radius:var(--border-radius);padding:10px 20px;font-family:Space Grotesk,sans-serif;font-size:.9rem;font-weight:500;cursor:pointer;transition:var(--transition)}.btn:hover{background:var(--bg-elevated);border-color:var(--accent-primary)}.btn.primary{background:var(--accent-primary);color:var(--bg-primary);border-color:var(--accent-primary)}.btn.primary:hover{background:#00e6b8}.validation-feedback{position:fixed;top:20px;right:20px;padding:16px 24px;border-radius:var(--border-radius);font-weight:600;animation:slideIn .3s ease-out;z-index:1000}.validation-feedback.correct{background:var(--accent-success);color:#fff}.validation-feedback.incorrect{background:var(--accent-error);color:#fff}.validation-feedback.blocked{background:var(--accent-error);animation:slideIn .3s ease-out,shake .5s ease-in-out;display:flex;flex-direction:column;align-items:center;gap:4px}.validation-feedback .blocked-message{font-size:.75rem;font-weight:500;opacity:.9}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.strict-mode-toggle{margin-top:12px}.toggle-label{display:flex;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.toggle-label input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.toggle-switch{position:relative;width:44px;height:24px;background:var(--bg-tertiary);border-radius:12px;border:1px solid var(--key-border);transition:var(--transition);flex-shrink:0}.toggle-switch:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--text-muted);border-radius:50%;transition:var(--transition)}.toggle-label input:checked+.toggle-switch{background:var(--accent-primary);border-color:var(--accent-primary)}.toggle-label input:checked+.toggle-switch:after{left:22px;background:#fff}.toggle-label input:focus-visible+.toggle-switch{outline:2px solid var(--accent-primary);outline-offset:2px}.toggle-text{display:flex;flex-direction:column;gap:2px;font-size:.85rem;font-weight:500;color:var(--text-primary)}.toggle-hint{font-size:.7rem;font-weight:400;color:var(--text-muted)}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.finger-legend{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--key-border)}.legend-item{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--text-muted)}.legend-dot{width:10px;height:10px;border-radius:50%}.instructions{position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;padding:0;border:none;background:#0a0a0ff2;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease-out}.instructions::backdrop{background:transparent}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.instructions-content{max-width:600px;text-align:center;padding:48px}.instructions-content h2{font-size:2rem;margin-bottom:24px;color:var(--accent-primary)}.instructions-content p{color:var(--text-secondary);line-height:1.8;margin-bottom:16px}.instructions-content .start-btn{margin-top:32px;padding:16px 48px;font-size:1.1rem}.calibration-status{background:var(--bg-secondary);border:1px solid var(--key-border);border-radius:var(--border-radius);padding:12px;margin-top:8px}.calibration-header{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;margin-bottom:8px}.calibration-header span:first-child{color:var(--text-secondary)}.calibration-header span:last-child{font-weight:600;color:var(--text-muted)}.calibration-header span.calibrated{color:var(--accent-success)}.calibration-bar{height:6px;background:var(--bg-tertiary);border-radius:3px;overflow:hidden}.calibration-progress{height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));border-radius:3px;transition:width .3s ease}.calibration-controls{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.key-history{background:var(--bg-secondary);border:1px solid var(--key-border);border-radius:var(--border-radius-lg);padding:16px;margin-top:16px}.key-history h3{font-size:.85rem;color:var(--text-secondary);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}.key-history-empty{color:var(--text-muted);font-size:.8rem;text-align:center;padding:20px}.key-history-list{display:flex;flex-wrap:wrap;gap:6px}.key-history-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 8px;background:var(--bg-tertiary);border-radius:6px;min-width:44px}.key-history-item.wrong-finger{background:#ef444426;border:1px solid rgba(239,68,68,.3)}.key-history-item.wrong-key{opacity:.5}.key-history-char{font-family:JetBrains Mono,monospace;font-size:.9rem;font-weight:600;color:var(--text-primary)}.key-history-fingers{display:flex;align-items:center;gap:3px}.finger-badge{font-size:.55rem;font-weight:700;padding:2px 4px;border-radius:3px;color:var(--bg-primary)}.finger-badge.no-camera{background:var(--text-muted);color:var(--bg-primary)}.finger-arrow{font-size:.6rem;color:var(--accent-error)}.finger-check{font-size:.7rem;color:var(--accent-success);margin-left:2px}.key-history-summary{margin-top:16px;padding-top:16px;border-top:1px solid var(--key-border)}.finger-summary h4{font-size:.75rem;color:var(--text-muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}.finger-summary-grid{display:flex;flex-wrap:wrap;gap:8px}.finger-summary-item{display:flex;align-items:center;gap:4px;padding:4px 8px;background:var(--bg-tertiary);border-radius:4px;font-size:.7rem}.finger-summary-dot{width:8px;height:8px;border-radius:50%}.finger-summary-name{font-weight:600;color:var(--text-secondary)}.finger-summary-accuracy{font-weight:700}.finger-summary-accuracy.good{color:var(--accent-success)}.finger-summary-accuracy.ok{color:var(--accent-warning)}.finger-summary-accuracy.bad{color:var(--accent-error)}.finger-summary-count{color:var(--text-muted);font-size:.65rem}.text-focus-indicator{background:linear-gradient(135deg,#8b5cf633,#3b82f633);border:1px solid rgba(139,92,246,.3);border-radius:8px;padding:8px 12px;font-size:.8rem;color:var(--accent-primary);text-align:center;margin-top:8px}.total-finger-stats{background:linear-gradient(135deg,var(--bg-secondary),rgba(139,92,246,.05));border:1px solid var(--key-border);border-radius:var(--border-radius-lg);padding:16px;margin-top:16px}.total-finger-stats .stats-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.total-finger-stats h3{font-size:.9rem;color:var(--text-primary);margin:0}.total-finger-stats h4{font-size:.75rem;color:var(--text-secondary);margin:12px 0 8px;text-transform:uppercase;letter-spacing:.5px}.btn-small{background:var(--bg-tertiary);border:1px solid var(--key-border);color:var(--text-muted);font-size:.7rem;padding:4px 8px;border-radius:4px;cursor:pointer;transition:all .2s}.btn-small:hover{background:var(--bg-secondary);color:var(--text-secondary)}.stats-overview{display:flex;gap:16px;margin-bottom:12px}.stat-item{display:flex;flex-direction:column;align-items:center;padding:8px 16px;background:var(--bg-tertiary);border-radius:8px}.stat-value{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.stat-value.good{color:var(--accent-success)}.stat-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase}.weak-fingers-section{border-top:1px solid var(--key-border);padding-top:12px}.weak-fingers-list{display:flex;flex-direction:column;gap:6px}.weak-finger-item{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--bg-tertiary);border-radius:6px}.finger-color-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.weak-finger-item .finger-name{flex:1;font-size:.8rem;color:var(--text-secondary)}.weak-finger-item .finger-accuracy{font-size:.8rem;font-weight:600}.weak-finger-item .finger-accuracy.ok{color:var(--accent-warning)}.weak-finger-item .finger-accuracy.bad{color:var(--accent-error)}.weak-finger-item .finger-total{font-size:.7rem;color:var(--text-muted)}.weak-fingers-hint{font-size:.75rem;color:var(--text-muted);margin-top:10px;padding:8px;background:#8b5cf61a;border-radius:6px;text-align:center}.loading{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-muted)}.loading-spinner{width:20px;height:20px;border:2px solid var(--key-border);border-top-color:var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.footer{margin-top:auto;padding:24px 0;text-align:center;border-top:1px solid var(--key-border);display:flex;flex-direction:column;align-items:center;gap:12px}.footer p{font-size:.8rem;color:var(--text-muted)}.footer-links{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.footer-link{font-size:.75rem;color:var(--text-muted);text-decoration:none;transition:color .2s ease;padding:4px 8px;border-radius:4px}.footer-link:hover{color:var(--accent-primary);text-decoration:none}.footer-divider{color:var(--text-muted);opacity:.5}.coffee-button{display:inline-block;transition:all .2s ease;border-radius:12px;overflow:hidden}.coffee-button:hover{transform:translateY(-2px);filter:brightness(1.05)}.coffee-button img{display:block;height:42px;width:auto}.copyright{font-size:.7rem;color:var(--text-muted);opacity:.7;margin-top:4px}@media print{:root{--bg-primary: #fff;--bg-secondary: #f5f5f5;--bg-tertiary: #eee;--text-primary: #000;--text-secondary: #333;--text-muted: #666;--key-border: #ccc}body,body:before{background:#fff!important;color:#000!important}.camera-container,.camera-toggle,.camera-selector,.camera-placeholder,.calibration-status,.validation-feedback,.instructions,.header-options,video,canvas{display:none!important}.app{padding:0;max-width:100%}.main-content{display:block}.left-column,.right-column{width:100%;margin-bottom:20px}.keyboard-container{border:1px solid #ccc;padding:15px;-moz-column-break-inside:avoid;break-inside:avoid}.key{border:1px solid #999!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}.stats-panel,.text-display{border:1px solid #ccc;-moz-column-break-inside:avoid;break-inside:avoid}.key[data-finger]{print-color-adjust:exact;-webkit-print-color-adjust:exact}.header h1{background:none!important;-webkit-text-fill-color:#000!important;color:#000!important}a[href]:after{content:" (" attr(href) ")";font-size:.8em;color:#666}.footer{border-top:1px solid #ccc;margin-top:30px;padding-top:15px}}