@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap');
:root{--bg:#12131a;--panel:#1a1c25;--panel2:#20232e;--text:#f8f8fb;--muted:#989daf;--line:rgba(255,255,255,.075);--purple:#aa89ff;--purple2:#7456ff;--green:#69d9b7;--orange:#ffbe75;--blue:#72b8ff;--danger:#ff738b;--shadow:0 30px 90px rgba(0,0,0,.34)}
html[data-theme="light"]{--bg:#f6f6fa;--panel:#fff;--panel2:#f0f1f7;--text:#171824;--muted:#6e7484;--line:rgba(19,21,33,.08);--shadow:0 25px 70px rgba(37,29,70,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}.shell{width:min(1120px,calc(100% - 48px));margin:auto}button,a,input{font:inherit}button{color:inherit}.ambient{position:fixed;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:-1;opacity:.16}.ambient-a{width:430px;height:430px;background:#7858ff;top:-180px;left:-110px}.ambient-b{width:500px;height:500px;background:#4fb1ff;right:-240px;top:470px;opacity:.07}.ambient-c{width:420px;height:420px;background:#75dfbc;left:28%;bottom:-260px;opacity:.06}
.topbar{height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 max(28px,calc((100vw - 1120px)/2));border-bottom:1px solid transparent;position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(18px)}.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font:800 22px Manrope,sans-serif;letter-spacing:-.8px}.brand>span:last-child>span{color:var(--purple)}.brand-mark{width:27px;height:27px;position:relative;display:inline-block}.brand-mark i{position:absolute;width:10px;height:21px;background:linear-gradient(180deg,var(--purple),var(--purple2));border-radius:9px 2px 9px 2px;top:2px}.brand-mark i:first-child{left:4px;transform:rotate(-35deg)}.brand-mark i:last-child{right:4px;transform:rotate(35deg)}.nav{display:flex;gap:32px}.nav button,.header-actions button,.text-btn{border:0;background:none;cursor:pointer}.nav button{font-size:11px;color:var(--muted)}.nav button:hover{color:var(--text)}.header-actions{justify-self:end;display:flex;align-items:center;gap:12px}.language-pill,.icon-btn,.cta-mini{height:40px;border-radius:13px!important}.language-pill{background:rgba(255,255,255,.04)!important;padding:0 14px;font-size:10px}.icon-btn{width:40px;font-size:18px}.cta-mini{background:var(--purple)!important;color:#17131f!important;padding:0 17px!important;font-size:10px;font-weight:800;box-shadow:0 5px 0 rgba(74,51,142,.5)}
.hero{min-height:610px;display:grid;grid-template-columns:1.03fr .97fr;gap:60px;align-items:center;padding:70px 0 90px}.eyebrow,.section-title>span,.final-cta>div>span{font-size:9px;letter-spacing:1.35px;font-weight:800;color:var(--purple)}.eyebrow{display:flex;align-items:center;gap:9px}.eyebrow span{width:6px;height:6px;border-radius:50%;background:var(--purple);box-shadow:0 0 16px var(--purple)}.hero h1{font:800 clamp(46px,5vw,72px)/1.02 Manrope,sans-serif;letter-spacing:-4px;margin:16px 0 20px}.hero h1 em{font-style:normal;color:var(--purple)}.hero-copy>p{max-width:570px;color:var(--muted);font-size:14px;line-height:1.75}.hero-actions{display:flex;gap:12px;margin-top:28px}.btn{height:49px;padding:0 21px;border-radius:14px;border:1px solid var(--line);font-weight:800;font-size:11px;cursor:pointer}.btn.primary{background:linear-gradient(180deg,#b999ff,var(--purple));color:#18131f;border:0;box-shadow:0 6px 0 rgba(79,56,142,.48)}.btn.ghost{background:rgba(255,255,255,.025)}.btn.full{width:100%;margin-top:22px}.trust-row{display:flex;gap:18px;margin-top:24px;color:var(--muted);font-size:9px}.trust-row b{color:var(--green);margin-right:4px}.hero-preview{position:relative;min-height:390px;display:grid;place-items:center}.preview-glow{position:absolute;width:72%;height:72%;border-radius:50%;background:var(--purple);filter:blur(95px);opacity:.1}.preview-card{position:relative;width:min(470px,95%);border:1px solid rgba(169,132,255,.16);background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.015));box-shadow:var(--shadow);border-radius:25px;padding:28px;backdrop-filter:blur(18px);transform:rotate(-1deg)}.preview-head{display:flex;justify-content:space-between;color:var(--muted);font-size:9px}.build-mini{display:flex;gap:7px;margin:35px 0 20px}.build-mini span{padding:7px 10px;border-radius:999px;border:1px solid var(--line);font-size:9px;color:var(--muted)}.build-mini .done{color:var(--green);border-color:rgba(105,217,183,.25);background:rgba(105,217,183,.08)}.preview-label{text-align:center;color:var(--muted);font-size:9px}.preview-prompt{text-align:center;font:700 30px Manrope,sans-serif;margin:10px 0 20px}.preview-answer{height:58px;border-bottom:2px solid var(--purple);display:flex;align-items:center;justify-content:center;font-size:22px}.cursor{width:2px;height:26px;background:var(--purple);margin-left:3px;animation:blink 1s step-end infinite}@keyframes blink{50%{opacity:0}}.preview-feedback{text-align:center;color:var(--green);font-size:10px;font-weight:700;margin-top:18px}.float-badge{position:absolute;padding:11px 14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.float-badge strong,.float-badge span{display:block}.float-badge strong{font-size:12px}.float-badge span{color:var(--muted);font-size:8px;margin-top:3px}.badge-a{left:-8px;top:74px}.badge-b{right:-2px;bottom:56px}
.mini-stats{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.018);border:1px solid var(--line);border-radius:19px;margin-bottom:115px;overflow:hidden}.mini-stats article{display:flex;align-items:center;justify-content:center;gap:13px;padding:22px;border-right:1px solid var(--line)}.mini-stats article:last-child{border-right:0}.mini-stats article>span{font-size:18px}.mini-stats strong,.mini-stats small{display:block}.mini-stats strong{font-size:17px}.mini-stats small{font-size:9px;color:var(--muted);margin-top:3px}
.section-title{text-align:center;max-width:760px;margin:0 auto 40px}.section-title h2{font:800 clamp(31px,4vw,48px)/1.08 Manrope,sans-serif;letter-spacing:-2.2px;margin:10px 0 12px}.section-title p{font-size:13px;color:var(--muted);line-height:1.7}.section-title p b{color:var(--text)}.section-title.compact{margin-bottom:34px}.lesson-section{padding-bottom:105px}.lesson-layout{display:grid;grid-template-columns:250px 1fr;gap:16px;align-items:stretch}.adaptive-card{border:1px solid var(--line);background:linear-gradient(160deg,rgba(169,132,255,.07),var(--panel));border-radius:23px;padding:21px;box-shadow:var(--shadow)}.adaptive-title{display:flex;gap:10px;align-items:center;padding-bottom:17px;border-bottom:1px solid var(--line)}.pulse{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(105,217,183,.08),0 0 18px rgba(105,217,183,.35)}.adaptive-title small,.adaptive-title strong{display:block}.adaptive-title small{font-size:7px;color:var(--muted);letter-spacing:1px}.adaptive-title strong{font-size:11px;margin-top:3px}.route-meter{height:6px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden;margin:20px 0}.route-meter div{height:100%;width:18%;background:linear-gradient(90deg,var(--purple2),var(--green));border-radius:99px;transition:.35s}.adaptive-row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:8px}.adaptive-row span{color:var(--muted)}.adaptive-row strong{text-align:right}.adaptive-note{font-size:9px;color:var(--muted);line-height:1.65;padding:17px 0}.weak-box{margin-top:6px;border:1px solid var(--line);border-radius:14px;padding:13px;background:rgba(0,0,0,.06)}.weak-box>span{font-size:7px;color:var(--muted);font-weight:800;letter-spacing:.8px}.weak-box div{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}.weak-box em{font-style:normal;color:var(--muted);font-size:8px}.weak-box b{font-size:8px;padding:5px 7px;border-radius:999px;background:rgba(255,115,139,.09);color:var(--danger);font-weight:700}
.lesson-shell{background:var(--panel);border:1px solid var(--line);border-radius:25px;box-shadow:var(--shadow);overflow:hidden;min-height:620px}.lesson-top{height:66px;display:flex;justify-content:space-between;align-items:center;padding:0 26px;border-bottom:1px solid var(--line)}.lesson-tag{font-size:9px;color:var(--muted);display:flex;gap:8px;align-items:center}.lesson-tag i{width:6px;height:6px;border-radius:50%;background:var(--purple)}.lesson-status{display:flex;gap:24px;font-size:9px;color:var(--muted)}.lesson-status strong{color:var(--purple);font-size:12px;margin-left:3px}.progress-line{height:2px;background:rgba(255,255,255,.025)}.progress-line div{height:100%;width:10%;background:linear-gradient(90deg,var(--purple2),var(--purple),var(--green));transition:.35s}.lesson-content{position:relative;min-height:470px;padding:48px 45px 30px;display:flex;flex-direction:column;align-items:center}.counter{position:absolute;left:31px;top:25px;font-size:10px;font-weight:700}.counter span:first-child{color:var(--purple)}.feedback-banner{height:27px;margin-bottom:5px;font-size:17px;font-weight:800;color:var(--purple)}.feedback-banner.ok{color:var(--green)}.feedback-banner.bad{color:var(--danger)}.build-track{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;min-height:28px;margin-bottom:12px}.build-chip{padding:6px 10px;border:1px solid var(--line);border-radius:999px;font-size:8px;color:var(--muted);transition:.25s}.build-chip.learned{color:var(--green);border-color:rgba(105,217,183,.24);background:rgba(105,217,183,.07)}.build-chip.current{color:var(--purple);border-color:rgba(170,137,255,.3);background:rgba(170,137,255,.08)}.prompt-label{font-size:8px;letter-spacing:1.2px;font-weight:800;color:var(--muted);margin:7px 0 15px}.listen-btn{min-width:300px;border:1px solid rgba(170,137,255,.18);background:rgba(170,137,255,.055);color:var(--text);border-radius:17px;padding:12px 17px;display:flex;align-items:center;gap:13px;cursor:pointer;text-align:left}.listen-icon{width:44px;height:44px;border-radius:13px;background:rgba(170,137,255,.1);display:grid;place-items:center;font-size:19px}.listen-btn strong,.listen-btn small{display:block}.listen-btn strong{font-size:11px}.listen-btn small{font-size:8px;color:var(--muted);margin-top:3px}.spanish-hint{font-size:20px;margin-top:28px}.grammar-chip{font-size:8px;color:var(--purple);border:1px solid rgba(170,137,255,.23);border-radius:999px;padding:5px 9px;margin-top:8px}.answer-wrap{position:relative;width:min(500px,100%);margin-top:20px}.answer-wrap input{width:100%;height:63px;border:0;border-bottom:2px solid rgba(170,137,255,.7);outline:0;background:transparent;color:var(--text);text-align:center;font-size:28px;font-weight:650;padding:0 44px}.answer-wrap input::placeholder{color:color-mix(in srgb,var(--muted) 58%,transparent)}.answer-wrap.correct input{border-color:var(--green);color:var(--green)}.answer-wrap.wrong input{border-color:var(--danger);color:var(--danger)}.clear-btn{position:absolute;right:7px;top:14px;width:34px;height:34px;border:0;border-radius:9px;background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer}.helper-row{display:flex;gap:25px;margin-top:25px}.text-btn{font-size:9px;color:var(--muted)}.text-btn:hover{color:var(--text)}.lesson-bottom{height:77px;border-top:1px solid var(--line);display:flex;align-items:center;padding:0 27px}.keyboard-tip{font-size:8px;color:var(--muted);flex:1;text-align:center;margin-left:130px}.check-btn{min-width:145px;height:42px;border-radius:12px;border:1px solid rgba(170,137,255,.32);background:transparent;color:var(--text);font-weight:800;font-size:10px;cursor:pointer}.check-btn.next{background:var(--purple);border:0;color:#17131f}.hidden{display:none!important}
.method-strip{display:grid;grid-template-columns:repeat(4,1fr);max-width:880px;margin:34px auto 0}.method-strip article{display:flex;align-items:center;gap:10px;padding:0 13px}.method-strip article b{color:var(--muted);font-weight:400;margin-left:auto}.method-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:12px;font-weight:800;color:#17131f}.method-icon.orange{background:var(--orange)}.method-icon.purple{background:var(--purple)}.method-icon.green{background:var(--green)}.method-icon.blue{background:var(--blue)}.method-strip strong,.method-strip span{display:block}.method-strip strong{font-size:10px}.method-strip span{font-size:8px;color:var(--muted);margin-top:2px}
.features{padding:88px 0}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.feature-grid article{border:1px solid var(--line);border-radius:19px;background:rgba(255,255,255,.017);padding:23px;min-height:210px}.ficon{width:44px;height:44px;border-radius:13px;background:rgba(170,137,255,.1);display:grid;place-items:center}.feature-grid h3{font-size:13px;margin:24px 0 9px}.feature-grid p{font-size:9px;color:var(--muted);line-height:1.75;margin:0}.journey{padding:30px 0 90px}.journey-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.journey-grid article{position:relative;min-height:155px;padding:18px;border:1px solid var(--line);border-radius:17px;background:var(--panel);overflow:hidden}.journey-grid article:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:linear-gradient(90deg,var(--purple),transparent)}.journey-grid span{font-size:8px;color:var(--purple);font-weight:800}.journey-grid strong,.journey-grid small{display:block}.journey-grid strong{font-size:14px;line-height:1.4;margin-top:29px}.journey-grid small{font-size:8px;color:var(--muted);margin-top:7px;line-height:1.5}
.progress-section{padding:80px 0 115px}.progress-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:13px}.metric-card{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:22px;min-height:170px}.metric-card.featured{background:linear-gradient(145deg,rgba(170,137,255,.1),var(--panel))}.metric-card>span{font-size:7px;font-weight:800;color:var(--muted);letter-spacing:.9px}.metric-card strong{display:block;font-size:26px;margin-top:14px;letter-spacing:-1px}.metric-card p{color:var(--muted);font-size:8px;line-height:1.55}.levelbar{height:5px;border-radius:99px;background:rgba(255,255,255,.06);margin-top:23px;overflow:hidden}.levelbar div{height:100%;width:0;background:linear-gradient(90deg,var(--purple),var(--green));border-radius:99px}.recent-card{margin-top:14px;border:1px solid var(--line);border-radius:19px;background:var(--panel);padding:22px}.recent-card>div:first-child>span{font-size:7px;color:var(--muted);font-weight:800}.recent-card h3{font-size:14px;margin:4px 0 14px}.recent-list{display:grid;gap:7px}.recent-item{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;border-top:1px solid var(--line);padding:12px 3px;font-size:9px}.recent-item span{color:var(--muted)}.recent-item b{color:var(--green)}.empty{color:var(--muted);font-size:9px}.final-cta{margin-bottom:80px;border:1px solid rgba(170,137,255,.18);background:linear-gradient(120deg,rgba(170,137,255,.09),rgba(105,217,183,.04));border-radius:25px;padding:38px 40px;display:flex;align-items:center;justify-content:space-between;gap:30px}.final-cta h2{font:800 30px Manrope,sans-serif;letter-spacing:-1.4px;margin:8px 0}.final-cta p{color:var(--muted);font-size:10px;max-width:700px;line-height:1.6}.footer{min-height:100px;border-top:1px solid var(--line);display:flex;align-items:center;gap:22px;color:var(--muted)}.brand.small{font-size:16px}.brand.small .brand-mark{transform:scale(.8)}.footer p,.footer small{font-size:8px}.footer small{margin-left:auto}
.lesson-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;opacity:0;pointer-events:none;transition:.2s}.lesson-modal.open{opacity:1;pointer-events:auto}.modal-backdrop{position:absolute;inset:0;background:rgba(8,8,13,.74);backdrop-filter:blur(11px)}.modal-card{position:relative;z-index:2;width:min(455px,calc(100% - 30px));border:1px solid var(--line);border-radius:25px;background:var(--panel);box-shadow:var(--shadow);padding:34px;text-align:center}.modal-close{position:absolute;right:14px;top:14px;width:31px;height:31px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}.modal-icon{font-size:37px}.modal-card>span{display:block;font-size:8px;letter-spacing:1px;color:var(--purple);font-weight:800;margin-top:11px}.modal-card h2{font:800 28px Manrope,sans-serif;margin:8px 0}.modal-card>p{font-size:9px;color:var(--muted);line-height:1.6}.modal-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:22px}.modal-stats div{padding:15px 7px;border-right:1px solid var(--line)}.modal-stats div:last-child{border-right:0}.modal-stats strong,.modal-stats span{display:block}.modal-stats strong{font-size:19px}.modal-stats span{font-size:7px;color:var(--muted);text-transform:uppercase;margin-top:3px}.modal-next{margin-top:14px;padding:12px;border-radius:12px;background:rgba(170,137,255,.07);font-size:9px;color:var(--muted)}.modal-next strong{color:var(--text)}
@media(max-width:1020px){.topbar{grid-template-columns:1fr auto}.nav{display:none}.hero{grid-template-columns:1fr;padding-top:60px}.hero-copy{text-align:center}.hero-copy>p{margin:auto}.eyebrow,.hero-actions,.trust-row{justify-content:center}.hero-preview{width:min(650px,100%);margin:auto}.lesson-layout{grid-template-columns:1fr}.adaptive-card{display:grid;grid-template-columns:1.1fr repeat(3,1fr);gap:0 16px;align-items:center}.adaptive-title{border-bottom:0;padding:0}.route-meter{grid-column:1/-1}.adaptive-note,.weak-box{grid-column:1/-1}.adaptive-row{border-bottom:0}.feature-grid{grid-template-columns:repeat(2,1fr)}.journey-grid{grid-template-columns:repeat(3,1fr)}.progress-grid{grid-template-columns:1fr 1fr}.metric-card.featured{grid-column:1/-1}.method-strip{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:680px){.shell{width:min(100% - 24px,1120px)}.topbar{padding:0 12px}.language-pill,.cta-mini{display:none}.hero{min-height:auto;padding:56px 0 70px}.hero h1{font-size:43px;letter-spacing:-2.6px}.hero-actions{flex-direction:column}.trust-row{flex-wrap:wrap}.badge-a,.badge-b{display:none}.mini-stats{grid-template-columns:repeat(2,1fr);margin-bottom:85px}.mini-stats article:nth-child(2){border-right:0}.mini-stats article:nth-child(-n+2){border-bottom:1px solid var(--line)}.adaptive-card{grid-template-columns:1fr 1fr}.adaptive-title{grid-column:1/-1}.adaptive-row{display:block}.adaptive-row strong{display:block;text-align:left;margin-top:4px}.lesson-shell{border-radius:20px}.lesson-top{height:auto;align-items:flex-start;gap:12px;flex-direction:column;padding:18px 20px}.lesson-status{width:100%;justify-content:space-between;gap:8px}.lesson-content{padding:58px 18px 28px}.counter{left:20px}.listen-btn{min-width:0;width:100%}.answer-wrap input{font-size:23px}.helper-row{gap:13px;flex-wrap:wrap;justify-content:center}.keyboard-tip{display:none}.lesson-bottom{justify-content:flex-end}.method-strip,.feature-grid,.journey-grid,.progress-grid{grid-template-columns:1fr}.metric-card.featured{grid-column:auto}.final-cta{padding:30px 20px;flex-direction:column;text-align:center}.footer{height:auto;padding:24px 0;flex-wrap:wrap}.footer small{margin-left:0;width:100%}.recent-item{grid-template-columns:1fr auto}.recent-item span:last-child{display:none}}

/* v4 topic + sound polish */
.adaptive-row strong#topicLabel{color:var(--purple)}
.icon-btn.sound-off{opacity:.48;filter:grayscale(1)}
.feedback-banner.ok{animation:successPulse .28s ease}
.feedback-banner.bad{animation:errorShake .28s ease}
@keyframes successPulse{0%{transform:scale(.98)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes errorShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* v5 tactile keyboard feedback */
.answer-wrap{isolation:isolate}
.answer-wrap:after{content:"";position:absolute;inset:4px 22% -7px;border-radius:50%;background:radial-gradient(circle,rgba(170,137,255,.18),transparent 68%);opacity:0;transform:scale(.78);pointer-events:none;z-index:-1}
.answer-wrap.key-tap:after{animation:keyGlow .14s ease-out}
.answer-wrap.key-tap input{animation:keyNudge .09s ease-out}
@keyframes keyGlow{0%{opacity:.55;transform:scale(.76)}100%{opacity:0;transform:scale(1.08)}}
@keyframes keyNudge{0%{transform:translateY(0)}45%{transform:translateY(1px)}100%{transform:translateY(0)}}

/* V8 — immersive practice mode */
.practice-launcher{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;border:1px solid var(--line);background:linear-gradient(145deg,rgba(169,132,255,.08),rgba(105,217,183,.035) 45%,var(--panel));border-radius:28px;padding:38px;box-shadow:var(--shadow);overflow:hidden;position:relative}
.practice-launcher:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(169,132,255,.11);filter:blur(70px);right:-80px;top:-100px;pointer-events:none}.launcher-copy{position:relative;z-index:1}.launcher-kicker{font-size:8px;letter-spacing:1.4px;font-weight:900;color:var(--purple)}.launcher-copy h3{font:800 clamp(27px,3.4vw,43px)/1.08 Manrope,sans-serif;letter-spacing:-1.8px;margin:10px 0 12px}.launcher-copy p{max-width:620px;color:var(--muted);font-size:11px;line-height:1.7}.launcher-badges{display:flex;gap:7px;flex-wrap:wrap;margin:20px 0}.launcher-badges span{font-size:8px;border:1px solid var(--line);background:rgba(255,255,255,.025);padding:7px 10px;border-radius:999px;color:var(--muted)}.practice-open-btn{margin-top:5px}.launcher-demo{position:relative;z-index:1;background:rgba(9,10,15,.58);border:1px solid rgba(170,137,255,.19);border-radius:21px;padding:22px;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}[data-theme="light"] .launcher-demo{background:rgba(255,255,255,.65)}.demo-top{position:absolute;left:18px;right:18px;top:17px;display:flex;justify-content:space-between;color:var(--muted);font-size:8px}.demo-top b{color:var(--purple)}.demo-build{display:flex;gap:6px;margin-bottom:20px}.demo-build i{font-style:normal;font-size:8px;padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--green)}.demo-build i.active{color:var(--purple);border-color:rgba(170,137,255,.35);background:rgba(170,137,255,.08)}.launcher-demo small{font-size:7px;letter-spacing:1.2px;color:var(--muted);font-weight:800}.launcher-demo>strong{font-size:22px;margin-top:8px}.demo-input{font-size:28px;font-weight:750;margin-top:25px;padding:0 32px 7px;border-bottom:2px solid var(--purple)}.demo-input span{display:inline-block;width:2px;height:29px;background:var(--purple);vertical-align:-5px;margin-left:2px;animation:blink 1s infinite}.demo-enter{margin-top:17px;border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:7px;color:var(--muted);letter-spacing:.8px}.demo-enter b{color:var(--text);margin-left:5px}

.practice-overlay{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:18px;opacity:0;pointer-events:none;transition:opacity .22s ease}.practice-overlay.open{opacity:1;pointer-events:auto}.practice-backdrop{position:absolute;inset:0;background:rgba(5,6,10,.82);backdrop-filter:blur(15px)}.practice-card{--practice-h:min(860px,calc(100dvh - 36px));position:relative;z-index:2;width:min(1180px,100%);height:var(--practice-h);max-height:var(--practice-h);background:var(--bg);border:1px solid var(--line);border-radius:27px;overflow:hidden;box-shadow:0 35px 120px rgba(0,0,0,.52);display:flex;flex-direction:column;transform:translateY(14px) scale(.985);transition:transform .25s ease}.practice-overlay.open .practice-card{transform:none}.practice-header{height:66px;flex:0 0 66px;display:flex;align-items:center;padding:0 18px 0 22px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 82%,transparent)}.practice-brand{min-width:145px}.practice-route-mini{flex:1;text-align:center;min-width:0}.practice-route-mini span,.practice-route-mini b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.practice-route-mini span{font-size:7px;text-transform:uppercase;letter-spacing:1px;color:var(--purple);font-weight:900}.practice-route-mini b{font-size:10px;margin-top:3px}.practice-header-actions{min-width:145px;display:flex;justify-content:flex-end;gap:7px}.practice-audio-btn,.practice-exit{height:36px;border:1px solid var(--line);background:rgba(255,255,255,.025);color:var(--muted);border-radius:10px;cursor:pointer}.practice-audio-btn{width:36px}.practice-exit{padding:0 12px;font-size:9px;font-weight:750}.practice-exit span{font-size:15px;margin-left:5px;vertical-align:-1px}.practice-layout{flex:1;min-height:0;display:grid;grid-template-columns:245px 1fr;gap:14px;padding:14px}.practice-adaptive{min-height:0;overflow:auto}.practice-lesson-shell{min-height:0;height:100%;display:flex;flex-direction:column}.practice-lesson-shell .lesson-content{flex:1;min-height:0;justify-content:center;padding-top:35px;padding-bottom:24px;overflow:auto;overscroll-behavior:contain}.practice-lesson-shell .lesson-bottom{flex:0 0 70px}.practice-lesson-shell .lesson-top{flex:0 0 66px}.enter-hint{display:flex;align-items:center;gap:8px;margin-top:13px;color:var(--muted);font-size:8px}.enter-hint kbd{border:1px solid rgba(170,137,255,.27);background:rgba(170,137,255,.08);color:var(--purple);border-radius:7px;padding:5px 8px;font:800 8px Manrope,sans-serif;box-shadow:0 2px 0 rgba(170,137,255,.12)}body.practice-open{overflow:hidden}.answer-wrap.typing{transform:translateY(-1px)}.answer-wrap{transition:transform .08s}.feedback-banner.ok{animation:feedbackPop .35s ease}.feedback-banner.bad{animation:shake .28s ease}@keyframes feedbackPop{0%{transform:scale(.94);opacity:.3}100%{transform:none;opacity:1}}@keyframes shake{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}

