/* 88BB Learning Human Voice Follow Guide v2.0 */
.learning-app{width:min(calc(100% - 28px),1440px);max-width:1440px;margin-left:auto;margin-right:auto;box-sizing:border-box}
.learning-stat-row{align-items:center}
.learning-progress-card{flex:1 1 260px;min-width:240px;padding:12px 15px;border:1px solid rgba(126,245,229,.2);border-radius:18px;background:rgba(0,0,0,.24)}
.learning-progress-card>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.learning-progress-card strong{font-size:25px;color:#7ef5e5}.learning-progress-card span{color:#b8c2d3;font-size:13px}
.learning-progress-track,.cat-progress{display:block;height:7px;margin-top:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.learning-progress-track span,.cat-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#00d28f,#7ef5e5,#f6d66c)}
.learning-category{min-height:230px;display:flex;flex-direction:column}
.learning-category .cat-icon{margin-bottom:20px}.learning-category small{flex:1}
.learning-category em{display:block;margin-top:8px;color:#aeb7c7;font-size:12px;font-style:normal;font-weight:800}
.lesson-row.active{border-color:rgba(126,245,229,.62);box-shadow:0 0 0 1px rgba(126,245,229,.14),0 16px 40px rgba(0,0,0,.26)}
.lesson-row.done .lesson-check{background:#00d28f;color:#05130e;border-color:#00d28f}
.mark-btn.is-done{background:rgba(0,210,143,.16);border-color:rgba(0,210,143,.5);color:#8fffd5}
.lesson-video{margin:0 0 18px}
.lesson-diagram-section{margin:0 0 20px}
.lesson-diagram-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 9px}
.lesson-diagram-heading span{font-size:16px;font-weight:900;color:#fff}.lesson-diagram-heading small{font-size:12px;color:#8f9caf}
.lesson-diagram-grid,.lesson-diagram-grid.single{display:grid;grid-template-columns:minmax(0,860px);gap:12px}
.lesson-visual{margin:0;padding:7px;border:1px solid rgba(126,245,229,.18);border-radius:16px;background:linear-gradient(145deg,rgba(5,10,22,.96),rgba(18,7,35,.92));overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.2)}
.lesson-visual img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:11px;background:#050713;cursor:zoom-in}.lesson-visual img:focus-visible{outline:2px solid #7ef5e5;outline-offset:3px}
.lesson-visual figcaption{display:grid;gap:3px;padding:9px 7px 4px;color:#aeb8ca;font-size:12px;line-height:1.45;text-align:left}.lesson-visual figcaption strong{font-size:14px;color:#f4f7fb}.lesson-visual figcaption span{display:block}.lesson-visual figcaption em{font-size:11px;color:#7ef5e5;font-style:normal}
.diagram-dialog{width:min(96vw,1280px);max-width:none;padding:44px 14px 14px;border:1px solid rgba(126,245,229,.35);border-radius:18px;background:#050914;color:#fff;box-shadow:0 28px 100px rgba(0,0,0,.72)}.diagram-dialog::backdrop{background:rgba(0,0,0,.88);backdrop-filter:blur(5px)}.diagram-dialog img{display:block;width:100%;height:auto;max-height:82vh;object-fit:contain;border-radius:11px;background:#050713}.diagram-dialog p{margin:10px 0 0;text-align:center;color:#c5cfde;font-size:14px}.diagram-dialog-close{position:absolute;right:12px;top:8px;width:34px;height:34px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:23px;line-height:1;cursor:pointer}
.video-poster{position:relative;width:100%;aspect-ratio:16/9;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:22px;overflow:hidden;background:#07090e;color:#fff;cursor:pointer;display:block;box-shadow:0 18px 46px rgba(0,0,0,.28)}
.video-poster img{width:100%;height:100%;object-fit:cover;display:block;opacity:.78;transition:transform .25s ease,opacity .25s ease}
.video-poster:hover img{transform:scale(1.02);opacity:.9}
.video-poster:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.82))}
.video-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:52px;border-radius:16px;background:#ff0033;color:#fff;display:grid;place-items:center;font-size:25px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.video-poster strong{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;text-align:left;font-size:16px}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.1)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.voice-sentence{border-radius:5px;padding:1px 2px;margin:-1px;transition:background-color .12s,color .12s,box-shadow .12s}
.voice-sentence.voice-current{background:#ffd84d;color:#19130a;box-shadow:0 0 0 2px rgba(255,216,77,.18)}
.voice-sentence.voice-current .voice-word-current{background:#fff3a8;color:#0f0c05;border-radius:4px;box-shadow:0 0 0 2px #fff3a8}
.voice-word,.voice-space{white-space:pre-wrap}
.lesson-navigation{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.lesson-navigation button{min-height:70px;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.045);color:#fff;text-align:left;cursor:pointer;font-weight:900}
.lesson-navigation button:last-child{text-align:right}.lesson-navigation button:hover{border-color:rgba(126,245,229,.42);background:rgba(126,245,229,.07)}
.lesson-navigation small{display:block;margin-top:5px;color:#9da8ba;font-weight:600;line-height:1.35}
/* v3.1.1 compact reading scale: no oversized H1-style typography. */
.learning-top h2{font-size:20px}.learning-hero{padding:19px;border-radius:22px}.learning-hero-title{font-size:clamp(28px,4vw,44px);line-height:1.05}.learning-hero p{font-size:15px;line-height:1.6}.learning-visual{min-height:180px}.learning-visual strong{font-size:54px}
.learning-section-title h3{font-size:22px}.learning-category{min-height:176px;border-radius:20px;padding:15px}.learning-category .cat-icon{font-size:40px;margin-bottom:14px}.learning-category strong{font-size:17px}.learning-category small{font-size:12px}.lesson-row{border-radius:18px;padding:14px}.lesson-row strong{font-size:16px}.lesson-row small{margin-top:5px;font-size:12px}.lesson-check{font-size:22px}
.reader-panel{border-radius:22px}.reader-hero{min-height:175px;padding:22px}.reader-hero h2{font-size:clamp(23px,3vw,34px);line-height:1.15}.reader-hero p{font-size:14px;line-height:1.55;margin-bottom:0}.reader-body{padding:20px}.guide-box,.voice-guide-player{border-radius:18px;padding:15px}.guide-text{font-size:16px;line-height:1.75}.voice-guide-head h3{font-size:20px}.voice-main-play{width:72px;height:72px;flex-basis:72px}.lesson-content{font-size:16.5px;line-height:1.75}.lesson-content h2{font-size:22px;margin:27px 0 10px}.lesson-content h3{font-size:18px;margin:24px 0 9px}.lesson-content h4{font-size:16.5px;margin:22px 0 8px}.lesson-content p,.lesson-content ul{margin-bottom:14px}
@media(max-width:680px){.learning-app{width:100%}.learning-progress-card{flex-basis:100%}.video-play{width:60px;height:44px}.lesson-diagram-grid,.lesson-diagram-grid.single{grid-template-columns:1fr}.lesson-diagram-heading{align-items:flex-start;flex-direction:column;gap:2px}.lesson-visual{padding:5px;border-radius:13px}.lesson-visual img{border-radius:9px}.lesson-navigation{grid-template-columns:1fr}.lesson-navigation span{display:none}.lesson-navigation button,.lesson-navigation button:last-child{text-align:left}.reader-hero{min-height:150px;padding:18px}.reader-body{padding:15px}.lesson-content{font-size:15.5px}.lesson-content h2{font-size:20px}.lesson-content h3{font-size:17px}}
@media(prefers-reduced-motion:reduce){.voice-sentence{scroll-margin-top:100px}.video-poster img{transition:none}}

/* 88BB Learning Mobile Reader + Compact Voice v3.2.0 */
.learning-mobile-nav{display:none}
.voice-guide-player.voice-guide-compact{padding:9px 11px;margin-bottom:12px;border-radius:14px;background:linear-gradient(145deg,rgba(0,210,143,.07),rgba(56,167,255,.045));box-shadow:none}
.voice-inline-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:42px}
.voice-guide-compact .voice-main-play{width:auto;height:40px;min-width:126px;flex:0 0 auto;border-radius:12px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;box-shadow:none}
.voice-guide-compact .voice-main-play span{font-size:13px}.voice-guide-compact .voice-main-play strong{font-size:14px;white-space:nowrap}
.voice-guide-compact .voice-status{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aeb8c8;font-size:12px}
.voice-options-toggle{min-height:36px;padding:7px 10px;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:rgba(255,255,255,.05);color:#dce5f2;font-size:12px;font-weight:850;cursor:pointer}
.voice-guide-compact .voice-progress{height:3px;margin-top:5px}
.voice-guide-compact .voice-toolbar{margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.07);align-items:end}
.voice-guide-compact .voice-toolbar[hidden]{display:none!important}
.voice-guide-compact .voice-choice{flex:1 1 270px}.voice-guide-compact .voice-choice select{width:100%;max-width:420px}

@media(max-width:860px){
  body[data-page="learning-center"]{overscroll-behavior-y:contain;background:#090a10}
  .learning-app{width:100%;padding:0 0 28px}
  .learning-top{display:none}
  .learning-mobile-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;min-height:58px;padding:8px 12px;background:rgba(9,10,16,.94);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px);box-sizing:border-box}
  .learning-mobile-nav[hidden]{display:none!important}
  .learning-mobile-nav>div{min-width:0;flex:1;display:grid;gap:1px}.learning-mobile-nav small{color:#7ef5e5;font-size:10px;letter-spacing:.06em;text-transform:uppercase}.learning-mobile-nav strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:15px;line-height:1.25}
  .learning-mobile-icon{width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.055);color:#fff;font-size:25px;line-height:1;display:grid;place-items:center;cursor:pointer}.learning-mobile-icon[hidden]{visibility:hidden;display:grid!important}
  .learning-hero{margin:10px 12px 0;padding:15px;border-radius:18px}.learning-hero-grid{display:block}.learning-hero-title{margin:5px 0 0;font-size:27px;line-height:1.08}.learning-hero p:not(.learning-kicker){display:none}.learning-stat-row{margin-top:12px}.learning-stat-row>.learning-stat{display:none}.learning-progress-card{min-width:0;flex-basis:100%;padding:9px 11px;border-radius:13px}.learning-progress-card strong{font-size:20px}.learning-progress-card span{font-size:11px}
  #categorySection{padding:0 12px}.learning-section-title{margin:19px 0 10px}.learning-section-title h3{font-size:19px}.learning-section-title p{font-size:12px}
  .learning-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.learning-category{min-height:135px;padding:13px;border-radius:17px}.learning-category .cat-icon{font-size:33px;margin-bottom:8px}.learning-category strong{font-size:15px}.learning-category small{display:none}.learning-category em{font-size:10px}.cat-progress{height:5px;margin-top:auto}
  #lessonArea{padding:0 12px}.lesson-shell{display:block}.lesson-list{gap:9px}.lesson-row{min-height:82px;border-radius:16px;padding:12px;grid-template-columns:34px minmax(0,1fr) auto;gap:10px}.lesson-row strong{font-size:15px}.lesson-row small{font-size:11px}.lesson-check{font-size:18px}.lesson-tier{font-size:10px;padding:4px 6px}
  body[data-learning-view="categories"] #lessonArea{display:none}
  body[data-learning-view="lessons"] .learning-hero,body[data-learning-view="lessons"] #categorySection{display:none}
  body[data-learning-view="lessons"] #lessonArea{display:block;padding-top:1px}
  body[data-learning-view="lessons"] .reader-panel{display:none}
  body[data-learning-view="reader"] .learning-hero,body[data-learning-view="reader"] #categorySection,body[data-learning-view="reader"] #lessonArea>.learning-section-title,body[data-learning-view="reader"] .lesson-list{display:none}
  body[data-learning-view="reader"] #lessonArea{display:block;padding:0}
  body[data-learning-view="reader"] .reader-panel{display:block;min-height:calc(100vh - 58px);border:0;border-radius:0;box-shadow:none;background:linear-gradient(180deg,#12141c,#0c0e14)}
  body[data-learning-view="reader"] .reader-hero{min-height:125px;padding:17px 15px;border-bottom:1px solid rgba(255,255,255,.07)}
  body[data-learning-view="reader"] .reader-hero h2{font-size:22px}.reader-meta{gap:5px;margin-bottom:8px}.reader-meta span{padding:5px 8px;font-size:10px}
  body[data-learning-view="reader"] .reader-body{padding:13px 13px 24px}
  .voice-guide-player.voice-guide-compact{position:relative;padding:7px 8px;margin-bottom:10px;border-radius:12px}
  .voice-inline-row{grid-template-columns:auto minmax(0,1fr) auto;gap:7px;min-height:38px}
  .voice-guide-compact .voice-main-play{height:36px;min-width:112px;padding:0 11px;border-radius:10px}.voice-guide-compact .voice-main-play strong{font-size:13px}.voice-guide-compact .voice-status{font-size:10.5px}.voice-options-toggle{min-height:32px;padding:6px 8px;font-size:11px}
  .voice-guide-compact .voice-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}.voice-guide-compact .voice-toolbar[hidden]{display:none!important}.voice-guide-compact .voice-choice{grid-column:1/-1}.voice-guide-compact .voice-choice select{max-width:none}.voice-guide-compact .voice-secondary{width:100%}
  .guide-box{padding:13px;border-radius:15px}.guide-top{display:flex;align-items:center}.guide-top h3{font-size:17px}.guide-top .learning-kicker{font-size:9px}.mark-btn{padding:9px 10px;border-radius:11px;font-size:11px}.guide-text{font-size:15px;line-height:1.72;margin-top:11px}
  .lesson-content{font-size:15px;line-height:1.72}.lesson-content h2{font-size:19px}.lesson-content h3{font-size:17px}.lesson-content h4{font-size:15.5px}
  .lesson-diagram-heading small{display:none}.lesson-visual figcaption em{display:none}.lesson-visual figcaption{padding:7px 5px 3px}.lesson-visual figcaption span{font-size:11px}
  .lesson-navigation{position:relative;margin-top:19px;gap:8px}.lesson-navigation button{min-height:60px;border-radius:14px;font-size:13px}.lesson-navigation small{font-size:11px}
}

@media(max-width:380px){
  .learning-category-grid{grid-template-columns:1fr}.learning-category{min-height:96px;display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:10px;align-items:center}.learning-category .cat-icon{grid-row:1/4;margin:0}.learning-category strong{align-self:end}.learning-category em{align-self:start}.learning-category .cat-progress{grid-column:2}
  .voice-guide-compact .voice-status{display:none}.voice-inline-row{grid-template-columns:auto 1fr}.voice-options-toggle{justify-self:end}
}