:root{color:#283f3a;font-synthesis:none;background:#f4f5ef;font-family:Nunito,Arial Rounded MT Bold,Arial,PingFang SC,sans-serif}*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;background:#fff;border:1px solid #dce5df;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:12px 17px;transition:background .15s,transform .15s;display:inline-flex}button:hover{background:#edf7f2}button:active{transform:scale(.98)}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible{outline-offset:4px;outline:3px solid #d49f3d}a{color:inherit}h1,h2,p{margin:0}small{font-weight:500}.learning-app{max-width:1180px;margin:0 auto;padding:0 28px}.topbar{justify-content:space-between;align-items:center;padding:26px 0;display:flex}.brand{align-items:center;gap:13px;text-decoration:none;display:flex}.brand>svg{color:#fff;background:#326854;border-radius:17px;width:52px;height:52px;padding:12px;transform:rotate(-7deg)}.brand b{letter-spacing:-1px;font-size:27px;font-weight:900}.brand b span{color:#d5a447}.brand small{letter-spacing:4px;color:#74877e;margin-top:3px;font-size:11px;display:block}.collected{align-items:center;gap:8px;font-size:23px;font-weight:900;display:flex}.collected svg{color:#d5a447;fill:#ffe7a2}.collected small{color:#84958d;font-size:14px}.topics{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.topics button{background:0 0;border-color:#0000;padding:14px 5px;font-weight:800;display:block}.topics small{letter-spacing:1px;color:#7d9087;margin-top:4px;font-size:10px;display:block}.topics button.active{background:#fff;border-color:#c4dacf;box-shadow:0 3px #e4e9df}.mode-tabs{background:#e6ece2;border-radius:18px;margin:20px 0;padding:5px;display:flex}.mode-tabs button{background:0 0;border:none;width:50%;font-weight:800}.mode-tabs .active{background:#fff;box-shadow:0 2px 5px #203b3510}.lesson{background:#fffefb;border:1px solid #e2e5d9;border-radius:24px;overflow:hidden;box-shadow:0 12px 40px #314d3f07}.lesson-banner{color:#fff;background:#7ac4b4;justify-content:space-between;align-items:center;padding:30px 38px;display:flex}.lesson-banner>div>span{letter-spacing:3px;color:#215e54;font-size:11px;font-weight:900}.lesson-banner h1{letter-spacing:-.5px;margin:6px 0;font-size:37px}.lesson-banner h1 small{color:#205e53;margin-left:16px;font-size:16px}.lesson-banner p{color:#235d53;font-size:14px}.lesson-number{opacity:.85;font-size:42px;font-weight:900}.lesson-number small{font-size:17px}.lesson-toolbar{justify-content:space-between;align-items:center;gap:14px;padding:22px 32px 12px;display:flex}.pagination{color:#71867c;align-items:center;gap:13px;font-size:13px;display:flex}.pagination button{padding:10px}.view-tabs{gap:5px;display:flex}.view-tabs button{border-color:#0000;padding:9px 14px;font-size:14px}.active{color:#275f4c!important;background:#e3f2eb!important;border-color:#a0c7b3!important}.patterns{flex-wrap:wrap;align-items:center;gap:8px;padding:0 32px 22px;display:flex}.patterns button{border-radius:30px;padding:8px 14px;font-size:14px}.patterns>span{color:#809085;margin-left:auto;font-size:12px}.flashcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:0 32px;display:grid}.flashcard{border:3px solid var(--accent);background:#fff;border-radius:19px;padding:5px;position:relative;overflow:hidden}.word-card-main{border:1px solid var(--accent);background:#fff;border-radius:11px;flex-direction:column;gap:0;width:100%;padding:18px 8px 10px;display:flex}.word-card-main:hover{background:#fff}.word-title{flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:9px;min-height:46px;display:flex}.word-title strong{letter-spacing:-1.2px;color:#2e3533;overflow-wrap:anywhere;font-size:clamp(27px,3.15vw,40px);font-weight:900;line-height:1.1}.word-title span{color:#6d7973;font-size:14px}.ipa{color:var(--accent);padding:2px 0 7px;font-size:15px}.picture{aspect-ratio:1;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}.picture img{object-fit:contain;width:100%;height:100%}.picture>span{color:#89968f;font-size:12px}.sprite{background-color:#fff;background-repeat:no-repeat;border-radius:8px}.hear-word{color:var(--accent);align-items:center;gap:6px;padding-top:7px;font-size:12px;display:flex}.card-phrase{text-align:left;background:#f5f7f2;border:0;border-radius:8px;justify-content:space-between;width:100%;min-height:69px;margin-top:5px;padding:13px 8px;font-weight:800}.card-phrase small{color:#7e8d81;margin-top:4px;font-size:11px;display:block}.card-phrase svg{color:#749184;flex-shrink:0}.ipa-toggle{color:#87968b;align-items:center;gap:6px;margin:20px 32px;font-size:12px;display:flex}.lesson-bottom{justify-content:space-between;align-items:center;gap:15px;padding:25px 32px 30px;display:flex}.lesson-bottom p{color:#819286;font-size:13px}.primary{color:#fff;background:#31715b;border-color:#31715b;padding:15px 20px;font-weight:800}.primary:hover{background:#255a48}.sentence-list{gap:15px;padding:0 32px;display:grid}.sentence-list>button{border:2px solid var(--accent);text-align:left;background:#fff;border-radius:14px;justify-content:flex-start;gap:20px;padding:10px 18px}.number{background:var(--accent);color:#fff;border-radius:50%;place-items:center;min-width:30px;height:30px;display:grid}.sentence-list .picture{flex-shrink:0;width:90px}.sentence-list>button>span{flex:1}.sentence-list strong{color:#303e36;font-size:25px;font-weight:900;display:block}.sentence-list small{color:#739287;margin-top:7px;font-size:14px;display:block}.sentence-list svg{color:var(--accent);flex-shrink:0}.model-lesson{grid-template-columns:1.2fr 1fr;align-items:center;padding:0 32px;display:grid}.model-stage{touch-action:none;background:radial-gradient(#e5eee0,#0000 68%);width:100%;height:420px;position:relative}.model-stage canvas{display:block}.model-lesson>div>p{color:#849489;text-align:center;font-size:12px}.model-caption{padding:24px}.model-caption h2{overflow-wrap:anywhere;font-size:45px}.model-caption>p{margin:8px 0 20px;text-align:left!important;font-size:18px!important}.model-caption>button{width:100%;margin-top:10px;display:flex}.model-picker{flex-wrap:wrap;gap:7px;margin-top:24px;display:flex}.model-picker button{padding:7px 10px;font-size:13px}.quiz-start{text-align:center;flex-direction:column;align-items:center;gap:20px;padding:40px 25px 60px;display:flex}.quiz-start>svg{color:#59967e}.quiz-start h2{font-size:28px}.quiz-start p{color:#7d9083;font-size:14px}.quiz-settings{gap:24px;margin:8px 0 12px;display:flex}.quiz-settings fieldset{border:0;gap:7px;margin:0;padding:0;display:flex}.quiz-settings legend{text-align:left;color:#849487;margin-bottom:9px;font-size:12px}.quiz{padding:30px 40px}.quiz-heading{align-items:center;gap:20px;display:flex}.speaker{color:#32775b;background:#e6f3ec;border:none;border-radius:50%;width:78px;height:78px}.quiz-heading h2{margin:6px 0;font-size:26px}.quiz-heading p,.quiz-heading small{color:#809084}.answers{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:720px;margin:30px auto;display:grid}.answers>button{border:3px solid #dbe7dc;flex-direction:column;padding:15px;font-size:13px;display:flex;position:relative;overflow:hidden}.answers .picture{max-width:275px}.answer-number{z-index:1;background:#fff;border-radius:50%;place-items:center;width:27px;height:27px;display:grid;position:absolute;top:12px;left:12px}.answers .correct{opacity:1;background:#ecf7ee;border-color:#4d9c71}.answers .wrong{opacity:.35}.quiz-feedback{flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;display:flex}.quiz-feedback p{color:#6d8b79;font-size:14px}.parent-note{color:#859288;margin:25px 5px;font-size:12px;line-height:1.9}.parent-note summary{cursor:pointer}.parent-note p{margin:12px 0}.error{color:#a53b2b;text-align:center;padding:15px}footer{text-align:center;color:#9ba69c;letter-spacing:2px;padding:8px 0 30px;font-size:10px}@media (width<=760px){.learning-app{padding:0 12px}.topbar{padding:18px 5px}.brand b{font-size:23px}.brand>svg{width:43px;height:43px;padding:10px}.topics{grid-template-columns:repeat(3,1fr);gap:4px}.topics button{padding:10px 4px;font-size:14px}.topics small{font-size:9px}.mode-tabs{margin:14px 0}.mode-tabs button{padding:12px 4px;font-size:14px}.lesson{border-radius:18px}.lesson-banner{padding:23px 20px}.lesson-banner h1{font-size:29px}.lesson-banner h1 small{margin:3px 0 0;font-size:13px;display:block}.lesson-banner p{font-size:12px}.lesson-number{font-size:30px}.lesson-toolbar{flex-wrap:wrap;padding:17px 14px 12px}.pagination{font-size:12px}.view-tabs button{padding:8px 10px;font-size:12px}.patterns{gap:6px;padding:0 14px 17px}.patterns button{padding:7px 12px;font-size:12px}.patterns>span{width:100%;margin:3px 0 0;font-size:11px}.flashcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding:0 12px}.flashcard{border-width:2px;border-radius:13px;padding:4px}.word-card-main{border-radius:7px;padding:12px 3px 8px}.word-title{flex-direction:column;justify-content:flex-start;align-items:center;gap:3px;min-height:49px}.word-title strong{letter-spacing:-.7px;font-size:clamp(21px,5.7vw,35px)}.word-title span{font-size:11px}.ipa{font-size:12px}.hear-word{font-size:10px}.card-phrase{gap:3px;min-height:66px;padding:9px 6px;font-size:13px}.card-phrase svg{width:15px}.card-phrase small{font-size:10px}.ipa-toggle{margin:16px;font-size:11px}.lesson-bottom{flex-direction:column;padding:20px 15px}.lesson-bottom .primary{width:100%;font-size:14px}.sentence-list{gap:12px;padding:0 12px}.sentence-list>button{gap:9px;padding:12px 10px}.sentence-list .picture{width:56px}.sentence-list strong{font-size:18px}.sentence-list small{font-size:11px}.number{min-width:23px;height:23px;font-size:12px}.sentence-list svg{width:18px}.model-lesson{grid-template-columns:1fr;padding:0 12px}.model-stage{height:320px}.model-caption{padding:20px}.model-caption h2{font-size:36px}.quiz-start{padding:30px 15px 40px}.quiz-start h2{font-size:22px}.quiz-settings{flex-direction:column;gap:18px}.quiz{padding:20px 14px}.quiz-heading{gap:12px}.quiz-heading h2{font-size:21px}.quiz-heading p{font-size:12px}.speaker{flex-shrink:0;width:60px;height:60px}.answers{gap:12px;margin:24px auto}.answers>button{padding:8px;font-size:11px}.quiz-feedback{gap:12px}.quiz-feedback p{text-align:center;width:100%}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}.theme-selector{background:#fff;border:1px solid #dce5df;border-radius:15px;justify-content:space-between;align-items:center;gap:20px;padding:15px 18px;display:flex}.theme-selector label{align-items:center;gap:15px;font-size:14px;font-weight:700;display:flex}.theme-selector select{font:inherit;color:#275f4c;cursor:pointer;background:#f2f8f4;border:1px solid #c2d8ca;border-radius:10px;max-width:100%;padding:12px}.theme-selector>span{color:#7c8f82;font-size:12px}.reference-picture{background-color:#fff;background-repeat:no-repeat}.page-sentence{color:#347e6c;text-align:center;background:0 0;border:0;max-width:95%;margin:26px auto 0;font-size:25px;font-weight:900;display:flex}.word-title strong{font-size:clamp(23px,2.7vw,36px)}.word-card-main .reference-picture{margin:12px 0}.lesson-banner h1{overflow-wrap:anywhere}@media (width<=760px){.theme-selector{padding:12px;display:block}.theme-selector label{display:block}.theme-selector select{width:100%;margin-top:8px;font-size:15px;display:block}.theme-selector>span{margin-top:9px;display:block}.word-title strong{font-size:clamp(18px,5vw,30px)}.page-sentence{font-size:20px}.lesson-banner h1{font-size:27px}.word-card-main .reference-picture{margin:10px 0}}.series-tabs{flex-wrap:wrap;gap:10px;margin:12px 0 20px;display:flex}.series-tabs button{color:#426047;background:#fff;border:1px solid #cbd8c8;border-radius:16px;padding:12px 20px;font-weight:700}.series-tabs button[aria-pressed=true]{color:#fff;background:#37583f}.class-question{text-align:left;color:#435536;background:#fff9dc;border:1px solid #e6d891;border-radius:18px;justify-content:space-between;align-items:center;gap:18px;width:calc(100% - 40px);margin:24px 20px 8px;padding:22px;display:flex}.class-question strong{margin:8px 0;font-size:clamp(22px,4vw,32px);display:block}.class-question small{font-size:13px}.class-question:focus-visible,.series-tabs button:focus-visible{outline-offset:3px;outline:3px solid #d8a443}