@media(max-width:900px){.practice-launcher{grid-template-columns:1fr}.launcher-demo{min-height:230px}.practice-layout{grid-template-columns:1fr}.practice-adaptive{display:none}.practice-route-mini{display:block}}
@media(max-width:680px){.practice-overlay{padding:0}.practice-card{--practice-h:var(--vvh,100dvh);width:100vw;height:var(--practice-h);max-height:var(--practice-h);border:0;border-radius:0}.practice-header{height:54px;flex-basis:54px;padding:0 10px 0 13px;padding-top:env(safe-area-inset-top)}.practice-brand{min-width:92px}.practice-brand .brand-mark{transform:scale(.82);transform-origin:left center}.practice-brand>span:last-child{font-size:14px}.practice-route-mini{padding:0 6px}.practice-route-mini b{font-size:9px}.practice-header-actions{min-width:auto}.practice-exit{width:36px;padding:0;font-size:0}.practice-exit span{font-size:18px;margin:0}.practice-layout{padding:0;gap:0}.practice-lesson-shell{border:0;border-radius:0;box-shadow:none}.practice-lesson-shell .lesson-top{height:50px;flex:0 0 50px;flex-direction:row;align-items:center;padding:0 14px;gap:8px}.practice-lesson-shell .lesson-status{width:auto;margin-left:auto;gap:11px}.practice-lesson-shell .lesson-status span:first-child{display:none}.practice-lesson-shell .lesson-status strong{font-size:11px}.practice-lesson-shell .lesson-content{padding:42px 15px 16px;justify-content:center;overflow:hidden}.practice-lesson-shell .counter{left:16px;top:14px}.practice-lesson-shell .feedback-banner{font-size:14px;height:24px;margin-bottom:1px}.practice-lesson-shell .build-track{margin-bottom:6px}.practice-lesson-shell .prompt-label{margin:3px 0 10px}.practice-lesson-shell .listen-btn{width:min(430px,100%);padding:9px 12px;border-radius:14px}.practice-lesson-shell .listen-icon{width:39px;height:39px}.practice-lesson-shell .spanish-hint{font-size:20px;margin-top:18px}.practice-lesson-shell .grammar-chip{margin-top:6px}.practice-lesson-shell .answer-wrap{margin-top:14px}.practice-lesson-shell .answer-wrap input{height:55px;font-size:25px}.practice-lesson-shell .helper-row{margin-top:13px;gap:14px}.practice-lesson-shell .text-btn{font-size:8px}.practice-lesson-shell .enter-hint{margin-top:8px}.practice-lesson-shell .lesson-bottom{height:58px;flex:0 0 58px;padding:0 12px;padding-bottom:max(0px,env(safe-area-inset-bottom));justify-content:center}.practice-lesson-shell .keyboard-tip{display:none}.practice-lesson-shell .check-btn{width:100%;height:42px;max-width:520px}.practice-launcher{padding:24px 20px;border-radius:22px}.launcher-copy h3{font-size:31px}.launcher-demo{display:none}.practice-overlay.keyboard-open .lesson-top{display:none}.practice-overlay.keyboard-open .practice-header{height:46px;flex-basis:46px}.practice-overlay.keyboard-open .practice-lesson-shell .lesson-content{padding:22px 14px 8px}.practice-overlay.keyboard-open .build-track,.practice-overlay.keyboard-open .listen-btn,.practice-overlay.keyboard-open .grammar-chip,.practice-overlay.keyboard-open .helper-row,.practice-overlay.keyboard-open .enter-hint{display:none}.practice-overlay.keyboard-open .prompt-label{margin:0 0 7px}.practice-overlay.keyboard-open .spanish-hint{margin-top:4px;font-size:17px}.practice-overlay.keyboard-open .answer-wrap{margin-top:8px}.practice-overlay.keyboard-open .lesson-bottom{height:48px;flex-basis:48px}.practice-overlay.keyboard-open .check-btn{height:38px}}


