:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.app{max-width:900px;margin:0 auto;padding:2rem 1rem 4rem;text-align:center}.app-header{display:flex;justify-content:flex-end;margin-bottom:1.5rem}.help-toggle{background:transparent;border:1px solid #444;border-radius:6px;color:#aaa;font-size:.8rem;padding:.35rem .9rem;cursor:pointer;transition:all .15s}.help-toggle:hover{border-color:#666;color:#ddd}.modal-backdrop{position:fixed;inset:0;background:#000000a6;display:flex;align-items:flex-start;justify-content:center;padding:3rem 1rem;overflow-y:auto;z-index:100}.modal{position:relative;background:#1e1e1e;border:1px solid #383838;border-radius:12px;max-width:40rem;width:100%;padding:2rem 2.25rem 2.5rem;text-align:left;color:#ccc;line-height:1.65}.modal-close{position:absolute;top:.75rem;right:1rem;background:transparent;border:none;color:#888;font-size:1.6rem;line-height:1;cursor:pointer;transition:color .15s}.modal-close:hover{color:#fff}.modal-title{margin:0 0 .5rem;font-size:1.4rem;color:#fff}.modal-lede{color:#aaa;font-size:1.05rem;margin:0 0 1.5rem}.modal-section{margin-bottom:1.5rem}.modal-section h3{font-size:1.15rem;color:#fff;margin:0 0 .5rem;padding-bottom:.3rem;border-bottom:1px solid #333}.modal-section ul{margin:0;padding-left:1.2rem;font-size:1rem}.modal-section li{margin-bottom:.6rem}.modal-section b{color:#eee}.dot-ok{color:#4ade80;font-weight:600}.dot-block{color:#f87171;font-weight:600}.dot-gray{color:#888;font-weight:600}.dot-pinky{color:#ce5555}.dot-ring{color:#d19847}.dot-middle{color:#4ebc60}.dot-index{color:#5c99d6}.dot-thumb{color:#ae6ecf}.dot-pinky,.dot-ring,.dot-middle,.dot-index,.dot-thumb{margin:0 .15rem 0 .35rem}.stats-bar{display:flex;justify-content:center;gap:2.5rem;padding:1rem 0;border-bottom:1px solid #333;margin-bottom:2rem}.stat{display:flex;flex-direction:column}.stat-value{font-size:1.8rem;font-weight:600;color:#fff}.stat-label{font-size:.75rem;color:#888;text-transform:uppercase;letter-spacing:.05em}.unlock-toast{color:#4ade80;margin-bottom:1rem;font-weight:500}.daily-goal{max-width:26rem;margin:0 auto 2rem}.daily-goal-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem;font-size:.85rem}.daily-goal-label{color:#bbb;font-weight:500}.daily-goal-count{color:#888;font-variant-numeric:tabular-nums}.daily-goal-track{height:8px;border-radius:4px;background:#333;overflow:hidden}.daily-goal-fill{display:block;height:100%;border-radius:4px;background:#646cff;transition:width .3s ease,background .3s ease}.daily-goal-fill-met{background:#4ade80}.daily-goal-presets{display:flex;justify-content:center;gap:.5rem;margin-top:.6rem}.goal-preset{background:transparent;border:1px solid #444;border-radius:6px;color:#aaa;font-size:.8rem;padding:.25rem .75rem;cursor:pointer;transition:all .15s}.goal-preset:hover{border-color:#666;color:#ddd}.goal-preset-active{border-color:#646cff;color:#fff;background:#646cff26}.unlock-track{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:.4rem .5rem;margin:0 auto 2rem;padding:.75rem 1rem;max-width:52rem}.track-key{display:flex;flex-direction:column;align-items:center;gap:.25rem;width:1.9rem}.track-symbol{font-size:1.05rem;color:#eee;line-height:1}.track-bar{width:100%;height:4px;border-radius:2px;background:#333;overflow:hidden}.track-bar-fill{display:block;height:100%;border-radius:2px;transition:width .3s ease}.track-bar-ok{background:#4ade80}.track-bar-blocking{background:#f87171}.track-bar-neutral{background:#666}.track-key-locked .track-symbol{color:#555}.practice-area{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem 1.25rem;min-height:4rem;align-items:center;margin-bottom:2.5rem;font-size:2.2rem;line-height:1}.syllable{display:inline-flex;gap:.15rem;padding:.25rem .4rem;border-radius:6px;background:#ffffff08}.cell{color:#888;padding:.1rem .25rem;border-radius:4px;transition:color .1s,background .1s}.cell-done{color:#4ade80}.cell-current{color:#fff;background:#646cff59;border-bottom:3px solid #646cff}.cell-error{color:#fff;background:#f8717166;border-bottom:3px solid #f87171}.cell-pending{color:#666}.keyboard-zone{display:flex;gap:1.5rem;justify-content:center;align-items:flex-start;flex-wrap:wrap}.keyboard{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}.keyboard-row{justify-content:flex-start}.keyboard-row-top{margin-left:1.75rem}.keyboard-row-home{margin-left:2.6rem}.keyboard-row-bottom{margin-left:4.3rem}.legend{display:flex;flex-direction:column;gap:.4rem;padding:.75rem 1rem;border:1px solid #333;border-radius:8px;text-align:left;font-size:.8rem;color:#bbb}.legend-title{font-weight:600;color:#fff;margin-bottom:.25rem}.legend-item{display:flex;align-items:center;gap:.5rem}.legend-swatch{width:1rem;height:1rem;border-radius:4px;border:2px solid;flex-shrink:0}.legend-note{margin-top:.4rem;font-size:.7rem;color:#777;max-width:10rem}.keyboard-row{display:flex;gap:.5rem;justify-content:center}.key{position:relative;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;border:2px solid #444;border-radius:8px;background:#2a2a2a;font-size:1.3rem;color:#ddd;transition:all .1s}.home-bump{position:absolute;bottom:5px;left:50%;transform:translate(-50%);width:.9rem;height:3px;border-radius:2px;background:currentColor;opacity:.7}.key-locked{opacity:.32}.key-hint{color:#fff;outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 16px #ffffff8c;transform:translateY(-3px) scale(1.06);z-index:1;animation:hint-in .25s ease-out}@keyframes hint-in{0%{outline-color:#fff0;box-shadow:0 0 #fff0;transform:translateY(0) scale(1)}}.key-space{width:16rem;font-size:.85rem;color:#ddd}.keyboard-controls{margin-bottom:1rem}.kbd-toggle{background:transparent;border:1px solid #444;border-radius:6px;color:#aaa;font-size:.8rem;padding:.35rem .9rem;cursor:pointer;transition:all .15s}.kbd-toggle:hover{border-color:#666;color:#ddd}.keyboard-space-row{margin-top:.25rem;margin-left:6rem}.hint{margin-top:2rem;color:#666;font-size:.85rem}