/* Production illustrated theme. Application handlers and data are unchanged. */
body{background:#e5f4ef url('meadow.jpg') center bottom/100% 100vh fixed no-repeat;color:#243152;min-height:100vh;padding:24px max(16px,calc((100vw - 1200px)/2)) 36px;box-sizing:border-box}
.mode-tabs{margin:12px auto 10px;gap:10px;flex-wrap:wrap}.mode-tab{min-height:44px;border:2px solid #d4b6f3;background:#fff8ec;color:#513575;border-radius:18px;font-weight:700}.mode-tab.active{background:linear-gradient(#a879e1,#7238b9);color:#fff;box-shadow:inset 0 2px 1px #dcc1f9,0 3px 0 #512584}
.controls-bar{background:linear-gradient(#fffef2,#fff2d5);border:2px solid #e2c998;border-radius:20px;padding:10px 14px;gap:12px;box-shadow:0 4px 7px #75462322}
.controls-bar button,.controls-bar select{min-height:44px}.filter-btn{background:linear-gradient(#56adf9,#2374ce);border:2px solid #195b9e;box-shadow:inset 0 2px 1px #bcdeff,0 3px 0 #194c87;border-radius:15px}.sort-select{background:#fffdf5;border:2px solid #e6bd40;border-radius:12px;color:#283752}.view-btn{min-width:44px;border-radius:50%;border:2px solid #e7ba43;background:#fff9da}.view-btn.active{background:linear-gradient(#ffda60,#ffb537);color:#462b15;box-shadow:inset 0 2px 0 #fff3b0,0 3px 0 #bf7f26}
.mode-btn{background:linear-gradient(#eeeef1,#bbbcc7);color:#414358;border:2px solid #a1a1ac;box-shadow:inset 0 2px 0 white,0 3px 0 #85838c}.hint-global-btn{background:linear-gradient(#fff1a0,#ffd24b);color:#624019;border:2px solid #dca62c;box-shadow:inset 0 2px 0 #fffbd8,0 3px 0 #bd8a28}.lists-btn{background:linear-gradient(#b595e1,#7d52b7);color:white}.caps-switch{flex-shrink:0}
.guided-bar{max-width:none;justify-content:flex-end;background:linear-gradient(#ede2fd,#d9c6f1);border:2px solid #b89bd9;padding:8px 14px;border-radius:15px;box-shadow:inset 0 2px 0 #fcf8ff}.guided-bar-text{flex:1;text-align:center;color:#493365;font-size:17px}.guided-bar-btn{width:44px;height:44px;flex-shrink:0;background:linear-gradient(#ad80df,#743db3);border:2px solid #633195;box-shadow:inset 0 2px 0 #d5b7f3,0 2px 0 #54267e}
.nav-row{gap:20px;padding:12px 0 2px}.nav-row .big{font-size:22px;padding:9px 30px;border-radius:18px;min-height:48px;border:2px solid #c67d25}.back-btn{background:linear-gradient(#ffc76c,#f6a039);box-shadow:inset 0 2px 0 #ffe8b0,0 4px 0 #c68029}.nav-row .next-btn{border-color:#15916a;background:linear-gradient(#5bdba1,#20b580);box-shadow:inset 0 2px 0 #a4f4cc,0 4px 0 #178b60}
.card-area{gap:22px;padding:18px 0 24px;justify-items:stretch}.view-1{grid-template-columns:minmax(0,800px)}.view-2,.view-4{grid-template-columns:repeat(2,minmax(0,1fr))}.flashcard,.view-4 .flashcard{max-width:none;border-width:7px;border-radius:26px;aspect-ratio:2.2;min-height:220px;background:linear-gradient(#fff,#fffefa);box-shadow:0 5px 0 #26375515,0 12px 20px #24412620}.flashcard:hover{transform:translateY(-2px)}.flashcard .word{font-family:'Nunito','Andika',sans-serif;font-weight:900;color:#202e50;letter-spacing:0}.flashcard .info{font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;color:#728099;left:16px;bottom:14px;max-width:calc(100% - 85px);line-height:1.3}.flashcard .star,.flashcard .x-btn,.flashcard .speak-btn{width:44px;height:44px;right:10px;font-size:25px}.flashcard .star{top:8px;color:#16833c;text-shadow:none;background:#e3f9eb;border:2px solid #16833c;border-radius:50%;line-height:1;opacity:1;filter:none;appearance:none;-webkit-appearance:none}.flashcard .x-btn{top:64px;color:#c52335;text-shadow:none;background:#ffe8ea;border:2px solid #c52335;border-radius:50%;line-height:1;opacity:1;filter:none;appearance:none;-webkit-appearance:none}.flashcard .star.mastered{color:#fff;background:#138a42;border-color:#0b672e;box-shadow:0 0 0 2px #bce9cb}.flashcard .x-btn.not-mastered{color:#fff;background:#c52335;border-color:#a70f23;box-shadow:0 0 0 2px #ffd0d5}.flashcard .speak-btn{bottom:7px}.flashcard.border-0{border-color:#4095e6}.flashcard.border-1{border-color:#e35360}.flashcard.border-2{border-color:#38bd65}.flashcard.border-3{border-color:#f4cc30}
@media(hover:none){.flashcard .star,.flashcard .x-btn{opacity:1;filter:none;-webkit-text-fill-color:currentColor}.flashcard .star{color:#137b38}.flashcard .x-btn{color:#bb1e30}}
button:focus-visible,select:focus-visible{outline:3px solid #242a6a;outline-offset:3px}.bg-bees{display:none!important}
@media(max-width:900px){body{padding:18px 14px 24px;background-size:auto 100vh}.topbar{padding-left:104px;padding-right:108px;min-height:78px}.topbar .title-bee:first-child{width:104px;height:110px}.topbar h1{font-size:36px}.stats{font-size:14px;gap:12px}.stats span+span{padding-left:12px}.controls-bar{gap:9px}.flashcard,.view-4 .flashcard{min-height:210px;aspect-ratio:1.7}.card-area{gap:16px}}
@media(max-width:600px){body{padding:12px 10px 24px}.topbar{padding:12px 52px 6px 70px;min-height:88px;border-radius:20px 20px 0 0}.topbar h1{font-size:28px;-webkit-text-stroke:1px #352151}.topbar .title-bee:first-child{width:76px;height:86px;top:4px;left:-3px}.help-corner-btn{right:3px;top:25px;transform:translateY(-50%)}.hive-corner-btn{right:3px;top:71px}.stats{font-size:12px;gap:6px;padding:8px 6px 12px;flex-wrap:wrap}.stats span+span{padding-left:6px}.mode-tabs{gap:5px}.mode-tab{font-size:14px;padding:8px 12px}.controls-bar{gap:8px;padding:10px 8px}.filter-btn{font-size:15px;padding:9px 12px}.sort-select{max-width:160px}.guided-bar{padding:8px;gap:6px}.guided-bar-text{font-size:14px}.nav-row .big{font-size:19px;padding:8px 24px}.view-1,.view-2,.view-3,.view-4{grid-template-columns:minmax(0,1fr)}.flashcard,.view-4 .flashcard{min-height:210px;aspect-ratio:1.65;border-width:6px}.flashcard .info{font-size:11px;left:10px}.filter-panel{max-width:calc(100vw - 40px);min-width:0}.card-area{padding-top:16px}.stats .info-btn{font-size:12px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:600px){.topbar .title-bee:first-child{height:80px;top:2px}.topbar h1{font-size:25px}.stats span{white-space:nowrap}}

/* One compact glossy bar: brand, real statistics, then Hive and Help. */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:0;position:relative;z-index:2;min-height:105px;padding:10px 15px 10px 0;border:3px solid #573181;border-radius:28px;background:linear-gradient(180deg,#a57add 0%,#8d5ecb 12%,#7947b7 48%,#65369f 51%,#623398 100%);box-shadow:inset 0 3px 1px #d4b2f1,inset 0 -3px 1px #51277f,0 5px 12px #42206635;overflow:visible}
.brand{display:flex;align-items:center;flex:1 1 auto;min-width:0;padding-left:112px;position:relative;align-self:stretch}
.topbar .title-bee:first-child{position:absolute;left:-7px;top:50%;transform:translateY(-50%);width:124px;height:112px;object-fit:contain;animation:none;filter:drop-shadow(0 5px 2px #30183b33);pointer-events:none}
.topbar h1{font-family:'Baloo 2','Fredoka',sans-serif;font-weight:800;font-size:clamp(30px,3.5vw,48px);line-height:1.05;letter-spacing:-1.6px;color:#ffe060;white-space:nowrap;text-align:left;-webkit-text-stroke:3px #32244c;paint-order:stroke fill;text-shadow:0 3px 0 #302347,0 5px 1px #36214955}
.topbar .stats{display:flex;flex:0 0 auto;align-items:center;flex-wrap:nowrap;gap:0;background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:0;color:#fff7e0;font-family:'Fredoka',sans-serif;font-size:14px;position:static}
.header-stat{display:flex;align-items:center;position:relative;gap:6px;min-height:62px;padding:0 11px;border-left:1px solid #dcc0f295;box-shadow:-1px 0 #45276930}
.topbar .stats span{white-space:normal}.topbar .stats span+span{border:0;padding-left:0}
.stat-icon{display:block;width:38px;height:44px;flex:none;filter:drop-shadow(0 2px 1px #39225580)}
.stat-icon svg{width:100%;height:100%}.stat-copy{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.stat-label{font-size:14px;line-height:1.1;white-space:nowrap!important;font-weight:500;text-shadow:0 1px #44266f}
.topbar .stats b{font-family:'Baloo 2','Fredoka',sans-serif;font-size:32px;line-height:1;color:#fffbea;font-weight:800;text-shadow:0 2px #47266c}
.topbar .info-btn{align-self:flex-end;flex:none;width:24px;height:24px;margin:0 -6px 1px -5px;padding:0;border:1px solid #ebd6ff90;border-radius:50%;color:#fff2d7;font:700 13px Georgia,serif;background:#502b8580}
.header-actions{display:flex;align-items:center;gap:9px;padding-left:11px}
.topbar .help-corner-btn{display:flex;align-items:center;justify-content:center;position:static;inset:auto;transform:none;flex:none;width:50px;height:50px;min-width:44px;min-height:44px;padding:4px;border:3px solid #fff4df;background:linear-gradient(#b188df,#7644b8);border-radius:50%;box-shadow:inset 0 2px 1px #dbc0f3,0 3px 0 #46266e;cursor:pointer}
.topbar .hive-corner-btn{background:linear-gradient(#ffe486,#e8ac31);box-shadow:inset 0 2px 1px #fff5c4,0 3px 0 #664223}
.help-corner-btn svg{width:100%;height:100%;pointer-events:none}.topbar .help-corner-btn:hover{transform:scale(1.06)}.topbar .help-corner-btn:active{transform:translateY(2px)}
/* Visible state feedback must win over the theme's base button colors. */
.mode-btn.on{background:linear-gradient(#fa6e9e,#d72868);border-color:#a91951;color:#fff;box-shadow:inset 0 2px 0 #ffaaca,0 3px 0 #9e1846}
.hint-global-btn.active{background:linear-gradient(#ed6872,#c93446);border-color:#a92839;color:#fff;box-shadow:inset 0 2px 0 #ffb9be,0 3px 0 #9d2734}
.guided-bar-btn:disabled{background:#d1d5db;border-color:#abb0be;box-shadow:none;color:#5b6171}
#infoPopup{width:min(320px,calc(100vw - 24px));max-width:none}
/* Bound fixed overlays and popovers without changing their visibility logic. */
.course-topbar{flex-shrink:0;gap:8px}.course-topbar .logo{min-width:0}
#courseClose,#rhymeClose,#helpClose{flex-shrink:0;min-width:44px;min-height:44px}
#courseContent,#rhymeContent{min-height:0;min-width:0;overflow:auto}
.overlay-panel{min-width:0;overflow:auto}.overlay-close{min-width:44px;min-height:44px}
@media(min-width:901px) and (max-width:1199px){.brand{padding-left:94px}.topbar .title-bee:first-child{width:108px;height:108px}.topbar h1{font-size:35px;letter-spacing:-1.4px}.header-stat{padding:0 7px;gap:4px}.stat-icon{width:30px}.stat-label{font-size:12px}.header-actions{gap:7px;padding-left:7px}.topbar .help-corner-btn{width:44px;height:44px}.topbar{padding-right:10px}}
@media(max-width:1000px){.topbar{flex-wrap:wrap;padding:12px 14px;gap:12px 0}.brand{flex:1 0 calc(100% - 114px);min-height:62px;padding-left:102px;order:0}.topbar h1{font-size:42px}.topbar .title-bee:first-child{width:116px;height:102px;left:-12px}.header-actions{order:1;padding-left:8px}.topbar .stats{order:2;flex-basis:100%;justify-content:center;border-top:1px solid #dcc0f26b;padding-top:10px}.header-stat{flex:1 1 0;justify-content:center;min-height:52px;padding:0 10px}.header-stat:first-child{border-left:0;box-shadow:none}.stat-label{font-size:14px}.stat-icon{width:38px}.topbar .stats b{font-size:30px}}
@media(max-width:600px){.topbar{padding:10px 7px;border-radius:24px;gap:9px 0;min-height:0}.brand{flex-basis:calc(100% - 96px);padding-left:62px;min-height:73px}.topbar .title-bee:first-child{width:78px;height:90px;left:-10px;top:50%}.topbar h1{font-size:27px;line-height:.98;letter-spacing:-.7px;white-space:normal;-webkit-text-stroke:2px #32244c;max-width:175px}.header-actions{gap:6px;padding-left:4px}.topbar .help-corner-btn{width:44px;height:44px;padding:4px}.topbar .stats{padding-top:9px}.header-stat{gap:4px;padding:0 5px;min-height:60px;align-items:center;flex-wrap:wrap;align-content:center}.stat-icon{width:25px;height:30px}.stat-label{font-size:11px}.topbar .stats b{font-size:26px}.topbar .info-btn{width:24px;height:24px;margin:0;align-self:center;font-size:12px}.header-stat:not(.words-stat) .stat-icon{display:none}.stat-copy{gap:4px}.filter-panel{position:fixed;top:235px;left:12px;right:12px;width:auto;max-width:none;max-height:calc(100dvh - 250px)}.filter-actions{position:sticky;bottom:-16px;background:#fff;padding:10px 0 4px;flex-wrap:wrap}.overlay{padding:10px}.overlay-panel{padding:18px 12px;max-height:92dvh}.overlay-panel h2{padding:0 36px;font-size:1.4rem}.lists-cols{flex-direction:column}.list-col{min-width:0}.word-row{flex-wrap:wrap;gap:4px}.course-panel{width:calc(100vw - 16px);height:94dvh;max-height:94dvh}.course-topbar{padding:8px}.course-topbar .logo{font-size:.92rem}#courseContent,#rhymeContent{padding:12px}.help-tabs{padding:8px 8px 0;gap:5px}.help-tab{padding:7px 10px;font-size:.85rem}.help-body{padding:12px}.help-table{font-size:.8rem}.help-table th,.help-table td{padding:4px;overflow-wrap:anywhere}.rhyme-scope{flex-wrap:wrap}.rhyme-scope-select{max-width:100%}.write-stack{width:100%;max-width:100%}}
@media(max-width:350px){.brand{padding-left:50px}.topbar .title-bee:first-child{width:66px;height:83px}.topbar h1{font-size:23px}.header-stat{padding:0 3px;gap:2px}.stat-label{font-size:10px}.stat-icon{width:22px}.topbar .info-btn{width:24px;height:24px}.header-actions{gap:4px}.topbar .help-corner-btn{width:44px;height:44px}.help-tab{padding:6px 8px}.flashcard .info{max-width:calc(100% - 65px)}}
/* Explicit columns keep header actions beside the brand at intermediate widths. */
@media(max-width:1000px){.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto}.brand{grid-column:1;grid-row:1;min-width:0}.header-actions{grid-column:2;grid-row:1}.topbar .stats{grid-column:1 / -1;grid-row:2}.topbar h1{font-size:clamp(27px,5vw,42px)}}
@media(max-width:600px){.topbar h1{font-size:27px}.header-actions{flex-direction:column;gap:6px}.brand{min-height:84px;padding-left:68px}.topbar .title-bee:first-child{width:83px;height:94px}.topbar .stats{width:100%}.header-stat{min-width:0}.filter-panel{top:220px;max-height:calc(100dvh - 235px)}}
@media(max-width:350px){.topbar h1{font-size:25px}.brand{padding-left:54px}.topbar .title-bee:first-child{width:70px;height:84px}}
/* Compact hint/capitalization icon buttons grouped after My Words. */
.controls-bar .icon-control{width:46px;height:46px;min-width:46px;min-height:46px;padding:9px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 46px;border-radius:50%;cursor:pointer;transition:transform .12s,box-shadow .12s,background .15s,color .15s}
.controls-bar .icon-control svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.controls-bar .hint-global-btn.icon-control{position:relative;background:linear-gradient(180deg,#FFF694 0%,#FFD945 52%,#F8B91D 100%);border:3px solid #D99708;color:#6D4600;box-shadow:0 4px 0 rgba(172,111,0,.30),0 7px 12px rgba(100,70,0,.14);transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease,filter .15s ease;-webkit-tap-highlight-color:transparent}
.controls-bar .hint-global-btn.icon-control.active{background:linear-gradient(180deg,#DFF4FF 0%,#8ACBFF 52%,#48A8F4 100%);border-color:#1674CE;box-shadow:0 4px 0 rgba(20,95,168,.30),0 7px 12px rgba(25,85,145,.16)}
.controls-bar .hint-global-btn.icon-control svg .hint-bulb{fill:#FFD83D;stroke:#6D4600;stroke-width:4;stroke-linejoin:round}
.controls-bar .hint-global-btn.icon-control svg .hint-base{fill:none;stroke:#6D4600;stroke-width:4;stroke-linecap:round}
.controls-bar .hint-global-btn.icon-control svg .hint-rays{opacity:0;transition:opacity .15s ease,filter .15s ease}
.controls-bar .hint-global-btn.icon-control svg .hint-rays path{fill:none;stroke:#FFB914;stroke-width:5;stroke-linecap:round}
.controls-bar .hint-global-btn.icon-control.active svg .hint-rays{opacity:1;filter:drop-shadow(0 0 2px rgba(255,202,41,.55))}
.controls-bar .hint-global-btn.icon-control.active svg .hint-bulb{fill:#FFE14C}
.controls-bar .caps-switch.icon-control{position:relative;left:auto;top:auto;background:linear-gradient(#e6e8ef,#b9bfcd);color:#4e576a;border:2px solid #9299a7;box-shadow:inset 0 2px 0 #fff,0 3px 0 #858b98}
.controls-bar .caps-switch.icon-control.on{background:linear-gradient(#c8f5d4,#69d889);color:#075c2a;border-color:#268f4a;box-shadow:inset 0 2px 0 #effff2,0 3px 0 #268348}
.controls-bar .caps-switch.icon-control svg{width:29px;height:25px}
.controls-bar .icon-control:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff,0 1px 0 #795724}
.controls-bar .icon-control:focus-visible{outline:3px solid #28245b;outline-offset:3px}
@media(max-width:600px){.controls-bar .icon-control{width:46px;height:46px;min-width:46px;flex-basis:46px}}
/* Reference-matched bulb and Aa icon art: gold Hint, lavender Caps-off, green Caps-on. */
.controls-bar .hint-global-btn.icon-control::before,.controls-bar .caps-switch.icon-control::before{content:"";position:absolute;top:4px;left:7px;right:7px;height:13px;border-radius:50%;background:#ffffff66;pointer-events:none}
.controls-bar .hint-global-btn.icon-control svg{width:34px;height:34px;overflow:visible}
.controls-bar .caps-switch.icon-control{background:linear-gradient(180deg,#f0eaff 0%,#d5c5ff 52%,#b695ff 100%);border:3px solid #7650d8;color:#43288f;box-shadow:0 4px 0 #5837ae,0 6px 10px #14204622,inset 0 2px 0 #fff}
.controls-bar .caps-switch.icon-control svg{width:36px;height:36px;overflow:visible}
.controls-bar .caps-switch.icon-control svg text{fill:currentColor;stroke:none;font-family:Nunito,'Arial Rounded MT Bold',Arial,sans-serif}
.controls-bar .caps-switch.icon-control svg .capital-a{font-size:35px;font-weight:800}
.controls-bar .caps-switch.icon-control svg .lower-a{font-size:27px;font-weight:800}
.controls-bar .caps-switch.icon-control.on{background:linear-gradient(180deg,#baf6d3 0%,#6fe0a1 55%,#39bf78 100%);border-color:#159354;color:#075f37;box-shadow:0 4px 0 #117344,0 6px 10px #14204622,inset 0 2px 0 #effff2}
.controls-bar .hide-mastered-btn.icon-control{position:relative;background:linear-gradient(180deg,#d9efff 0%,#8bc7ff 55%,#5da9e8 100%);border:3px solid #2f7fc7;color:#123a63;box-shadow:0 4px 0 rgba(27,92,148,.28),0 7px 12px rgba(24,62,100,.15);transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease}
.controls-bar .hide-mastered-btn.icon-control::before{content:"";position:absolute;top:4px;left:7px;right:7px;height:13px;border-radius:50%;background:#ffffff66;pointer-events:none}
.controls-bar .hide-mastered-btn.icon-control svg{width:32px;height:32px;overflow:visible}
.controls-bar .hide-mastered-btn.icon-control svg .hm-eye,.controls-bar .hide-mastered-btn.icon-control svg .hm-pupil{fill:none;stroke:#123a63;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.controls-bar .hide-mastered-btn.icon-control svg .hm-rays{fill:none;stroke:#ffca3a;stroke-width:4.5;stroke-linecap:round}
.controls-bar .hide-mastered-btn.icon-control svg .hm-slash{display:none;fill:none;stroke:#e03131;stroke-width:6;stroke-linecap:round}
.controls-bar .hide-mastered-btn.icon-control.active{background:linear-gradient(180deg,#c8f9dc 0%,#78e4a6 55%,#43c47d 100%);border-color:#159354;color:#0a4d2c;box-shadow:0 4px 0 rgba(16,127,72,.28),0 7px 12px rgba(20,100,62,.16)}
.controls-bar .hide-mastered-btn.icon-control.active svg .hm-eye,.controls-bar .hide-mastered-btn.icon-control.active svg .hm-pupil{stroke:#0a4d2c}
.controls-bar .hide-mastered-btn.icon-control.active svg .hm-rays{display:none}
.controls-bar .hide-mastered-btn.icon-control.active svg .hm-slash{display:block}
.controls-bar .icon-control:hover{transform:translateY(-2px)}
.controls-bar .icon-control:active{transform:translateY(2px);box-shadow:0 2px 0 #795724}
@media(max-width:600px){.controls-bar .icon-control{width:52px;height:52px;min-width:52px;min-height:52px;flex-basis:52px}.controls-bar .hint-global-btn.icon-control svg{width:30px;height:30px}.controls-bar .caps-switch.icon-control svg{width:32px;height:32px}.controls-bar .hide-mastered-btn.icon-control svg{width:30px;height:30px}}
/* My Words shares the exact pill/button finish of the neighboring mode tabs. */
.lists-mode-tab{font:inherit;font-weight:800;letter-spacing:inherit}

/* Compact cream progress cards for guided Words and Rhyme navigation. */
.mode-tabs{width:max-content;max-width:100%;margin-left:auto;margin-right:auto}
.lesson-progress-card{width:var(--mode-tabs-width,min(100%,980px));max-width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:10px auto 12px;padding:10px 14px;background:linear-gradient(180deg,#fffdf6 0%,#fff7e2 100%);border:2px solid #e6c46d;border-radius:16px;box-shadow:0 3px 0 #a0711a14,0 5px 12px #232d5014;position:relative;z-index:1}
.lesson-progress-content{flex:1 1 auto;min-width:0}.lesson-heading-row{display:flex;align-items:center;gap:9px;min-width:0}.lesson-target-icon{flex:0 0 36px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1}.lesson-text{min-width:0}.lesson-step-line{margin-bottom:1px;font:800 12px/1.15 Nunito,Arial,sans-serif;color:#563c2b}.lesson-title{overflow:hidden;color:#12275a;font:900 clamp(16px,1.7vw,22px)/1.1 Nunito,Arial,sans-serif;white-space:nowrap;text-overflow:ellipsis}.lesson-progress-row{display:flex;align-items:center;gap:8px;margin:7px 0 0 45px}.lesson-progress-track{position:relative;flex:1;min-width:40px;height:11px;overflow:hidden;background:#d8dce9;border:1px solid #aaaec0;border-radius:999px;box-shadow:inset 0 1px 3px #1c234629}.lesson-progress-fill{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#872dff,#6815ef 55%,#8b25ff);box-shadow:inset 0 1px 2px #ffffff59;transition:width .3s ease}.lesson-progress-percent{flex:0 0 34px;text-align:right;color:#14275b;font:900 12px Nunito,Arial,sans-serif}.rhyme-bar-cup{flex:0 0 auto;font-size:18px}.lesson-navigation{display:flex;flex:0 0 auto;align-items:center;gap:8px}.lesson-nav-button{width:42px;height:42px;flex:0 0 42px;padding:0;display:flex;align-items:center;justify-content:center;border:2px solid #6831bf;border-radius:50%;color:#fff;font:900 27px/1 Arial,sans-serif;background:linear-gradient(180deg,#a126ff,#7711f5 58%,#6510de);box-shadow:0 3px 0 #5120a6,0 5px 9px #30216433;cursor:pointer;transition:transform .15s,filter .15s}.lesson-nav-button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08)}.lesson-nav-button:active:not(:disabled){transform:translateY(1px)}.lesson-nav-button:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.35)}.lesson-nav-button:focus-visible{outline:3px solid #6d59ff4d;outline-offset:2px}
.rhyme-progress-card .lesson-title{color:#0f514a}.rhyme-progress-card .lesson-progress-fill{background:linear-gradient(90deg,#19bba7,#087b71)}.rhyme-progress-card .lesson-nav-button{border-color:#087b71;background:linear-gradient(#26cbbb,#109b91 58%,#087b71);box-shadow:0 3px 0 #07655d,0 5px 9px #3021642a}.rhyme-progress-card .lesson-nav-button:disabled{background:#aab2bd;border-color:#929aa6;box-shadow:0 2px 0 #818895}
.rhyme-progress-card .lesson-nav-button{border-color:#6831bf;background:linear-gradient(180deg,#a126ff,#7711f5 58%,#6510de);box-shadow:0 3px 0 #5120a6,0 5px 9px #30216433}
.lesson-progress-card .lesson-step-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-row{margin-top:14px}
@media(max-width:600px){.mode-tabs{width:100%}.lesson-progress-card{width:100%;gap:8px;margin:8px auto 12px;padding:9px 10px;border-radius:14px}.lesson-heading-row{gap:6px}.lesson-target-icon{flex-basis:30px;width:30px;height:30px;font-size:24px}.lesson-step-line{font-size:11px}.lesson-title{font-size:16px}.lesson-progress-row{margin:6px 0 0 36px;gap:5px}.lesson-progress-track{height:9px}.lesson-progress-percent{flex-basis:29px;font-size:11px}.lesson-navigation{gap:6px}.lesson-nav-button{width:38px;height:38px;flex-basis:38px;font-size:24px}.nav-row{margin-top:16px;gap:16px}}
@media(max-width:360px){.lesson-progress-card{gap:5px;padding:8px}.lesson-target-icon{flex-basis:26px;width:26px;font-size:21px}.lesson-progress-row{margin-left:31px}.lesson-title{font-size:14px}.lesson-nav-button{width:36px;height:36px;flex-basis:36px}}