@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500&display=swap');
:root{--bg:#f6f7f3;--surface:#fff;--text:#283c35;--muted:#8b958e;--line:#e6eae3;--green:#527d65;--soft:#edf3eb;--error:#b66b60;--shadow:0 5px 18px #233a2912}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 'Arial',sans-serif;transition:background .2s}body.dark{--bg:#17201c;--surface:#202b25;--text:#dfE8df;--muted:#91a397;--line:#35443a;--green:#9fc7aa;--soft:#2b3c30;--error:#e89a8b;--shadow:none}button,input,select,textarea{font:inherit}button,a,select,input[type=checkbox],input[type=range]{cursor:pointer}button{color:inherit;background:none;border:0}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:4px}header{height:100px;max-width:1440px;padding:0 58px;margin:auto;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:60px}.brand{display:flex;align-items:center;color:var(--text);font-size:27px;font-weight:700;letter-spacing:-1.2px;text-decoration:none}.brand-icon{display:grid;place-items:center;background:var(--green);color:var(--bg);width:32px;height:33px;border-radius:9px;font:italic 30px Georgia;margin-right:10px}.brand-dot{color:var(--green)}nav{display:flex;gap:32px;height:100%;align-items:center}.nav{height:100%;position:relative;color:var(--muted);font-size:13px}.nav.active{color:var(--text);font-weight:600}.nav.active:after{content:'';position:absolute;height:2px;background:var(--green);bottom:0;left:0;right:0}.header-right{margin-left:auto;display:flex;align-items:center;gap:25px}.local{font-size:11px;color:var(--muted)}i,.status-dot,.tiny-dot{display:inline-block}.local i,.status-dot,.tiny-dot{width:6px;height:6px;border-radius:50%;background:#89a78a;margin-right:8px}.icon{font-size:24px;color:var(--muted)}main{max-width:1284px;padding:0 42px;margin:auto}.intro{display:flex;justify-content:space-between;align-items:center;margin:49px 0 33px}.eyebrow{font-size:9px;letter-spacing:2.1px;font-weight:600;color:var(--green)}h1{font-weight:500;font-size:38px;letter-spacing:-1.5px;margin:10px 0 6px}p{color:var(--muted);margin:0;font-size:13px}.day{display:flex;align-items:center;gap:15px;font-size:12px}.day small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.sun{color:#9aab80;font-size:26px}.modebar{display:flex;gap:5px;align-items:center;margin-bottom:20px;flex-wrap:wrap}.mode{padding:11px 17px;color:var(--muted);font-size:15px;border-radius:7px;display:flex;align-items:center;gap:8px}.mode span{font-size:12px}.mode.active{background:#e6ede2;color:var(--green)}body.dark .mode.active{background:var(--soft)}.mode em{font-style:normal;font-size:8px;font-weight:bold;letter-spacing:1px;margin-left:4px}.practice{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}.practice-top{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}.practice-top>div>span:nth-child(2){color:var(--green)}.separator{padding:0 12px;color:#c8cec8}.text-button{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.metrics{display:flex;align-items:center;padding:29px 36px 17px;gap:38px}.accuracy>strong{font-size:32px;font-weight:500;letter-spacing:-1px;color:var(--green);display:block;line-height:1.2}.accuracy>strong span{font-size:20px;padding-left:3px}.accuracy>span,.secondary-metric>span{font-size:10px;color:var(--muted)}.accuracy i{font-style:normal;color:var(--green);margin-left:4px}.secondary-metric{border-left:1px solid var(--line);padding-left:30px}.secondary-metric strong{display:block;font-size:23px;font-weight:400;color:var(--muted)}.progress-metric{margin-left:auto;width:120px;text-align:right;font-size:10px;color:var(--muted)}.progress-track{height:3px;background:var(--line);margin-top:10px;border-radius:10px;overflow:hidden}#progressfill{height:100%;width:0;background:var(--green)}.typing{position:relative;outline:none;min-height:188px;padding:15px 36px 29px;cursor:text}.typing #text{font:26px/1.9 'Courier New',monospace;letter-spacing:.3px;color:#a5afa4;white-space:pre-wrap;overflow-wrap:anywhere;max-height:250px;overflow:auto;scrollbar-width:thin}.typing .done{color:var(--text)}.typing .wrong{color:var(--error);background:#c3696415;border-radius:2px}.typing .current{position:relative}.typing .current:before{content:'';position:absolute;left:-2px;top:0;height:1.15em;width:2px;background:var(--green)}.typing .problem{border-bottom:1px dotted var(--green)}#mobileinput{position:absolute;opacity:0;width:1px;height:1px;left:35px;top:30px}.practice-bottom{display:flex;justify-content:space-between;align-items:center;margin:0 28px;padding:20px 0;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.tiny-dot{width:4px;height:4px}kbd{border:1px solid var(--line);padding:2px 5px;border-radius:3px;color:#9aa398;font:9px Arial;margin-left:5px}.under-practice{display:flex;justify-content:space-between;align-items:center;margin:17px 4px 31px;font-size:11px;color:var(--muted)}.under-practice>div{display:flex;align-items:center;gap:15px}.under-practice label{display:flex;align-items:center;gap:7px}input[type=checkbox]{accent-color:var(--green)}.vertical{height:14px;width:1px;background:var(--line)}.leaf{color:var(--green);margin-right:7px}.dashboard{display:grid;grid-template-columns:1.9fr 1fr;gap:23px}.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:23px 26px}.card-title{display:flex;justify-content:space-between;align-items:center}h2{font-size:13px;font-weight:600;margin:0 0 8px}.card-title h2{margin:0}.card>p{font-size:11px;margin-top:8px}.card select{border:0;color:var(--muted);background:var(--surface);font-size:10px}.keyrow{display:flex;justify-content:center;gap:5px;margin:5px 0}.key{width:36px;height:32px;border:1px solid var(--line);border-bottom-width:2px;display:grid;place-items:center;border-radius:5px;font-size:11px;color:var(--muted);background:var(--bg)}.key.wide{width:54px;font-size:9px}.key.space{width:220px;height:24px}.key.measured{background:#dbe9d9;color:#537554;border-color:#d2e1ce}.key.weakkey{background:#f4e8cf;color:#a28b5b;border-color:#ebdfc7}#keyboard{margin:23px auto 17px}.keyboard-legend{display:flex;gap:16px;align-items:center;font-size:9px;color:var(--muted)}.legend-dot{width:6px;height:6px;border-radius:2px;margin-right:5px}.neutral{background:#dfe4dc}.weak{background:#e0c891}.strong{background:#a1bb98}.legend-right{margin-left:auto}.spark{font-size:24px;color:var(--green)}.tag{font-size:8px;letter-spacing:1.2px;color:var(--green);display:block;margin:24px 0 12px}.focuskeys{display:flex;gap:8px}.focuskeys span{background:var(--soft);border:1px solid var(--line);border-radius:6px;width:39px;height:39px;display:grid;place-items:center;font:20px 'Courier New';color:var(--green)}.insight>p{line-height:1.9;margin-top:15px;max-width:290px}.insight-bottom{border-top:1px solid var(--line);margin-top:22px;padding-top:14px;display:flex;align-items:center;justify-content:space-between;font-size:9px;color:var(--muted)}.insight-bottom button{background:var(--soft);border-radius:50%;width:28px;height:28px;color:var(--green)}footer{display:flex;justify-content:space-between;align-items:center;padding:33px 0;color:var(--muted);font-size:9px}.footer-brand{font-size:15px;color:#7b8b7b;letter-spacing:-.7px}footer .leaf{margin-left:7px}[hidden]{display:none!important}.primary{background:var(--green);color:var(--surface);border-radius:6px;padding:11px 17px;font-size:12px}.settings-card{margin-bottom:20px;max-width:800px}.settings-card label{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:18px 0;font-size:13px}.settings-card select{font-size:13px;padding:7px}.settings-card input[type=range]{accent-color:var(--green)}textarea{width:100%;min-height:100px;resize:vertical;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:15px;margin:15px 0}.small{font-size:11px;color:var(--muted)}#saved{font-size:12px;margin-left:15px}#custombox{margin-bottom:20px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px}.stat-grid strong{font-size:30px;display:block;color:var(--green);margin:10px 0}.stats-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.stat-row{display:flex;align-items:center;gap:14px;justify-content:space-between;border-bottom:1px solid var(--line);padding:12px 0;font-size:12px}.stat-row span:last-child{color:var(--muted);font-size:11px}.empty{padding:45px 20px;text-align:center;color:var(--muted);font-size:13px}.bar{height:5px;width:100px;background:var(--line)}.bar i{height:5px;background:var(--green)}#result{background:var(--soft);padding:24px 30px}#result h2{font-size:20px}#result p{color:var(--text);margin:8px 0 16px}.zen header,.zen .intro,.zen .modebar,.zen .dashboard,.zen footer,.zen .under-practice,.zen .secondary-metric{display:none}.zen .practice{margin-top:15vh;border:0;box-shadow:none;background:var(--bg)}.zen .typing{min-height:250px}.zen .practice-top{border:0}@media(min-width:1450px){main{padding-top:18px}.typing{min-height:215px}}@media(max-width:950px){header{padding:0 25px;gap:30px}.day,.local{display:none}main{padding:0 25px}.mode{padding:10px}.dashboard{grid-template-columns:1.5fr 1fr}.key{width:28px}.card{padding:20px}.legend-right{display:none}.typing #text{font-size:23px}}@media(max-width:650px){header{height:77px;gap:20px;padding:0 18px}.brand{font-size:22px}.brand-icon{display:none}nav{gap:16px}.nav{font-size:11px}.header-right{margin-left:0}.icon{font-size:20px}main{padding:0 16px}.intro{margin-top:32px}h1{font-size:31px}.eyebrow{font-size:8px}.modebar{gap:3px}.mode{padding:9px}.mode em{display:none}.dashboard,.stats-columns{grid-template-columns:1fr}.practice-top{padding:18px}.practice-top #targetLabel,.practice-top .separator{display:none}.metrics{padding:22px 22px 10px;gap:20px}.typing{padding:15px 22px 25px}.typing #text{font-size:22px;line-height:1.8}.practice-bottom{margin:0 18px;gap:10px;font-size:10px}.practice-bottom kbd{display:none}.practice-bottom .text-button{font-size:10px;white-space:nowrap}.under-practice>span{display:none}.under-practice{justify-content:flex-end}.key{width:30px}.keyrow{gap:4px}.insight>p{max-width:none}footer>span:last-child{display:none}.stat-grid{gap:8px}.stat-grid .card{padding:13px}.stat-grid strong{font-size:24px}.settings-card label{gap:12px}.settings-card select{max-width:180px}.intro .primary{font-size:10px;padding:10px}.stat-row{font-size:10px}}
.handguide{margin:0 28px;padding:2px 0 4px;min-height:205px}.handvisual{max-width:560px;margin:0 auto;transition:opacity 1.3s ease;pointer-events:none}.handvisual.returning{transition-duration:.12s}#handsvg{display:block;width:100%;height:auto;max-height:205px}.guide-key{fill:var(--bg);stroke:var(--line);stroke-width:1}.guide-letter{fill:var(--muted);font:11px Arial}.guide-key.next-key{fill:var(--soft);stroke:var(--green);stroke-width:2}.next-letter{fill:var(--text);font-weight:700}.hand-outline{fill:var(--surface);fill-opacity:.75;stroke:var(--muted);stroke-width:1.1}.hand-finger{fill:transparent;stroke:var(--muted);stroke-opacity:.4;stroke-width:.7}.active-finger{fill:var(--green);fill-opacity:.4;stroke:var(--green);stroke-width:1.4}.palm-line{fill:none;stroke:var(--muted);stroke-width:1;opacity:.4}.handcaption{text-align:center;font-size:10px;letter-spacing:.2px;color:var(--green);padding:1px 0 8px;min-height:24px}.zen .handguide{max-width:640px;margin:auto}@media(max-width:650px){.handguide{margin:0 12px;min-height:160px}.under-practice>div{gap:10px;flex-wrap:wrap}.under-practice label{font-size:10px}.handcaption{font-size:9px}}@media(prefers-reduced-motion:reduce){.handvisual,.handvisual.returning{transition:none}}
.motor-layout{display:grid;grid-template-columns:285px minmax(0,1fr);gap:24px;align-items:start}.motor-setup label{display:block;font-size:11px;color:var(--muted);margin:18px 0 7px}.motor-setup select,.motor-setup input{width:100%;padding:10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--text);font-size:12px}.motor-setup .primary{width:100%;margin:22px 0 6px}.motor-setup .small{line-height:1.7}.motor-mapping{padding:13px 0 0;font-size:12px;color:var(--green);font-weight:600}.motor-association{border-top:1px solid var(--line);margin-top:20px;padding-top:15px}.motor-association summary{font-size:11px;cursor:pointer}.motor-steps{display:flex;gap:8px;padding:18px 24px 0;margin:0;list-style:none}.motor-steps li{flex:1;border-top:2px solid var(--line);padding-top:9px;font-size:10px;color:var(--muted)}.motor-steps li.active{color:var(--green);border-color:var(--green)}.motor-content{padding:28px}.motor-content>h2{font-size:20px;font-weight:500;letter-spacing:-.4px}.motor-content>p{font-size:12px;line-height:1.8}.motor-content>.small{font-size:10px}.motor-cue{font-size:12px;padding:12px 15px;border-left:2px solid var(--green);background:var(--soft);margin-top:18px;color:var(--green)}#motor-entry{position:relative;padding:28px 0;outline:none;cursor:text;min-height:110px}#motor-entry:focus-visible{box-shadow:inset 0 -1px var(--green)}#motor-text{font:27px/1.9 'Courier New',monospace;letter-spacing:2px;color:var(--muted);overflow-wrap:anywhere}#motor-input{opacity:0;position:absolute;width:1px;height:1px;left:0;top:25px}.motor-done{color:var(--green)}.motor-entered{color:var(--text)}.motor-current{border-bottom:2px solid var(--green);color:var(--text)}.motor-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:14px 0}.secondary{border:1px solid var(--line);border-radius:6px;padding:9px 12px;font-size:11px;background:var(--surface)}button:disabled,select:disabled,input:disabled{opacity:.45;cursor:default}.motor-message{padding:12px 0;line-height:1.7;color:var(--green);font-size:12px;min-height:28px}.motor-check,.motor-between{background:var(--soft);border-radius:8px;padding:18px;margin-top:12px}.motor-check p,.motor-between p{font-size:12px;color:var(--text);line-height:1.7}.motor-history,.motor-science{margin-top:24px}.motor-history>p{font-size:11px}.motor-due{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:14px 20px;margin-bottom:20px;color:var(--green);font-size:12px}.motor-due>div{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:5px 0}.motor-table{width:100%;border-collapse:collapse;font-size:10px;text-align:left;margin-top:16px}.motor-table th{font-weight:500;color:var(--muted)}.motor-table td,.motor-table th{padding:12px 8px;border-bottom:1px solid var(--line);vertical-align:top}.motor-science summary{font-size:13px;font-weight:600;cursor:pointer}.motor-science>p{margin-top:18px;line-height:1.8}.science-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:15px}.science-grid h3{font-size:13px;margin-bottom:8px}.science-grid p{font-size:12px;line-height:1.8}.science-grid a{font-size:11px;color:var(--green);display:inline-block;margin-top:10px}#motorhandguide{margin:0;min-height:190px}#motor-log{overflow-x:auto}@media(max-width:900px){.motor-layout{grid-template-columns:230px minmax(0,1fr)}.motor-content{padding:20px}.motor-content>h2{font-size:18px}#motor-text{font-size:23px}}@media(max-width:650px){.motor-layout,.science-grid{grid-template-columns:1fr}.motor-setup{padding:20px}.motor-setup .primary{margin-top:15px}.motor-due>div{align-items:flex-start}.motor-steps{padding:15px 20px 0}.motor-table{min-width:620px}.motor-practice .practice-top{gap:12px;font-size:10px}.motor-content{padding:20px}.motor-due{padding:14px}.motor-setup label{margin-top:12px}}
.course-overview{display:flex;justify-content:space-between;gap:30px;margin-bottom:24px}.course-overview>div:first-child{max-width:700px}.course-overview p{font-size:12px;line-height:1.8}.course-overview h2{font-size:18px}.course-overview-actions{min-width:180px}.course-overview-actions label{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:10px;color:var(--muted);margin-top:14px}.course-overview-actions select{font-size:11px;padding:5px}.course-layout{display:grid;grid-template-columns:285px minmax(0,1fr);gap:24px;align-items:start}.course-lesson{margin-bottom:10px;padding:17px 20px}.course-lesson.active{border-color:var(--green)}.course-lesson>p{font-size:11px}.course-state{display:block;font-size:10px;color:var(--green);margin-top:12px}.course-lesson .motor-actions{margin-bottom:0;gap:10px}.course-lesson .text-button,.course-lesson .secondary{font-size:10px}.course-rules{margin-top:24px}.course-rules p{font-size:12px;line-height:1.8;margin-top:12px}.course-rules a{font-size:11px;color:var(--green);display:block;margin:12px 0}.course-rules .small{font-size:11px}#course-entry{position:relative;min-height:150px;padding:28px 0;outline:none;cursor:text}#course-entry:focus-visible{box-shadow:inset 0 -1px var(--green)}#course-text{font:24px/1.9 'Courier New',monospace;overflow-wrap:anywhere;max-height:275px;overflow:auto;color:var(--muted)}#course-input{position:absolute;opacity:0;width:1px;height:1px;left:0;top:30px}#course-history{overflow-x:auto}#coursehandguide{margin:0;min-height:190px}@media(max-width:900px){.course-layout{grid-template-columns:230px minmax(0,1fr)}}@media(max-width:650px){.course-layout{grid-template-columns:1fr}.course-overview{flex-direction:column;gap:18px}.course-lessons{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory}.course-lesson{min-width:240px;scroll-snap-align:start}.course-overview-actions{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.course-overview-actions label{margin:0}#course-text{font-size:22px}}
/* One stable reading line; the active character stays inside the viewport. */
.session-progress{padding:20px 28px 4px}.session-progress-label{display:flex;justify-content:space-between;gap:16px;font-size:10px;color:var(--muted);margin-bottom:9px;letter-spacing:.2px}.session-progress-label>span:last-child{color:var(--green);font-variant-numeric:tabular-nums}.session-progress-track{height:5px;border-radius:8px;background:var(--line);overflow:hidden}.session-progress-track>div{height:100%;width:0;background:var(--green);border-radius:inherit}.quiet-word-count{margin-left:auto;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}.typing{min-height:128px;padding-top:26px;padding-bottom:26px}.typing #text,#motor-text,#course-text{position:relative;white-space:pre;overflow-x:hidden;overflow-y:hidden;overflow-wrap:normal;word-break:normal;max-height:none;height:2.7em;scroll-behavior:auto;scrollbar-width:none;line-height:1.9}.typing #text::-webkit-scrollbar,#motor-text::-webkit-scrollbar,#course-text::-webkit-scrollbar{display:none}.typing #text span,#motor-text span,#course-text span{white-space:pre}.typing #text{font-size:29px}#motor-entry,#course-entry{min-height:128px;padding:24px 0}#motor-text,#course-text{font-size:27px}.zen .typing{min-height:155px;display:flex;align-items:center}.zen .typing #text{width:100%}.zen .session-progress{max-width:900px;margin:auto}.motor-layout>.practice,.course-layout>.practice{min-width:0}@media(min-width:1450px){.typing{min-height:145px}}@media(max-width:650px){.session-progress{padding:17px 20px 2px}.typing{min-height:115px;padding-top:23px;padding-bottom:18px}.typing #text,#motor-text,#course-text{font-size:23px}#motor-entry,#course-entry{min-height:110px}.session-progress-label{font-size:9px}.quiet-word-count{font-size:9px}}

