*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text-default);font-family:JetBrains Mono,IBM Plex Mono,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;overflow:hidden}#app{flex-direction:column;gap:0;height:100vh;padding:0;display:flex}#top-action-bar{z-index:1100;flex-direction:column;gap:.4rem;display:flex;position:fixed;top:6px;left:6px}.top-action-button{background:var(--button-bg);color:var(--accent);border:1px solid var(--button-border);cursor:pointer;box-shadow:0 2px 8px var(--shadow-strong);opacity:.75;border-radius:6px;padding:7px 9px;font-size:1.1rem;line-height:1;transition:opacity .2s,background .2s,border-color .2s,box-shadow .2s}.top-action-button:hover{opacity:1;background:var(--button-bg-hover);border-color:var(--button-border-hover);box-shadow:0 4px 12px var(--shadow-strong)}.top-action-button[aria-pressed=true]{background:var(--key-pressed-bg);border-color:var(--key-pressed-border);box-shadow:0 2px 6px #00000059, inset 0 2px 4px rgba(var(--accent-rgb), .2)}.top-action-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#reset-session{font-weight:700}body.zen-mode .top-action-button:not(#zen-toggle){display:none}#text-area{flex-direction:column;flex:1;justify-content:flex-start;align-items:center;min-height:0;padding:2rem 3rem 0;display:flex;position:relative;overflow:hidden}#text-input{opacity:0;resize:none;z-index:1;color:#0000;caret-color:#0000;width:100%;height:100%;font:inherit;font-size:calc(clamp(.96rem, .98rem + .5vw, 1.28rem) * var(--text-zoom,1));letter-spacing:.02em;tab-size:4;white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;pointer-events:none;background:0 0;border:none;outline:none;padding:1.5rem 2rem;line-height:1.68;position:absolute;top:0;left:0}#text-display{height:100%;font-size:calc(clamp(.96rem, .98rem + .5vw, 1.28rem) * var(--text-zoom,1));letter-spacing:.02em;color:var(--accent);text-align:left;background:rgba(var(--accent-rgb), .03);tab-size:4;white-space:pre-wrap;word-wrap:break-word;border-radius:8px;flex:auto;width:100%;max-width:1000px;min-height:200px;padding:1.5rem 2rem;font-weight:300;line-height:1.68;overflow-y:auto}#text-display .char{transition:background-color .2s,color .2s;display:inline}#text-display .char.typed{opacity:1}#text-display .char.typed.correct{color:var(--accent);opacity:.4}#text-display .char.typed.error{background:var(--error-bg,#dc35454d);color:var(--error-text,#dc3545);border-radius:2px}#text-display .char.current{background:rgba(var(--accent-rgb), .3);border-radius:2px}#text-display .char.current.error{background:linear-gradient(rgba(var(--accent-rgb), .3), rgba(var(--accent-rgb), .3)), var(--error-bg,#dc35454d);color:var(--error-text,#dc3545);animation:none}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}#text-display .char.fade-success{animation:.3s fadeSuccess}@keyframes fadeSuccess{0%{background:var(--error-bg,#dc35454d);color:var(--error-text,#dc3545)}to{color:var(--accent);opacity:.4;background:0 0}}#stats-bar{justify-content:center;align-items:center;gap:3rem;min-height:60px;margin:1rem 0 .2rem;padding:1rem 2rem .6rem;display:flex}.stat-item{flex-direction:column;align-items:center;gap:.2rem;display:flex}.stat-label{letter-spacing:.1em;text-transform:uppercase;color:var(--accent);opacity:.65;font-size:.65rem;font-weight:500}.stat-value{color:var(--accent);font-variant-numeric:tabular-nums;font-size:1.4rem;font-weight:300}#keyboard-section{flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding-bottom:1.5rem;display:flex;position:relative}#stats-bar.hidden,#keyboard-section.hidden,#app.zen-mode #stats-bar,#app.zen-mode #keyboard-section,body.zen-mode #stats-bar,body.zen-mode #keyboard-section{display:none}#app.zen-mode #text-area,body.zen-mode #text-area{padding-bottom:1.5rem}@media (width<=1400px){#text-display{font-size:calc(1.25rem * var(--text-zoom,1));padding:1.25rem 1.5rem}.stat-value{font-size:1.5rem}#stats-bar{gap:3rem}}@media (width<=1024px){#text-display{font-size:calc(clamp(.95rem, 1.2vw + .4rem, 1.1rem) * var(--text-zoom,1));padding:1rem}#app{padding:1.5rem 2rem}#text-area{padding:1rem 1.5rem 0}}@media (width<=768px){#stats-bar{flex-wrap:wrap;gap:1.25rem}.stat-item{width:45%}}#github-link{width:32px;height:32px;color:var(--accent);opacity:.4;z-index:1100;justify-content:center;align-items:center;transition:opacity .2s,transform .2s;display:flex;position:fixed;bottom:10px;right:10px}#github-link:hover{opacity:1;transform:scale(1.1)}#github-link svg{width:24px;height:24px}body.zen-mode #github-link{display:none}#modal-overlay{background:var(--overlay-bg,#000000b3);z-index:1000;opacity:1;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .2s;display:flex;position:fixed;top:0;left:0}#modal-overlay.modal-hidden{opacity:0;display:none}#modal-container{background:var(--bg);border:1px solid var(--line-strong);width:90%;max-width:600px;max-height:80vh;box-shadow:0 8px 32px var(--shadow-strong);border-radius:12px;flex-direction:column;display:flex;overflow-y:auto}#modal-header{border-bottom:1px solid var(--line-weak);justify-content:space-between;align-items:center;padding:1.5rem 2rem;display:flex}#modal-title{color:var(--accent);margin:0;font-size:1.5rem;font-weight:400}#modal-close{color:var(--accent);cursor:pointer;opacity:.7;background:0 0;border:none;padding:.25rem .5rem;font-size:1.5rem;line-height:1;transition:opacity .2s}#modal-close:hover{opacity:1}#modal-content{color:var(--text-default);padding:2rem}.session-summary{flex-direction:column;gap:2rem;display:flex}.summary-stats{grid-template-columns:repeat(2,1fr);gap:1.5rem;display:grid}.summary-stat{background:rgba(var(--accent-rgb), .05);border:1px solid var(--line-weak);border-radius:8px;flex-direction:column;align-items:center;padding:1rem;display:flex}.summary-label{letter-spacing:.1em;text-transform:uppercase;color:var(--accent);opacity:.65;margin-bottom:.5rem;font-size:.75rem}.summary-value{color:var(--accent);font-variant-numeric:tabular-nums;font-size:2rem;font-weight:300}.summary-errors{background:var(--error-surface,#dc35452e);border:1px solid var(--error-border,#dc354566);border-radius:8px;padding:1rem}.summary-errors h3{color:var(--error-text,#dc3545);margin-bottom:.5rem;font-size:1.1rem}.summary-errors p{color:var(--text-muted);margin:0;font-size:.9rem}.summary-mistakes{margin-top:.75rem}.summary-mistakes h4{color:var(--text-default);margin:0 0 .5rem;font-size:.9rem;font-weight:500}.mistake-list{flex-wrap:wrap;gap:.5rem 1rem;margin:0;padding:0;list-style:none;display:flex}.mistake-list li{background:rgba(var(--accent-rgb), .08);border:1px solid var(--line-weak);border-radius:6px;align-items:center;gap:.4rem;padding:.35rem .6rem;display:flex}.mistake-key{color:var(--accent);font-weight:600}.mistake-count{color:var(--text-muted);font-size:.85rem}.modal-section{flex-direction:column;gap:1.25rem;display:flex}.modal-label{color:var(--text-muted);letter-spacing:.05em;margin:0;font-size:.85rem}.modal-select{appearance:none;border:1px solid var(--line-strong);background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L2 4h8z'/%3E%3C/svg%3E") no-repeat right .75rem center;color:var(--text-default);cursor:pointer;border-radius:6px;padding:.6rem 2.5rem .6rem .9rem;font-size:.9rem;transition:border-color .15s,box-shadow .15s}.modal-select:hover{border-color:var(--accent)}.modal-select:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb), .2);outline:none}.modal-select option{background:var(--bg);color:var(--text-default);padding:.5rem}.color-group{flex-direction:column;gap:.75rem;display:flex}.color-row{background:rgba(var(--accent-rgb), .05);border:1px solid var(--line-weak);cursor:pointer;border-radius:6px;justify-content:space-between;align-items:center;padding:.5rem .75rem;display:flex}.color-row span{color:var(--text-default);font-size:.9rem}.color-row input[type=color]{border:1px solid var(--line-strong);cursor:pointer;background:0 0;border-radius:4px;width:48px;height:28px;padding:0}.color-row input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.color-row input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}.color-actions{justify-content:flex-end;gap:.75rem;margin-top:.5rem;display:flex}.color-btn{border:1px solid var(--line-strong);color:var(--text-default);cursor:pointer;background:0 0;border-radius:6px;padding:.5rem 1rem;font-size:.85rem;transition:background .15s,border-color .15s}.color-btn:hover{background:rgba(var(--accent-rgb), .1);border-color:var(--accent)}.color-btn-primary{background:rgba(var(--accent-rgb), .15);border-color:var(--accent);color:var(--accent)}.color-btn-primary:hover{background:rgba(var(--accent-rgb), .25)}.confirm-dialog{padding:1rem 0}.confirm-message{color:var(--text-default);margin-bottom:2rem;font-size:1rem;line-height:1.5}.confirm-actions{justify-content:flex-end;gap:1rem;display:flex}.confirm-actions button{cursor:pointer;border:1px solid var(--line-strong);border-radius:6px;padding:.75rem 1.5rem;font-size:.9rem;transition:all .2s}.confirm-actions .btn-secondary{background:var(--bg);color:var(--text-default)}.confirm-actions .btn-secondary:hover{background:rgba(var(--accent-rgb), .1);border-color:var(--accent)}.confirm-actions .btn-danger{background:var(--error-text);color:#fff;border-color:var(--error-text)}.confirm-actions .btn-danger:hover{opacity:.9}.error-message{text-align:center}.error-message p{margin-bottom:1.5rem}.error-message button{background:var(--accent);color:var(--bg);cursor:pointer;border:none;border-radius:6px;padding:.5rem 1.5rem;font-size:.9rem}.text-editor{flex-direction:column;gap:16px;min-width:400px;display:flex}.editor-field{flex-direction:column;gap:4px;display:flex}.editor-field label{color:var(--text-default);font-size:.9em;font-weight:500}.editor-field input,.editor-field select,.editor-field textarea{background:var(--key-bg);border:1px solid var(--line-strong);width:100%;color:var(--text-default);border-radius:4px;padding:8px 12px;font-size:14px}.editor-field select{appearance:none}.editor-field input:focus,.editor-field select:focus,.editor-field textarea:focus{border-color:var(--accent);outline:none}.editor-field textarea{resize:vertical;min-height:200px;font-family:JetBrains Mono,Fira Code,monospace;line-height:1.5}.editor-row{gap:16px;display:flex}.editor-row .editor-field{flex:1}.editor-actions{border-top:1px solid var(--line-weak);justify-content:flex-end;gap:8px;margin-top:8px;padding-top:16px;display:flex}.editor-actions button{cursor:pointer;border-radius:4px;padding:8px 16px;font-size:14px;transition:all .15s}.editor-actions #editor-cancel{background:var(--key-bg);border:1px solid var(--line-strong);color:var(--text-default)}.editor-actions #editor-cancel:hover{background:var(--key-bg-hover)}.editor-actions #editor-save{background:var(--accent);border:1px solid var(--accent);color:var(--bg);font-weight:500}.editor-actions #editor-save:hover{opacity:.9}.editor-actions #editor-delete{border:1px solid var(--error-text,#ef4444);color:var(--error-text,#ef4444);background:0 0;margin-right:auto}.editor-actions #editor-delete:hover{background:#ef444426}.text-editor[data-mode=create] #editor-delete{display:none}#keyboard{flex-direction:column;gap:.5rem;width:100%;max-width:1200px;padding:.75rem 1rem;display:flex}.keyboard-row-space{justify-content:center;align-items:flex-end;gap:clamp(.4rem,1vw,.85rem);margin-top:.25rem}.hand{box-shadow:none;pointer-events:none;background:0 0;border:none;border-radius:0;align-items:flex-end;gap:.25rem;padding:0;display:flex}.hand-left{justify-content:flex-end}.hand-right{flex-direction:row-reverse;justify-content:flex-end}.finger{border:1px solid var(--line-weak);background:rgba(var(--accent-rgb), .08);width:clamp(12px,1.3vw,22px);color:var(--accent);letter-spacing:.04em;opacity:.65;border-radius:10px 10px 8px 8px;justify-content:center;align-items:center;font-size:.5rem;font-weight:600;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s,opacity .2s;display:flex}.finger.pinky{height:clamp(36px,6vh,60px)}.finger.ring{height:clamp(42px,6.5vh,70px)}.finger.middle{height:clamp(48px,7vh,80px)}.finger.index{height:clamp(44px,6.5vh,72px)}.finger.thumb{border-radius:18px 18px 12px 12px;width:clamp(32px,3.5vw,54px);height:clamp(24px,4vh,40px)}.finger.active{opacity:1;background:rgba(var(--accent-rgb), .35);border-color:rgba(var(--accent-rgb), .6);box-shadow:0 0 16px rgba(var(--accent-rgb), .4), 0 2px 4px #0003;animation:1.5s ease-in-out infinite pulse;transform:translateY(-4px)}@media (width<=640px){.keyboard-row-space{flex-wrap:wrap;gap:.5rem}}.keyboard-row{justify-content:center;gap:.45rem;display:flex}.key{--key-size:clamp(30px, 4vw, 48px);min-width:var(--key-size);height:var(--key-size);color:var(--accent);background:var(--key-bg);border:1px solid var(--key-border);cursor:default;-webkit-user-select:none;user-select:none;box-shadow:0 2px 4px #0003, inset 0 1px 0 rgba(var(--accent-rgb), .1), inset 0 0 20px var(--heatmap-color,#0000);border-radius:6px;justify-content:center;align-items:center;font-size:.9rem;font-weight:400;line-height:1.2;transition:all .15s;display:flex;position:relative}.key:hover{background:var(--key-bg-hover);border-color:var(--key-border-strong)}.key.pressed{background:var(--key-pressed-bg);border-color:var(--key-pressed-border);box-shadow:0 1px 2px #0000004d, inset 0 2px 4px rgba(var(--accent-rgb), .15), inset 0 0 20px var(--heatmap-color,#0000);transform:translateY(1px)}.key.target{background:rgba(var(--accent-rgb), .35);border-color:rgba(var(--accent-rgb), .6);box-shadow:0 0 16px rgba(var(--accent-rgb), .4), 0 2px 4px #0003, inset 0 1px 0 rgba(var(--accent-rgb), .2), inset 0 0 20px var(--heatmap-color,#0000);animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{box-shadow:0 0 16px rgba(var(--accent-rgb), .4), 0 2px 4px #0003, inset 0 1px 0 rgba(var(--accent-rgb), .2), inset 0 0 20px var(--heatmap-color,#0000)}50%{box-shadow:0 0 24px rgba(var(--accent-rgb), .6), 0 2px 4px #0003, inset 0 1px 0 rgba(var(--accent-rgb), .3), inset 0 0 20px var(--heatmap-color,#0000)}}.key.error{background:var(--error-bg,#dc354533);border-color:var(--error-border,#dc354566)}.key-wide{min-width:calc(var(--key-size) * 1.6)}.key-wider{min-width:calc(var(--key-size) * 1.9)}.key-widest{min-width:calc(var(--key-size) * 2.2)}.key-iso-shift{min-width:calc(var(--key-size) * 1.3)}.key-space{min-width:calc(var(--key-size) * 8)}.key-wide,.key-wider,.key-widest,.key-iso-shift{font-size:.75rem}.key[data-finger=left-pinky]{border-left:3px solid var(--finger-left-pinky,#ff6b6b4d)}.key[data-finger=left-ring]{border-left:3px solid var(--finger-left-ring,#ff9f404d)}.key[data-finger=left-middle]{border-left:3px solid var(--finger-left-middle,#ffcd564d)}.key[data-finger=left-index]{border-left:3px solid var(--finger-left-index,#4bc0c04d)}.key[data-finger=right-index]{border-left:3px solid var(--finger-right-index,rgba(var(--accent-rgb), .4))}.key[data-finger=right-middle]{border-left:3px solid var(--finger-right-middle,#9966ff4d)}.key[data-finger=right-ring]{border-left:3px solid var(--finger-right-ring,#c9cbcf4d)}.key[data-finger=right-pinky]{border-left:3px solid var(--finger-right-pinky,#ff63844d)}.key[data-finger=thumb]{border-top:3px solid var(--finger-thumb,rgba(var(--accent-rgb), .4))}.key{transition:background .15s,border-color .15s,transform .1s,box-shadow .15s}@media (prefers-reduced-motion:reduce){.key{transition:none}.key.target{animation:none}}#library-controls{z-index:50;flex-direction:column;gap:.4rem;display:flex;position:fixed;top:6px;right:6px}#library-controls button{background:var(--button-bg);color:var(--accent);border:1px solid var(--button-border);cursor:pointer;box-shadow:0 2px 8px var(--shadow-strong);opacity:.75;border-radius:6px;padding:7px 9px;font-size:1.1rem;line-height:1;transition:opacity .2s,background .2s,border-color .2s,box-shadow .2s}#library-controls button:hover{opacity:1;background:var(--button-bg-hover);border-color:var(--button-border-hover);box-shadow:0 4px 12px var(--shadow-strong)}#library-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#zoom-controls{gap:.25rem;display:flex}#zoom-controls button{flex:1;padding:3px 0;font-size:.65rem;font-weight:600}body.zen-mode #library-controls,body.zen-mode #library-sidebar{display:none}#library-sidebar{background:var(--bg);border-left:1px solid rgba(var(--accent-rgb), .1);z-index:100;will-change:transform;backface-visibility:hidden;contain:layout;flex-direction:column;width:300px;height:100vh;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;right:0;transform:translate(100%)}#library-sidebar.visible{transform:translate(0,0)}.sidebar-header{border-bottom:1px solid var(--line-strong);justify-content:space-between;align-items:center;padding:16px;display:flex}.sidebar-header h3{color:var(--text-default);margin:0;font-size:1.1rem}#sidebar-close{cursor:pointer;color:var(--text-muted);background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:20px}#sidebar-close:hover{background:var(--key-bg-hover);color:var(--text-default)}.sidebar-content{flex-direction:column;flex:1;display:flex;overflow-y:auto}#category-tree{border-bottom:1px solid var(--line-weak)}.category-list{margin:0;padding:0;list-style:none}.category-item{cursor:pointer;border-bottom:1px solid var(--line-weak);color:var(--text-default);align-items:center;gap:8px;padding:10px 16px;transition:background .15s;display:flex}.category-item:hover{background:var(--key-bg-hover)}.category-item.active{font-weight:500}.category-item.active:before{content:"▸";color:var(--text-default);margin-right:8px;font-size:18px;transition:transform .15s}.category-item.active.expanded:before{transform:rotate(90deg)}.category-item .delete-btn{cursor:pointer;color:inherit;opacity:0;background:0 0;border:none;border-radius:4px;margin-left:auto;padding:2px 6px;font-size:14px;transition:opacity .15s,background .15s}.category-item:hover .delete-btn{opacity:.9}.category-item .delete-btn:hover{opacity:1;background:#ef444426}.category-item .icon{font-size:16px}.category-item .count{color:var(--text-muted);font-size:.85em}.category-item .spacer{flex:1}#text-list{flex:1;overflow-y:auto}.text-item{border-bottom:1px solid var(--line-weak);cursor:pointer;padding:12px 16px;transition:background .15s}.text-item:hover{background:var(--key-bg-hover)}.text-item.selected{background:rgba(var(--accent-rgb), .1)}.text-item-title{color:var(--text-default);align-items:center;gap:6px;margin-bottom:4px;font-weight:500;display:flex}.text-item-title .favorite{color:#f59e0b;font-size:12px}.text-item-meta{color:var(--text-muted);gap:12px;font-size:.85em;display:flex}.text-item-actions{gap:4px;margin-top:8px;display:flex}.text-item-actions .icon-btn{cursor:pointer;color:inherit;opacity:.6;background:0 0;border:none;border-radius:4px;padding:4px 6px;font-size:16px;transition:opacity .2s,background .2s}.text-item-actions .icon-btn:hover{opacity:1;background:rgba(var(--accent-rgb), .1)}.library-empty{text-align:center;color:var(--text-muted);padding:32px 16px}.library-empty p{margin:0 0 16px}.empty-add-text{background:var(--accent);color:var(--bg);cursor:pointer;border:none;border-radius:4px;padding:6px 16px;font-size:14px;font-weight:500;transition:opacity .15s}.empty-add-text:hover{opacity:.9}.theme-dark{--bg:#0d0b09;--text-default:#e8e6e3;--text-muted:#bfb8b2;--accent:#f5f5e9;--accent-rgb:245, 245, 233;--line-weak:rgba(var(--accent-rgb), .18);--line-strong:rgba(var(--accent-rgb), .3);--key-bg:rgba(var(--accent-rgb), .12);--key-bg-hover:rgba(var(--accent-rgb), .18);--key-border:rgba(var(--accent-rgb), .25);--key-border-strong:rgba(var(--accent-rgb), .4);--key-pressed-bg:rgba(var(--accent-rgb), .3);--key-pressed-border:rgba(var(--accent-rgb), .5);--shadow-strong:#0006;--button-bg:rgba(var(--accent-rgb), .15);--button-bg-hover:rgba(var(--accent-rgb), .35);--button-border:rgba(var(--accent-rgb), .3);--button-border-hover:rgba(var(--accent-rgb), .5);--error-bg:#dc35454d;--error-border:#dc354580;--error-surface:#dc35452e;--error-text:#ff8fa2;--finger-left-pinky:#ff6b6b59;--finger-left-ring:#ff9f4059;--finger-left-middle:#ffcd5659;--finger-left-index:#4bc0c059;--finger-right-index:#a7d2ff59;--finger-right-middle:#9966ff59;--finger-right-ring:#c9cbcf59;--finger-right-pinky:#ff638459;--finger-thumb:rgba(var(--accent-rgb), .4);--overlay-bg:#000000bf}