:root{color-scheme:light;--ink: #113047;--muted: #587285;--paper: #ffffff;--line: #cddfe8;--sky: #def4ff;--mint: #ddf8eb;--sun: #ffe77d;--coral: #ff796d;--blue: #2378ca;--green: #2e9b68;--violet: #7657cf;--shadow: 0 14px 34px rgba(23, 64, 88, .12)}*{box-sizing:border-box}html{min-width:320px;background:#f7fbff}body{min-height:100dvh;margin:0;color:var(--ink);font-family:Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.26;background:linear-gradient(180deg,#def4ffe6,#fff0 45%),#f7fbff;overflow-x:hidden}button{min-height:46px;border:0;font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:4px solid rgba(35,120,202,.28);outline-offset:3px}h1,h2,p{margin-top:0}h1,h2{letter-spacing:0}.app-shell{display:grid;width:min(1760px,100%);height:100dvh;grid-template-rows:auto auto auto minmax(0,1fr);margin:0 auto;overflow:hidden;padding:14px}.language-gate{display:grid;min-height:100dvh;place-items:center;padding:18px}.language-panel{width:min(860px,100%);padding:clamp(18px,4vw,34px)}.language-panel h1{margin-bottom:8px;font-size:clamp(2.1rem,6vw,4rem);line-height:1}.gate-subtitle{margin-bottom:20px;color:var(--muted);font-size:clamp(1.05rem,2.5vw,1.35rem);font-weight:800}.language-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.language-card{display:grid;min-height:168px;align-content:center;justify-items:center;gap:8px;padding:16px;border:2px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);box-shadow:var(--shadow);text-align:center}.language-card strong,.language-card span{display:block;overflow-wrap:anywhere}.language-card strong{font-size:clamp(1.2rem,3vw,1.55rem)}.language-card span:last-child{color:var(--muted);font-weight:900}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}.eyebrow,.lesson-name,.builder-label{margin:0;color:var(--muted);font-size:.86rem;font-weight:900;text-transform:uppercase}.topbar h1,.title-reset{margin-bottom:0;font-size:clamp(1.75rem,3.4vw,2.85rem);font-weight:900;line-height:1}.title-reset{min-height:auto;padding:0;background:transparent;color:var(--ink);text-align:left;white-space:nowrap}.top-actions{display:flex;align-items:center;gap:8px}.language-pill,.star-badge,.icon-button{border:2px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);box-shadow:0 8px 18px #16435914}.language-pill{display:inline-flex;min-width:0;align-items:center;gap:7px;padding:0 10px;font-weight:900}.star-badge{display:inline-grid;min-width:82px;height:48px;grid-template-columns:24px auto;grid-template-rows:1fr 1fr;align-items:center;justify-content:center;column-gap:6px;color:#8f6b00}.flag-mark{position:relative;display:inline-block;width:60px;height:40px;flex:0 0 auto;overflow:hidden;border-radius:5px;box-shadow:inset 0 0 0 1px #1130472e,0 4px 10px #11304714}.flag-mark.small{width:38px;height:25px;border-radius:4px}.flag-vi-vn{background:#da251d}.flag-star{position:absolute;left:50%;top:50%;width:58%;height:58%;transform:translate(-50%,-50%);fill:#ffeb3b}.flag-mark.small .flag-star{width:58%;height:58%}.flag-th-th{background:linear-gradient(180deg,#d51b30 0 16.66%,#fff 16.66% 33.33%,#2d2a75 33.33% 66.66%,#fff 66.66% 83.33%,#d51b30 83.33% 100%)}.flag-de-de{background:linear-gradient(180deg,#000 0 33.33%,#d00 33.33% 66.66%,#ffce00 66.66% 100%)}.flag-en-gb{background:linear-gradient(90deg,transparent 42%,#ffffff 42% 58%,transparent 58%),linear-gradient(0deg,transparent 38%,#ffffff 38% 62%,transparent 62%),linear-gradient(90deg,transparent 46%,#c8102e 46% 54%,transparent 54%),linear-gradient(0deg,transparent 44%,#c8102e 44% 56%,transparent 56%),linear-gradient(32deg,transparent 45%,#ffffff 45% 52%,transparent 52%),linear-gradient(-32deg,transparent 45%,#ffffff 45% 52%,transparent 52%),#012169}.star-badge svg{grid-row:1 / 3}.star-badge strong{font-size:1.12rem;line-height:1}.star-badge span{color:var(--muted);font-size:.72rem;font-weight:900}.icon-button{display:grid;width:48px;place-items:center;background:#113047;color:#fff}.icon-button.view-toggle{background:#fff;color:var(--ink)}.icon-button.view-toggle[aria-pressed=true]{border-color:#113047;background:var(--mint)}.quick-loop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:7px}.loop-step{display:inline-flex;min-height:36px;align-items:center;justify-content:center;gap:7px;border:2px solid rgba(205,223,232,.95);border-radius:8px;background:#ffffffc2;color:var(--muted);font-size:.84rem;font-weight:900}.lesson-picker{position:relative;display:grid;grid-template-columns:50px 50px minmax(0,1fr) 50px;gap:8px;margin-bottom:8px}.lesson-step,.lesson-current,.lesson-tab{border:2px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);box-shadow:0 8px 18px #16435914;font-weight:900}.lesson-step{display:grid;min-height:48px;place-items:center}.lesson-current{display:grid;min-height:48px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:5px 12px;background:var(--tab-color, var(--sun));text-align:left}.lesson-current span{display:grid;min-width:0}.lesson-current small,.lesson-tab small{color:var(--muted);font-size:.66rem;font-style:normal;font-weight:900;text-transform:uppercase}.lesson-current strong{overflow:hidden;font-size:1.02rem;text-overflow:ellipsis;white-space:nowrap}.lesson-current em{color:var(--muted);font-style:normal}.lesson-menu{position:absolute;z-index:7;top:calc(100% + 6px);right:58px;left:58px;display:grid;max-height:min(58dvh,420px);grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;overflow:auto;padding:10px;border:2px solid var(--line);border-radius:8px;background:#fffffffa;box-shadow:0 18px 42px #11304733}.lesson-tab{display:grid;min-height:52px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;padding:6px 8px;text-align:left}.lesson-tab span{overflow-wrap:anywhere}.lesson-tab[aria-selected=true]{border-color:#113047;background:var(--tab-color, var(--sun))}.learning-grid{display:grid;min-height:0;grid-template-columns:minmax(270px,1.02fr) minmax(320px,.9fr) minmax(190px,.46fr);gap:12px;align-items:stretch;overflow:hidden}.learning-grid.is-word-practice-only{grid-template-columns:minmax(320px,1fr) minmax(200px,.36fr)}.app-shell.is-responsive-preview{width:min(940px,100%);height:auto;min-height:100dvh;overflow:visible}.app-shell.is-responsive-preview .learning-grid{grid-template-columns:minmax(280px,.95fr) minmax(320px,1fr);overflow:visible}.app-shell.is-responsive-preview .learning-grid.is-word-practice-only{grid-template-columns:1fr}.app-shell.is-responsive-preview .word-dock{grid-column:1 / -1}.app-shell.is-responsive-preview .word-list{grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}.focus-panel,.practice-panel,.word-dock{border:2px solid var(--line);border-radius:8px;background:#fffffff5;box-shadow:var(--shadow)}.focus-panel{display:grid;grid-template-rows:auto auto auto;min-height:0;gap:8px;overflow:hidden;padding:10px}.image-stage{display:grid;height:clamp(135px,21dvh,198px);min-height:0;overflow:hidden;place-items:center;border:2px solid #c7e5ef;border-radius:8px;background:var(--sky);aspect-ratio:4 / 3}.image-stage img{display:block;width:100%;height:100%;object-fit:cover}.word-copy{display:grid;gap:2px}#word-title{margin-bottom:0;font-size:clamp(1.95rem,3.7vw,3.35rem);line-height:.94}.translation{margin-bottom:0;color:#118d83;font-size:clamp(1.02rem,1.8vw,1.35rem);font-weight:900}.mouth-shape{min-height:1.08em;margin-bottom:0;color:var(--muted);font-size:.86rem;font-weight:800}.pronunciation-help{display:grid;gap:5px;margin-top:5px}.pronunciation-help>span{color:var(--muted);font-size:.7rem;font-weight:900;text-transform:uppercase}.pronunciation-steps{display:flex;flex-wrap:wrap;gap:6px}.pronunciation-step{display:grid;min-width:68px;min-height:46px;place-items:center;padding:5px 8px;border:2px solid #f0c65f;border-radius:8px;background:#fff6d8;box-shadow:0 6px 12px #8c61081a;text-align:center}.pronunciation-step strong{color:var(--ink);font-size:1.12rem;line-height:1}.pronunciation-step small{color:var(--muted);font-size:.62rem;font-weight:900}.focus-bottom{display:grid;gap:5px}.mini-stars{display:flex;min-height:22px;align-items:center;gap:5px;color:#d19700}.audio-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.focus-bottom .audio-actions{grid-template-columns:1fr 1fr .82fr}.primary-action{display:inline-flex;min-width:0;align-items:center;justify-content:center;gap:7px;padding:0 10px;border-radius:8px;background:var(--blue);color:#fff;font-size:.94rem;font-weight:900;white-space:normal}.primary-action svg{flex:0 0 auto}.primary-action.accent{background:var(--coral)}.primary-action.next-action{background:var(--violet)}.primary-action.is-listening{animation:pulse .76s ease-in-out infinite alternate;background:#d83a5b}.practice-panel{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;min-height:0;gap:8px;padding:10px}.section-heading{display:grid;gap:3px}.section-heading h2{margin-bottom:0;font-size:clamp(1.25rem,2.4vw,1.85rem)}.section-heading.compact h2{font-size:1.22rem;line-height:1.05}.sentence-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.sentence-slot{min-height:82px;padding:10px;border:2px solid #c7dce7;border-radius:8px;background:#f7fbff}.sentence-slot.is-full{grid-column:1 / -1}.sentence-slot strong,.sentence-slot span{display:block;overflow-wrap:anywhere}.sentence-slot strong{font-size:clamp(1.08rem,2.4vw,1.52rem);line-height:1}.sentence-slot span{margin-top:6px;color:var(--muted);font-weight:900}.builder-area{display:grid;gap:9px;align-content:start;overflow:auto}.word-play-panel{grid-template-rows:auto minmax(0,1fr) auto}.picture-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-height:0;gap:8px;align-content:center;overflow:hidden}.picture-choice{display:grid;min-height:126px;gap:5px;align-content:center;justify-items:center;padding:7px;border:2px solid #c7dce7;border-radius:8px;background:#fff;color:var(--ink);font-weight:900}.picture-choice[aria-pressed=true]{border-color:#113047;background:#fff9db}.picture-choice img{width:74px;height:54px;border-radius:6px;object-fit:cover}.picture-choice span{display:block;overflow-wrap:anywhere}.chip-row,.object-grid{display:grid;gap:7px;margin-top:5px}.chip-row{grid-template-columns:repeat(3,minmax(0,1fr))}.object-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.chip,.object-chip{min-width:0;border:2px solid #c7dce7;border-radius:8px;background:#fff;color:var(--ink);font-weight:900}.chip{padding:7px 9px}.chip span,.chip small,.object-chip span,.object-chip small{display:block;overflow-wrap:anywhere}.chip small,.object-chip small{color:var(--muted);font-size:.72rem;font-weight:900}.chip[aria-pressed=true],.object-chip[aria-pressed=true]{border-color:#113047;background:var(--mint)}.object-chip{display:grid;min-height:82px;grid-template-rows:42px auto;gap:4px;align-content:center;justify-items:center;padding:7px 5px}.object-chip img{width:48px;height:40px;border-radius:6px;object-fit:cover}.speech-result{display:grid;min-height:54px;gap:3px;padding:8px 10px;border:2px solid #c7dce7;border-radius:8px;background:#f8fbfe}.speech-title,.speech-result>span{display:block;overflow-wrap:anywhere}.speech-title{font-size:1.04rem}.speech-title.has-face{display:flex;align-items:center;justify-content:space-between;gap:10px}.speech-face{flex:0 0 auto;font-size:clamp(1.65rem,4vw,2.25rem);line-height:1}.score-face{position:relative;display:block;width:1.25em;height:1.25em;border:.07em solid #113047;border-radius:50%;background:#ffe06f;box-shadow:inset -.12em -.13em #e2a30038}.score-face-eye{position:absolute;top:.34em;width:.13em;height:.19em;border-radius:50%;background:#113047}.score-face-eye.left{left:.33em}.score-face-eye.right{right:.33em}.score-face-mouth{position:absolute;left:50%;bottom:.27em;width:.55em;height:.28em;transform:translate(-50%);border:.07em solid #113047;border-top:0;border-radius:0 0 .55em .55em}.score-face.neutral .score-face-mouth{bottom:.34em;height:.07em;border:0;border-radius:999px;background:#113047}.score-face.sad .score-face-mouth,.score-face.crying .score-face-mouth{bottom:.22em;border-top:.07em solid #113047;border-bottom:0;border-radius:.55em .55em 0 0}.score-face.laugh .score-face-mouth{bottom:.18em;height:.39em;border:0;border-radius:0 0 .55em .55em;background:#113047}.score-face.laugh .score-face-mouth:before{position:absolute;top:.03em;left:.09em;width:.37em;height:.1em;border-radius:0 0 .08em .08em;background:#fff;content:""}.score-face-tear{position:absolute;right:.18em;top:.54em;width:.12em;height:.26em;transform:rotate(14deg);border-radius:60% 60% 70% 70%;background:#42a7df}.speech-result>span{color:var(--muted);font-weight:850}.speech-result.compact{min-height:48px}.speech-debug{display:block;max-height:4.2em;overflow:auto;color:#33485a;font-family:Consolas,Courier New,monospace;font-size:.68rem;font-weight:700;line-height:1.2;overflow-wrap:anywhere}.speech-result.good,.speech-result.close{border-color:#2e9b68a6;background:#ecfbf2}.speech-result.try,.speech-result.blocked{border-color:#ff796db3;background:#fff2f1}.speech-result.listening{border-color:#2378ca8c;background:#eef8ff}.lesson-complete-overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:#1130472e}.lesson-complete-popup{display:grid;width:min(420px,92vw);min-height:230px;align-content:center;justify-items:center;gap:12px;padding:28px;border:3px solid #113047;border-radius:8px;background:#fff9db;color:var(--ink);box-shadow:0 22px 54px #11304747;text-align:center;animation:celebration-pop .22s ease-out}.celebration-icons{display:flex;align-items:center;justify-content:center;gap:18px;color:#d19700}.lesson-complete-popup strong,.lesson-complete-popup span{display:block;overflow-wrap:anywhere}.lesson-complete-popup strong{font-size:clamp(1.8rem,7vw,2.7rem);line-height:1}.lesson-complete-popup span{color:#118d83;font-size:clamp(1.08rem,4vw,1.4rem);font-weight:900}.word-dock{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;gap:5px;padding:9px}.word-list{display:grid;min-height:0;gap:5px;align-content:start;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}.word-card{display:grid;min-height:0;height:clamp(44px,6.2dvh,56px);grid-template-columns:38px minmax(0,1fr) 28px;gap:5px;align-items:center;padding:4px 6px;border:2px solid #c7dce7;border-radius:8px;background:#fff;color:var(--ink);text-align:left}.word-card[aria-current=true]{border-color:#113047;background:#fff9db}.word-card img{width:36px;height:30px;border-radius:6px;object-fit:cover}.word-card strong,.word-card span{display:block;overflow-wrap:anywhere}.word-card strong{font-size:.9rem;line-height:1.05}.word-card span span{color:#118d83;font-size:.85rem;font-weight:900;line-height:1.05}.word-stars{display:inline-flex;min-width:30px;align-items:center;justify-content:center;gap:3px;color:#d19700;font-weight:900}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.025)}}@keyframes celebration-pop{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@media(min-width:701px){.learning-grid.is-word-practice-only .focus-panel{grid-template-columns:minmax(260px,.42fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:18px}.learning-grid.is-word-practice-only .image-stage{width:100%;height:auto;align-self:start;aspect-ratio:4 / 3}.learning-grid.is-word-practice-only .word-copy{align-content:center}.learning-grid.is-word-practice-only #word-title{font-size:clamp(3.2rem,6vw,6rem)}.learning-grid.is-word-practice-only .translation{font-size:clamp(1.35rem,2.6vw,2.15rem)}.learning-grid.is-word-practice-only .mouth-shape{font-size:1.05rem}.learning-grid.is-word-practice-only .focus-bottom{grid-column:1 / -1}}@media(max-width:980px){.app-shell{height:auto;min-height:100dvh;overflow:visible}.learning-grid{grid-template-columns:minmax(300px,1fr) minmax(320px,1fr);overflow:visible}.learning-grid.is-word-practice-only{grid-template-columns:1fr}.lesson-menu{grid-template-columns:repeat(3,minmax(0,1fr))}.word-dock{grid-column:1 / -1}.word-list{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}}@media(max-width:850px){.app-shell{height:auto;min-height:100dvh;overflow:visible;padding:16px}.topbar{display:grid}.top-actions{width:100%;flex-wrap:wrap}.learning-grid{grid-template-columns:1fr}.lesson-menu{right:0;left:0;grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-tab{min-height:48px}.quick-loop{grid-template-columns:repeat(3,minmax(0,1fr))}.image-stage{height:auto;min-height:220px}.word-list{grid-template-columns:1fr;overflow:visible}}@media(max-width:560px){.language-grid,.audio-actions,.focus-bottom .audio-actions,.sentence-board,.chip-row,.object-grid{grid-template-columns:1fr}.picture-grid{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.language-card{min-height:128px}.language-pill{flex:1 1 190px}.star-badge{min-width:82px}.object-chip{min-height:74px;grid-template-columns:58px minmax(0,1fr);grid-template-rows:1fr;text-align:left}.object-chip img{justify-self:start}.picture-choice{min-height:112px}.picture-choice img{width:82px;height:62px}.word-card{grid-template-columns:64px minmax(0,1fr) auto}.word-card img{width:60px;height:54px}}@media(max-width:700px){html,body{height:100dvh;overflow:hidden}.app-shell{width:100%;height:100dvh;min-height:100dvh;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden;padding:8px}.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin-bottom:5px}.topbar .eyebrow{font-size:.66rem}.title-reset{max-width:100%;overflow:hidden;font-size:clamp(1.38rem,7.5vw,1.78rem);text-overflow:ellipsis}.top-actions{width:auto;flex-wrap:nowrap;justify-content:end;gap:4px}.language-pill,.star-badge,.icon-button{min-height:36px;height:36px}.language-pill{gap:4px;padding:0 6px}.language-pill span{display:none}.flag-mark.small{width:30px;height:20px}.star-badge{min-width:48px;grid-template-columns:18px auto;column-gap:3px}.star-badge svg{width:18px;height:18px}.star-badge strong{font-size:.96rem}.star-badge span{display:none}.icon-button{width:36px}.quick-loop{display:none}.lesson-picker{grid-template-columns:38px 38px minmax(0,1fr) 38px;gap:5px;margin-bottom:7px}.lesson-step,.lesson-current{min-height:38px}.lesson-current{gap:6px;padding:3px 8px}.lesson-current svg{width:18px;height:18px}.lesson-current small{display:none}.lesson-current strong{font-size:.9rem}.lesson-current em{font-size:.78rem}.lesson-menu{right:0;left:0;max-height:52dvh;grid-template-columns:1fr;gap:6px;padding:7px}.lesson-tab{min-height:36px;padding:4px 7px;font-size:.82rem}.learning-grid{min-height:0;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:7px;overflow:hidden}.focus-panel{grid-template-columns:minmax(92px,30vw) minmax(0,1fr);grid-template-rows:auto auto;gap:7px;padding:8px}.image-stage{grid-row:1 / 3;width:100%;height:auto;min-height:0;aspect-ratio:1 / 1}.word-copy{align-content:center;gap:1px}.lesson-name{font-size:.68rem}#word-title{font-size:clamp(2.1rem,14vw,3.35rem)}.translation{font-size:clamp(1.05rem,5.2vw,1.34rem)}.mouth-shape{min-height:1em;font-size:.78rem}.pronunciation-help{gap:3px;margin-top:3px}.pronunciation-help>span{font-size:.6rem}.pronunciation-steps{gap:4px}.pronunciation-step{min-width:52px;min-height:38px;padding:3px 5px}.pronunciation-step strong{font-size:.95rem}.pronunciation-step small{font-size:.54rem}.focus-bottom{align-self:end;gap:3px}.mini-stars{min-height:18px;gap:2px}.mini-stars svg{width:18px;height:18px}.focus-bottom .audio-actions{grid-template-columns:1fr 1fr 42px;gap:5px}.primary-action{min-height:40px;gap:5px;padding:0 7px;font-size:.86rem}.primary-action svg{width:20px;height:20px}.next-action span{display:none}.word-play-panel{min-height:0;grid-template-rows:auto minmax(0,1fr) auto;gap:7px;overflow:hidden;padding:8px}.word-play-panel .section-heading{display:block}.word-play-panel .section-heading .eyebrow{display:none}.word-play-panel .section-heading h2{font-size:clamp(1.14rem,5.6vw,1.45rem)}.picture-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-content:stretch;gap:6px;overflow:hidden}.picture-choice{min-height:0;padding:5px}.picture-choice img{width:min(82px,100%);height:auto;aspect-ratio:4 / 3}.picture-choice span{font-size:.88rem}.speech-result{min-height:46px;gap:1px;padding:6px 8px}.speech-title{font-size:.95rem}.speech-face{font-size:1.55rem}.speech-result span{font-size:.86rem}.word-dock{display:none}}