@font-face{font-family:KidsMono;src:url('assets/DejaVuSansMono.ttf') format('truetype');font-display:swap;font-weight:400}
:root{--ink:#243e3b;--muted:#71817e;--green:#306d60;--green-dark:#225447;--cream:#faf9f5;--line:#e4e9e3;--mint:#e8f1e8;--white:#fff;--radius:22px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--cream);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;font-size:15px;line-height:1.55}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #165bba;outline-offset:4px}button{border:0}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{line-height:1.16;letter-spacing:-.035em}h1{font-size:clamp(36px,3.6vw,57px);font-weight:800}h2{font-size:27px}h3{font-size:19px}h4{font-size:20px}p{color:var(--muted)}em{font-style:normal;color:var(--green)}small{font-size:12px}.hidden{display:none!important}.skip{position:fixed;top:5px;left:10px;z-index:100;background:white;padding:10px;transform:translateY(-150%)}.skip:focus{transform:none}.app-shell{display:flex;min-height:100vh}.sidebar{width:244px;flex:0 0 244px;padding:34px 22px 20px;background:#fff;border-right:1px solid var(--line);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow-y:auto}.wordmark{display:flex;align-items:center;gap:11px;line-height:1;font-size:24px;font-weight:900;letter-spacing:-1px;padding:3px 0 29px}.wordmark .kids{color:#d98a52}.wordmark small{display:block;letter-spacing:1.25px;font-size:7.5px;margin-top:8px;color:var(--muted);font-weight:700}.app-icon{display:grid;place-items:center;position:relative;min-width:43px;height:45px;border-radius:14px;background:var(--green);color:#fff;font-size:28px;transform:rotate(-5deg);box-shadow:0 4px 0 #dfe9e1}.app-icon span{position:absolute;color:#e8bc72;left:24px;font-size:23px;top:13px}.app-icon{padding-right:13px;padding-bottom:5px}nav{display:grid;gap:8px}nav a{display:flex;align-items:center;gap:11px;padding:13px 12px;border-radius:12px;font-size:13px;font-weight:700;color:#687975;white-space:nowrap}nav a>span{width:21px;text-align:center;font-size:19px}nav a.active{background:var(--mint);color:var(--green)}nav a:hover{background:#f1f5ef}.sidebar-note{background:#f8f5ec;padding:17px;border-radius:17px;margin-top:40px}.sidebar-note strong{display:block;font-size:14px;margin-top:8px}.sidebar-note p{font-size:12px;margin-top:6px}.note-star{font-size:28px;line-height:1;color:#cc954a}.official-brand{margin-top:auto;padding-top:27px;text-align:center}.official-brand img{object-fit:contain;display:block;margin:auto;width:132px;height:132px}.official-brand span{font-size:10px;color:var(--muted)}.version{display:block;text-align:center;margin-top:18px;font-size:10px;color:#8a9691}.content-shell{flex:1;min-width:0}.topbar{height:84px;border-bottom:1px solid var(--line);padding:0 42px;display:flex;align-items:center;justify-content:space-between;gap:15px}.topbar>span:first-child{font-size:10px;letter-spacing:1.6px;font-weight:700;color:var(--muted)}.top-chip{font-size:11px;color:#657b6c;background:#eef2e8;padding:7px 12px;border-radius:20px}.top-chip>span{color:#669171;font-size:8px;margin-right:6px}main{max-width:1270px;margin:auto;padding:35px 42px 48px;outline:0}footer{font-size:11px;text-align:center;padding:8px 20px 24px;color:#8b9791}footer span{padding:0 9px;color:#b4a67e}.hero{background:#edf2e8;border:1px solid #e3eada;border-radius:28px;padding:35px 37px;display:grid;grid-template-columns:1.2fr 1fr;gap:10px;position:relative;overflow:hidden}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.6px;display:block;color:#69806a;margin-bottom:13px}.eyebrow>span{font-size:16px;vertical-align:middle;margin-right:4px}.hero h1{font-size:clamp(35px,3.6vw,56px);margin-bottom:17px;line-height:1.07}.hero p{max-width:365px;font-size:14px;line-height:1.7;color:#687c70}.btn{display:inline-flex;align-items:center;justify-content:center;gap:17px;min-height:46px;padding:11px 22px;border-radius:11px;font-size:13px;font-weight:700;line-height:1.35;transition:background .15s,transform .15s}.btn:hover{transform:translateY(-1px)}.btn.primary{background:var(--green);color:#fff;box-shadow:0 3px 0 #1d5144}.btn.primary:hover{background:var(--green-dark)}.btn.secondary{background:#f0f4ee;border:1px solid #dce5dc;color:var(--green)}.btn.danger{background:#f9eeee;color:#9b3e48;border:1px solid #ead5d5}.btn.small{min-height:36px;padding:8px 14px;font-size:12px}.btn.wide,.text-button.wide{display:flex;width:100%;margin-top:13px}.hero .btn{margin-top:25px}.hero-caption{display:block;font-size:10px;color:#7c8a78;margin-top:12px}.hero-art{position:relative;min-height:290px}.art-key{position:absolute;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:84px;font-weight:800;line-height:1;width:140px;height:152px;border-radius:24px;border:2px solid white;box-shadow:0 10px 0 #bdd1c0,0 23px 24px #324e3120}.art-key span{font-size:8px;font-weight:700;margin-top:12px;letter-spacing:.2px}.art-key i{width:25px;height:4px;border-radius:5px;background:currentColor;opacity:.4;margin-top:10px}.key-f{background:#d4e5d5;color:#376d58;left:9%;top:70px;transform:rotate(-13deg)}.key-j{background:#f7e4bb;color:#a77636;left:48%;top:105px;transform:rotate(13deg);box-shadow:0 10px 0 #dfcba0,0 23px 24px #324e3120}.floating-label{position:absolute;background:#fff;font-size:12px;padding:8px 17px;border-radius:20px;left:30%;top:10px;transform:rotate(5deg);box-shadow:0 3px 10px #324e3108}.art-spark{position:absolute;color:#b28642;line-height:1}.s1{font-size:39px;right:3%;top:43px;transform:rotate(14deg)}.s2{font-size:28px;left:0;bottom:32px}.art-sub{position:absolute;bottom:-2px;left:23%;font-size:10px;line-height:1.5;color:#7f8e7b;text-align:center;transform:rotate(-5deg)}.art-dot{position:absolute;bottom:18px;right:3%;border:4px solid #b4cbb9;width:17px;height:17px;border-radius:50%}.overview{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:0;margin:25px 0 36px;background:white;border:1px solid var(--line);border-radius:18px;padding:19px 0}.overview>div,.overview>a{display:flex;align-items:center;gap:12px;padding:0 23px;border-right:1px solid var(--line)}.overview>:last-child{border:0}.stat-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;font-size:22px;flex-shrink:0}.mint{background:#e9f2e8;color:#4e805b}.peach{background:#fbefda;color:#b58036}.lavender{background:#efedf8;color:#8b76b7}.overview strong{display:block;font-size:23px;line-height:1.25}.overview strong small{font-size:16px;color:#929b92;font-weight:400}.overview small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.overview strong small{display:inline}.overview a strong{font-size:14px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}.section-heading .eyebrow{margin-bottom:7px}.section-heading p{font-size:11px}.lesson-group-heading{display:flex;gap:12px;align-items:center;margin:28px 0 15px}.lesson-group-heading>span:first-child{display:grid;place-items:center;background:#f0eee5;border-radius:8px;color:#a59469;font-size:11px;width:28px;height:28px}.lesson-group-heading h3{font-size:16px;white-space:nowrap}.lesson-group-heading .line{height:1px;background:var(--line);flex:1}.lesson-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.lesson-card{text-align:left;display:flex;flex-direction:column;padding:20px;background:#fff;border:1px solid var(--line);border-radius:18px;min-height:184px;transition:border-color .2s,box-shadow .2s,transform .2s}.lesson-card:hover{border-color:#91b29b;box-shadow:0 5px 15px #2348380c;transform:translateY(-3px)}.lesson-card.recommended{border:1.5px solid #87a58b;background:#f5f8f1}.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.lesson-number{width:32px;height:32px;display:grid;place-items:center;background:#f3f4ee;border:1px solid #e9ece3;border-radius:9px;font-size:12px;font-weight:700;color:#8a9a85;flex-shrink:0}.recommended .lesson-number{background:#e2ebdc;color:#427353}.pill{display:inline-flex;padding:5px 10px;border-radius:20px;background:#edf3e9;color:#537658;font-size:9px;font-weight:700;letter-spacing:.2px;white-space:nowrap}.card-arrow{color:#9aa696}.lesson-card h4{font-size:17px;margin-bottom:8px;letter-spacing:-.02em}.lesson-card>p{font-size:11px}.card-bottom{border-top:1px solid var(--line);padding-top:13px;margin-top:20px;display:flex;justify-content:space-between;font-size:10px;color:#6d826a}.page-heading{padding:13px 0 30px}.page-heading p{max-width:620px;margin-top:18px;font-size:15px;line-height:1.8}.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:25px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-heading h2{font-size:18px}.learn-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,1fr);gap:22px}.posture{padding:14px 0 0 9px}.posture h2{font-size:23px;margin-bottom:27px}.posture article{display:flex;gap:12px;margin:20px 0}.posture article>span{color:#8f9a73;font-size:11px;font-weight:700;padding-top:4px}.posture h3{font-size:15px;margin-bottom:7px;letter-spacing:0}.posture p{font-size:13px;line-height:1.7}.posture .btn{margin-top:13px}.finger-explorer{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0}.explore-key{background:#f2f5ef;border:1px solid #dce5da;border-radius:8px;padding:8px 12px;font-weight:700;font-size:12px}.explore-key[aria-pressed=true]{background:var(--green);color:#fff}.guide-message{min-height:56px;display:flex;align-items:center;gap:13px;background:#f8faf6;border:1px solid #e9eee4;border-radius:13px;padding:12px 16px;font-size:13px}.guide-message strong{display:block;font-size:16px}.finger-dot{width:13px;height:13px;border-radius:50%;flex-shrink:0}.hands-svg{width:100%;max-width:520px;display:block;margin:8px auto 0}.palm,.wrist{fill:#f0dac2;stroke:#b6997e;stroke-width:1.6}.finger-body{fill:#f0dac2;stroke:#b6997e;stroke-width:1.6;stroke-linejoin:round}.finger-cap{fill:var(--finger);opacity:.35}.joint,.palm-line{fill:none;stroke:#c8a88a;stroke-width:1.5;stroke-linecap:round}.finger-marker{fill:var(--finger);opacity:0}.finger-number{fill:#fff;font-family:Arial,sans-serif;font-size:12px;font-weight:bold;opacity:0}.finger-active .finger-body{fill:var(--finger);fill-opacity:.28;stroke:#243e3b;stroke-width:3}.finger-active .finger-cap{opacity:1}.finger-active .finger-marker,.finger-active .finger-number{opacity:1}.shift-finger .finger-body{stroke:#243e3b;stroke-width:3;stroke-dasharray:5 3}.shift-finger .finger-cap{opacity:.9}.hand-label{font-size:10px;letter-spacing:1.6px;fill:#7e887c;font-family:Arial,sans-serif;font-weight:700}.keyboard-scroll{overflow-x:auto;padding:5px 3px 12px}.keyboard{background:#edf0e9;border:1px solid #dce2d7;border-bottom:4px solid #d2dbcd;border-radius:14px;padding:10px;min-width:530px;max-width:850px;margin:0 auto}.key-row{display:flex;gap:5px;margin-bottom:6px}.key-row:last-child{margin-bottom:0}.key{position:relative;display:flex;align-items:center;justify-content:center;height:36px;min-width:0;background:#fff;border:1px solid #d7dfd2;border-top:3px solid color-mix(in srgb,var(--finger) 48%,white);box-shadow:0 2px 0 #d6ddd0;border-radius:6px;font-size:11px;line-height:1;color:#687768;font-weight:700}.key.key-active{background:var(--finger);color:#fff;border-color:var(--finger);outline:2px solid #253c35;outline-offset:1px;box-shadow:0 3px 0 #263c3540;z-index:1;animation:breathe 1.8s infinite ease-in-out}.key i{position:absolute;width:10px;height:2px;bottom:6px;left:calc(50% - 5px);background:currentColor;border-radius:3px}.key.home-key{font-weight:900}.learn-layout .keyboard{min-width:510px}.learn-layout .key{height:29px;font-size:9px}.learn-layout .keyboard-scroll{margin-top:14px}.results-list h2{font-size:21px;margin-bottom:18px}.result-row{display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}.result-row:last-child{border:0}.result-row>div{flex:1}.result-row strong{font-size:14px}.result-row small{display:block;font-size:11px;color:var(--muted);margin-top:4px}.stars{display:inline-flex;font-size:17px;gap:3px;color:#e4e7de;white-space:nowrap}.stars .earned{color:#c68e30}.empty{padding:10px 0 24px;font-size:14px}.muted{color:var(--muted)}.settings-panel{max-width:800px;margin-bottom:20px}.settings-panel h2{font-size:21px;margin-bottom:16px}.settings-panel>p{font-size:14px;line-height:1.8;margin-bottom:15px}.setting-row{display:flex;align-items:center;gap:14px;position:relative;padding:18px 0;border-bottom:1px solid var(--line);cursor:pointer}.setting-row>span:first-child{flex:1}.setting-row strong{display:block;font-size:14px}.setting-row small{display:block;color:var(--muted);margin-top:5px;font-size:12px;max-width:530px}.setting-row input{position:absolute;right:0;opacity:0;width:46px;height:26px}.switch{width:44px;height:26px;flex-shrink:0;border-radius:16px;background:#dbe1d8;position:relative;transition:background .2s}.switch:after{content:'';position:absolute;width:18px;height:18px;background:white;border-radius:50%;top:4px;left:4px;box-shadow:0 1px 3px #0002;transition:transform .2s}.setting-row input:checked+.switch{background:var(--green)}.setting-row input:checked+.switch:after{transform:translateX(18px)}.setting-row input:focus-visible+.switch{outline:3px solid #165bba;outline-offset:3px}.fineprint{font-size:11px!important;line-height:1.7!important;color:var(--muted);margin-top:16px}.practice-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.back-link,.text-button{background:none;color:var(--green);font-size:12px;font-weight:700;padding:5px 0}.back-link:hover,.text-button:hover{text-decoration:underline}.practice-title{display:flex;align-items:center;justify-content:space-between;gap:15px}.practice-title h1{font-size:31px}.practice-title .eyebrow{margin-bottom:6px}.practice-stats{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:22px 0 18px;padding:14px 20px;background:#f0f3eb;border:1px solid #e3e8de;border-radius:13px}.practice-stats>span{font-size:11px;color:#768372}.practice-stats strong{font-size:16px;color:var(--ink);margin-left:7px}.practice-stats small{font-size:9px}.typing-panel{padding:22px 25px;margin-bottom:20px}.typing-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;margin-bottom:14px}.typing-top strong{font-size:12px}.typing-top>span{color:var(--muted);font-size:10px}.progress-track{height:5px;background:#eef2e9;border-radius:5px;overflow:hidden;margin-bottom:22px}.progress-track>span{height:100%;display:block;background:#83aa83;transition:width .2s;border-radius:5px}.target-text{font-family:KidsMono,'Consolas',monospace;position:relative;font-size:25px;line-height:1.9;letter-spacing:1px;max-height:155px;min-height:110px;overflow-y:auto;overflow-wrap:anywhere;color:#7d887c;padding:0 3px 10px;scroll-behavior:smooth}.char{display:inline;white-space:pre;border-radius:4px}.char.correct{color:#306d60;background:#edf5e8}.char.current{background:#e1edd8;color:#244f3b;box-shadow:0 3px 0 var(--green)}.char.wrong{background:#fbe1dd;color:#a5463f;box-shadow:0 3px 0 #aa4d42}.space-char{color:#bac3b7}.char.current .space-char{color:#3c6249}.input-label{font-size:11px;color:#6a7b67;display:block;margin:16px 0 8px}.input-label>span{font-size:10px;color:#8a9486;margin-left:6px}.typing-input{width:100%;background:#f9fbf7;border:1.5px solid #d8e3d0;border-radius:11px;padding:12px 16px;color:var(--ink);outline-offset:2px;min-height:47px}.typing-input::placeholder{color:#9aa893;font-size:12px}.typing-input:focus{border-color:#538263;background:#fff;outline:2px solid #d2e3c8}.typing-input.has-error{border-color:#c98677;background:#fff8f5}.typing-input:disabled{background:#eef2e9}.input-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:33px;margin-top:8px}.input-bottom p{font-size:11px}.input-bottom .text-button{font-size:10px;white-space:nowrap}.guide-panel{padding:22px 25px}.inline-toggle{display:flex;gap:7px;align-items:center;font-size:10px;color:#7c8a75}.inline-toggle input{accent-color:var(--green);width:15px;height:15px}.guide-panel .guide-message{margin-top:19px}.guide-overline{font-size:8px;letter-spacing:1px;font-weight:700;display:block;color:#8a977e;margin-bottom:3px}.next-key{min-width:43px;height:45px;background:white;border:1px solid #dce5d4;border-bottom:4px solid var(--active);border-radius:10px;display:grid;place-items:center;padding:0 12px;font-size:24px;font-weight:700}.next-key:has(+div strong){font-family:KidsMono,monospace}.shift-reminder{font-size:11px;font-weight:700;color:#66795e;margin-left:auto;background:#eaf0e4;padding:7px 10px;border-radius:7px}.accent-hint{min-height:24px;font-size:11px;padding:5px 2px}.hands-area{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,.65fr);max-width:700px;margin:0 auto;align-items:center;gap:25px}.hands-area .hands-svg{max-width:390px;margin-top:2px}.hands-caption{font-size:12px;color:#7c8a74;line-height:1.8;max-width:215px;display:flex;gap:10px}.caption-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:6px}.practice-tip{background:#f6f4e9;border:1px solid #eeecdf;border-radius:10px;padding:11px 14px;font-size:11px;color:#8a8058;margin-top:9px}.practice-tip span{margin-right:7px;font-size:16px}.physical-note{font-size:10px;text-align:center;margin-top:16px;color:#8a9681}.notice{font-size:12px;line-height:1.7;border-radius:10px;background:#fff2d9;color:#856325;padding:12px 15px;margin:15px 0}.noscript{position:fixed;bottom:10px;left:10px;background:white;padding:20px;color:#9c3b3b}dialog{border:1px solid #e1e8dc;border-radius:26px;width:min(480px,calc(100vw - 32px));max-height:90vh;padding:34px;box-shadow:0 25px 100px #173c3529;color:var(--ink);background:#fff;overflow:auto}dialog::backdrop{background:#203d3659;backdrop-filter:blur(5px)}dialog h2{font-size:30px;margin:12px 0 17px}dialog p{font-size:14px;line-height:1.8}.modal-art{display:grid;place-items:center;width:64px;height:64px;font-size:33px;background:#edf4e7;border:1px solid #dbe7d2;border-radius:20px;color:#73935f;margin:15px 0}.intro-tip{background:#f6f6ee;border-radius:12px;padding:15px;margin:20px 0}.intro-tip strong{font-size:12px}.intro-tip p{font-size:12px;margin-top:6px}.result-numbers{display:flex;gap:20px;margin:23px 0;background:#f2f6ed;border-radius:13px;padding:18px}.result-numbers>div{flex:1}.result-numbers strong{font-size:27px;color:var(--green);display:block}.result-numbers span{font-size:10px;color:var(--muted)}.completion-stars .stars{font-size:39px;gap:10px;margin:6px 0}.no-motion *, .no-motion *:before,.no-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}@keyframes breathe{50%{outline-offset:3px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(min-width:1550px){.hero{padding:48px}.hero-art{min-height:300px}.art-key{width:160px;height:170px}.sidebar{width:270px;flex-basis:270px;padding:36px 27px}.lesson-card{min-height:195px}}
@media(max-width:1150px){.sidebar{width:210px;flex-basis:210px;padding:28px 16px}.wordmark{font-size:22px;gap:9px}.topbar{padding:0 28px}main{padding:27px 28px 35px}.hero{padding:29px}.hero-art{min-height:285px}.art-key{width:112px;height:130px;font-size:66px}.key-f{left:1%}.key-j{left:49%}.hero h1{font-size:42px}.overview>div,.overview>a{padding:0 15px;gap:9px}.overview a strong{font-size:12px}.stat-icon{width:35px;height:35px;font-size:19px}.learn-layout{grid-template-columns:1fr}.posture{display:grid;grid-template-columns:1fr 1fr;gap:10px 25px}.posture h2,.posture>.btn{grid-column:1/-1}.posture article{margin:5px 0 12px}.learn-layout .keyboard{min-width:530px}.learn-layout .key{height:36px;font-size:11px}}
@media(max-width:900px){.sidebar{width:186px;flex-basis:186px;padding:24px 12px}.wordmark{font-size:19px;gap:7px}.wordmark small{font-size:6px;letter-spacing:1px}.app-icon{min-width:37px;height:40px;font-size:25px}.app-icon span{left:20px;font-size:21px}.sidebar nav a{font-size:11px;padding:10px;gap:7px}.sidebar-note{padding:13px}.sidebar-note strong{font-size:12px}.sidebar-note p{font-size:11px}.top-chip{display:none}.topbar{height:65px}main{padding:25px 22px}.hero{grid-template-columns:1fr;padding:28px}.hero-art{display:none}.hero h1{font-size:45px}.hero-copy p{max-width:420px}.overview{grid-template-columns:1fr 1fr;margin-bottom:26px}.overview>a{grid-column:1/-1;margin-top:17px;padding-top:16px;border-top:1px solid var(--line)!important}.overview>div:nth-child(2){border-right:0}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-heading{display:block}.section-heading p{margin-top:10px}.section-heading h2{font-size:25px}.lesson-card{padding:17px}.practice-stats{gap:10px;flex-wrap:wrap}.practice-stats>span{min-width:40%}.practice-stats strong{font-size:14px}.guide-panel,.typing-panel{padding:20px}.guide-message strong{font-size:14px}.hands-area{gap:5px;grid-template-columns:1fr}.hands-caption{max-width:none;font-size:11px;justify-content:center}.guide-panel .hands-svg{max-width:380px}.result-row{gap:10px}.result-row .stars{font-size:13px}.result-row .btn{font-size:10px;padding:7px 10px}}
@media(max-width:640px){.app-shell{display:block}.sidebar{position:relative;width:100%;height:auto;padding:16px 18px 0;border-right:0;border-bottom:1px solid var(--line);overflow:visible}.wordmark{padding:0 0 16px;font-size:24px;width:max-content}.wordmark small{font-size:7px}.sidebar nav{display:flex;gap:4px;justify-content:space-between}.sidebar nav a{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:9px 5px;font-size:9px;border-radius:11px 11px 0 0;white-space:normal;text-align:center;line-height:1.4}.sidebar nav a>span{font-size:18px}.sidebar-note,.version{display:none}.official-brand{position:absolute;right:16px;top:8px;margin:0;padding:0}.official-brand img{width:68px;height:68px}.official-brand span{display:none}.topbar{height:44px;padding:0 20px}.topbar>span:first-child{font-size:8px;letter-spacing:1.2px}main{padding:20px 16px 30px}.hero{padding:25px 23px;border-radius:21px}.hero h1{font-size:39px}.hero .eyebrow{font-size:8px;letter-spacing:1px}.hero p{font-size:13px}.hero .btn{margin-top:20px}.overview{padding:15px 0;margin:20px 0 27px;border-radius:14px}.overview>div,.overview>a{padding:0 13px;gap:8px}.overview>a{padding-top:14px}.overview strong{font-size:20px}.overview small{font-size:9px}.stat-icon{height:33px;width:33px;font-size:18px}.overview a strong{font-size:13px}.section-heading h2{font-size:23px}.lesson-grid{gap:11px}.lesson-card{padding:14px;min-height:173px;border-radius:15px}.lesson-card h4{font-size:15px;line-height:1.25}.card-top{margin-bottom:16px}.lesson-number{width:28px;height:28px;font-size:11px}.lesson-card .pill{font-size:8px;padding:5px 7px}.lesson-card .stars{font-size:12px;gap:1px}.lesson-card>p{font-size:10px}.card-bottom{font-size:9px;padding-top:12px;margin-top:auto;padding-top:15px}.lesson-card>p{margin-bottom:18px}.lesson-group-heading h3{font-size:15px}.page-heading{padding-top:7px}.page-heading h1{font-size:37px}.page-heading p{font-size:13px}.panel{padding:20px 16px;border-radius:18px}.posture{grid-template-columns:1fr}.posture h2{font-size:23px}.posture article{margin:8px 0}.result-row{flex-wrap:wrap;gap:8px}.result-row>div{flex:1;min-width:145px}.result-row strong{font-size:12px}.result-row .stars{font-size:11px}.result-row .lesson-number{width:25px;height:25px}.result-row .btn{margin-left:auto}.practice-heading{margin-bottom:18px}.practice-title h1{font-size:26px}.practice-title .btn{font-size:10px;min-height:33px;white-space:nowrap}.practice-title .eyebrow{font-size:9px}.practice-stats{padding:12px 15px;margin:18px 0 14px}.practice-stats>span{font-size:10px}.typing-top strong{font-size:11px}.typing-top>span{font-size:8px}.target-text{font-size:24px;line-height:1.9;max-height:150px;min-height:100px}.input-label{font-size:10px;line-height:1.7}.input-label>span{display:block;margin-left:0}.typing-input{font-size:16px}.input-bottom{align-items:flex-start}.input-bottom p{font-size:10px}.input-bottom .text-button{font-size:9px}.panel-heading h2{font-size:16px}.inline-toggle{font-size:9px}.guide-message{padding:11px;gap:9px;flex-wrap:wrap}.guide-message strong{font-size:13px}.next-key{height:42px;min-width:40px;padding:0 10px;font-size:22px}.shift-reminder{font-size:9px;padding:5px 7px}.accent-hint{font-size:10px;min-height:17px}.guide-panel .hands-svg{max-width:345px}.hands-caption{font-size:10px;gap:7px}.practice-tip{font-size:10px;padding:10px}.physical-note{font-size:9px}.keyboard{min-width:525px}.keyboard-scroll{margin:0 -3px}.keyboard-scroll:after{content:'Deslize para ver todo o teclado ↔';display:block;font-size:9px;color:#88927f;padding-top:7px;text-align:center}.hands-area{margin-top:1px}.settings-panel h2{font-size:19px}.settings-panel>p{font-size:13px}.setting-row strong{font-size:13px}.setting-row small{font-size:11px}dialog{padding:27px 23px;border-radius:22px}dialog h2{font-size:27px}dialog p{font-size:13px}.result-numbers{gap:10px}.result-numbers strong{font-size:25px}.result-numbers span{font-size:9px}footer{font-size:10px}.btn{min-height:44px}}
@media(max-width:350px){.hero h1{font-size:34px}.hero-caption{font-size:9px}.lesson-grid{grid-template-columns:1fr}.overview>div{padding:0 9px}.stat-icon{width:28px;height:28px}.practice-title h1{font-size:23px}.result-row>div{min-width:120px}.guide-overline{font-size:7px}}

/* 2.1 — identidade Meu Mundo App e lição sem campo visível */
:root{--ink:#123452;--muted:#66788b;--green:#1677e8;--green-dark:#0b63bb;--cream:#f7fbff;--line:#dce8f5;--mint:#eaf4ff}
body{background:#f7fbff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.wordmark .kids{color:#ff982f}.app-icon{background:linear-gradient(135deg,#1677e8,#16b978);box-shadow:0 4px 0 #dce8f5}.app-icon span{color:#ffe09b}
nav a.active{background:#eaf4ff;color:#0b63bb}nav a:hover{background:#f0f8ff}.sidebar-note{background:linear-gradient(135deg,#eef7ff,#effbf5)}.sidebar-note strong{color:#123452}.note-star{color:#ff982f}
.hero{background:radial-gradient(ellipse at right top,#def9ee,transparent 65%),linear-gradient(135deg,#eef7ff,#f7fbff);border-color:#dce8f5}.hero h1 em,.page-heading h1 em{background:linear-gradient(90deg,#1677e8,#16b978);background-clip:text;-webkit-background-clip:text;color:transparent}.hero .eyebrow,.eyebrow{color:#0b63bb}.hero p{color:#66788b}.hero-caption{color:#66788b}
.btn.primary{background:linear-gradient(135deg,#1677e8,#18a0e8);box-shadow:0 4px 12px #1677e822}.btn.primary:hover{background:linear-gradient(135deg,#0b63bb,#168cda)}.btn.secondary{background:#eef7ff;border-color:#dce8f5;color:#0b63bb}.top-chip{background:#eaf8f1;color:#168053}.lesson-card.recommended{background:linear-gradient(135deg,#eef7ff,#effbf5);border-color:#85c3e8}.lesson-card:hover{border-color:#78bde5;box-shadow:0 8px 24px #1677e811}.recommended .lesson-number{background:#e3f2ff;color:#1677e8}.lesson-number{background:#f0f7ff;border-color:#e1edfa;color:#537ea1}.pill{background:#eaf4ff;color:#0b63bb}.card-bottom{color:#1677e8}.lesson-group-heading>span:first-child{background:#eaf8f1;color:#168053}.topbar{background:#f7fbff}.mint{background:#eaf8f1;color:#168053}.peach{background:#fff2e0;color:#b96b14}.lavender{background:#f0ecff;color:#7657ed}.hero .key-f{background:#d5ebff;color:#1677e8;box-shadow:0 10px 0 #a8ceee,0 23px 24px #1677e820}.hero .key-j{background:#dcf6e8;color:#168053;box-shadow:0 10px 0 #aedcc3,0 23px 24px #16805320}.guide-message{background:#f4faff;border-color:#dce8f5}.practice-stats{background:#eef7ff;border-color:#dce8f5}.practice-stats>span{color:#66788b}.guide-overline{color:#66788b}.practice-tip{background:#effaf5;border-color:#daf1e5;color:#227455}.progress-track>span{background:linear-gradient(90deg,#1677e8,#16b978)}.progress-track{background:#eaf2fb}.char.current{background:#e2f1ff;color:#123452;box-shadow:0 3px 0 #1677e8}.char.correct{color:#168053;background:#effbf5}.target-text{color:#66788b}.keyboard{background:#edf4fb;border-color:#d1e2f2;border-bottom-color:#c6dcee}.key{border-color:#d3e1ef;box-shadow:0 2px 0 #d0dfed;background:#fff;color:#344e67;border-top-color:color-mix(in srgb,var(--finger) 48%,white)}.modal-art{background:#eef7ff;color:#1677e8;border-color:#dce8f5}.intro-tip{background:#f0f8ff}.result-numbers{background:#eef7ff}.hands-caption{color:#66788b}.physical-note{color:#66788b}.intro-tip strong{color:#123452}.capture-input{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0;font-size:16px}.touch-keyboard{display:none}.input-bottom{margin-top:5px}.input-bottom p{color:#66788b}
/* A lição usa a altura disponível para preservar teclado e mãos. */
@media(min-width:761px){
body.is-practice{overflow:hidden}.is-practice .sidebar{height:100dvh}.is-practice .content-shell{height:100dvh;overflow:hidden}.is-practice .topbar{height:42px;padding:0 25px}.is-practice footer{display:none}
.is-practice main{height:calc(100dvh - 42px);width:100%;max-width:1500px;padding:10px 25px;display:grid;grid-template-rows:23px 38px 36px minmax(90px,.65fr) minmax(215px,1fr) 13px;gap:7px}
.is-practice .practice-heading,.is-practice .practice-stats,.is-practice .typing-panel{margin:0}.is-practice .practice-heading .pill{padding:3px 9px}.is-practice .practice-title h1{font-size:26px}.is-practice .practice-title .eyebrow{font-size:8px;margin-bottom:2px;letter-spacing:1px}.is-practice .practice-title .btn{min-height:31px;padding:7px 14px;font-size:11px}
.is-practice .practice-stats{padding:7px 16px;flex-wrap:nowrap;gap:10px}.is-practice .practice-stats>span{min-width:0;font-size:10px}.is-practice .practice-stats strong{font-size:15px}
.is-practice .typing-panel{display:flex;flex-direction:column;padding:12px 18px;min-height:0;border-radius:17px}.is-practice .typing-top{margin-bottom:7px;flex-shrink:0}.is-practice .progress-track{margin-bottom:8px;flex-shrink:0;height:4px}.is-practice .target-text{flex:1;min-height:0;max-height:none;overflow:hidden;line-height:1.5;font-size:clamp(21px,2.4vh,27px);letter-spacing:.5px;padding:0 1px;scroll-behavior:auto}.is-practice .input-bottom{flex-shrink:0;min-height:20px;gap:10px;margin-top:4px}.is-practice .input-bottom p{font-size:10px;line-height:1.3}.is-practice .input-bottom .text-button{font-size:10px;padding:2px 0}
.is-practice .guide-panel{display:grid;min-height:0;padding:12px 16px;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);grid-template-rows:35px minmax(0,1fr) auto auto;grid-template-areas:'head prompt' 'keyboard hands' 'tip tip' 'accent accent';column-gap:20px;row-gap:5px;border-radius:17px;align-items:center}.is-practice .guide-panel .panel-heading{grid-area:head;gap:8px;flex-wrap:wrap}.is-practice .panel-heading h2{font-size:16px}.is-practice .inline-toggle{font-size:10px}.is-practice .guide-message{grid-area:prompt;min-height:0;margin:0;padding:4px 10px;gap:9px;border-radius:10px;flex-wrap:nowrap}.is-practice .next-key{height:31px;min-width:32px;font-size:19px;padding:0 8px;border-radius:7px;border-bottom-width:3px}.is-practice .guide-message strong{font-size:12px}.is-practice .guide-overline{font-size:7px;margin:0}.is-practice .shift-reminder{font-size:8px;padding:3px 5px}.is-practice .accent-hint{grid-area:accent;padding:0;margin:0;min-height:0;font-size:10px;line-height:1.25}.is-practice .accent-hint:empty{display:none}
.is-practice .guide-panel .keyboard-scroll{grid-area:keyboard;padding:4px 2px 6px;overflow:visible;min-width:0;margin:0}.is-practice .keyboard-scroll:after{display:none}.is-practice .keyboard{min-width:0;width:100%;max-width:900px;padding:7px;border-radius:11px}.is-practice .key-row{gap:4px;margin-bottom:5px}.is-practice .key-row:last-child{margin-bottom:0}.is-practice .key{height:clamp(20px,3.3vh,30px);font-size:10px;border-radius:5px;border-top-width:2px}.is-practice .key i{bottom:3px;height:2px;width:8px;left:calc(50% - 4px)}
.is-practice .hands-area{grid-area:hands;display:flex;flex-direction:column;gap:0;max-width:410px;width:100%;margin:0;min-height:0;height:100%;justify-content:center;align-items:center}.is-practice .hands-area .hands-svg{width:100%;height:auto;max-height:calc(100% - 24px);max-width:390px;margin:0}.is-practice .hands-caption{font-size:9px;line-height:1.35;max-width:320px;justify-content:center;gap:7px;min-height:20px}.is-practice .caption-dot{width:7px;height:7px;margin-top:3px}.is-practice .practice-tip{grid-area:tip;margin:0;font-size:10px;padding:5px 10px;line-height:1.3;border-radius:8px}.is-practice .practice-tip>span{font-size:12px}.is-practice .physical-note{font-size:9px;margin:0;line-height:1.4}
}
@media(min-width:761px) and (max-height:650px){.is-practice .topbar{display:none}.is-practice main{height:100dvh;padding:7px 18px;gap:5px;grid-template-rows:20px 32px 30px minmax(75px,.55fr) minmax(200px,1fr) 11px}.is-practice .practice-title h1{font-size:23px}.is-practice .practice-title .eyebrow{display:none}.is-practice .guide-panel{padding:8px 12px;row-gap:4px;column-gap:12px;grid-template-rows:31px minmax(0,1fr) auto auto}.is-practice .key{height:20px;font-size:9px}.is-practice .hands-caption{display:none}.is-practice .hands-area .hands-svg{max-height:100%}.is-practice .practice-tip{font-size:9px;padding:4px 8px}.is-practice .sidebar-note{display:none}.is-practice .official-brand{padding-top:10px}.is-practice .official-brand img{height:100px;width:100px}}
@media(max-width:760px){.is-practice .topbar,.is-practice footer{display:none}.is-practice .sidebar{position:relative;width:100%;height:auto;padding:7px 12px 0;border-right:0}.is-practice .sidebar nav{display:none}.is-practice .sidebar .wordmark{padding-bottom:7px;font-size:20px}.is-practice .sidebar .app-icon{min-width:31px;height:33px;font-size:23px}.is-practice .wordmark small{font-size:6px;margin-top:4px}.is-practice .official-brand{position:absolute;top:0;right:12px;padding:0}.is-practice .official-brand img{height:47px;width:47px}.is-practice .official-brand span,.is-practice .sidebar-note,.is-practice .version{display:none}.is-practice .app-shell{display:block}.is-practice .content-shell{width:100%}.is-practice main{padding:9px 12px;display:flex;flex-direction:column;gap:7px}.is-practice .practice-heading{margin:0}.is-practice .practice-title h1{font-size:24px}.is-practice .practice-title .eyebrow{display:none}.is-practice .practice-stats{margin:0;padding:7px 10px;gap:6px;flex-wrap:nowrap}.is-practice .practice-stats>span{min-width:0;font-size:8px}.is-practice .practice-stats strong{font-size:12px;margin-left:4px}.is-practice .practice-title .btn{min-height:30px;font-size:10px}.is-practice .typing-panel{padding:11px 13px;margin:0}.is-practice .typing-top{margin-bottom:7px}.is-practice .progress-track{margin-bottom:8px}.is-practice .target-text{font-size:21px;line-height:1.5;min-height:63px;max-height:63px;overflow:hidden;padding:0;letter-spacing:0}.is-practice .input-bottom{gap:7px;min-height:0;flex-wrap:wrap;margin-top:8px}.is-practice .input-bottom p{font-size:9px;flex:1}.is-practice .input-bottom .text-button{font-size:9px}.is-practice .guide-panel{padding:11px 12px}.is-practice .panel-heading h2{font-size:15px}.is-practice .guide-message{margin-top:8px;min-height:39px;padding:6px 9px;gap:9px}.is-practice .next-key{font-size:19px;height:31px;min-width:30px;padding:0 7px}.is-practice .guide-message strong{font-size:12px}.is-practice .guide-overline{font-size:7px}.is-practice .accent-hint{min-height:0;padding:0;margin:5px 0;font-size:9px}.is-practice .accent-hint:empty{display:none}.is-practice .keyboard-scroll{overflow:visible;padding:9px 0 6px;margin:0}.is-practice .keyboard-scroll:after{display:none}.is-practice .keyboard{min-width:0;padding:5px;border-radius:9px}.is-practice .key{height:24px;font-size:7px;border-top-width:2px;border-radius:4px}.is-practice .key-row{gap:3px;margin-bottom:4px}.is-practice .key-row:last-child{margin-bottom:0}.is-practice .key i{bottom:3px;width:6px;height:1px;left:calc(50% - 3px)}.is-practice .hands-area{display:block;margin:0}.is-practice .hands-area .hands-svg{max-width:265px;max-height:160px;margin:0 auto}.is-practice .hands-caption{display:none}.is-practice .practice-tip{font-size:9px;padding:5px 8px;margin-top:4px}.is-practice .physical-note{font-size:8px;margin:0}.is-practice .touch-keyboard{display:block}}
@media(max-width:760px) and (min-height:700px){.is-practice{height:100dvh;overflow:hidden}.is-practice .app-shell{height:100dvh;display:flex;flex-direction:column}.is-practice .sidebar{flex:0 0 auto}.is-practice .content-shell{flex:1;min-height:0}.is-practice main{height:100%;max-height:100%;display:grid;grid-template-rows:20px 32px 31px 126px minmax(300px,1fr) 11px;gap:6px;padding:8px 12px}.is-practice .guide-panel{min-height:0;display:flex;flex-direction:column;justify-content:space-between}.is-practice .guide-panel>.panel-heading,.is-practice .guide-message,.is-practice .keyboard-scroll,.is-practice .practice-tip{width:100%;flex-shrink:0}.is-practice .guide-panel>.hands-area{flex:1;min-height:65px;width:100%;display:flex;justify-content:center;align-items:center}.is-practice .hands-area .hands-svg{height:100%;max-height:160px;max-width:265px;width:auto;min-width:130px}.is-practice .typing-panel{display:flex;flex-direction:column}.is-practice .target-text{max-height:none;flex:1;min-height:0}.is-practice .typing-top{flex-shrink:0}.is-practice .input-bottom{margin-top:4px}}

.brand-logo{width:48px;height:48px;object-fit:contain;flex-shrink:0}.is-practice .brand-logo{width:40px;height:40px}@media(max-width:760px){.is-practice .brand-logo{width:35px;height:35px}}
/* 2.2 — mãos transparentes sobre o teclado */
.keyboard-stage{position:relative;width:100%;max-width:900px;margin:auto;isolation:isolate}
.keyboard-stage .keyboard{position:absolute;left:0;top:0;width:100%;height:73%;min-width:0;max-width:none;display:flex;flex-direction:column}
.keyboard-stage .key-row{flex:1;min-height:0}.keyboard-stage .key{height:100%!important}
.hand-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.overlay-palm{fill:none;stroke:#5e7186;stroke-width:1.6;stroke-opacity:.7;stroke-linecap:round;stroke-linejoin:round}
.overlay-finger{fill:#fff;fill-opacity:.07;stroke:#5e7186;stroke-opacity:.68;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.overlay-finger.active{fill:var(--finger);fill-opacity:.1;stroke:var(--finger);stroke-width:2.8;stroke-opacity:.95}
.overlay-finger.modifier{fill:var(--finger);fill-opacity:.06;stroke:var(--finger);stroke-dasharray:4 3;stroke-width:2.4}
.overlay-touch{fill:var(--finger);fill-opacity:.12;stroke:var(--finger);stroke-opacity:.6;stroke-width:1.6}
.overlay-touch.modifier{stroke-dasharray:3 3}.overlay-tap{fill:#1677e8;fill-opacity:.14;stroke:#1677e8;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:overlay-press .35s ease-out forwards}
.overlay-description{font-size:10px;color:#66788b;line-height:1.4;text-align:center;margin:0}.overlay-mode .key-active{animation:none;outline-offset:1px}
@keyframes overlay-press{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.8);opacity:0}}
.no-motion .overlay-tap{display:none}
@media(prefers-reduced-motion:reduce){.overlay-tap{display:none}}
@media(min-width:761px){.is-practice .guide-panel.overlay-mode{grid-template-columns:minmax(0,1fr) minmax(230px,.6fr);grid-template-rows:35px minmax(0,1fr) auto auto;grid-template-areas:'head prompt' 'keyboard keyboard' 'tip tip' 'accent accent'}.is-practice .overlay-mode .keyboard-scroll{height:100%;width:100%;padding:4px 0 0;display:flex;justify-content:center;align-items:center;min-height:0}.is-practice .keyboard-stage{height:100%;max-height:320px;width:100%;max-width:900px}.is-practice .overlay-description{display:none}.is-practice .keyboard-stage .key{font-size:clamp(9px,1.5vh,12px)}.is-practice .keyboard-stage .key-row{margin-bottom:4px}.is-practice .keyboard-stage .key-row:last-child{margin-bottom:0}}
@media(max-width:760px){.is-practice .overlay-mode .keyboard-scroll{height:240px;width:100%;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px 0 0}.is-practice .keyboard-stage{height:100%;max-width:650px}.is-practice .keyboard-stage .key{font-size:8px}.is-practice .overlay-description{font-size:9px;padding:2px 0}.is-practice .keyboard-stage .keyboard{padding:5px}.is-practice .overlay-mode .hand-overlay{display:block}}
@media(max-width:760px) and (min-height:700px){.is-practice .guide-panel.overlay-mode{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr) auto auto;grid-template-areas:'head' 'prompt' 'keyboard' 'tip' 'accent';gap:5px;justify-content:normal}.is-practice .overlay-mode .panel-heading{grid-area:head}.is-practice .overlay-mode .guide-message{grid-area:prompt;margin:0}.is-practice .overlay-mode .keyboard-scroll{grid-area:keyboard;height:100%;padding:0}.is-practice .overlay-mode .practice-tip{grid-area:tip}.is-practice .overlay-mode .accent-hint{grid-area:accent}.is-practice .overlay-description{display:none}}
/* 3.0 — visual aprovado: teclas de exercício e mãos ilustradas */
:root{--hands-opacity:.4;--lesson-key-size:50px}
.hand-overlay{position:absolute;inset:0;pointer-events:none;z-index:4}
.human-hand{position:absolute;pointer-events:none;background-size:200% 300%;background-repeat:no-repeat;opacity:var(--hands-opacity);mix-blend-mode:multiply;transition:left .17s ease-out,top .17s ease-out,transform .12s ease-out;transform-origin:center 75%;filter:drop-shadow(0 1px 1px #12345210)}

.human-hand.human-pressed{transform:translateY(3px) scale(.99)}
.human-contact{position:absolute;width:24px;height:24px;border:2px solid var(--contact-color,#1677e8);background:#1677e812;border-radius:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;z-index:5}
.human-contact.contact-visible{opacity:1}.human-contact.modifier{border-style:dashed}.human-tap{position:absolute;width:30px;height:30px;border:2px solid #1677e8;border-radius:50%;background:#1677e815;transform:translate(-50%,-50%);opacity:0;z-index:6}.human-tap.tapping{animation:human-touch .35s ease-out forwards}@keyframes human-touch{0%{opacity:.8;scale:.7}100%{opacity:0;scale:1.8}}
.no-motion .human-tap{display:none}@media(prefers-reduced-motion:reduce){.human-tap{display:none}}
.hands-opacity{accent-color:#1677e8;width:65px;height:16px;margin:0;cursor:pointer}.opacity-setting input[type=range]{position:static;opacity:1;width:130px;height:25px;accent-color:#1677e8}
.learn-stage{height:350px;margin-top:16px;overflow:hidden}.learn-stage .keyboard{top:8%;height:66%;min-width:0}.learn-stage .key-row{flex:1;min-height:0}.learn-stage .key{height:100%}.learn-stage .key-row:last-child{margin-bottom:0}
.is-practice .keyboard-stage{overflow:hidden}.is-practice .keyboard-stage .keyboard{top:8%;height:66%}.is-practice .panel-heading{flex-wrap:nowrap}.is-practice .typing-panel .target-text{--lesson-key-size:50px;display:flex;align-content:center;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;max-width:900px;width:100%;margin:0 auto;letter-spacing:0;line-height:1;overflow:hidden;padding:6px 0;scroll-behavior:auto}
.is-practice .lesson-key{display:inline-flex;align-items:center;justify-content:center;width:var(--lesson-key-size);height:calc(var(--lesson-key-size) + 9px);flex:0 0 var(--lesson-key-size);border:1px solid #d5e3ef;border-bottom:4px solid #dce8f5;border-radius:9px;background:#fbfdff;color:#6e8191;font-family:KidsMono,Consolas,monospace;font-size:25px;white-space:pre;line-height:1;box-shadow:none;transition:background .1s,border-color .1s}
.is-practice .lesson-key.current{background:#edf6ff;color:#123452;border-color:#1677e8;border-bottom-color:#1677e8;box-shadow:0 3px 0 #1677e820}.is-practice .lesson-key.correct{background:#effbf5;border-color:#bce6d0;color:#168053}.is-practice .lesson-key.wrong{background:#fff0ec;color:#a5463f;border-color:#ce7b6d}.is-practice .lesson-key .space-char{color:inherit;font-size:23px}.is-practice .input-bottom{max-width:100%;font-size:10px}
@media(min-width:761px){.is-practice .guide-panel.overlay-mode{grid-template-columns:minmax(0,1fr) minmax(240px,.6fr)}.is-practice .overlay-mode .panel-heading{gap:9px;justify-content:flex-start}.is-practice .overlay-mode .inline-toggle{margin-left:auto;white-space:nowrap}.is-practice .keyboard-stage{max-height:360px}.is-practice .guide-panel .keyboard-scroll{padding-top:0}.is-practice .panel-heading h2{font-size:15px;white-space:nowrap}}
@media(min-width:761px) and (max-height:650px){.is-practice .typing-panel .target-text{--lesson-key-size:38px}.is-practice .lesson-key{font-size:22px}.is-practice .panel-heading h2{font-size:13px}.is-practice .hands-opacity{width:50px}.is-practice .keyboard-stage{max-height:310px}}
@media(max-width:760px){.is-practice .typing-panel .target-text{--lesson-key-size:32px;gap:8px;padding:3px 0}.is-practice .lesson-key{font-size:20px;border-radius:7px;border-bottom-width:3px}.is-practice .lesson-key .space-char{font-size:20px}.is-practice .panel-heading{gap:7px}.is-practice .panel-heading h2{font-size:13px;white-space:nowrap}.is-practice .hands-opacity{width:50px}.is-practice .inline-toggle{font-size:8px;white-space:nowrap}.is-practice .guide-panel .keyboard-scroll{padding-top:0}.learn-stage{height:290px}.human-contact{width:18px;height:18px;border-width:1.5px}.is-practice .keyboard-stage .key{font-size:7px}.opacity-setting input[type=range]{width:95px}}

/* 3.0.1: a camada recebe altura e imagem antes do primeiro posicionamento. */
.keyboard-stage{min-height:160px}.human-hand{display:block;width:240px;height:240px;top:20%;background-size:200% 300%}.human-hand.left-hand{left:15%;background-position:0 0}.human-hand.right-hand{left:55%;background-position:100% 0}

/* 3.0.2 — teste de mãos responde ao teclado físico e ao clique. */
.explore-status{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:11px;color:#356b58;min-height:22px}.ready-light{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:#16b978}.keyboard button.key{padding:0;font-family:inherit;cursor:pointer}.keyboard button.key:hover{border-color:#1677e8;background:#edf6ff}.keyboard button.key.key-active{background:var(--finger);color:#fff}.is-hands .page-heading{padding:5px 0 20px}.is-hands .page-heading h1{font-size:38px}.is-hands .page-heading p{margin-top:12px}.is-hands .learn-stage{margin-top:4px}.is-hands .finger-explorer{margin:16px 0}.is-hands .posture{padding-top:8px}
/* 3.1 — etapa Avançado: texto corrido e digitação visível */
.is-advanced .advanced-reference,.is-advanced .advanced-writing{display:flex;flex-direction:column;min-height:0;padding:17px 22px;border-radius:18px}
.is-advanced .advanced-reference .typing-top{flex-shrink:0;margin-bottom:9px}.is-advanced .advanced-reference .progress-track{flex-shrink:0;margin-bottom:11px}
.advanced-source{font-family:Inter,ui-sans-serif,system-ui,'Segoe UI',sans-serif;font-size:18px;line-height:1.85;white-space:pre-wrap;overflow-wrap:break-word;color:#66788b;position:relative;flex:1;min-height:0;overflow:auto;padding:3px 7px 8px 0}
.advanced-char{border:0;border-radius:0;background:none;box-shadow:none;display:inline;white-space:pre-wrap}.advanced-char.correct{color:#168053}.advanced-char.wrong{color:#a13f43;background:#fff0ec;text-decoration:underline;text-decoration-color:#d78a80;text-underline-offset:3px}.advanced-char.current{color:#123452;background:#e1f0ff;box-shadow:0 2px 0 #1677e8}
.advanced-writing label{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:13px;flex-shrink:0}.advanced-writing label span{font-size:10px;color:#66788b;font-weight:400}
#advancedInput{font-family:Inter,ui-sans-serif,system-ui,'Segoe UI',sans-serif;line-height:1.8;font-size:18px;width:100%;min-height:110px;flex:1;margin:12px 0;border:1.5px solid #d6e5f2;border-radius:12px;padding:13px 16px;resize:none;background:#fbfdff;color:#123452;white-space:pre-wrap;overflow:auto}
#advancedInput:focus{outline:2px solid #d4eaff;outline-offset:2px;border-color:#1677e8}#advancedInput::placeholder{font-size:14px;color:#91a1b0}#advancedInput:disabled{background:#f2f6fa}
.advanced-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-shrink:0}.advanced-actions p{margin-right:auto;font-size:10px;color:#66788b;line-height:1.5}.advanced-actions .btn:disabled{opacity:.45;box-shadow:none;transform:none;cursor:default}
@media(min-width:761px){.is-advanced main{grid-template-rows:23px 38px 36px minmax(135px,.9fr) minmax(170px,1.1fr)}.is-advanced .practice-stats{margin:0}.is-advanced .practice-title h1{font-size:27px}.is-advanced .advanced-reference .typing-top strong{font-size:13px}}
@media(min-width:761px) and (max-height:650px){.is-advanced main{grid-template-rows:20px 32px 30px minmax(100px,.9fr) minmax(145px,1.1fr)}.advanced-source,#advancedInput{font-size:16px;line-height:1.6}.is-advanced .advanced-reference,.is-advanced .advanced-writing{padding:11px 16px}#advancedInput{margin:7px 0;min-height:65px}.advanced-actions .btn{font-size:10px;padding:7px 10px;min-height:31px}}
@media(max-width:760px){.is-advanced,.is-advanced .app-shell,.is-advanced .content-shell{height:auto;overflow:visible}.is-advanced main{display:flex;height:auto;max-height:none;gap:9px;padding:10px 12px}.is-advanced .advanced-reference{min-height:210px;max-height:340px;padding:15px}.is-advanced .advanced-writing{min-height:300px;padding:15px}.advanced-source{font-size:16px;line-height:1.8}.advanced-writing label{display:block}.advanced-writing label span{display:block;margin-top:5px;font-size:10px}#advancedInput{font-size:16px;min-height:160px}.advanced-actions{flex-wrap:wrap;gap:8px}.advanced-actions p{flex-basis:100%;margin:0}.advanced-actions .btn{font-size:10px;flex:1}.is-advanced .practice-title h1{font-size:25px}.is-advanced .practice-stats{margin:0}}