.motor-current.motor-error{color:var(--error);border-color:var(--error);background:#b66b6014;border-radius:2px}

.rhythm{display:flex;align-items:center;gap:14px;padding:12px 24px;color:var(--muted);font-size:12px;flex-wrap:wrap}.rhythm label{display:flex;align-items:center;gap:6px;margin:0}.pulse-dot{width:12px;height:12px;border-radius:50%;background:#829e8b;opacity:.45;flex-shrink:0}.pulse-dot.beating{animation:breathe .75s ease-in-out infinite}@keyframes breathe{0%,100%{transform:scale(.8);opacity:.35}45%{transform:scale(1.25);opacity:.8}}@media(prefers-reduced-motion:reduce){.pulse-dot.beating{animation:none;opacity:.8}}.trend-filters{display:flex;gap:20px;flex-wrap:wrap}.trend-filters label{display:flex;gap:8px;align-items:center}.trend-svg{width:100%;height:auto;max-height:200px;color:inherit}.trend-svg text{fill:currentColor;font-size:12px}.trend-svg .line{fill:none;stroke:#759a82;stroke-width:2}.trend-svg circle{fill:#759a82}.trend-svg .axis{stroke:#a2aaa2;stroke-opacity:.3}.card details{line-height:1.7}.card a{color:inherit;text-decoration:underline}.rhythm input{accent-color:#759a82}