/* V9 — pronunciation control that stays visible above the mobile keyboard */
.keyboard-repeat-btn{display:none}
@media(max-width:680px){
  .practice-lesson-shell{position:relative}
  .practice-overlay.keyboard-open .keyboard-repeat-btn{
    display:flex;
    position:absolute;
    z-index:25;
    top:10px;
    right:12px;
    height:36px;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 12px;
    border:1px solid rgba(170,137,255,.34);
    border-radius:11px;
    background:color-mix(in srgb,var(--panel2) 90%,transparent);
    color:var(--text);
    box-shadow:0 8px 24px rgba(0,0,0,.22);
    font-size:9px;
    font-weight:800;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  .practice-overlay.keyboard-open .keyboard-repeat-btn span{font-size:15px;line-height:1}
  .practice-overlay.keyboard-open .keyboard-repeat-btn.audio-tap{animation:audioTap .18s ease}
  /* Keep the compact repeat control visible while the large audio card stays hidden. */
  .practice-overlay.keyboard-open .build-track,
  .practice-overlay.keyboard-open .listen-btn,
  .practice-overlay.keyboard-open .grammar-chip,
  .practice-overlay.keyboard-open .helper-row,
  .practice-overlay.keyboard-open .enter-hint{display:none}
  .practice-overlay.keyboard-open .counter{padding-right:104px}
}
@keyframes audioTap{0%{transform:scale(.94)}70%{transform:scale(1.04)}100%{transform:scale(1)}}

/* V11 — anti-cheat progress + smoother mobile practice */
.build-track{align-items:center}
.build-chip.build-slot{
  width:18px;
  height:8px;
  padding:0;
  border-radius:999px;
  font-size:0;
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.08);
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.build-chip.build-slot.learned{
  background:rgba(105,217,183,.22);
  border-color:rgba(105,217,183,.38);
}
.build-chip.build-slot.current{
  background:rgba(170,137,255,.16);
  border-color:rgba(170,137,255,.42);
  transform:scaleX(1.18);
}
.route-meter div,.progress-line div{transition-duration:.18s}

@media(max-width:680px){
  /* The practice view already fills the screen; blur/shadow here only wastes GPU time. */
  .practice-overlay{transition:none}
  .practice-backdrop{backdrop-filter:none;background:#0b0c12}
  .practice-card{box-shadow:none;transition:none;transform:none}
  .practice-header{background:var(--panel)}
  .practice-lesson-shell .lesson-content{contain:layout paint style}
  .practice-lesson-shell .build-track{gap:6px;min-height:14px;margin-bottom:8px}
  .build-chip.build-slot{width:16px;height:6px}
  .feedback-banner.ok{animation:feedbackPop .2s ease}
  .feedback-banner.bad{animation:shake .2s ease}
  .answer-wrap.key-tap:after,.answer-wrap.key-tap input{animation:none!important}
}