.audio-player-container{background:var(--color-bg-alt);border-radius:var(--border-radius);padding:var(--spacing-md);margin:var(--spacing-md) 0;max-width:500px}.audio-player-container audio{display:none}.audio-controls{display:flex;justify-content:center;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.audio-btn{background:var(--color-surface);border:2px solid var(--color-primary);border-radius:var(--border-radius-circle);width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);padding:8px}.audio-btn svg{width:20px;height:20px;color:var(--color-primary);fill:currentColor}.audio-btn svg text{fill:var(--color-white);stroke:var(--color-primary);stroke-width:.5;font-family:system-ui,sans-serif}.audio-btn:hover{background:var(--color-primary)}.audio-btn:hover svg{color:var(--color-white)}.audio-btn.playing{background:var(--color-primary)}.audio-btn.playing svg{color:var(--color-white)}.play-btn{width:52px;height:52px}.play-btn svg{width:24px;height:24px}.loop-btn.active{background:var(--color-secondary);border-color:var(--color-secondary)}.loop-btn.active svg{color:var(--color-white)}.speed-control{display:flex;align-items:center;gap:4px;background:var(--color-surface);border:2px solid var(--color-primary);border-radius:var(--border-radius-sm);padding:4px 8px;font-size:.9rem;font-weight:600;color:var(--color-primary)}.speed-control .speed-display{font-variant-numeric:tabular-nums;min-width:2em;text-align:center}.speed-control.modified{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-white)}.speed-control.modified .speed-arrow{color:var(--color-white)}.speed-arrow{background:none;border:none;cursor:pointer;padding:4px 6px;font-size:.8rem;color:var(--color-primary);transition:opacity var(--transition-fast);line-height:1}.speed-arrow:hover{opacity:.7}.speed-arrow.disabled{opacity:.3;cursor:not-allowed}.audio-progress{display:flex;align-items:center;gap:var(--spacing-sm)}.current-time,.duration{font-size:.85rem;color:var(--color-text-muted);font-variant-numeric:tabular-nums;min-width:40px}.current-time{text-align:right}.audio-player-container .progress-bar{flex:1;height:8px;background:var(--color-border);border-radius:var(--border-radius-sm);position:relative;cursor:pointer}.progress-fill{height:100%;background:var(--color-primary);border-radius:var(--border-radius-sm);width:0%;transition:width .1s linear}.progress-handle{position:absolute;top:50%;left:0%;transform:translate(-50%,-50%);width:16px;height:16px;background:var(--color-primary);border:2px solid var(--color-white);border-radius:var(--border-radius-circle);box-shadow:var(--shadow-handle);transition:left .1s linear}.audio-preview-badge{position:absolute;top:var(--spacing-xs);right:var(--spacing-xs);background:var(--color-warning, #ffc107);color:var(--color-text);font-size:.7rem;font-weight:600;padding:2px var(--spacing-xs);border-radius:var(--border-radius-sm);z-index:5}.audio-player-locked{position:absolute;inset:0;background:var(--color-overlay-light, rgba(250, 246, 240, .92));border-radius:var(--border-radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-sm);z-index:10}.audio-player-locked svg{color:var(--color-text-muted)}.audio-player-locked span{font-size:.9rem;color:var(--color-text);text-align:center}.audio-locked-btn{background:var(--color-primary);color:var(--color-white);border:none;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-sm);font-size:.85rem;cursor:pointer;transition:background var(--transition-fast)}.audio-locked-btn:hover{background:var(--color-primary-hover)}@media(max-width:600px){.audio-player-container{max-width:100%}.audio-btn{width:52px;height:52px}.audio-btn svg{width:24px;height:24px}.play-btn{width:56px;height:56px}.play-btn svg{width:28px;height:28px}.speed-control{padding:.5rem .75rem;font-size:1rem;min-height:52px}.speed-arrow{padding:.5rem .75rem;font-size:1rem;min-width:44px;min-height:52px}.speed-display{font-size:1rem;min-width:2.5em}.audio-controls{gap:.75rem;flex-wrap:wrap;justify-content:center}.progress-handle{width:20px;height:20px}}@media(min-width:768px){.audio-player-container{max-width:550px}}@media(min-width:1024px){.audio-player-container{max-width:600px}}.dialogue-container{display:flex;flex-direction:column;gap:var(--spacing-md)}.dialogue-bubble{max-width:85%;min-width:180px;padding:var(--spacing-md);border-radius:var(--border-radius-xl);position:relative}.dialogue-bubble--speaker-a{align-self:flex-start;background:var(--color-speaker-a-bg);border:1px solid var(--color-speaker-a-border);border-bottom-left-radius:var(--border-radius-sm)}.dialogue-bubble--speaker-b{align-self:flex-end;background:var(--color-speaker-b-bg);border:1px solid var(--color-speaker-b-border);border-bottom-right-radius:var(--border-radius-sm)}.dialogue-bubble--speaker-c{align-self:flex-start;background:var(--color-speaker-c-bg);border:1px solid var(--color-speaker-c-border);border-bottom-left-radius:var(--border-radius-sm)}.dialogue-bubble--speaker-d{align-self:flex-end;background:var(--color-speaker-d-bg);border:1px solid var(--color-speaker-d-border);border-bottom-right-radius:var(--border-radius-sm)}.speaker-label{font-weight:700;font-size:.85rem;color:var(--color-primary);margin-bottom:var(--spacing-xs);display:block}.dialogue-text{margin:0 0 var(--spacing-xs);font-size:1.1rem;line-height:1.5}.dialogue-bubble .translation{padding-left:0;border-left:none;font-size:.85rem;color:var(--color-text-muted);display:block;margin-top:var(--spacing-xs)}@media(max-width:600px){.dialogue-bubble{max-width:95%;padding:var(--spacing-sm) var(--spacing-md)}.dialogue-text{font-size:1rem}}.quiz-reorder,.quiz-spelling{background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--border-radius);padding:var(--spacing-md);margin:var(--spacing-md) 0}.hint{font-weight:500;margin-bottom:var(--spacing-sm);color:var(--color-text)}.words,.char-tiles{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin:var(--spacing-sm) 0}.word-btn{background:var(--color-surface);border:2px solid var(--color-primary);border-radius:var(--border-radius-sm);padding:.5rem 1rem;font-size:1rem;font-family:inherit;cursor:pointer;transition:all var(--transition-fast);box-sizing:border-box;color:var(--color-text)}.word-btn:hover{background:var(--color-primary);color:var(--color-white)}.word-btn.selected{background:var(--color-primary);color:var(--color-white);opacity:.5}.word-btn.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.char-btn{background:var(--color-surface);border:2px solid var(--color-primary);border-radius:var(--border-radius-sm);padding:.6rem .9rem;font-size:1.1rem;font-family:inherit;font-weight:600;cursor:pointer;transition:all var(--transition-fast);min-width:2.5rem;text-align:center;box-sizing:border-box;color:var(--color-text)}.char-btn:hover{background:var(--color-primary);color:var(--color-white)}.char-btn.selected{background:var(--color-primary);color:var(--color-white);opacity:.5}.char-btn.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.char-btn.in-answer{background:var(--color-primary);color:var(--color-white);opacity:1}.char-btn.in-answer:hover{opacity:.8}.answer-area{min-height:50px;background:var(--color-surface);border:2px dashed var(--color-primary);border-radius:var(--border-radius-sm);padding:var(--spacing-sm);margin:var(--spacing-sm) 0;display:flex;flex-wrap:wrap;gap:var(--spacing-sm);align-items:center}.answer-area:empty:before{content:"Click words to build your answer...";color:var(--color-text-muted);font-style:italic}.answer-area .word-btn{background:var(--color-primary);color:var(--color-white);opacity:1}.answer-area .word-btn:hover{opacity:.8}.spelling-answer{min-height:50px;background:var(--color-surface);border:2px dashed var(--color-primary);border-radius:var(--border-radius-sm);padding:var(--spacing-sm);margin:var(--spacing-sm) 0;display:flex;flex-wrap:wrap;gap:var(--spacing-xs);align-items:center}.spelling-answer:empty:before{content:"___";color:var(--color-text-muted);font-size:1.2rem;letter-spacing:.2em}.spelling-answer.correct{background:var(--color-success-light);border-color:var(--color-success);border-style:solid}.spelling-answer.incorrect{background:var(--color-error-light);border-color:var(--color-error);border-style:solid}.quiz-buttons{display:flex;gap:var(--spacing-sm);align-items:center;margin-top:var(--spacing-sm)}.check-btn{background:var(--color-secondary);color:var(--color-white);border:none;border-radius:var(--border-radius-sm);padding:.5rem 1.5rem;font-size:1rem;font-family:inherit;cursor:pointer;transition:opacity var(--transition-fast)}.check-btn:hover{opacity:.9}.check-btn:disabled{opacity:.5;cursor:not-allowed}.reset-quiz-btn{background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);padding:.5rem 1rem;font-size:.9rem;font-family:inherit;cursor:pointer;transition:all var(--transition-fast)}.reset-quiz-btn:hover{background:var(--color-bg-alt);border-color:var(--color-primary);color:var(--color-primary)}.result{font-weight:600;margin:var(--spacing-sm) 0;min-height:1.5em;display:flex;align-items:center;gap:var(--spacing-xs)}.result.correct{color:var(--color-success)}.result.incorrect{color:var(--color-error)}.result-icon{font-size:1.3rem;font-weight:700}.answer-reveal{margin-top:var(--spacing-sm);color:var(--color-text-muted);font-size:.9rem}.answer-reveal summary{cursor:pointer;color:var(--color-primary);user-select:none}.answer-reveal summary:hover{color:var(--color-secondary)}.answer-reveal[open] summary{margin-bottom:var(--spacing-xs)}.quiz-score{background:var(--color-primary);color:var(--color-white);padding:var(--spacing-md);border-radius:var(--border-radius);margin:var(--spacing-xl) 0;text-align:center}.quiz-score .score-text{font-size:1.5rem;font-weight:600;margin:0 0 var(--spacing-sm)}.reset-btn{background:var(--color-surface);color:var(--color-primary);border:none;border-radius:var(--border-radius-sm);padding:.5rem 1.5rem;font-size:1rem;font-family:inherit;cursor:pointer;transition:opacity var(--transition-fast)}.reset-btn:hover{opacity:.9}@keyframes quiz-correct{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes quiz-incorrect{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}@keyframes result-icon-pop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.3)}to{transform:scale(1);opacity:1}}.quiz-reorder.animate-correct,.quiz-spelling.animate-correct{animation:quiz-correct .4s ease-out}.quiz-reorder.animate-incorrect,.quiz-spelling.animate-incorrect{animation:quiz-incorrect .4s ease-out}.result-icon{display:inline-block;animation:result-icon-pop .3s ease-out}@media(max-width:600px){.quiz-reorder,.quiz-spelling{padding:var(--spacing-sm)}.word-btn,.char-btn{padding:.75rem 1rem;font-size:1rem;min-width:52px;min-height:52px}.words,.char-tiles{gap:.75rem}.answer-area,.spelling-answer{min-height:60px;padding:.75rem;border-width:3px}.quiz-buttons{gap:1rem}.check-btn{padding:.875rem 1.5rem;font-size:1rem;font-weight:600}.reset-quiz-btn{width:52px;height:52px;font-size:1.25rem;display:flex;align-items:center;justify-content:center}}@media(min-width:768px){.quiz-reorder,.quiz-spelling{max-width:600px}}@media(prefers-reduced-motion:reduce){.quiz-reorder.animate-correct,.quiz-spelling.animate-correct,.quiz-reorder.animate-incorrect,.quiz-spelling.animate-incorrect,.result-icon{animation:none}}.grammar-highlight{background:var(--color-bg-alt);border-left:4px solid var(--color-secondary);border-radius:0 var(--border-radius) var(--border-radius) 0;padding:var(--spacing-md);margin:var(--spacing-md) 0}.grammar-highlight .grammar-pattern{font-size:1.1rem;color:var(--color-primary);margin:0 0 var(--spacing-sm)}.grammar-highlight .grammar-example{font-size:1rem;color:var(--color-text);margin:0 0 var(--spacing-xs)}.grammar-highlight .grammar-translation{font-size:.9rem;color:var(--color-text-muted);margin:0 0 var(--spacing-sm)}.grammar-highlight .grammar-explanation{font-size:.9rem;color:var(--color-text-muted);margin:0;padding-top:var(--spacing-sm);border-top:1px solid var(--color-border)}@media(max-width:600px){.grammar-highlight{padding:1rem;margin-bottom:1.25rem}.grammar-highlight .grammar-pattern{font-size:1.1rem;margin-bottom:.5rem}.grammar-highlight .grammar-example{padding:.5rem 0}}.vocab-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-md)}.vocab-card{background:var(--color-bg-alt);border-radius:var(--border-radius-md);padding:var(--spacing-md);transition:box-shadow var(--transition-fast)}.vocab-card:hover{box-shadow:var(--shadow-pop)}.vocab-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-xs)}.vocab-term{font-size:1.15rem;font-weight:700;color:var(--color-text)}.pos-badge{display:inline-block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:.15em .6em;border-radius:var(--border-radius-pill);color:var(--color-white);white-space:nowrap}.pos-badge--noun{background:var(--color-pos-noun)}.pos-badge--verb{background:var(--color-pos-verb)}.pos-badge--adj{background:var(--color-pos-adj)}.pos-badge--adv{background:var(--color-pos-adv)}.pos-badge--default{background:var(--color-pos-default)}.vocab-native{display:block;font-size:.95rem;color:var(--color-text-muted);margin-bottom:var(--spacing-sm)}.vocab-surface{display:block;font-size:.85rem;color:var(--color-text-muted);margin-bottom:var(--spacing-sm)}.vocab-morphology{display:flex;flex-wrap:wrap;gap:var(--spacing-xs) var(--spacing-md);margin:var(--spacing-sm) 0;padding:0;font-size:.85rem}.vocab-morphology dt{color:var(--color-text-muted);font-weight:600;display:inline;margin:0}.vocab-morphology dt:after{content:": "}.vocab-morphology dd{color:var(--color-text);display:inline;margin:0}.vocab-context{font-size:.85rem;font-style:italic;color:var(--color-text-muted);margin:var(--spacing-sm) 0 0;padding-top:var(--spacing-sm);border-top:1px solid var(--color-border)}@media(min-width:600px){.vocab-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.vocab-card{padding:var(--spacing-sm) var(--spacing-md)}.vocab-term{font-size:1.05rem}.vocab-morphology{gap:var(--spacing-xs) var(--spacing-sm)}}.section-card{background:var(--color-surface);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);padding:var(--spacing-md) var(--spacing-lg);margin:var(--spacing-lg) 0}.section-card h2,.section-card h2:first-child{margin-top:0}@media(max-width:600px){.section-card{padding:var(--spacing-sm) var(--spacing-md);margin:var(--spacing-md) 0}.section-card{margin-bottom:2rem}.section-card{box-shadow:var(--shadow-card-mobile);border:1px solid var(--color-border)}}@media(min-width:1024px){.lesson-content-wrapper{display:flex;gap:var(--spacing-xl);max-width:1200px;margin:0 auto}.lesson-main-content{flex:1;min-width:0}.toc-sidebar{width:220px;flex-shrink:0;position:sticky;top:100px;max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);overflow-y:auto;padding:var(--spacing-md);background:var(--color-surface);border-radius:var(--border-radius);box-shadow:var(--shadow-sm)}.toc-title{font-size:.9rem;font-weight:600;color:var(--color-primary);margin:0 0 var(--spacing-sm);padding-bottom:var(--spacing-xs);border-bottom:1px solid var(--color-border)}.toc-list{list-style:none;margin:0;padding:0}.toc-item{margin:var(--spacing-xs) 0}.toc-link{display:block;padding:var(--spacing-xs) var(--spacing-sm);font-size:.85rem;color:var(--color-text-muted);text-decoration:none;border-radius:var(--border-radius-sm);transition:all var(--transition-fast);border-left:2px solid transparent}.toc-link:hover{background:var(--color-bg-alt);color:var(--color-primary)}.toc-link.active{background:var(--color-bg-alt);color:var(--color-primary);border-left-color:var(--color-secondary);font-weight:500}}@media(max-width:1023px){.toc-sidebar{display:none}.lesson-content-wrapper{display:block}}.mobile-bottom-nav{display:none}@media(max-width:767px){.mobile-bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:var(--shadow-up);z-index:100;padding:var(--spacing-xs);padding-bottom:calc(var(--spacing-xs) + env(safe-area-inset-bottom,0px));gap:var(--spacing-xs);justify-content:space-between;align-items:center}body{padding-bottom:80px}.section-nav-group{display:flex;gap:var(--spacing-xs);flex:1;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.section-nav-group::-webkit-scrollbar{display:none}.section-nav-btn{flex-shrink:0;width:44px;height:44px;background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:0;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast)}.section-nav-btn svg{width:22px;height:22px;fill:currentColor}.section-nav-btn:hover,.section-nav-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-white)}.mini-player{display:flex;align-items:center;gap:var(--spacing-xs);flex-shrink:0}.mini-rewind-btn{width:40px;height:40px;border-radius:var(--border-radius-circle);background:var(--color-bg-secondary);border:1px solid var(--color-border);color:var(--color-text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast)}.mini-rewind-btn svg{width:22px;height:22px;fill:currentColor}.mini-rewind-btn:hover{background:var(--color-border)}.mini-rewind-btn:active{transform:scale(.95)}.mini-play-btn{width:48px;height:48px;border-radius:var(--border-radius-circle);background:var(--color-primary);border:none;color:var(--color-white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--transition-fast)}.mini-play-btn svg{width:24px;height:24px;fill:currentColor}.mini-play-btn:hover{background:var(--color-secondary)}.mini-play-btn:active{transform:scale(.95)}}@media(min-width:768px){.mobile-bottom-nav{display:none!important}body{padding-bottom:0}}.lesson-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) 0;border-bottom:1px solid var(--color-border)}.lesson-nav-bottom{border-bottom:none;border-top:1px solid var(--color-border);margin-top:var(--spacing-xl)}.lesson-nav .nav-link{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius);text-decoration:none;color:var(--color-primary);font-weight:500;transition:all var(--transition-fast)}.lesson-nav .nav-link:hover,.lesson-nav .nav-index{background:var(--color-bg-alt)}.lesson-nav .nav-link.disabled{visibility:hidden}@media(max-width:600px){.lesson-nav{flex-wrap:wrap;justify-content:center}.lesson-nav .nav-link{padding:var(--spacing-xs) var(--spacing-sm);font-size:.9rem}}.lesson-meta{color:var(--color-text-muted);font-size:.9rem;margin-bottom:var(--spacing-md)}.lesson-progress{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-pill);font-size:.85rem;font-weight:500;margin-left:var(--spacing-sm);transition:all var(--transition-fast)}.lesson-progress.in-progress{background:var(--color-bg-alt);color:var(--color-text-muted);border:1px solid var(--color-border)}.lesson-progress.completed{background:var(--color-success-light);color:var(--color-success);border:1px solid var(--color-success)}.lesson-progress.perfect{background:linear-gradient(135deg,var(--color-success-light),var(--color-accent-light));border-color:var(--color-accent)}.progress-icon{font-size:1rem;line-height:1}.progress-status{font-size:.8rem}main h1{margin-top:var(--spacing-md)}main h2{color:var(--color-primary);border-bottom:2px solid var(--color-primary);padding-bottom:var(--spacing-sm);margin-top:var(--spacing-xl);scroll-margin-top:80px}main h3{color:var(--color-primary);margin-top:var(--spacing-lg)}main table{background:var(--color-surface);border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow-sm)}main table th{background:var(--color-primary);color:var(--color-white);font-weight:500}main table td{border-bottom:1px solid var(--color-border)}main table tr:last-child td{border-bottom:none}main table tbody tr{transition:transform var(--transition-fast),box-shadow var(--transition-fast)}main table tbody tr:hover{background:var(--color-bg-alt);transform:translateY(-2px);box-shadow:var(--shadow-md)}.translation{display:block;color:var(--color-text-muted);font-size:.9rem;margin-top:var(--spacing-xs);padding-left:var(--spacing-md);border-left:2px solid var(--color-border)}.example{display:block;font-style:italic;color:var(--color-text-muted);padding:var(--spacing-sm) var(--spacing-md);margin:var(--spacing-sm) 0;background:var(--color-bg-alt);border-left:3px solid var(--color-primary);border-radius:0 var(--border-radius) var(--border-radius) 0}main p strong{color:var(--color-primary)}@media(max-width:600px){main h2{margin-top:2.5rem;padding-top:1rem}.alternatives-list li{padding:.75rem 0;border-bottom:1px solid var(--color-border);line-height:1.6}.alternatives-list li:last-child{border-bottom:none}}@media(prefers-reduced-motion:reduce){main table tbody tr{transition:none}}