/* VOKI design 02. Blue = actions. Lime = progress. Ink = reading. */
:root{--blue:#2449f4;--lime:#d6fa46;--ink:#151a2d;--muted:#535d77;--paper:#f4f6fc;--line:#dce2ee;--radius:18px}
body{font-size:1rem;line-height:1.6;letter-spacing:-.01em}
header{max-width:1164px;height:88px;border-bottom:0;gap:24px}
header .logo,footer .logo{color:var(--blue)}
.logo{font-size:44px;letter-spacing:-2.7px;font-weight:850}
.logo span{color:var(--lime);text-shadow:0 0 1px #151a2d}
header nav{margin-left:36px;margin-right:auto;padding:5px;border:1px solid var(--line);background:white;border-radius:14px;gap:4px}
nav button{border-radius:9px;color:var(--muted);font-size:.9375rem;padding:9px 23px;min-height:44px}
nav button.active{background:var(--blue);color:white}
nav button span{margin-left:8px;color:inherit}
.prototype{border:0;background:#e9edf5;color:var(--muted);font-size:.75rem;letter-spacing:.08em;padding:6px 10px;border-radius:6px}
main{margin:24px auto 60px;max-width:1140px}
.heading{gap:20px;margin-bottom:24px;align-items:center}
h1{font-size:clamp(1.875rem,4vw,2.75rem);letter-spacing:-.055em;line-height:1.18;margin:0;font-weight:780}
h2{font-size:1.375rem;letter-spacing:-.025em;line-height:1.3}
h3{font-size:1.25rem;letter-spacing:-.025em;line-height:1.3}
.kicker{font-size:.75rem;letter-spacing:.1em;margin-bottom:9px;font-weight:750}
.primary,.secondary{border-radius:12px;min-height:48px;font-size:.9375rem;padding:12px 18px;box-shadow:none;transition:background .12s ease,transform .12s ease}
.primary{background:var(--blue);color:white;box-shadow:0 3px 9px #2449f41a}
.primary:hover{background:#1738d2}.primary:active,.secondary:active{transform:translateY(1px)}
.secondary{background:#eef2ff;color:#243c96;border:1px solid #dbe3ff}
.secondary:hover{background:#e3eaff}.textbutton{font-size:.875rem;min-height:44px}
button:disabled{cursor:default}
.summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0;background:none;color:var(--ink);margin-bottom:28px;border-radius:0}
.summary div{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:white;padding:18px 22px;gap:4px}
.summary div:nth-child(2){background:#eff6d9;border-color:#d3e4b0}
.summary strong{font-size:1.875rem;line-height:1.15;font-weight:750;letter-spacing:-.04em}
.summary span{font-size:.875rem;color:var(--muted);margin-top:0}
.sectionline{margin:0 0 16px}.sectionline span{font-size:.875rem}
.pageChoice{max-width:none;display:grid;grid-template-columns:1.5fr 1fr;gap:8px 20px;background:white;border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:var(--radius);padding:20px 24px;margin-bottom:24px}
.pageChoice label{margin:0;font-size:.875rem}.pageChoice label[for=pageFilter]{grid-column:1;grid-row:1}.pageChoice #pageFilter{grid-column:1;grid-row:2}.pageChoice label[for=homeDirection]{grid-column:2;grid-row:1}.pageChoice #homeDirection{grid-column:2;grid-row:2}.pageChoice p{grid-column:1/-1;margin:4px 0 0}.pageChoice p:last-child{margin:0}
input:not([type=range]),select,textarea{border-color:#c8d1e2;border-radius:10px;font-size:1rem;min-height:48px;padding:11px 13px}
select{background:#f9faff}
label{font-size:.875rem}
.lessonGrid{gap:16px}.lesson{padding:22px;border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 2px 3px #151a2d03}
.lesson .tag{font-size:.75rem;color:#385072;background:#edf1f7;letter-spacing:.035em;padding:4px 8px;margin-bottom:14px;border-radius:6px}
.lesson h3{margin:0 0 8px}.lesson p{font-size:.875rem;margin-bottom:18px}
.lesson .learnBtn{font-size:.875rem;min-height:48px}.lesson .minor{margin-top:10px;gap:4px 14px;align-items:start}.lesson .minor button{font-size:.875rem;line-height:1.4;flex-grow:0}
.lesson.add{min-height:220px;background:#eef2fa;border-color:#c5cee1;color:#445475;border-radius:var(--radius)}
.lesson.add .plus{display:grid;place-items:center;width:48px;height:48px;background:var(--lime);border-radius:14px;color:var(--ink);font-size:30px}
.localnote{max-width:850px;margin-top:26px;font-size:.875rem;gap:12px}.localnote>span{font-size:22px}.localnote p{line-height:1.6}
.small{font-size:.875rem;line-height:1.6}.panel,.tip{border-radius:var(--radius);padding:24px}
.tip{border:1px solid var(--line)}.tip.blue{background:var(--ink);border:0}.tip.blue h2{font-size:1.625rem;letter-spacing:-.03em}.tip.blue .small{color:#c5cee5}.tip.blue .kicker{color:var(--lime)}
.scanmark{border-radius:20px;width:92px;height:92px;line-height:82px;font-size:48px;background:#f4f7ff;margin:8px auto 22px}
.scanGrid{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}
#photoArea>.actions{margin:14px 0}.photoWrap{border-radius:12px}.cropGrip{font-size:1rem}.handle-split .cropGrip{font-size:.75rem}
.learnheading{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.learnheading span{font-size:.9375rem}.learnheading select{font-size:.875rem}
.learning{max-width:700px}.roundtop{font-size:.75rem;letter-spacing:.06em;color:#485676}
.learning progress{height:8px;margin:16px 0;background:#dce3ef}.learning progress::-webkit-progress-value{background:var(--blue)}
.wordcard{position:relative;padding:40px 28px;border-radius:22px;border:1px solid var(--line);margin:12px 0 20px;box-shadow:0 4px 16px #151a2d04}
.wordcard::before{content:'';position:absolute;top:0;left:calc(50% - 24px);width:48px;height:4px;background:var(--lime);border-radius:0 0 4px 4px}
.wordcard h2{font-size:clamp(1.875rem,4.5vw,2.875rem);letter-spacing:-.035em;margin:20px 0;line-height:1.3}.wordcard .muted{font-size:.875rem}
#answer{font-size:1.125rem;padding:16px 18px;border-color:#b9c7e4}
.feedback{border-radius:14px;background:#edf6df;border:1px solid #bcd69d;padding:18px 20px;color:#253c17}.feedback.wrong{background:#fff3e8;border-color:#e6bd97;color:#653815}.feedback p{font-size:.9375rem}
#wordList .word{font-size:.9375rem;overflow-wrap:anywhere}
.brandHero{border-radius:22px;padding:40px;margin:24px 0;background:var(--blue)}.brandHero .logo{font-size:88px;letter-spacing:-5px}.brandHero p{font-size:.875rem;letter-spacing:.15em;margin-top:18px}.brandGrid{gap:20px}.swatch{font-size:.875rem;padding:18px;border-radius:12px}
footer{max-width:1092px;padding:24px 0;gap:24px}footer p,footer a,footer button{font-size:.875rem}footer .logo{font-size:32px}
#notice{font-size:.9375rem}.sr{font-size:1rem}
@media(max-width:800px){header{height:78px;padding:0 20px;gap:16px}header nav{margin:0 0 0 auto}.logo{font-size:38px}nav button{padding:8px 16px}main{margin-top:20px}.heading{flex-direction:row;align-items:center;flex-wrap:wrap}h1{font-size:2rem;letter-spacing:-.045em}.heading>.primary{width:auto}.summary{gap:10px}.summary div{padding:16px}.summary strong{font-size:1.75rem}.summary span{font-size:.8125rem}.pageChoice{padding:18px;gap:7px 14px}.scanGrid,.brandGrid{grid-template-columns:1fr}.panel,.tip{padding:20px}.lesson{padding:20px}.lessonGrid{gap:14px}.wordcard{padding:32px 20px}footer{margin:0 20px;padding:24px 0;gap:16px}.learnheading select{max-width:100%}.sectionline h2{font-size:1.375rem}}
@media(max-width:540px){header{gap:12px}header .logo{font-size:34px}nav button{font-size:.875rem;padding:8px 12px}.heading{gap:16px}.heading>.primary{width:100%}main{padding:0 18px}.summary{gap:8px}.summary div{padding:14px 10px;border-radius:14px}.summary strong{font-size:1.625rem}.summary span{font-size:.75rem;line-height:1.4}.sectionline{gap:10px;align-items:baseline}.sectionline span{font-size:.8125rem}.pageChoice{grid-template-columns:1fr}.pageChoice label[for=pageFilter],.pageChoice #pageFilter,.pageChoice label[for=homeDirection],.pageChoice #homeDirection{grid-column:1;grid-row:auto}.pageChoice label[for=homeDirection]{margin-top:8px}.pageChoice p{margin-top:8px}.lessonGrid{grid-template-columns:1fr}.lesson.add{min-height:150px}.brandHero{padding:30px}.brandHero .logo{font-size:72px}.learnheading{gap:10px}.learnheading select{width:100%;max-width:100%;order:2}.learnheading span{order:1;width:auto}.wordcard h2{font-size:2rem}.wordcard .actions{gap:10px}.swatch{gap:16px;flex-wrap:wrap}.rowtitles,.editrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px}.editrow input{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.primary,.secondary{transition:none}.primary:active,.secondary:active{transform:none}}

/* One selected book page; completion is a persistent per-direction milestone. */
.selectedLessons{grid-template-columns:minmax(0,1fr)}
.selectedLessons .lesson{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-items:center}
.selectedLessons .lesson .tag,.selectedLessons .lesson h3,.selectedLessons .lesson p{grid-column:1;margin-bottom:4px}
.selectedLessons .lesson .learnBtn{grid-column:2;grid-row:1/4;align-self:center;margin:0}
.selectedLessons .lesson .minor{grid-column:1/-1;margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.lesson.pageComplete,#complete.pageComplete{background:#edf7e6;border-color:#8dbb6a}
.lesson.pageComplete .tag{background:#d5ecc4;color:#245114}
#pageFilter.pageComplete{background:#e8f5df;color:#245114;border-color:#8dbb6a}
#pageFilter option.pageComplete{background:#e8f5df;color:#245114}
.completionLegend{margin:0 0 14px;font-size:.875rem}
@media(max-width:650px){.selectedLessons .lesson{display:flex;gap:6px;align-items:stretch}.selectedLessons .lesson .tag{align-self:flex-start}.selectedLessons .lesson .learnBtn{align-self:stretch;margin-top:12px}.selectedLessons .lesson .minor{width:100%}}
.buddy{display:flex;align-items:center;gap:24px;margin:0 0 26px;background:#f0f7e5;border-color:#cde0b7}.buddyFace{flex:0 0 92px;text-align:center;line-height:1.25}.buddy h2{margin:0 0 4px}.buddy p{margin:0 0 6px}.buddy progress{height:8px;margin:6px 0;max-width:340px;accent-color:#4c8428}.buddy .small{max-width:720px}.practiceModules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0 8px}.practiceModules button{text-align:left}.practiceSetup{margin-bottom:28px}.practiceSetup label{margin-top:0}#practicePrompt{font-size:clamp(1.5rem,3vw,2rem);line-height:1.5}#practiceAnswer{font-size:1.125rem}.practiceModules~p{font-size:.875rem;color:var(--muted)}
@media(max-width:650px){header{height:auto;min-height:84px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}header nav{flex:1;justify-content:space-between;margin-left:0}nav button{padding:8px 10px;font-size:.8125rem}.buddy{gap:12px;padding:18px}.buddyFace{flex-basis:65px}.buddy .small{font-size:.8125rem}.practiceModules{grid-template-columns:1fr}}

.languagePair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}.languagePair label{margin-top:0}@media(max-width:540px){.languagePair{grid-template-columns:1fr;gap:12px}}

/* Vokumi test identity */
.logo{letter-spacing:-.055em}.buddy{background:linear-gradient(120deg,#eaf0ff,#f2f8df);border:1px solid #d4def7;border-radius:26px;padding:24px 32px}.buddyFace{flex:0 0 220px;--growth:.84}.buddyFace img{display:block;width:100%;height:auto;transform:scale(var(--growth));transition:transform .3s ease}.buddy h2{font-size:1.65rem}.testGuide{background:white;border:1px solid var(--line);margin-top:24px}.testGuide summary{cursor:pointer;font-weight:700}.testGuide li{margin-bottom:8px}header .logo{white-space:nowrap}.brandHero .logo{font-size:clamp(48px,9vw,88px)}
@media(max-width:650px){header .logo{font-size:36px}header nav{flex-basis:100%;order:3}.buddy{padding:20px;gap:12px}.buddyFace{flex-basis:110px}.buddy h2{font-size:1.3rem}.buddy .small{font-size:.8125rem}.prototype{margin-left:auto}}
@media(max-width:380px){.buddy{flex-direction:column}.buddyFace{flex-basis:auto;width:150px}}
@media(prefers-reduced-motion:reduce){.buddyFace img{transition:none}}

.gameBoard{display:grid;grid-template-columns:240px minmax(0,1fr);gap:30px;background:white;border:1px solid var(--line);border-radius:24px;padding:28px;margin-top:22px}.gameMascot{align-self:start;text-align:center;background:#f0f4ff;border-radius:20px;padding:12px}.gameMascot svg{width:100%;height:auto}.gameMascot [data-part]{transition:opacity .2s ease}.gameMascot .missing{opacity:0}.gamePuzzle{min-width:0}#gameClue{overflow-wrap:anywhere}#gameWord{display:flex;flex-wrap:wrap;gap:6px;margin:24px 0}#gameWord .gameChunk{display:inline-flex;gap:4px;flex-wrap:wrap;margin-right:10px}#gameWord .letter{display:inline-grid;place-items:center;min-width:26px;height:38px;font-size:1.25rem;font-weight:750;border-bottom:3px solid #2449f4}#gameWord .punctuation{border:0;min-width:12px}#gameKeyboard{display:flex;flex-wrap:wrap;gap:6px}#gameKeyboard button{min-width:42px;min-height:44px;padding:8px;border-radius:9px;background:#edf1ff;color:#243c96;border:1px solid #c8d1e2;font-weight:700}#gameKeyboard button.hit{background:#e1f4c9;border-color:#8dbb6a;color:#245114;opacity:1}#gameKeyboard button.miss{background:#eee;color:#777;text-decoration:line-through;opacity:.7}#gameFeedback{min-height:32px;font-weight:650}#gameCounter{color:var(--muted)}
@media(max-width:650px){.gameBoard{grid-template-columns:1fr;padding:18px;gap:16px}.gameMascot{display:flex;align-items:center;text-align:left;gap:16px;padding:8px 16px}.gameMascot svg{width:105px;flex:none}.gameMascot p{font-size:.875rem}header nav button{padding:8px 6px;font-size:.78rem}header nav{gap:0}}
@media(prefers-reduced-motion:reduce){.gameMascot [data-part]{transition:none}}

.sensoBoard{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px;margin:24px auto}.sensoCard{min-height:160px;border:3px solid transparent;border-radius:24px;padding:22px;text-align:center;color:#151a2d;box-shadow:0 4px 0 #151a2d12;position:relative}.sensoCard:nth-child(1){background:#e4eaff}.sensoCard:nth-child(2){background:#edf6c8}.sensoCard:nth-child(3){background:#ffe9d9}.sensoCard:nth-child(4){background:#efe6ff}.sensoCard strong{display:block;font-size:clamp(1.2rem,3vw,1.8rem);overflow-wrap:anywhere}.sensoCard small{display:block;font-size:.95rem;margin-top:10px}.sensoCard:disabled{opacity:1;color:#151a2d}.sensoCard.lit{border-color:#2449f4;box-shadow:0 0 0 5px #2449f430,inset 0 0 0 3px white;transform:scale(1.025)}.sensoCard .pulse{display:block;height:24px;font-size:.875rem;font-weight:750;color:#1738b8}.sensoCard:not(.lit) .pulse{visibility:hidden}#sensoAudio{min-height:0;width:auto;accent-color:#2449f4}#sensoStatus{font-weight:650}@media(max-width:540px){.sensoBoard{gap:12px}.sensoCard{padding:12px;min-height:150px;border-radius:18px}}

/* Acknowledge taps independently of the demonstration sequence. */
.sensoCard.tapped{border-color:#386a16;box-shadow:0 0 0 5px #77ad4338,inset 0 0 0 3px white;transform:scale(.97)}
.sensoCard.tapped .pulse{visibility:visible;color:#28510f}
.sensoCard.tapped.tapWrong{border-color:#b54c17;box-shadow:0 0 0 5px #da875038,inset 0 0 0 3px white}
.sensoCard.tapWrong .pulse{color:#97390c}

.gameChoices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:26px 0}.gameChoice{display:flex;flex-direction:column;align-items:flex-start;background:white;border:1px solid var(--line);border-radius:24px;padding:28px}.gameChoice h2{font-size:1.65rem;margin:0 0 10px}.gameChoice p{margin:0 0 14px}.gameChoice .small{color:var(--muted)}.gameChoice>.primary{margin-top:auto;align-self:stretch}.gameChoiceIcon{height:100px;margin-bottom:22px;display:flex;align-items:center;gap:7px}.lettersIcon span{display:grid;place-items:center;background:#edf1ff;border-bottom:4px solid var(--blue);color:var(--blue);width:44px;height:54px;border-radius:9px;font-weight:800;font-size:24px}.tilesIcon{display:grid;grid-template-columns:45px 45px;gap:7px}.tilesIcon span{display:grid;place-items:center;width:45px;height:45px;border-radius:12px;background:#e4eaff;color:#151a2d;font-weight:750}.tilesIcon span:nth-child(2){background:#edf6c8}.tilesIcon span:nth-child(3){background:#ffe9d9}.tilesIcon span:nth-child(4){background:#efe6ff}.gamesBack{margin-bottom:12px;padding-left:0}@media(max-width:650px){.gameChoices{grid-template-columns:1fr;gap:16px}.gameChoice{padding:22px}.gameChoiceIcon{height:70px;margin-bottom:18px}.tilesIcon{grid-template-columns:32px 32px;gap:6px}.tilesIcon span{width:32px;height:32px;border-radius:9px}.gameChoice h2{font-size:1.5rem}}

.mascotMenuWrap{margin:0 0 30px}.mascotMenuLabel{display:flex;justify-content:space-between;gap:12px;font-size:.72rem;letter-spacing:.08em;color:var(--muted);font-weight:750;margin:0 0 10px}.mascotMenuLabel span{font-weight:400;letter-spacing:0}.mascotMenu{display:flex;gap:12px;overflow-x:auto;padding:5px 4px 12px;scroll-snap-type:x proximity}.mascotMenu button{flex:1 0 130px;display:flex;flex-direction:column;align-items:center;gap:5px;background:white;border:2px solid var(--line);border-radius:20px;padding:10px;scroll-snap-align:start;color:var(--ink);font-size:.95rem;font-weight:750;min-width:0}.mascotMenu button img{width:100px;height:100px;object-fit:contain}.mascotMenu button span{margin:0}.mascotMenu button.active{background:#eef3ff;color:#1738b8;border-color:var(--blue);box-shadow:0 3px 0 #2449f419}.mascotMenu button:hover{border-color:var(--blue)}.gameChoiceArt{width:200px;height:200px;object-fit:contain;align-self:center;margin:0 0 20px}.sectionMascot{width:112px;height:112px;object-fit:contain;flex:none}.heading:has(.sectionMascot){justify-content:flex-start}
@media(max-width:650px){.mascotMenu{gap:9px}.mascotMenu button{flex:0 0 102px;padding:8px;font-size:.83rem;border-radius:16px}.mascotMenu button img{width:80px;height:80px}.mascotMenuLabel{font-size:.65rem}.mascotMenuLabel span{font-size:.7rem}.gameChoiceArt{width:160px;height:160px}.sectionMascot{width:80px;height:80px}.mascotMenuWrap{margin-bottom:24px}}

.mascotGroups{display:grid;grid-template-columns:3fr 2fr;gap:20px}.mascotGroup{min-width:0;padding:14px 12px 0;border:1px solid #d9e1f5;background:#edf2ff;border-radius:22px}.mascotGroup.playGroup{background:#f1f7df;border-color:#dbe6bc}.mascotGroup .mascotMenuLabel{color:#233e98;margin:0 4px 5px}.playGroup .mascotMenuLabel{color:#49651b}.mascotMenu button{flex:1 0 100px}.menuHint{margin:5px 2px 0;color:var(--muted);font-size:.75rem}.playGroup .mascotMenu button.active{background:#e9f5ca;border-color:#6a8c26;color:#314b10}
@media(max-width:800px){.mascotGroups{grid-template-columns:1fr;gap:12px}.mascotMenu button{flex:1 0 96px}.mascotMenu button img{width:70px;height:70px}.mascotGroup{padding:10px 8px 0}.mascotMenu{padding-bottom:8px}.mascotMenuWrap{margin-bottom:22px}}

#practiceSource.learnedSource{background:#e8f5df;color:#245114;border:2px solid #8dbb6a;font-weight:650}#practiceSource.exampleSource{background:#edf1ff;color:#243c96;border:2px solid #9badf5;font-weight:650}#practiceSource option[value=learned]{background:#e8f5df;color:#245114}#practiceSource option[value=demo]{background:#edf1ff;color:#243c96}.practiceModules .learnedModule{background:#e8f5df;color:#245114;border-color:#8dbb6a}.practiceModules .learnedModule:hover{background:#d9edcc}.practiceLegend{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.practiceLegend span{padding:6px 10px;border-radius:9px;font-size:.8rem}.learnedBadge{background:#e8f5df;color:#245114}.exampleBadge{background:#edf1ff;color:#243c96}

/* Review: readable controls and variable-size memory grid. */
select{max-width:100%;text-overflow:ellipsis}.practiceModules button{overflow-wrap:anywhere;line-height:1.5}.heading>div{min-width:0}.mascotMenu span{overflow-wrap:anywhere}.sensoBoard[data-count="5"],.sensoBoard[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}.sensoBoard[data-count="7"]{grid-template-columns:repeat(4,minmax(0,1fr))}.sensoCard{min-width:0}.sensoCard:nth-child(5){background:#ddf3f0}.sensoCard:nth-child(6){background:#ffe4ef}.sensoCard:nth-child(7){background:#fff4cc}
@media(max-width:650px){.sensoBoard[data-count]{grid-template-columns:repeat(2,minmax(0,1fr))}.sensoCard{min-height:138px}.practiceSetup select{font-size:.9rem}.mascotMenuWrap{margin-bottom:18px}.mascotMenu button img{width:58px;height:58px}.mascotMenu button{padding:6px}.sectionMascot{width:70px;height:70px}.heading:has(.sectionMascot){gap:12px;flex-direction:row;align-items:center}.heading:has(.sectionMascot)>div{flex:1;min-width:180px}}

#settings #speechSettings{max-width:760px;margin:0 auto}#speechSettings .actions{margin-top:18px}header nav{min-width:0}@media(max-width:650px){header nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}header nav button{white-space:nowrap;min-width:0}header nav button[data-view=settings]{grid-column:span 2}}

/* Clear exercise choices and a persistent selection state. */
.practiceChooseTitle{font-size:1.2rem;margin:26px 0 4px}.practiceChooseHint{margin:0 0 14px}.practiceModules{gap:12px;margin-top:16px}.practiceModules .practiceModule{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:18px 20px;border:2px solid #dce3f5;border-radius:18px;min-width:0;transition:border-color .15s,box-shadow .15s,background .15s}.practiceModule strong{font-size:1.05rem;line-height:1.3}.practiceModule .moduleDetail{font-size:.85rem;font-weight:400}.practiceModule .moduleMeta{margin-top:8px;font-size:.75rem;font-weight:650;border-radius:20px;padding:3px 9px;background:#ffffffb8}.practiceModules .selectedModule{border-color:#2449f4;box-shadow:0 0 0 3px #2449f425;background:#e5eaff}.practiceModules .selectedModule.learnedModule{border-color:#347329;background:#e8f5df;box-shadow:0 0 0 3px #34732922}.practiceModules .practiceModule:disabled{opacity:.55;cursor:default;background:#f4f6fc;color:#515a70}.practiceModule:focus-visible{outline:3px solid #2449f4;outline-offset:3px}#practiceRound{scroll-margin-top:24px}#practiceRound:focus{outline:none}#practiceAvailability{line-height:1.6}#practice .roundtop{gap:16px;align-items:flex-start}#practiceCounter{white-space:nowrap}
@media(max-width:650px){.practiceModules{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.practiceModules .practiceModule{padding:14px 12px;border-radius:14px}.practiceModule strong{font-size:.95rem}.practiceModule .moduleDetail{font-size:.75rem}.practiceModule .moduleMeta{font-size:.7rem;padding:3px 6px}.practiceSetup{padding:20px}#practiceSource{font-size:.95rem}#practice .roundtop{font-size:.8rem}}
@media(max-width:350px){.practiceModules{grid-template-columns:1fr}}

/* Four primary actions in the first mobile row; settings on its own row. */
.mascotGroup.playGroup{transition:background .18s,border-color .18s,box-shadow .18s}.mascotGroup.playGroup.selectedGroup{background:#e9f3cc;border-color:#91af4d;box-shadow:0 0 0 3px #91af4d22}
@media(max-width:650px){header nav{grid-template-columns:repeat(4,minmax(0,1fr))}header nav button{padding:10px 3px;font-size:.75rem;letter-spacing:0}header nav button[data-view=settings]{grid-column:1 / -1}header nav button[data-view=scan] span{display:none}}

.quoteCard{margin:24px 0}.quoteCard h2{font-size:clamp(1.4rem,4vw,2rem);line-height:1.5}#quoteAnswer{width:100%;font:inherit;padding:14px;border:2px solid #d9e1f5;border-radius:12px;resize:vertical;box-sizing:border-box}#quoteNext{margin:18px 0}#quotes .actions{flex-wrap:wrap}#quotes .panel{margin-bottom:20px}

#game,#senso,#quotes{scroll-margin-top:16px}
#tests .panel{margin-bottom:24px}#tests label{display:block;margin-top:18px}#tests textarea{width:100%;box-sizing:border-box;resize:vertical;font:inherit;padding:16px;border:1px solid #cbd3e6;border-radius:14px}#tests input:not([type=checkbox]),#tests select{max-width:100%;box-sizing:border-box}#tests .testIntro{background:#edf2ff}#tests .testIntro p{margin-bottom:0}.testTopics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.testTopics label{display:flex!important;gap:10px;align-items:center;border:1px solid #d6def0;border-radius:14px;padding:14px;margin:0!important;background:#f7f8ff}.testTopics label:has(:checked){background:#eaf4dd;border-color:#6c9446}.testTopics input{width:20px;height:20px;flex-shrink:0}#testResults article{padding:18px 0;border-bottom:1px solid #d6def0;overflow-wrap:anywhere}#testRound{scroll-margin-top:20px}#testFeedback{margin:20px 0;white-space:pre-line}#testFiles{font-size:.85rem}#tests button{margin-top:10px}@media(max-width:650px){header nav button[data-view=tests]{grid-column:span 2}header nav button[data-view=settings]{grid-column:span 2}.testTopics{grid-template-columns:1fr}#tests .panel{padding:20px}}
.homeLanguages{margin-bottom:20px;background:#edf2ff}.homeLanguages h2{margin-top:0}.homeLanguageChoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.homeLanguage{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:18px;border:2px solid #d9e1f5;border-radius:16px;background:white;color:#151a2d;min-width:0}.homeLanguage strong{font-size:1rem}.homeLanguage span{font-size:.8rem}.homeLanguage[aria-pressed=true]{background:#2449f4;border-color:#2449f4;color:white}.homeLanguage:focus-visible{outline:3px solid #7590ff;outline-offset:3px}@media(max-width:500px){.homeLanguageChoices{grid-template-columns:1fr}.homeLanguage{flex-direction:row;align-items:center;justify-content:space-between;padding:14px}.homeLanguages{padding:20px}}
.localeBar{max-width:1200px;margin:12px auto;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:0 20px}.localeBar label{margin:0;font-size:.85rem}.localeBar select{width:auto;min-width:150px;padding:8px 12px}body.international>header,body.international>main,body.international>footer{display:none!important}#international{max-width:1000px;margin:auto;padding:20px}#international .intlNav{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}#international .intlNav button{flex:1;min-width:100px}#international label{display:block;margin:16px 0 6px}#international textarea,#international select,#international input:not([type=range]){box-sizing:border-box;width:100%;font:inherit;padding:12px;border:1px solid #cbd3e6;border-radius:12px}#international .panel{margin:18px 0}#international .intlHero{display:flex;align-items:center;gap:20px}#international .intlHero img{width:90px}#international h1{font-size:clamp(1.8rem,5vw,3rem)}#international .actions{margin-top:18px}#international .intlQuestion{font-size:1.8rem;font-weight:750;overflow-wrap:anywhere}#international #iFeedback{white-space:pre-line;padding:16px;background:#edf2ff;border-radius:12px;margin:16px 0}#international .intlPreview{max-width:100%;max-height:340px;object-fit:contain}#international .grammarGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#international .grammarGrid button{text-align:left;padding:18px}#international .small{line-height:1.6}#international [hidden]{display:none!important}@media(max-width:500px){#international{padding:16px}.localeBar{padding:0 16px}.localeBar label{max-width:45%}#international .panel{padding:20px}#international .grammarGrid{grid-template-columns:1fr}}

/* The mascot cards are the primary navigation; utilities remain reachable. */
.utilityNav{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin:12px 0}.utilityNav button{padding:10px 16px;border-radius:12px;font-size:.85rem}.utilityNav button.active{background:var(--blue);color:white;border-color:var(--blue)}.utilityNav button:focus-visible{outline:3px solid #7590ff;outline-offset:3px}@media(max-width:500px){.utilityNav{justify-content:stretch}.utilityNav button{flex:1;padding:10px;font-size:.78rem}}

/* Minimal learning entry: language, lesson, start; details on demand. */
.homeTitle h1{font-size:1.8rem;margin:0 0 18px}#home .homeLanguages{background:none;border:0;padding:0;margin:0 0 18px;box-shadow:none}#home .homeLanguageChoices{display:block}#home .homeLanguages label{display:block;margin-bottom:8px;font-weight:700}#homeLanguageStatus:empty{display:none}#home .sectionline{margin:16px 0 10px}#home .sectionline h2{font-size:1.1rem}#home .pageChoice{padding:18px;margin-bottom:10px}#home .completionLegend{font-size:.75rem;margin:8px 0 16px}#home .homeProgress,#home .testGuide{padding:16px 20px;margin-top:16px}#home details>summary{font-weight:650;cursor:pointer}#home .homeProgress .summary{margin-top:20px}#home .homeProgress .buddy{margin-bottom:0;border:0;box-shadow:none;padding:16px 0}.homeProgress .buddyFace img{max-width:100px;height:auto}#home .lesson{padding:20px}#home .lesson h3{font-size:1.2rem}#home .lesson .tag{font-size:.65rem}#home .localnote{padding:10px 0;margin:0}.menuHint{display:none}@media(max-width:650px){.mascotMenuWrap{margin-bottom:20px}.mascotMenu button img{width:42px;height:42px}.mascotMenu button{min-height:90px}.mascotMenu button span{font-size:.8rem}.mascotMenuLabel{font-size:.7rem}.mascotGroup{border-radius:18px}.utilityNav{margin:8px 0}#home .homeTitle h1{font-size:1.5rem;margin-bottom:14px}#home .pageChoice{padding:16px}}

/* Compact, always-visible progress at the start of learning. */
#home .homeProgress{padding:0;margin:0 0 22px;border:0;background:none;box-shadow:none}
#home .homeProgress .summary{gap:10px;margin:0 0 10px}
#home .homeProgress .summary>div{padding:13px 16px;border-radius:16px;background:#fff;min-width:0}
#home .homeProgress .summary>div:nth-child(2){background:#edf6df;border-color:#d2e5b9}
#home .homeProgress .summary strong{font-size:1.6rem;color:var(--blue);letter-spacing:-.04em}
#home .homeProgress .summary span{font-size:.75rem;line-height:1.3}
#home .homeProgress .buddy{padding:14px 18px;margin:0;gap:16px;border:1px solid #d8e3c5;border-radius:18px;background:linear-gradient(110deg,#f2f7e7,#eef2ff);align-items:center}
#home .homeProgress .buddyFace{flex:0 0 76px;width:76px}
#home .homeProgress .buddyFace img{width:76px;max-width:76px;height:auto}
#home .homeProgress .buddy>div:last-child{flex:1;min-width:0}
#home .homeProgress .buddy h2{font-size:1rem;margin:0 0 4px}
#home .homeProgress #buddyStatus{font-size:.8rem;line-height:1.45;margin:0}
#home .homeProgress .buddy progress{display:block;width:100%;max-width:none;margin:8px 0;height:7px}
#home .homeProgress .buddy .small{font-size:.72rem;line-height:1.4;margin:0;color:var(--muted)}
@media(max-width:540px){#home .homeProgress .summary{gap:7px}#home .homeProgress .summary>div{padding:11px 10px;border-radius:13px}#home .homeProgress .summary strong{font-size:1.4rem}#home .homeProgress .summary span{font-size:.7rem}#home .homeProgress .buddy{padding:12px;gap:12px;flex-direction:row}#home .homeProgress .buddyFace{flex:0 0 60px;width:60px}#home .homeProgress .buddyFace img{width:60px;max-width:60px}}

/* Touch feedback and accessible controls across training screens. */
button,a,input,select,textarea{touch-action:manipulation}
button:disabled{cursor:not-allowed}
button:not(:disabled):active{filter:brightness(.94)}
@media(pointer:coarse){button,select,input:not([type=range]):not([type=checkbox]):not([type=file]){min-height:44px}.gameKeyboard button{min-width:40px;min-height:44px}.editrow>button{min-width:36px;min-height:44px}.minor{gap:12px;flex-wrap:wrap}.minor .textbutton{padding:8px 0}.actions{flex-wrap:wrap}}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #2449f4;outline-offset:2px}

.utilityNav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 52px;align-items:center;gap:12px;margin:12px 4px}
.utilityNav .utilityTile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px;border:2px solid var(--line);border-radius:20px;background:#fff;color:var(--ink);font-weight:750;font-size:.95rem;min-height:96px;min-width:0}
.utilityTile svg{width:36px;height:36px;color:var(--blue)}
.utilityNav .utilityTile.active,.utilityNav .helpIcon.active{background:#eef3ff;color:#1738b8;border-color:var(--blue);box-shadow:0 3px 0 #2449f419}
.utilityNav .utilityTile:hover,.utilityNav .helpIcon:hover{border-color:var(--blue)}
.utilityNav .helpIcon{display:grid;place-items:center;width:48px;height:48px;min-height:48px;padding:9px;background:white;color:var(--blue);border:2px solid var(--line);border-radius:50%;flex:none}.helpIcon svg{width:26px;height:26px}
.helpTopics{display:grid;gap:12px}.helpTopics .panel{margin:0;padding:18px 22px}.helpTopics summary{cursor:pointer;font-weight:700;font-size:1rem;line-height:1.5;min-height:28px}.helpTopics details[open]{border-color:#9aacf7;background:#f9faff}.helpTopics p{margin:12px 0;font-size:.95rem}.helpStart{background:#edf2ff}.helpStart h2{font-size:1.3rem}.helpStart li,.helpTopics li{margin:10px 0}.helpBack{margin-top:20px}.backupSettings{margin-top:20px}.backupSettings h2{font-size:1.3rem}#learningLanguage{scroll-margin-top:18px}#learningLanguage:focus{outline:none}
@media(max-width:650px){.utilityNav{gap:8px;margin:8px 4px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 48px}.utilityNav .utilityTile{font-size:.8rem;min-height:90px;padding:8px;border-radius:16px}.utilityTile svg{width:32px;height:32px}.helpTopics .panel{padding:16px}.helpTopics summary{min-height:44px;align-content:center}.helpStart{padding:20px}}

.welcomeLanguage{margin:0 0 18px;padding:20px 24px;background:#edf2ff;border:1px solid #d7e1fa;border-radius:20px}.welcomeGreeting{margin:0 0 12px;font-size:1.1rem;font-weight:700}.welcomeLanguage label{display:block;font-size:1rem;font-weight:650;margin:0 0 8px}.welcomeLanguage .homeLanguageChoices{display:block}.welcomeLanguage select{width:100%;background:white}.welcomeLanguage #homeLanguageStatus:empty{display:none}.activityPrompt{margin:0 0 10px;font-size:.85rem;font-weight:650;color:var(--muted)}.studentProfile{margin-bottom:20px}.studentProfile h2{font-size:1.3rem}.studentProfile input{width:100%;margin:8px 0 12px}#learningChoices,#practiceChoices{scroll-margin-top:18px}#learningChoices:focus,#practiceChoices:focus{outline:none}#practiceUnsupported{margin:0;padding:12px;background:#edf2ff;border-radius:12px}.welcomeLanguage:focus{outline:none}
@media(max-width:650px){.welcomeLanguage{padding:16px;border-radius:18px}.welcomeGreeting{font-size:1rem}.welcomeLanguage label{font-size:.9rem}}

select.jumpTarget{border-color:var(--blue)!important;outline:3px solid #2449f42b;outline-offset:3px;background:#eef3ff;scroll-margin-top:28px;box-shadow:0 0 0 1px #2449f414}select.jumpTarget.pageComplete{background:#e8f5df}#practiceChoices.jumpTarget{outline:3px solid #2449f42b;outline-offset:3px}#quoteText{overflow-wrap:anywhere}#quoteSource{font-size:.8rem}

/* Compact app controls beside the interface-language selector. */
.localeBar{gap:10px;flex-wrap:wrap}.localeBar select{min-width:120px;min-height:44px;flex:0 1 180px}.headerTools{display:flex;gap:8px;align-items:center;margin:0}.headerTools .headerIcon{display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:9px;border:1px solid #d6deef;border-radius:14px;background:#fff;color:var(--blue)}.headerIcon svg{width:24px;height:24px}.headerTools .headerIcon:hover,.headerTools .headerIcon.active{background:#e9edff;border-color:var(--blue)}.headerTools .headerIcon:focus-visible{outline:3px solid #8e9cff;outline-offset:3px}body.international .headerTools{display:none}
.studyGroup .mascotMenu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.mascotMenu .testTile{background:#f2eaff;border-color:#d7c2f1;color:#643b91}.mascotMenu .testTile:hover{border-color:#9561c5}.mascotMenu .testTile.active{background:#e8d7fb;border-color:#8651b6;color:#502773;box-shadow:0 3px 0 #8651b61c}
@media(min-width:1100px){.studyGroup .mascotMenu{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:500px){.localeBar{gap:8px;padding:0 16px}.localeBar label{flex:1 0 100%;max-width:none;font-size:.75rem}.localeBar select{flex:1;min-width:0}.headerTools{flex:none}.mascotMenu .testTile span{font-size:.76rem}}
/* Small, consistent language markers; SVG flags also work on desktop Windows. */
.selectedLanguageFlag{width:27px;height:18px;object-fit:cover;flex:none;border:1px solid #d5dbe7;border-radius:3px}#homeLanguages{display:flex!important;align-items:center;gap:10px}#homeLanguages select{flex:1;min-width:0;width:100%}
/* Original mascots in front of quiet vector landmarks. */
img.countryMascot{box-sizing:border-box;padding:18px 24px 0 0;border-radius:0;object-fit:contain;image-rendering:auto;background-color:transparent;background-size:contain;background-position:center;background-repeat:no-repeat}
.mascotMenu button>img.countryMascot{width:100px;height:100px;flex:none}
@media(max-width:650px){.mascotMenu button>img.countryMascot{width:78px;height:78px;padding:14px 18px 0 0}}