.study-mode-panel{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px}.study-mode-panel h2{grid-column:1/-1;margin:0;font-size:17px}.study-mode-button{min-height:112px;display:grid;justify-items:center;align-content:center;gap:4px;padding:12px 8px;border:2px solid;border-radius:18px;background:#fff;box-shadow:0 5px 0;font:inherit}.study-mode-button span{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;color:#fff;font-weight:800}.study-mode-button strong{font-size:17px}.study-mode-button small{font-size:11px;color:#667}.study-mode-button.words{border-color:#93d8df;box-shadow:0 5px #60bfc8;background:#ecfbfd}.study-mode-button.words span{background:#28b8c8}.study-mode-button.lesson{border-color:#f5d76a;box-shadow:0 5px #d9b82f;background:#fffbed}.study-mode-button.lesson span{background:#efc72e}.study-mode-button:active{transform:translateY(3px);box-shadow:0 2px}
.study-page-body{width:100%;max-width:100%;min-height:100%;box-sizing:border-box;padding:12px 18px 34px}.word-study-page .study-page-body{display:flex;flex-direction:column}.study-header{height:42px;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;margin-bottom:12px}.study-header a{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;color:#24343a;background:#ffffffc7;font-size:29px;line-height:1}.study-header h1{margin:0;text-align:center;font-size:20px}.study-loading{margin-top:80px;text-align:center;color:#64757a}.word-study-page{width:100%;max-width:100%;overflow-x:hidden;background:#fff;color:#111}
.word-study-page .study-header{height:34px;margin:0}.word-study-page .study-header a{width:32px;height:32px;border:1px solid #edf0ec;border-radius:50%;background:#fff;color:#777;font-size:25px;box-shadow:0 3px 8px #0000000d}.word-study-page .study-header h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.word-picker{order:4;display:grid;grid-template-columns:1fr 1fr;gap:5px 16px;margin-top:34px;padding:0}.word-picker:before{content:"Unit 1";grid-column:1/-1;margin-bottom:14px;color:#8d003a;text-align:center;font-size:32px;font-weight:800}.word-picker button{min-width:0;padding:7px 4px;border-radius:8px;background:transparent;color:#151515;text-align:left;font:inherit}.word-picker button.active{background:#fff6d9}.word-list-term{font-size:13px;font-weight:800}.word-list-term:after{content:" - ";font-weight:400}.word-list-meaning{display:inline;color:#333;font-size:12px;line-height:1.45}.word-switch{order:3}
.study-word-card{order:2;width:100%;min-width:0;min-height:520px;border:0;border-radius:0;background:#fff;box-shadow:none}.study-stepper{height:72px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;margin-top:-34px;padding:0 16px;background:#fff;color:#9a9a9a}.study-stepper span{width:50px;height:50px;display:grid;place-items:center;justify-self:center;border:0;border-radius:50%;background:transparent;font-size:20px;font-weight:500}.study-stepper span.active{color:#fff;background:#f4b928;font-weight:800}.study-word-content{position:relative;display:grid;justify-items:center;min-width:0;padding:42px 4px 20px;text-align:center}.accent-toggle{position:absolute;top:9px;right:6px;display:flex;gap:3px}.accent-toggle button{width:31px;height:27px;border-radius:8px;color:#999;background:#f7f8f6;font-weight:700}.accent-toggle button.active{color:#111;background:#fff;border:1px solid #e4b52d}.study-word{max-width:100%;margin-top:0;color:#050505;font-size:clamp(44px,15vw,64px);line-height:1.15;font-weight:600;letter-spacing:-2px;overflow-wrap:anywhere}.study-word .vowel{color:#25c98a}.study-word .consonant{color:#050505}.phonetic-row{display:flex;align-items:center;gap:12px;margin-top:54px;color:#111;font-size:20px}.word-speaker{width:38px;height:38px;border-radius:50%;background:#27d19a;color:#fff;font-size:15px;box-shadow:0 5px 14px #24c48b35}.part-of-speech{color:#333;font-size:.82em;font-weight:700}.word-meaning{min-height:30px;margin:31px 0 28px;color:#111;font-size:22px;font-weight:500}.word-illustration{display:none}.spelling-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.spelling-parts{width:100%;max-width:360px;display:flex;flex-wrap:wrap;justify-content:center;gap:13px 8px}.spelling-part{flex:1 1 54px;min-width:0;max-width:76px;min-height:82px;display:grid;grid-template-rows:1fr 1fr;overflow:hidden;padding:0;border:1px solid #f0f1ee;border-radius:8px;background:#fff;color:#d7a521;font:inherit;font-size:21px;font-weight:800;box-shadow:0 7px 0 #eceeea;cursor:pointer}.spelling-part:active:not(:disabled){transform:translateY(3px);box-shadow:0 4px 0 #eceeea}.spelling-part:focus-visible{outline:3px solid #25c98a;outline-offset:3px}.spelling-part:disabled{cursor:default}.spelling-letter,.spelling-phonetic{display:grid;place-items:center;min-width:0;padding:4px}.spelling-phonetic{border-top:1px solid #eceeea;color:#333;font-family:Georgia,"Times New Roman",serif;font-size:14px;font-style:italic;font-weight:400}.spelling-part:nth-child(even) .spelling-letter{color:#25c98a}.word-switch{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:8px}.word-switch button{height:42px;border:1px solid #e3b62c;border-radius:22px;background:#fff;color:#8f6a00;font-weight:800}.word-switch .next{border-color:#24c98b;color:#16855f}.word-switch button:disabled{opacity:.3}.word-switch span{color:#888;font-size:13px}
.lesson-study-page{background:linear-gradient(180deg,#fff8d9,#f7fbef 36%,#eaf8f7)}.lesson-heading{display:grid;gap:3px;margin:4px 4px 13px}.lesson-heading span{color:#6c766c;font-size:13px}.lesson-heading strong{font-size:20px}.lesson-card{height:calc(100vh - 270px);min-height:390px;overflow-y:auto;padding:22px 20px;border:1px solid #e3dbb7;border-radius:22px;background:#fffefa;box-shadow:0 12px 28px #7e70441a;color:#2c3633;font-family:Georgia,"Times New Roman",serif;font-size:21px;line-height:1.9;white-space:pre-wrap}.lesson-word{display:inline;border-radius:7px;padding:2px 1px;transition:background .15s,color .15s,box-shadow .15s}.lesson-word.current{color:#162521;background:#f6d93e;box-shadow:0 0 0 3px #f6d93e;font-weight:700}.lesson-progress{display:grid;gap:7px;margin:13px 3px 10px;color:#5c6964;font-size:12px}.lesson-progress>div{height:8px;overflow:hidden;border-radius:99px;background:#d8e5df}.lesson-progress i{display:block;width:0;height:100%;border-radius:99px;background:#39b9a9;transition:width .2s}.lesson-controls{display:grid;grid-template-columns:112px 1fr;gap:10px}.lesson-controls button{height:50px;border-radius:15px;font-weight:800}.lesson-restart{border:1px solid #cad8d2;background:#fff;color:#40534b}.lesson-play{background:#f3cf34;color:#312a0c;box-shadow:0 5px #c9a91f}.lesson-play:active{transform:translateY(3px);box-shadow:0 2px #c9a91f}
@media(max-width:412px){.study-page-body{padding-right:clamp(12px,4vw,18px);padding-left:clamp(12px,4vw,18px)}.study-mode-panel{gap:9px}.study-word-card{min-height:550px}.study-stepper{padding:0}.study-stepper span{width:clamp(42px,12vw,50px);height:clamp(42px,12vw,50px)}.study-word-content{padding-right:0;padding-left:0}.study-word{font-size:clamp(38px,14vw,58px)}.phonetic-row{margin-top:clamp(36px,11vw,54px)}.word-picker{column-gap:10px}.lesson-card{font-size:19px}}
.lesson-play:disabled{opacity:.55;box-shadow:none}
.word-study-page .study-header{display:none}.word-study-page .study-word-card{min-height:0}.word-study-page .study-stepper{margin-top:0}.word-study-page .study-word-content{padding-bottom:clamp(8px,2.5vw,14px)}.word-study-page .word-switch{margin-top:clamp(8px,2.5vw,14px)}