:root{color-scheme:light;font-family:ui-rounded,'Segoe UI',system-ui,sans-serif;color:#302641;background:#f8f5fc;font-synthesis:none}
.typing-demo-note{align-items:center}.typing-demo-note [hidden]{display:none!important}.typing-demo-note button{font:inherit;cursor:pointer}.typing-demo-note :focus-visible{outline:3px solid #4d3488;outline-offset:4px}.typing-demo-note [role=status]{flex:1 1 300px}
*{box-sizing:border-box}.typing-standalone{margin:0;background:radial-gradient(ellipse at 8% 0%,#ede2fc 0,transparent 48%),#f8f5fc}.typing-demo-note{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:15px max(20px,calc((100vw - 1260px)/2));background:#fffaf2;border-bottom:1px solid #e7dbc9;font-size:.86rem;color:#675443}.typing-demo-note a{color:#5a3b87;font-weight:700;text-decoration-thickness:2px;text-underline-offset:4px}.ty-game{max-width:1300px;margin:auto;padding:28px 24px 36px;--ty-purple:#63418e;--ty-ink:#302641;--ty-border:#ded3e9;--ty-green:#27664b}.ty-game button,.ty-game input{font:inherit}.ty-game button{cursor:pointer}.ty-game button:disabled{cursor:default}.ty-game :focus-visible{outline:3px solid #4d3488;outline-offset:4px}.ty-header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}.ty-header h1{font-size:clamp(1.6rem,2.8vw,2.4rem);line-height:1.16;margin:8px 0}.ty-header p{font-size:.96rem;line-height:1.5;max-width:730px;margin:0;color:#665773}.ty-eyebrow{font-size:.72rem;letter-spacing:.1em;font-weight:800;color:#69547b}.ty-button{border:1px solid transparent;border-radius:13px;padding:12px 18px;background:#63418e;color:#fff;min-height:44px;font-weight:750;line-height:1.2;box-shadow:0 3px 0 #412667;transition:background .15s,transform .15s}.ty-button:hover{background:#523375}.ty-button:active{transform:translateY(1px)}.ty-button.secondary{color:#533676;border-color:#d5c7e4;background:#fff;box-shadow:none}.ty-button.secondary:hover{background:#f0e9f8}.ty-trail{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:22px 0;padding:0;max-width:670px}.ty-trail li{font-size:.88rem;color:#706078;display:flex;align-items:center;gap:9px;font-weight:600}.ty-trail li>span{width:33px;height:33px;display:grid;place-items:center;border:2px solid #e2d7ed;background:#fff;border-radius:11px;font-size:.85rem}.ty-trail .is-active{color:#55347e}.ty-trail .is-active>span{border-color:#78559f;background:#ece1f9}.ty-trail .is-done>span{background:#d8efdf;border-color:#84b197;color:#235c42}.ty-workbench{display:grid;grid-template-columns:minmax(360px,.95fr) minmax(440px,1.05fr);gap:22px;align-items:start}.ty-card,.ty-guide{min-width:0;border:1px solid var(--ty-border);border-radius:25px;background:#fff;padding:24px;box-shadow:0 10px 25px #44315a06}.ty-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.ty-card-heading h2{font-size:1.3rem;line-height:1.25;margin:7px 0}.ty-mode-badge{background:#e6f3eb;color:#285f47;font-size:.72rem;font-weight:750;padding:8px 10px;border-radius:10px;white-space:nowrap}.ty-instruction{font-size:.95rem;line-height:1.5;color:#63566d;margin:10px 0 16px}.ty-settings{border:1px solid #e4ddec;border-radius:13px;background:#faf8fd;padding:10px 12px;margin:16px 0}.ty-settings legend{font-size:.84rem;font-weight:750;padding:0 5px}.ty-choice{display:flex;gap:8px 16px;flex-wrap:wrap}.ty-choice+ .ty-choice{margin-top:7px}.ty-choice label{font-size:.79rem;display:flex;align-items:center;gap:7px;min-height:32px;cursor:pointer}.ty-choice input{accent-color:#63418e;width:17px;height:17px;margin:0}.ty-choice label:has(input:disabled){color:#877e8c}.ty-copy{display:flex;flex-wrap:wrap;gap:3px;background:#f5f0fc;border:1px solid #e3d7f0;border-radius:15px;padding:13px 12px;margin:16px 0;font-family:ui-monospace,Consolas,monospace;font-size:1.25rem;letter-spacing:.02em;line-height:1.65}.ty-copy>span{min-width:13px;padding:1px 2px;text-align:center;color:#766682;border-bottom:3px solid transparent;border-radius:4px}.ty-copy .is-written{color:#226145;background:#e0f1e7}.ty-copy .is-next{color:#342444;border-color:#6a408e;background:#e4d3f6;font-weight:850}.ty-space-symbol{font-size:.78em}.ty-next{display:flex;gap:13px;align-items:center;min-height:65px;margin:12px 0 18px}.ty-target{background:#ffdea1;border:2px solid #c3984e;box-shadow:0 3px 0 #e0c68e;border-radius:13px;min-width:60px;min-height:59px;padding:10px;display:grid;place-items:center;font-size:1.35rem;font-weight:800;color:#503d1b}.ty-next strong{display:block;font-size:.98rem;line-height:1.45}.ty-next div>span{display:block;color:#69596f;font-size:.86rem;margin-top:4px}.ty-input-label{display:block;font-size:.86rem;font-weight:750}.ty-input{display:block;border:2px solid #9b7cbd;background:#fffeff;border-radius:12px;min-height:47px;width:100%;margin-top:7px;padding:11px 13px;color:#3e2a52;font-size:.9rem!important}.ty-input:focus{border-color:#65418e;box-shadow:0 0 0 4px #eee4fa;outline:none}.ty-input:disabled{border-color:#e3dce8;color:#786d82;background:#f7f4fa;opacity:1}.ty-input::placeholder{color:#6e617a;opacity:1}.ty-small{font-size:.77rem;color:#74657c;line-height:1.5;margin:8px 0}.ty-feedback{min-height:37px;font-size:.86rem;line-height:1.45;color:#604477;margin:12px 0}.ty-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.ty-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid #e9e1ee;margin:22px 0 12px;padding-top:16px}.ty-metrics div{min-width:0}.ty-metrics dt{font-size:.71rem;color:#73657d;line-height:1.5}.ty-metrics dd{margin:5px 0 0;font-size:1.24rem;font-weight:800;color:#4d3865;font-variant-numeric:tabular-nums}.ty-metric-help{font-size:.76rem;color:#6d5d77;line-height:1.55}.ty-metric-help summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px}.ty-persistence{font-size:.78rem;color:#8c3f33;line-height:1.4;margin:10px 0 0}.ty-persistence:empty{display:none}.ty-guide{background:linear-gradient(160deg,#fffdf7,#f5f0fc);padding:24px 18px}.ty-guide-heading{padding:0 7px}.ty-guide h2{font-size:1.25rem;margin:9px 0}.ty-guide-heading p{font-size:.88rem;color:#6c5c74;line-height:1.55;margin:0}.ty-hands{display:block;width:100%;height:auto;margin:14px auto 18px;max-width:560px;overflow:visible}.ty-palm{fill:#ecd5c3;stroke:#b3947c;stroke-width:1.5}.ty-finger rect{fill:#f2dfce;stroke:#b3947c;stroke-width:1.5;transition:fill .16s}.ty-finger text{fill:#695273;font-family:inherit;font-size:11px;text-anchor:middle;font-weight:750}.ty-finger.is-current rect{fill:#ffcb6d;stroke:#876524;stroke-width:2.4}.ty-finger.is-current text{fill:#48341a;font-weight:900}.ty-finger-mark{fill:#795620;stroke:#fff6de;stroke-width:2}.ty-hand-label{text-anchor:middle;font-family:inherit;font-size:11px;font-weight:800;fill:#766182;letter-spacing:1px}.ty-space-label{text-anchor:middle;font-family:inherit;font-size:10px;fill:#765b4b}.ty-keyboard{padding:12px 7px;background:#e8e1ef;border:1px solid #c9bad5;border-bottom:4px solid #c9bad5;border-radius:15px}.ty-key-row{display:flex;gap:4px;margin:4px 0;justify-content:center}.ty-row-1{padding:0 11px}.ty-row-2{padding:0 15px}.ty-row-3{padding:0 24px}.ty-key{position:relative;min-width:0;min-height:39px;flex:1;display:flex;align-items:center;justify-content:center;background:#faf8fc;color:#74657e;border:1px solid #d1c3dd;border-bottom-width:3px;border-radius:6px;padding:4px 0;font-size:.77rem;line-height:1;font-weight:600;transition:background .14s,transform .14s}.ty-key.ty-learned{background:#fff;color:#4f365f;font-weight:750}.ty-key.is-current{background:#ffdb96;color:#493416;border-color:#b48a36;outline:2px solid #a07321;outline-offset:1px}.ty-key.is-current>span{transform:translateY(-4px)}.ty-key small{position:absolute;bottom:4px;font-size:7px;letter-spacing:.01em;font-weight:800}.ty-key.ty-anchor:after{content:'';position:absolute;bottom:5px;left:38%;right:38%;height:2px;background:currentColor;border-radius:2px}.ty-key.is-current.ty-anchor:after{display:none}.ty-space-row{padding:3px 23% 0}.ty-space-row .ty-key{min-height:38px}.ty-keyboard button.ty-key{touch-action:manipulation}.ty-keyboard button.ty-key:not(:disabled):hover{border-color:#735294;background:#f0e6fc}.ty-keyboard button.ty-key.is-current:not(:disabled):hover{background:#ffe6b5}.ty-keyboard button.ty-key:disabled{opacity:1}.ty-guide-note{font-size:.78rem;line-height:1.55;color:#74647c;margin:16px 7px 0}.ty-touch-note{font-size:.86rem;line-height:1.5;background:#e9f4ee;color:#28563f;padding:12px;border-radius:12px}.ty-result{display:flex;align-items:flex-start;gap:12px;border:1px solid #bad9c6;background:#eff9f2;border-radius:15px;padding:15px;margin:16px 0}.ty-result>span{display:grid;place-items:center;background:#377357;color:#fff;border-radius:50%;width:29px;height:29px;flex:none;font-weight:800}.ty-result h2{font-size:1.1rem;margin:1px 0 7px;color:#24563d}.ty-result p{font-size:.85rem;line-height:1.5;margin:4px 0;color:#3c644e}.ty-game[data-motion="reduced"] *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
@media(max-width:1050px){.ty-workbench{grid-template-columns:1fr}.ty-guide{max-width:760px;width:100%;margin:auto}.ty-hands{max-width:485px;margin-top:7px}.ty-key{min-height:43px}.ty-card{padding:24px}.ty-header h1{font-size:1.9rem}.ty-trail{max-width:none}.ty-guide-heading p br{display:none}}
@media(max-width:620px){.ty-game{padding:20px 12px}.ty-header{display:block}.ty-header .ty-button{margin-top:15px}.ty-header h1{font-size:1.65rem}.ty-header p{font-size:.87rem}.ty-trail{gap:4px;margin:18px 0}.ty-trail li{font-size:.73rem;gap:5px}.ty-trail li>span{width:27px;height:29px;border-radius:9px}.ty-card{padding:18px 15px}.ty-guide{padding:20px 10px}.ty-mode-badge{font-size:.65rem;padding:7px}.ty-card-heading h2{font-size:1.14rem}.ty-keyboard{padding:9px 4px}.ty-key-row{gap:2px}.ty-key{min-height:33px;font-size:.66rem;border-radius:4px}.ty-row-1{padding:0 4px}.ty-row-2{padding:0 7px}.ty-row-3{padding:0 12px}.ty-key small{font-size:6px}.ty-metrics dd{font-size:1.1rem}.ty-choice{gap:4px 12px}.ty-choice label{font-size:.74rem}.ty-copy{font-size:1.15rem}.ty-keyboard button.ty-key{min-height:36px}}
@media(prefers-reduced-motion:reduce){.ty-game *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.ty-course-map{border:1px solid #ded2e9;border-radius:15px;background:#fff;padding:0 16px;margin:18px 0}.ty-course-map>summary{cursor:pointer;min-height:48px;padding:13px 0;color:#563c71;font-size:.87rem;font-weight:750}.ty-course-map .ty-trail{grid-template-columns:repeat(7,minmax(0,1fr));max-width:none;margin:5px 0 14px;gap:12px}.ty-course-map .ty-trail li{font-size:.76rem;line-height:1.35;min-width:0}.ty-course-map .ty-trail li>span{flex:none}.ty-legacy{font-size:.84rem;line-height:1.5;padding:12px 16px;margin:0 0 18px;background:#edf6f1;color:#315b45;border:1px solid #bbd8c8;border-radius:14px}.ty-legacy summary{cursor:pointer;min-height:26px;font-weight:750}.ty-legacy p{margin:8px 0 0}.ty-choice label{min-height:44px}.ty-choice select{font:inherit;color:#43304f;background:white;border:1px solid #b5a3c7;border-radius:8px;min-height:44px;padding:6px}.ty-letter{margin:0 0 12px}.ty-letter p{font-size:.86rem;line-height:1.65}.ty-keyboard .ty-space-row{padding:5px 0 0}.ty-space-row>.ty-key:not(.ty-shift){flex:2}.ty-key.ty-shift{font-size:.67rem;min-height:44px}.ty-key.is-shift{background:#dbecfa;border-color:#467ca3;color:#244c6a;outline:2px solid #467ca3;outline-offset:1px}.ty-key.is-shift>span{transform:translateY(-5px)}.ty-key.is-pressed{box-shadow:inset 0 0 0 2px #577590}.ty-key i{font-style:normal;font-size:.5rem;position:absolute;top:3px;right:3px;color:#6c5878}.ty-finger.is-shift rect{fill:#b9d8ee;stroke:#467ca3;stroke-width:2.4}.ty-finger.is-shift text{fill:#244c6a;font-weight:900}.ty-keyboard button.ty-key{min-height:44px}.ty-game[data-age="14-16"] .ty-copy{background:#f2f3f9}.ty-game[data-age="11-13"] .ty-target{background:#f4dfac}
@media(max-width:1050px){.ty-course-map .ty-trail{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:620px){.ty-course-map .ty-trail{grid-template-columns:repeat(2,minmax(0,1fr))}.ty-key.ty-shift{font-size:.59rem}.ty-key i{font-size:.43rem;right:2px}.ty-course-map>summary{font-size:.8rem}}
@keyframes ty-reach{from{translate:0 5px}to{translate:0 0}}.ty-finger.is-current rect{animation:ty-reach .3s ease-out 1}