:root{font-family:Arial,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;color:#173551;background:#f7f9fd;font-size:16px}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #2875cf;outline-offset:5px}header{max-width:1120px;margin:auto;padding:24px 30px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:#173551;font-weight:700}.brand img{width:42px;height:42px;object-fit:contain}.small{letter-spacing:3px;font-size:.8rem}main{max-width:1060px;margin:auto;padding:20px 30px}.welcome{background:#e5efff;border-radius:32px;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;overflow:hidden;padding:42px 48px 0;min-height:350px;position:relative}.eyebrow{color:#ca273a;font-size:.85rem;font-weight:bold;letter-spacing:4px}h1{font-size:clamp(1.7rem,4vw,2.8rem);line-height:1.5;margin:16px 0}p{line-height:1.8} .welcome p{margin:12px 0}.portrait{position:relative;align-self:end;text-align:center}.portrait img{width:100%;max-width:340px;display:block;margin:auto}.speech{background:#fff;border-radius:20px;padding:12px 18px;display:inline-block;margin-bottom:12px;font-weight:700}.stamps{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 30px}.stamp{background:white;color:#546a86;padding:8px 12px;border-radius:12px;font-size:.85rem}.stamp.done{color:#b82036;background:#ffe3e8}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:28px 0 18px}.section-head span{font-size:.85rem;color:#5a6e87}h2{font-size:1.35rem;margin:0}.lessons{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.lesson{background:#fff;border:1px solid #dce3ed;border-radius:22px;text-align:left;padding:24px;color:inherit;transition:transform .15s,box-shadow .15s}.lesson:hover{transform:translateY(-3px);box-shadow:0 8px 24px #17355112}.number{display:block;color:#bf2338;font-size:.8rem;letter-spacing:2px;font-weight:bold}.lesson strong{display:block;font-size:1.25rem;margin:14px 0 7px}.lesson p{font-size:.9rem;margin:0;color:#58708c}.lesson .start{display:block;margin-top:22px;font-weight:bold;color:#2359a5;font-size:.9rem}.practice{background:white;border:1px solid #dce3ed;border-radius:24px;padding:26px 36px;margin-top:28px;scroll-margin-top:20px}.practice .section-head{margin:0 0 20px}.quiet{background:none;border:0;font-size:.85rem;color:#49617a;padding:8px}.progress{height:6px;background:#edf1f6;border-radius:10px;overflow:hidden}.progress i{display:block;height:100%;background:#ce2c42;transition:width .2s}#stage{text-align:center;padding:30px 0 10px}.word{font-family:Georgia,serif;font-size:clamp(2rem,6vw,3rem);margin:16px 0;color:#173551}.meaning{font-size:1.15rem}.pronunciation{color:#607189;font-size:.9rem}.primary,.audio{border:0;border-radius:14px;padding:15px 25px;font-weight:bold}.primary{background:#c92940;color:white}.audio{color:#205ca7;background:#eaf2ff;margin:8px}.next{margin-top:25px}.answers{display:grid;gap:12px;max-width:520px;margin:24px auto}.answer{border:2px solid #dce4f0;border-radius:14px;padding:16px;background:white;color:#173551}.answer.correct{border-color:#297650;background:#eaf8ee}.answer.wrong{border-color:#ce2c42;background:#fff0f2}.answer:disabled{cursor:default;opacity:1}.feedback{min-height:32px;line-height:1.6;color:#335a45}.completion-img{width:120px}aside{display:flex;align-items:center;justify-content:center;gap:24px;padding:30px 0;margin-top:22px}aside img{height:130px;width:130px;object-fit:contain}aside p{font-size:.9rem;color:#58708c}aside strong{color:#173551}footer{border-top:1px solid #e0e6ee;max-width:1060px;margin:20px auto 0;padding:24px 30px;font-size:.8rem;color:#5a6e87;display:flex;justify-content:space-between;gap:12px}[hidden]{display:none!important}@media(max-width:650px){header{padding:18px}.small{display:none}main{padding:8px 18px}.welcome{padding:28px 24px 0;grid-template-columns:1fr;min-height:0}.welcome h1 br{display:none}.portrait img{max-width:205px}.portrait{width:100%}.speech{font-size:.85rem}.stamps{margin:18px 0}.lessons{grid-template-columns:1fr;gap:12px}.lesson{padding:20px;display:grid;grid-template-columns:1fr auto}.lesson .number,.lesson strong,.lesson p{grid-column:1}.lesson strong{margin:8px 0}.lesson .start{grid-column:2;grid-row:2;align-self:center;margin:0;font-size:.8rem}.practice{padding:22px 18px}footer{flex-direction:column}aside{gap:12px}aside img{width:100px;height:100px}.section-head{align-items:baseline}.section-head span{font-size:.8rem}}

.categories{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}.category{border:1px solid #cbd7e8;border-radius:24px;padding:10px 18px;background:white;color:#173551}.category.selected{background:#173551;border-color:#173551;color:white}.full-body img{max-width:245px;max-height:390px;object-fit:contain;border-radius:22px 22px 0 0}.full-body{padding-bottom:16px}.full-body .speech{margin-top:10px}.welcome{padding-top:25px}.stamp{max-width:100%}@media(max-width:650px){.full-body img{max-height:260px;width:auto;max-width:100%}.category{padding:10px 14px}.welcome{grid-template-columns:1fr}.section-head{flex-wrap:wrap}}

.language-control{display:flex;gap:8px;align-items:center;font-size:.85rem}.language-control select{font:inherit;background:white;color:#173551;border:1px solid #cbd7e8;padding:10px;border-radius:12px;max-width:180px}.grammar-note{font-size:.85rem;color:#58708c;line-height:1.8}.brand{flex-shrink:0}header{gap:16px;flex-wrap:wrap}.lesson strong,.word{overflow-wrap:anywhere}.lesson .start{overflow-wrap:anywhere}@media(max-width:650px){.language-control{width:100%;justify-content:space-between}.lesson{display:block}.lesson .start{margin-top:14px}.section-head{align-items:center}h1{font-size:1.8rem}}

.access-label{display:inline-block;font-size:.8rem;font-weight:700;border-radius:8px;padding:5px 9px;margin:4px 0 10px}.access-label.free{background:#eaf2ff;color:#2359a5}.access-label.premium{background:#fff1cf;color:#715010}dialog{border:0;border-radius:26px;padding:32px;max-width:560px;width:calc(100% - 32px);max-height:90vh;color:#173551;box-shadow:0 24px 90px #17355140}dialog::backdrop{background:#10243e99}dialog h2{font-size:1.7rem;margin:14px 0}.dialog-close{display:block;margin-left:auto}.plus-price{font-size:2rem;font-weight:bold;margin-top:24px}.price-note{padding:12px;background:#fff8df;border-radius:12px;font-size:.9rem}.plus-features{padding-left:22px;line-height:1.8}.plus-features li{padding:4px 0}.coming-soon{background:#eaf2ff;border-radius:12px;padding:14px;font-weight:bold}#plus-back{width:100%}.lesson{display:block}

/* Single-column lessons with a right-side action */
#lessons{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}.lesson{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:24px;row-gap:7px;width:100%;padding:22px 26px;text-align:left;align-items:center}.lesson .number{grid-column:1;grid-row:1}.lesson strong{grid-column:1;grid-row:2;margin:0;font-size:1.2rem}.lesson p{grid-column:1;grid-row:3;margin:0;line-height:1.6}.lesson .access-label{grid-column:2;grid-row:1;justify-self:center;margin:0}.lesson .start{grid-column:2;grid-row:2 / 4;justify-self:end;align-self:center;margin:0!important;background:#e33948;color:#fff;border-radius:12px;padding:13px 18px;min-width:164px;text-align:center;font-weight:700}.lesson:hover .start{background:#c72c3a}@media(max-width:650px){.lesson{padding:18px 15px;column-gap:12px}.lesson strong{font-size:1.05rem}.lesson p{font-size:.8rem}.lesson .start{min-width:0;max-width:125px;padding:12px 10px;font-size:.75rem}.lesson .access-label{font-size:.7rem}.lesson .number{font-size:.7rem}}

.audio-lesson .row-actions{grid-column:2;grid-row:2 / 4;display:flex;flex-direction:column;gap:8px;align-items:stretch}.audio-lesson .row-actions .start{min-width:164px;max-width:none;width:100%;border:0;font:inherit;font-size:.85rem;cursor:pointer}.row-sound{border:1px solid #bed2ea;background:#edf4ff;color:#245a9b;border-radius:12px;padding:11px 16px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}.row-sound:hover{background:#dbeaff}.row-sound:focus-visible{outline:3px solid #e33948;outline-offset:3px}@media(max-width:650px){.audio-lesson .row-actions .start{min-width:0;width:120px;padding:12px 10px;font-size:.75rem}.row-sound{font-size:.75rem;padding:10px}.audio-lesson .row-actions{gap:7px}}

.audio-lesson{grid-template-rows:auto auto auto auto}.audio-lesson .row-french{grid-column:1;grid-row:3;font-size:1.18rem;font-weight:700;color:#245a9b;overflow-wrap:anywhere;line-height:1.5}.audio-lesson p{grid-row:4}.audio-lesson .row-actions{grid-row:2 / 5}@media(max-width:650px){.audio-lesson .row-french{font-size:1rem}}

.color-details{grid-column:1 / -1;grid-row:5;margin-top:14px;border-top:1px solid #e0e7f1;padding-top:14px}.color-details summary{cursor:pointer;color:#245a9b;font-weight:700;padding:8px 0}.color-list{display:flex;flex-direction:column;gap:0;margin-top:10px}.color-word{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid #e6ecf4}.color-swatch{width:30px;height:30px;flex-shrink:0;border-radius:50%;border:1px solid #bcc8d8}.color-word>div{flex:1;min-width:0}.color-word strong{display:block!important;margin:0;font-size:1.1rem;color:#245a9b}.color-word div>span{display:block;color:#63758b;font-size:.85rem;margin-top:4px}.color-word .row-sound{flex-shrink:0}.color-details summary:focus-visible{outline:3px solid #245a9b;outline-offset:3px}