/* ZUUNEE wordmark uses the supplied original, framed to its lettering. */
.brand-wordmark{display:block;position:relative;width:156px;height:25px;overflow:hidden;mix-blend-mode:multiply}
.brand-wordmark img{position:absolute;max-width:none;width:233px;height:auto;left:-38px;top:-16.5px}
:root{--ink:#133e30;--green:#2e6249;--muted:#666b65;--mint:#eff4e8}
.workspace .panel-head h2{color:#123d2f}
.workspace .mode-icon{background:#edf3e3;color:#2e6249}
.workspace .translation{color:#173e30;font-size:1rem}
.workspace .translation input:checked{background:#2e6249}
.workspace .player{background:#f5f7ec;border:1px solid #e8ebdf;border-radius:24px;padding:10px 12px}
.workspace #play{background:#2e6249}
.workspace #play:hover{background:#1c4b36}
.workspace .player-progress progress::-webkit-progress-value{background:#2e6249}
.workspace .player-progress output{color:#73766e}
.workspace .listening-dialogue{display:flex;flex-direction:column;gap:10px;padding:4px 0;direction:ltr}
.workspace .listening-dialogue .line{display:flex;align-items:center;gap:12px;width:100%;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.workspace .listening-dialogue .avatar{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:#e1e9d3;color:#163e30;font:600 1rem/1 Arial,sans-serif}
.workspace .listening-dialogue .line>div{flex:0 1 auto;min-width:0;max-width:calc(100% - 74px);padding:12px 17px;border-radius:24px;background:#eff4e8}
.workspace .listening-dialogue .line[data-speaker=B]{flex-direction:row-reverse}
.workspace .listening-dialogue .line[data-speaker=B]>div,.workspace .listening-dialogue .line[data-speaker=B] .avatar{background:#faf5e4}
.workspace .listening-dialogue .line[data-speaker=B]>div{text-align:right}
.workspace .listening-dialogue .spanish{font-size:1.2rem;line-height:1.35;font-weight:500;letter-spacing:-.25px;color:#133e30;overflow-wrap:anywhere}
.workspace .listening-dialogue .russian{font-size:1.05rem;line-height:1.4;color:#64645f;margin-top:3px;overflow-wrap:anywhere}
.workspace .listening-dialogue .line.active>div{box-shadow:0 0 0 2px #2e6249;background:#e4eddc}
.workspace .listening-dialogue .dialogue-section{color:#365a40}
@media(max-width:760px){
 .brand-wordmark{width:140px;height:23px}.brand-wordmark img{width:210px;left:-34px;top:-15px}
 .workspace{padding:18px 12px}
 .workspace .listening-dialogue .line{gap:8px}
 .workspace .listening-dialogue .avatar{flex-basis:34px;width:34px;height:34px}
 .workspace .listening-dialogue .line>div{max-width:calc(100% - 53px);padding:10px 13px;border-radius:22px}
 .workspace .listening-dialogue .spanish{font-size:1.1rem}
 .workspace .listening-dialogue .russian{font-size:1rem}
}
/* Spacious, readable information dialogs, including right-to-left locales. */
#about-dialog,#how-dialog,#news-dialog,.footer-dialog{box-sizing:border-box;width:min(760px,calc(100vw - 32px));max-width:760px;max-height:88dvh;padding:36px 40px;border-radius:24px;text-align:start}
#about-dialog h2,#how-dialog h2,#news-dialog h2,.footer-dialog h2{font-size:1.75rem;line-height:1.25;margin:0 0 24px;padding-inline-end:36px;color:#133e30}
#about-dialog p,#how-dialog ol,#news-dialog .news-list li,.footer-dialog p,.footer-dialog li,.footer-dialog .contact-form label,.footer-dialog .contact-form input,.footer-dialog .contact-form textarea,.footer-dialog .contact-form button{font-size:1.125rem;line-height:1.65}
#about-dialog p,.footer-dialog p{margin:0 0 22px}
#how-dialog ol{list-style:none;padding:0;margin:0;counter-reset:steps}
#how-dialog li{position:relative;counter-increment:steps;padding-inline-start:52px;margin-block:0 24px}
#how-dialog li:before{content:counter(steps);position:absolute;inset-inline-start:0;top:0;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#edf3e3;color:#133e30;font-weight:600}
#how-dialog li strong{display:block;color:#133e30;font-size:1.25rem;margin-bottom:4px}
#how-dialog li span{display:block}
.footer-dialog .contact-form{gap:20px}
.footer-dialog .contact-form input,.footer-dialog .contact-form textarea{padding:12px 14px}
.footer-dialog .contact-form textarea{min-height:170px}
.footer-dialog .contact-form button{padding:12px 24px}
#about-dialog .secondary,#how-dialog .dialog-close,#news-dialog .dialog-close,.footer-dialog .dialog-close{width:40px;height:40px;font-size:1.5rem}
@media(max-width:600px){
 #about-dialog,#how-dialog,#news-dialog,.footer-dialog{width:calc(100vw - 24px);padding:26px 22px;border-radius:20px}
 #about-dialog h2,#how-dialog h2,#news-dialog h2,.footer-dialog h2{font-size:1.5rem}
 #about-dialog p,#how-dialog ol,#news-dialog .news-list li,.footer-dialog p,.footer-dialog li,.footer-dialog .contact-form label,.footer-dialog .contact-form input,.footer-dialog .contact-form textarea,.footer-dialog .contact-form button{font-size:1.0625rem}
 #how-dialog li{padding-inline-start:44px}
}

/* Equal resting states; only enabled buttons react to pointer hover. */
.lesson-navigation #next-lesson,.lesson-navigation #previous-lesson{background:#eeede6;color:var(--ink);border:0;transition:background-color .15s,color .15s}
.lesson-navigation #next-lesson:not(:disabled):hover,.lesson-navigation #previous-lesson:not(:disabled):hover{background:#73845c;color:white}
#news-dialog .news-list{padding-inline-start:24px;margin:0}
#news-dialog .news-list li{margin-bottom:16px}
#language-dialog .language-row select,#language-dialog .language-row select option{font-size:18px;line-height:1.5}