:root{font-family:Trebuchet MS,Segoe UI,Tahoma,sans-serif;color:#17243a;background:#edf3f8;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #17243a;--muted: #68788e;--line: #d5dfeb;--paper: #fff;--canvas: #f8fbff;--brand: #315ac6;--brand-deep: #24459c;--brand-soft: #e9f0ff;--lime: #79b836;--lime-soft: #eef8df;--danger: #c43a35}*{box-sizing:border-box}html{min-width:320px;overflow-x:hidden;background:#edf3f8}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;padding:clamp(14px,3vw,34px);background:radial-gradient(circle at 96% 4%,rgba(66,137,220,.14) 0 13rem,transparent 13.1rem),linear-gradient(145deg,#f7fafc,#e7eff6)}.program-window{width:min(1240px,100%);min-height:min(760px,calc(100vh - 68px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 190px;overflow:hidden;border:5px solid rgba(255,255,255,.94);background:var(--canvas);box-shadow:0 22px 60px #213c5e2b}.course-pane{min-width:0;background:var(--canvas)}.course-header{min-height:64px;padding:0 34px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#ffffffeb}.brand{display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:transparent;color:var(--ink);font-size:1.02rem;font-weight:700}.brand strong{color:var(--brand)}.brand-mark{display:grid;width:35px;height:35px;place-items:center;border-radius:50%;background:var(--brand);color:#fff;font-size:.66rem;font-style:italic;letter-spacing:-.04em}.course-label{color:var(--muted);font-size:.8rem}h1,h2{margin:0;color:#101b2d;font-weight:500;letter-spacing:-.025em}h1{font-size:clamp(1.55rem,2.8vw,2.08rem);line-height:1.18}h2{font-size:clamp(1.25rem,2.2vw,1.65rem)}.eyebrow{margin:0 0 6px;color:var(--brand);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.lesson-overview,.drill-screen,.simple-page{padding:34px clamp(26px,5vw,58px) 40px}.section-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.course-progress{color:var(--muted);font-size:.76rem;white-space:nowrap}.lesson-tabs{display:grid;grid-template-columns:repeat(12,1fr);margin-top:18px;border-top:2px solid var(--brand)}.lesson-tabs button{min-height:34px;padding:0;border:0;background:transparent;color:#9eb5dd;font-size:.88rem;font-weight:700}.lesson-tabs button[aria-current=page]{background:var(--brand);color:#fff}.lesson-tabs button:disabled{cursor:not-allowed;opacity:.58}.lesson-summary{max-width:680px;margin:30px auto 22px;text-align:center}.lesson-number{margin:0 0 7px;color:var(--brand);font-size:.76rem;font-weight:700;text-transform:uppercase}.lesson-summary>p:last-child{max-width:610px;margin:10px auto 0;color:var(--muted);font-size:.85rem;line-height:1.55}.exercise-list{max-width:690px;margin:0 auto;padding:0;list-style:none}.exercise-list li{margin:3px 0;border:1px solid transparent}.exercise-list li.recommended{border-color:#8fb8e5;background:#f2f7ff}.exercise-list button{width:100%;min-height:48px;padding:7px 11px;display:grid;grid-template-columns:27px 128px minmax(0,1fr) 76px;align-items:center;gap:10px;border:0;background:transparent;color:var(--ink);text-align:left}.exercise-list button:hover{background:#315ac60e}.exercise-list strong{font-size:.83rem}.exercise-list button>span:nth-child(3){overflow:hidden;color:#51637b;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.exercise-list small{color:#41546c;font-size:.74rem;text-align:right}.exercise-status{display:grid;width:22px;height:22px;place-items:center;border:2px solid #80b6d9;border-radius:50%;color:#fff;font-size:.69rem;font-weight:800}.exercise-status.done{border-color:var(--lime);background:var(--lime)}.lesson-note{max-width:690px;margin:23px auto 0;padding-top:15px;display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);color:var(--muted)}.lesson-note>span{display:grid;flex:none;width:23px;height:23px;place-items:center;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-family:Georgia,serif;font-weight:700}.lesson-note p{margin:0;font-size:.76rem;line-height:1.45}.program-nav{display:flex;flex-direction:column;border-left:1px solid #b9cde4;background:#dceafa;color:#1c3555}.rail-heading{min-height:116px;padding:25px 20px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #bed1e6;background:#cfe2f7}.rail-logo{display:grid;width:38px;height:38px;place-items:center;border-radius:50%;background:var(--brand);color:#fff;font-family:Georgia,serif;font-size:1.2rem;font-style:italic;font-weight:700}.rail-heading>span:last-child{display:grid}.rail-heading strong{font-size:.8rem}.rail-heading small{margin-top:1px;color:var(--brand);font-size:.68rem;font-weight:800}.program-nav nav{margin-top:auto;padding:15px;display:grid;gap:5px;border-top:1px solid #bed1e6}.program-nav nav button{min-height:43px;padding:0 12px;display:flex;align-items:center;gap:10px;border:1px solid transparent;background:transparent;color:#274769;font-size:.79rem;text-align:left}.program-nav nav button:hover,.program-nav nav button.active{border-color:#a8c3df;background:#ffffff94}.program-nav nav button span{display:grid;width:20px;height:20px;place-items:center;border:1px solid #7ba1c9;border-radius:50%;color:var(--brand);font-family:Georgia,serif;font-size:.7rem;font-weight:700}.program-nav .drill-nav{gap:8px}.program-nav .drill-nav button{justify-content:center;border-color:var(--brand);font-size:.8rem;font-weight:700;text-align:center}.program-nav .drill-nav .next-button{background:var(--brand);color:#fff}.program-nav .drill-nav .next-button:hover:not(:disabled){background:var(--brand-deep)}.program-nav .drill-nav .next-button:disabled{border-color:#aebfd3;background:#c5d2df;color:#6d8095;cursor:not-allowed}.program-nav .drill-nav .cancel-button{background:#fff;color:var(--brand)}.drill-timer{padding:20px 16px;border-bottom:1px solid #bed1e6}.drill-timer>div{padding-bottom:5px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(98,132,169,.35)}.drill-timer strong{color:#132f50;font-size:.78rem}.drill-timer button{padding:0;border:0;background:transparent;color:var(--brand-deep);font-size:.72rem;text-decoration:underline}.drill-timer button:disabled{color:#8193a7;cursor:default;opacity:.55}.drill-timer time{display:block;margin-top:5px;color:#101820;font-size:1.55rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}.drill-timer.running time{color:var(--brand-deep)}.drill-results{padding:22px 16px;border-bottom:1px solid #bed1e6}.drill-results h2{margin:0 0 12px;color:#193858;font-size:.86rem;font-weight:700}.drill-results dl{margin:0;display:grid;gap:0}.drill-results dl>div{padding:9px 0;display:grid;gap:3px;border-top:1px solid rgba(98,132,169,.24)}.drill-results dt{color:#617b97;font-size:.65rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.drill-results dd{margin:0;color:#132f50;font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums}.typing-title-row{min-height:48px;margin-bottom:0;padding:0 3px 13px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.typing-title-row h1{font-size:clamp(1.3rem,2.4vw,1.7rem)}.typing-workspace{border:1px solid var(--line);background:#fff}.typing-card,.guide-card{background:#fff}.settings-card,.about-card{border:1px solid var(--line);background:#fff}.typing-card{min-height:150px;padding:26px 28px 18px;display:grid;align-content:center;border:0;outline:none}.typing-card.long-content{min-height:195px}.typing-card:focus-visible{box-shadow:inset 0 0 0 2px #315ac63d}.typing-line{color:#758399;font-family:Georgia,Times New Roman,serif;font-size:clamp(1.85rem,4vw,3.05rem);font-weight:400;letter-spacing:.005em;line-height:1.43}.typing-line.compact{font-size:clamp(1.35rem,2.65vw,2rem);line-height:1.58}.typing-line>span{display:inline-block;min-width:.52em;border-bottom:2px solid transparent;text-align:center}.typing-line .space-char{min-width:.34em}.typing-line .typed{color:#274cc0}.typing-line .current-char{border-bottom-color:#274cc0;background:#edf2ff;color:#274cc0}.key-sequence{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;font-family:Trebuchet MS,Segoe UI,sans-serif}.sequence-group{display:inline-flex;align-items:center;gap:6px}.sequence-key{display:grid;min-width:43px;height:40px;padding:0 8px;place-items:center;border:2px solid #9eb1d1;background:#f6f8ff;color:#1c3f9d;font-size:.95rem;font-weight:700;line-height:1}.sequence-key.space-key{min-width:72px;font-size:.7rem}.sequence-key.typed{border-color:#65b730;background:#effadc;color:#397f17}.sequence-key.current-char{border-color:#315ac6;background:#dfe7ff;color:#183eac;box-shadow:inset 0 -3px #315ac633}.key-sequence.status-incorrect .sequence-key.current-char{border-color:#df2538;background:#fff0f2;color:#c9152a;box-shadow:inset 0 -3px #df253824}.completion{display:flex;align-items:center;gap:20px}.completion-copy{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:center}.completion-icon{grid-row:1 / 3;display:grid;width:40px;height:40px;place-items:center;border-radius:50%;background:var(--lime-soft);color:#5d9629;font-weight:800}.completion-copy>strong{align-self:end}.completion small{align-self:start;margin-top:3px;color:var(--muted);font-size:.73rem}.primary-button{min-height:38px;padding:0 15px;border:1px solid var(--brand);background:var(--brand);color:#fff;font-size:.76rem;font-weight:700}.guide-card{padding:8px 20px 16px;display:flex;flex-direction:column;gap:14px;border:0}.guide-card .hands{min-height:118px;padding-top:10px;gap:76px;transform:scale(1.55);transform-origin:top center}.hands{display:flex;justify-content:center;gap:13px;padding-top:5px}.hand{position:relative;width:73px;height:66px}.finger-set{position:relative;z-index:2;height:45px;display:flex;align-items:flex-end;justify-content:center;gap:2px}.finger{display:block;width:11px;height:34px;border:2px solid #c8d1dc;border-radius:7px 7px 3px 3px;background:#f3f6f8}.finger-1,.finger-5{height:25px}.finger-2,.finger-4{height:37px}.finger-3{height:42px}.finger.active{border-color:var(--finger-color);background:var(--finger-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--finger-color) 16%,white)}.palm{position:absolute;z-index:1;left:11px;right:11px;bottom:0;height:29px;border:2px solid #c8d1dc;border-radius:7px 7px 15px 15px;background:#f3f6f8}.keyboard-scroll{min-width:0;overflow-x:auto;padding-bottom:2px}.keyboard{min-width:610px;display:grid;align-content:center;gap:4px}.key-row{display:flex;justify-content:center;gap:4px}.key{--finger-color: #c2c8d0;height:33px;min-width:25px;flex:0 1 38px;display:grid;place-items:center;border:1px solid #ccd6e1;border-top:3px solid var(--finger-color);background:#fbfdff;color:#4a5a6e;font-size:.61rem;font-weight:700}.key.wide{max-width:62px;flex-grow:1.35;font-size:.49rem}.key.wide-backspace{max-width:76px}.key.wide-enter,.key.wide-caps{max-width:66px}.key.wide-shift{max-width:84px}.key.space{max-width:290px;flex:0 1 290px}.key.target{border-color:var(--finger-color);background:var(--finger-color);color:#fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--finger-color) 16%,white)}.key.pressed.incorrect{border-color:var(--danger);background:var(--danger);color:#fff}.key.pressed.correct{transform:translateY(1px)}.finger-left-pinky{--finger-color: #d45774}.finger-left-ring{--finger-color: #dc7b35}.finger-left-middle{--finger-color: #b49315}.finger-left-index{--finger-color: #52a76e}.finger-left-thumb{--finger-color: #468b9c}.finger-right-thumb{--finger-color: #5177bd}.finger-right-index{--finger-color: #6087d0}.finger-right-middle{--finger-color: #7f68c3}.finger-right-ring{--finger-color: #a45a9e}.finger-right-pinky{--finger-color: #bf6079}.new-keys-layout{display:grid;gap:20px}.intro-copy{min-height:52px;padding:13px 16px;display:flex;align-items:center;border:1px solid var(--line);background:#fff;color:#53667e}.intro-copy p{margin:0;font-size:.82rem;line-height:1.5}.home-row-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}.home-key{padding:10px 4px 8px;display:grid;justify-items:center;gap:6px;border:1px solid color-mix(in srgb,var(--finger-color) 65%,white);border-top:4px solid var(--finger-color);background:#fff}.home-key strong{font-family:Georgia,serif;color:var(--finger-color);font-size:1.65rem}.home-key span{color:var(--muted);font-size:.56rem;text-align:center}.intro-guide{padding:18px 15px 8px;display:flex;flex-direction:column;gap:16px;border:1px solid var(--line);background:#fff}.intro-guide .hands{min-height:112px;gap:76px;transform:scale(1.5);transform-origin:top center}.intro-actions{display:flex;justify-content:flex-end}.simple-page{max-width:790px}.page-lead{max-width:620px;margin:10px 0 26px;color:var(--muted);font-size:.88rem;line-height:1.6}.settings-card{margin-bottom:20px}.settings-card>div,.toggle-row{min-height:66px;padding:14px 17px;display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid var(--line)}.settings-card>div:last-child{border-bottom:0}.settings-card strong,.toggle-row strong{display:block;font-size:.82rem}.settings-card span,.toggle-row small{color:var(--muted);font-size:.75rem}.toggle-row>span{display:grid;gap:4px}.toggle-row input{width:18px;height:18px;accent-color:var(--brand)}.about-card{margin-bottom:20px;padding:22px;display:flex;align-items:center;gap:14px}.about-mark{display:grid;width:54px;height:54px;place-items:center;border-radius:50%;background:var(--brand);color:#fff;font-size:.8rem;font-weight:800}.about-card>div{display:grid;gap:5px}.about-card small{color:var(--muted)}button:focus-visible{outline:3px solid rgba(49,90,198,.28);outline-offset:2px}@media(max-width:980px){.app-shell{padding:0}.program-window{min-height:100vh;grid-template-columns:minmax(0,1fr) 165px;border:0}.lesson-overview,.drill-screen,.simple-page{padding-inline:28px}}@media(max-width:760px){.program-window{width:100%;max-width:100%;display:flex;flex-direction:column}.program-nav{order:-1;display:grid;grid-template-columns:1fr auto;border:0;border-bottom:1px solid #b9cde4}.program-nav.drill-mode .rail-heading{grid-column:1;grid-row:1}.program-nav.drill-mode .drill-nav{grid-column:2;grid-row:1}.program-nav.drill-mode .drill-timer{grid-column:1 / -1;grid-row:2}.program-nav.drill-mode .drill-results{grid-column:1 / -1;grid-row:3}.rail-heading{min-height:60px;padding:10px 18px;border:0}.rail-logo{width:32px;height:32px}.program-nav nav{margin:0;padding:8px 12px;display:flex;align-items:center;border:0}.program-nav nav button{min-height:38px}.drill-timer{padding:10px 18px}.drill-timer time{font-size:1.25rem}.drill-results{padding:12px 18px;border-top:1px solid #bed1e6;border-bottom:0}.drill-results h2{margin-bottom:8px}.drill-results dl{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.drill-results dl>div{padding:5px 0}.course-header{min-height:58px;padding-inline:20px}.lesson-tabs{width:100%;max-width:100%;overflow-x:auto;grid-template-columns:repeat(12,42px)}.exercise-list button{grid-template-columns:27px 105px minmax(0,1fr) 65px;gap:7px}.home-row-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:540px){.rail-heading>span:last-child{display:none}.program-nav{grid-template-columns:auto 1fr}.program-nav nav{min-width:0;justify-content:flex-end}.program-nav nav button{width:38px;padding:0;justify-content:center;overflow:hidden;font-size:0}.program-nav nav button span{flex:none;font-size:.7rem}.program-nav nav.drill-nav button{width:66px;padding:0 8px;font-size:.7rem}.course-label{display:none}.lesson-overview,.drill-screen,.simple-page{padding:25px 18px 32px}.lesson-overview{overflow:hidden}.section-title-row{align-items:flex-start;flex-direction:column;gap:13px}.lesson-summary{margin-top:24px}.lesson-summary h2{overflow-wrap:anywhere}.exercise-list button{grid-template-columns:27px 1fr auto}.exercise-list button>span:nth-child(3){display:none}.typing-card{min-height:170px;padding:19px 17px}.key-sequence{gap:10px 13px}.sequence-key{min-width:38px;height:37px;padding-inline:6px}.sequence-key.space-key{min-width:63px}.typing-title-row{align-items:center}.guide-card{padding-inline:12px}.guide-card .hands,.intro-guide .hands{min-height:84px;gap:35px;transform:scale(1.05)}.completion{align-items:flex-start;flex-direction:column}.home-row-grid{gap:5px}.home-key strong{font-size:1.35rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}}