.audio-phrase-button{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-height:64px;padding:12px 14px;margin:4px 0 8px;border:1px solid #cad8bd;border-radius:14px;background:#fffdf7;color:#284637;text-align:left;font:inherit;cursor:pointer;transition:background .18s,border-color .18s,transform .18s;touch-action:manipulation}.audio-phrase-content{display:block;min-width:0;flex:1}.audio-phrase-button .topic-ko{font-size:clamp(22px,2.4vw,30px);line-height:1.6}.audio-phrase-button .romanization{font-size:14px;line-height:1.5;color:#58684c}.audio-phrase-icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#e4eddb;color:#355a3d}.audio-phrase-icon svg{width:22px;height:22px}.audio-phrase-button:hover{background:#f2f6eb;border-color:#809a6d}.audio-phrase-button:active{transform:scale(.99)}.audio-phrase-button:focus-visible{outline:3px solid #866b9a;outline-offset:3px}.audio-phrase-button.is-playing{border-color:#567a44;background:#eaf3e0}.audio-phrase-button.is-playing .audio-phrase-icon{animation:audio-breathe 1.2s ease-in-out infinite;background:#365d40;color:white}.reading-phrase .topic-en{padding-left:14px}.audio-tap-note{font-size:13px!important;line-height:1.6;color:#52664c;margin:8px 0 12px}.audio-tap-note strong{color:#334e36}.discovery-example{background:#fffaf0;border:1px solid #dedfc9;border-radius:18px;padding:20px;margin-top:24px}.discovery-example>.eyebrow{margin-bottom:10px;display:block}.discovery-scene .scene-preview{position:relative;display:block;width:100%;padding:0;border:0;border-radius:16px;overflow:hidden;background:#e7ecd9;cursor:pointer}.scene-preview>span{position:absolute;left:12px;right:12px;bottom:12px;background:#fffdf2;color:#294734;padding:12px;border-radius:10px;font-size:13px;font-weight:700}.scene-preview:focus-visible{outline:3px solid #866b9a;outline-offset:4px}#learning-audio-bar{position:fixed;z-index:40;left:calc(260px + 24px);bottom:20px;width:min(680px,calc(100vw - 450px));padding:15px 18px;border-radius:18px;border:1px solid #becfb0;box-shadow:0 12px 40px #263b2526;background:#fffef7;color:#284637;display:flex;gap:16px;align-items:center}#learning-audio-bar[hidden]{display:none}.audio-bar-copy{flex:1;min-width:0}.audio-bar-label{font-size:10px;letter-spacing:1.4px;color:#5b6e4e}.audio-bar-phrase{display:block;font-size:20px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:1.6}.audio-bar-status{font-size:12px;line-height:1.5;margin:3px 0 0}.audio-bar-controls{display:flex;gap:6px;align-items:center}.audio-bar-controls button,.audio-bar-controls select{min-height:44px;border:1px solid #ccd8c2;border-radius:10px;padding:8px 12px;background:#edf3e5;color:#294734;font:inherit;font-size:13px;cursor:pointer}.audio-bar-controls button:disabled{opacity:.5;cursor:default}.audio-bar-controls label{font-size:10px;display:grid;gap:2px}.audio-bar-controls :focus-visible{outline:3px solid #866b9a;outline-offset:2px}.ux-audio-open{padding-bottom:160px}.ux-audio-open #toast{bottom:175px}.section-tabs{scrollbar-width:thin}@media(min-width:1100px){.section-tabs{display:none}}@media(max-width:1000px){#learning-audio-bar{left:18px;width:calc(100vw - 200px)}}@media(max-width:650px){#learning-audio-bar{left:10px;bottom:calc(150px + env(safe-area-inset-bottom,0px));width:calc(100vw - 20px);display:block;padding:12px 14px}.audio-bar-controls{margin-top:8px}.audio-bar-controls label{display:flex;align-items:center;gap:8px;flex:1}.audio-bar-controls button{min-height:44px}.ux-audio-open{padding-bottom:330px}.ux-audio-open #toast{bottom:340px}.audio-phrase-button{gap:10px;padding:12px}.audio-phrase-icon{flex-basis:36px;width:36px;height:36px}.discovery-scene .scene-preview{max-width:150px}.scene-preview>span{left:6px;right:6px;bottom:6px;padding:7px;font-size:10px}.discovery-example .text-link{line-height:1.7}}
@keyframes audio-breathe{50%{box-shadow:0 0 0 5px #6e915a26}}@media(prefers-reduced-motion:reduce){.audio-phrase-button{transition:none}.audio-phrase-button.is-playing .audio-phrase-icon{animation:none}}.reduced-motion .audio-phrase-button,.reduced-motion .audio-phrase-icon{transition:none!important;animation:none!important}
.audio-bar-reading{display:block;font-size:13px;line-height:1.5;color:#58684c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audio-bar-controls button{min-width:44px}@media(max-width:380px){.audio-bar-controls{flex-wrap:wrap}.audio-bar-controls label{flex-basis:100%}.audio-bar-controls select{flex:1}.audio-bar-controls button{flex:1}}
/* One target for the Korean and its reading guide, without nested controls. */
.audio-inline-button{display:inline-flex;width:auto;min-width:44px;min-height:48px;max-width:100%;gap:7px;padding:4px 7px;margin:2px 2px 3px 0;border-radius:9px;border-color:#d3dfc8;background:#f0f4e9;vertical-align:middle;line-height:1.5}
.audio-inline-button .audio-phrase-content>[lang=ko]{display:block;font-size:inherit;line-height:1.5}
.audio-inline-button .romanization{display:block;margin:1px 0 0!important;font-size:13px!important;line-height:1.45!important}
.audio-bar-source{font-size:12px;line-height:1.5;color:#526452;margin:5px 0 0}
@media(max-width:650px){#learning-audio-bar{left:10px;right:10px;width:auto;max-width:none}}
.audio-inline-button .audio-phrase-icon{width:18px;height:18px;flex:0 0 18px;background:transparent}
.audio-inline-button .audio-phrase-icon svg{width:16px;height:16px}
.audio-inline-button:active{transform:none}
.alphabet-sound-chart{background:#f1f4e9;border:1px solid #cad8bd;border-radius:18px;padding:0 22px;margin:22px 0}.alphabet-sound-chart summary{min-height:64px;padding:18px 0;cursor:pointer;font-weight:700}.alphabet-sound-chart summary>span{display:block;font-size:13px;font-weight:400;margin-top:5px}.alphabet-sound-chart[open]{padding-bottom:22px}.alphabet-sound-chart h3{font-size:18px;margin:24px 0 12px}.alphabet-sound-chart p{font-size:15px;line-height:1.8}.alphabet-sound-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px}.alphabet-sound-grid button{position:relative;min-height:110px;padding:12px 8px;border:1px solid #cad8bd;border-radius:12px;background:#fffef7;color:#294f41;cursor:pointer}.alphabet-sound-grid strong{display:block;font-size:29px;line-height:1.5}.alphabet-source{font-size:13px;color:#58684c}.alphabet-sound-grid .romanization{display:block}.alphabet-sound-grid button:hover{background:#e8f0df}.alphabet-sound-grid button:focus-visible,.alphabet-sound-chart summary:focus-visible{outline:3px solid #866b9a;outline-offset:3px}.hangul-coverage{font-size:14px!important}.letter-heading{flex-wrap:wrap;gap:12px}@media(max-width:650px){.alphabet-sound-chart{padding-left:14px;padding-right:14px}.alphabet-sound-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Use one bottom offset for both placement and available reading height. */
:root{--learning-audio-bottom:20px}
#learning-audio-bar{bottom:var(--learning-audio-bottom);max-height:calc(100dvh - var(--learning-audio-bottom) - 12px)}
.audio-bar-copy{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.audio-bar-copy:focus-visible{outline:2px solid #866b9a;outline-offset:2px}
.audio-bar-controls{flex-shrink:0}
@media(max-width:1280px){:root{--learning-audio-bottom:90px}}
@media(max-width:650px){
 :root{--learning-audio-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
 #learning-audio-bar{display:flex;flex-direction:column;align-items:stretch;gap:4px}
 .audio-bar-phrase,.audio-bar-reading{white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip}
 .audio-bar-controls{flex-wrap:nowrap;gap:6px}
 .audio-bar-controls label{flex:1;min-width:0;display:grid;gap:2px}
 .audio-bar-controls select{width:100%;min-width:0;padding:8px 4px}
 .audio-bar-controls button{flex:0 0 auto;padding:8px;min-width:44px}
}
@media(max-width:1280px) and (max-height:500px){
 #learning-audio-bar{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:8px 10px}
 .audio-bar-controls{margin-top:4px}
 .audio-bar-phrase,.audio-bar-reading{white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip}
}