/* Lexio: soft green waves, ivory cards and olive controls. */
:root{--ink:#15172f;--muted:#657594;--green:#858b68;--border:#e3e7e0;--surface:#eff1eb;--mint:#e9ede3;--shadow:0 8px 28px #26312514}
body{background:#fcfcfa url('assets/waves.svg') center top/100% 100vh fixed no-repeat;font-family:Arial,'Helvetica Neue',sans-serif;color:var(--ink);line-height:1.5}
header{max-width:1360px;width:calc(100% - 55.68px);margin:24.36px auto 26.1px;padding:0;min-height:55.68px;background:transparent;border:0;border-radius:0;box-shadow:none;gap:27.84px}
.brand{display:flex;align-items:center;gap:13.92px;color:#10132c;font:700 2.61rem/1 Georgia,'Times New Roman',serif;letter-spacing:-1.8px;flex-shrink:0}.brand svg{width:52.2px;height:45.24px}
header .top-nav,header .language{top:0}.top-nav{justify-content:center;margin:0;gap:33.06px}.top-nav button{font-size:0.979rem;color:var(--ink);padding:8.7px 0}.top-nav button:hover{color:#626d48}
.language{background:#fffffff2;border:1px solid var(--border);border-radius:14.79px;box-shadow:0 3px 10px #25352006;padding:10.44px 15.66px;font-size:0.979rem}#language-open>svg{display:none}#language-pair{font-weight:400;letter-spacing:.2px}
.layout{max-width:1424px;padding:0 27.84px 20.88px;margin:0 auto}main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.03fr);gap:22.62px;align-items:stretch}.lesson-surface{display:contents}
.intro,.workspace{padding:26.1px;background:#fffffff0;border:1px solid var(--border);border-radius:22.62px;box-shadow:var(--shadow);min-width:0}.intro{position:static;grid-column:1;grid-row:1;align-self:stretch}.workspace{grid-column:2;grid-row:1}
.lesson-picker{border:0;padding:0;min-height:71.34px}.lesson-picker:before{display:none}.lesson-picker:after{inset-inline-end:8.7px;inset-inline-start:auto;top:14.79px;color:var(--ink)}.lesson-icon{position:absolute;inset-inline-start:0;top:0;width:71.34px;height:71.34px;display:grid;place-items:center;background:var(--mint);color:#79875f;border-radius:16.53px;pointer-events:none}.lesson-icon svg{width:40.89px;height:40.89px}.lesson-picker select{min-height:71.34px;border:0;background:transparent;padding:4.35px 31.32px 4.35px 90.48px;font:700 2.523rem/1.4 Georgia,'Times New Roman',serif;color:var(--ink);border-radius:10.44px}
.lesson-heading p{padding:22.62px 26.1px;margin:24.36px 0 0;border-radius:17.4px;background:var(--surface);font-size:1.435rem;line-height:1.45;color:#2d3042}
.section-label{font-size:0.875rem;font-weight:400;line-height:1.4;text-transform:uppercase;margin:26.1px 0 12.18px}.tabs{padding:0;margin:0;border:0;border-radius:0;gap:10.44px;display:grid;grid-template-columns:1fr 1fr 1.2fr}.tabs button{background:transparent;border:1px solid var(--border);border-radius:11.31px;padding:13.92px 6.96px;font-size:0.979rem;min-height:55.68px;line-height:1.3;gap:8.7px;overflow-wrap:normal}.tabs button svg{width:24.36px;height:24.36px;flex-shrink:0}.tabs button[aria-selected=true]{background:#95977d;color:#fff;border-color:#95977d;outline:0;box-shadow:0 2px 4px #27351b0b}.tabs+section{margin-top:26.1px;padding-top:0;border-top:1px solid var(--border)}.tabs+section .section-label{margin-top:22.62px}.keywords{display:flex;flex-wrap:wrap;gap:8.7px}.keyword{border:0;background:#eaece5;border-radius:27.84px;padding:7.83px 19.14px;font-size:0.979rem;direction:ltr;unicode-bidi:isolate;max-width:100%;overflow-wrap:anywhere}
.panel-head{display:grid;grid-template-columns:60.9px minmax(0,1fr) auto;align-items:center;gap:15.66px;margin-bottom:17.4px}.mode-icon{width:60.9px;height:60.9px;background:#f0f2eb;color:#7b8861;border-radius:15.66px;display:grid;place-items:center}.mode-icon svg{width:34.8px;height:34.8px}.panel-head h2{font-size:1.74rem;font-weight:600;letter-spacing:-.7px;line-height:1.2;margin:0;overflow-wrap:normal}.learning-controls{gap:8.7px;margin:0;align-self:center;justify-content:flex-end}.translation{font-size:0.875rem;color:#34364b;flex-direction:row-reverse;gap:7.83px;white-space:normal}.translation input{width:40.02px;height:24.36px;background:#d7dacf}.translation input:before{width:19.14px;height:19.14px;top:2.61px;left:2.61px}.translation input:checked{background:#a0a38a}.translation input:checked:before{transform:translateX(15.66px)}
.workspace[data-mode=learn] .learning-controls{grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap}.workspace[data-mode=grammar] .panel-head{grid-template-columns:60.9px minmax(0,1fr)}
.player{border:1px solid var(--border);background:transparent;border-radius:13.05px;padding:8.7px 12.18px;gap:12.18px;margin:0 0 15.66px}#play{width:50.46px;height:50.46px;background:#969b7c}#play:hover{background:#79805f}.player-caption{display:none}.player-progress{flex:1;min-width:20.88px;display:flex;flex-direction:column;gap:4.35px}.player-progress progress{width:100%;margin:0;height:6.09px;appearance:none;overflow:hidden;border:0;border-radius:17.4px;background:#e7e9e2}.player-progress progress::-webkit-progress-bar{background:#e7e9e2}.player-progress progress::-webkit-progress-value{background:#83916c;border-radius:17.4px}.player-progress progress::-moz-progress-bar{background:#83916c}.player-progress output{font-size:0.875rem;color:var(--muted);line-height:1.2;text-align:end}.player-progress output:empty{display:none}.speed-label{display:flex;align-items:center;gap:10.44px;font-size:0.875rem;color:var(--ink)}.speed-label select{border:1px solid var(--border);border-radius:8.7px;background:transparent;padding:8.7px;font-size:0.875rem;min-width:57.42px}
.dialogue{padding:0}.listening-dialogue .line{border:0;border-radius:6.96px;padding:3.48px 15.66px;min-height:0}.spanish{font-size:1.218rem;line-height:1.35;color:#1c2034;letter-spacing:-.3px}.russian{font-size:0.979rem;line-height:1.35;color:#7384a2;margin-top:1.74px}.line.active,.learning-dialogue .line.active{background:var(--mint);box-shadow:inset 3px 0 #8f9e76}.learning-dialogue .line{grid-template-columns:31.32px minmax(0,1fr) 38.28px;padding:13.92px 1.74px;gap:10.44px;border-color:var(--border)}.learning-dialogue .sound{width:38.28px;height:38.28px;border-radius:50%;background:var(--surface);color:#667548}.learning-dialogue .avatar{background:var(--surface);color:#636c56}.learning-dialogue .avatar[data-speaker=A]{background:#e1ead9;color:#596846}.learning-dialogue .avatar[data-speaker=A]~.sound{color:#667548}.learn-instruction{font-size:0.875rem;color:#59634f;background:var(--surface);border-radius:10.44px;padding:15.66px}.dialogue-section{color:#59684a}.review-heading{margin-top:22.62px;padding-top:15.66px;border-top:1px solid var(--border)}
.lesson-navigation{grid-column:1/-1;grid-row:2;display:flex;justify-content:center;margin:0;gap:13.92px}.lesson-navigation button{flex:0 1 300px;min-width:0;border-radius:12.18px;font-size:0.979rem;padding:14.79px 17.4px;min-height:55.68px;display:flex;justify-content:center;align-items:center;gap:17.4px;line-height:1.3}.lesson-navigation .secondary{background:#e9ece5;border:0;color:#303547}.lesson-navigation .primary{background:#969a7d;color:white}.lesson-navigation button:disabled{opacity:.65}.previous-arrow,.next-arrow{font-size:1.522rem}.primary{background:#858d6a;border-radius:10.44px;font-size:0.875rem}.primary:hover{background:#707a55}.secondary{border-color:var(--border);border-radius:10.44px;font-size:0.875rem}.secondary:hover{background:#e9ede2}
.grammar-section{padding-block:20.01px}.grammar h3{font-size:1.044rem;line-height:1.5}.grammar p{font-size:0.875rem;color:#56604f}.grammar-section[data-step]:before{background:var(--mint);color:#626e4d}.grammar-example-group,.grammar blockquote{background:var(--surface);color:#56604f;border-radius:12.18px}.grammar .grammar-note{border-color:#88976e}
dialog{background:#fffffc;border:1px solid var(--border);border-radius:20.01px;box-shadow:0 20px 80px #26312533;padding:26.1px;max-height:85dvh;overflow:auto}dialog::backdrop{background:#26312555;backdrop-filter:blur(4px)}dialog h2{font-size:1.435rem;line-height:1.3;padding-inline-end:31.32px}dialog p,#how-dialog ol,.news-list li{color:#56604f;font-size:0.875rem;line-height:1.7}.dialog-close,#about-close,#language-close{width:34.8px;height:34.8px;display:grid;place-items:center;border-radius:8.7px;background:var(--surface);color:#626e4d;padding:0;border:0}#language-dialog{border-radius:17.4px}#status{font-size:0.875rem;color:#59684a}.news-list li:first-child{color:#65714e}
:focus-visible{outline:3px solid #667a50!important;outline-offset:4px!important}
[dir=rtl] .top-nav{margin:0}[dir=rtl] .lesson-picker select{padding:4.35px 90.48px 4.35px 31.32px}[dir=rtl] .lesson-picker:after{left:8.7px;right:auto}[dir=rtl] .translation input:before{left:2.61px}[dir=rtl] .line.active{box-shadow:inset -3px 0 #8f9e76}
@media(min-width:1305px){header{margin-top:33.06px;margin-bottom:31.32px}.intro,.workspace{padding:26.1px}.listening-dialogue .line{padding-block:4.35px}.intro,.workspace{min-height:626.4px}}
@media(max-width:1250px){header{gap:20.88px}.top-nav{gap:20.88px}.intro,.workspace{padding:20.88px}.panel-head{grid-template-columns:46.98px minmax(0,1fr);gap:10.44px}.mode-icon{width:46.98px;height:46.98px}.mode-icon svg{width:29.58px;height:29.58px}.panel-head h2{font-size:1.392rem}.learning-controls{grid-column:2/-1;justify-content:flex-start}.workspace[data-mode=grammar] .panel-head{grid-template-columns:46.98px minmax(0,1fr)}.lesson-picker select{font-size:2.045rem;padding-inline-start:78.3px}.lesson-icon{width:60.9px;height:60.9px}.lesson-picker{min-height:60.9px}.lesson-picker select{min-height:60.9px}.lesson-heading p{font-size:1.218rem;padding:20.88px}.tabs button{font-size:0.875rem;gap:6.09px}.tabs button svg{width:20.01px;height:20.01px}.keyword{font-size:0.875rem;padding-inline:15.66px}.speed-label>span{display:none}}
@media(max-width:900px){header{width:calc(100% - 34.8px);margin:20.88px auto;gap:15.66px;flex-wrap:wrap}.brand{font-size:2.262rem}.brand svg{width:41.76px;height:38.28px}.language{margin-inline-start:auto}.top-nav{order:3;flex-basis:100%;justify-content:space-between;gap:10.44px}.top-nav button{font-size:0.875rem}.layout{padding:0 17.4px 17.4px}main{display:flex;flex-direction:column;gap:17.4px}.intro,.workspace{padding:20.88px;min-height:0}.intro{margin:0}.lesson-heading p{font-size:1.131rem;margin-top:17.4px}.lesson-navigation{margin:0}.lesson-navigation button{flex:1;font-size:0.875rem;padding:13.05px 10.44px;gap:8.7px}.panel-head{grid-template-columns:46.98px minmax(0,1fr) auto}.learning-controls{grid-column:auto}.panel-head h2{font-size:1.305rem}.workspace[data-mode=learn] .learning-controls{grid-column:1/-1}.tabs+section{margin-top:20.88px}.section-label{margin-top:20.88px}.speed-label>span{display:inline}.spanish{font-size:1.087rem}.russian{font-size:0.924rem}}
@media(max-width:520px){header{width:calc(100% - 27.84px);margin:17.4px auto;gap:12.18px}.brand{font-size:1.914rem;gap:8.7px}.brand svg{width:33.93px;height:31.32px}.language{padding:8.7px 10.44px;font-size:0.875rem;border-radius:11.31px}.top-nav{gap:10.44px}.top-nav button{font-size:0.875rem}.layout{padding:0 12.18px 17.4px}.intro,.workspace{padding:17.4px;border-radius:17.4px}.lesson-icon{width:50.46px;height:50.46px;border-radius:12.18px}.lesson-icon svg{width:30.45px;height:30.45px}.lesson-picker,.lesson-picker select{min-height:50.46px}.lesson-picker select{font-size:1.74rem;padding-inline-start:66.12px}.lesson-picker:after{top:6.09px}.lesson-heading p{padding:17.4px;font-size:1.044rem}.tabs{gap:6.96px;grid-template-columns:1fr 1fr 1.2fr}.tabs button{font-size:0.875rem;flex-direction:column;gap:6.09px;padding:10.44px 3.48px}.section-label{font-size:0.875rem}.keyword{font-size:0.875rem;padding:6.96px 13.05px}.panel-head{grid-template-columns:40.02px minmax(0,1fr);gap:10.44px}.mode-icon{width:40.02px;height:40.02px;border-radius:10.44px}.mode-icon svg{width:26.1px;height:26.1px}.learning-controls{grid-column:2/-1;justify-content:flex-start}.panel-head h2{font-size:1.218rem}.translation{font-size:0.875rem}.workspace[data-mode=grammar] .panel-head{grid-template-columns:40.02px minmax(0,1fr)}.player{gap:8.7px;padding:8.7px}#play{width:41.76px;height:41.76px}.speed-label>span{display:none}.speed-label select{min-width:53.94px;padding:7.83px 4.35px}.listening-dialogue .line{padding:5.22px 4.35px}.lesson-navigation button{font-size:0.875rem;gap:6.96px;padding:11.31px 7.83px}.previous-arrow,.next-arrow{font-size:1.305rem}.grammar-section[data-step]{padding-inline-start:34.8px}.grammar h3{font-size:0.979rem}dialog{padding:20.88px}dialog h2{font-size:1.218rem}.language-row{grid-template-columns:1fr;gap:6.96px}[dir=rtl] .lesson-picker select{padding-inline-start:66.12px;padding-inline-end:31.32px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.tabs button .tab-label{font-size:inherit;line-height:inherit}
.tabs button[data-mode] .tab-label{font-size:inherit;line-height:inherit}

/* Smaller type within the original, naturally scrolling lesson layout. */
.lesson-picker select{font-size:1.74rem}
.lesson-heading p{font-size:1.087rem}
.panel-head h2{font-size:1.305rem}
.spanish{font-size:1.044rem}
.russian{font-size:0.875rem}
@media(max-width:520px){.lesson-picker select{font-size:1.566rem}.lesson-heading p{font-size:0.979rem}.panel-head h2{font-size:1.131rem}.spanish{font-size:0.979rem}}

/* Reserve a separate close-button row without changing the language dialog layout. */
#language-dialog{padding-top:44px}
#language-dialog #language-close{position:absolute;top:8px;right:10px;left:auto;inset-inline-start:auto;inset-inline-end:10px;width:26px;height:26px;font-size:20px;line-height:1;margin:0;padding:0;border-radius:7px}
#language-dialog[dir=rtl] #language-close{right:10px;left:auto;inset-inline-start:10px;inset-inline-end:auto}

/* Vector controls render consistently on mobile, without emoji substitution. */
#play::before{content:"";display:block;width:40%;height:44%;margin:0 0 0 35%;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}
#play.is-playing::before{content:"";width:34%;height:34%;margin:0 auto;clip-path:none;border-radius:1px;background:#fff}
.lesson-navigation .primary,.lesson-navigation .secondary{background:#e7e9e0;color:#15172f;border:1px solid transparent;display:flex;align-items:center;justify-content:center;line-height:1.25}
.lesson-navigation button:not(:disabled):hover{background:#a8ba8b;color:#172310;border-color:#93a878}
.lesson-navigation button:not(:disabled):active{background:#95aa75}
.lesson-navigation button:disabled{opacity:.65}
.lesson-navigation button>[data-ui]{display:block;line-height:1.25}
.lesson-navigation .previous-arrow,.lesson-navigation .next-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;line-height:1}
.lesson-navigation .previous-arrow svg,.lesson-navigation .next-arrow svg{display:block;width:24px;height:24px}
@media(max-width:520px){.lesson-navigation .previous-arrow,.lesson-navigation .next-arrow{width:20px;height:20px;flex-basis:20px}.lesson-navigation .previous-arrow svg,.lesson-navigation .next-arrow svg{width:20px;height:20px}}