@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url('./assets/manrope.woff2') format('woff2')}
:root{--navy:#26346c;--red:#cf152c;--muted:#74798b;--line:#e4e6ee;--soft:#f5f6fa;--pale:#fdf3f4;color:var(--navy);background:#fff;font-family:Manrope,Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit;color:inherit}button{cursor:pointer;border:0}button:disabled{cursor:default;opacity:.48}button,input,select,a{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--red);outline-offset:4px}h1:focus{outline:none}h1,h2,p{margin:0}h1{font-size:2.45rem;line-height:1.2;letter-spacing:-1.4px;font-weight:800}h1 span{color:var(--red)}h2{font-size:1rem;line-height:1.5;font-weight:800}p{line-height:1.65}.icon{display:block;width:21px;height:21px;flex-shrink:0}.shell{max-width:1180px;margin:auto;padding:0 48px}.header{height:110px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}.brand{font-size:1.85rem;font-weight:800;letter-spacing:-1.6px;text-decoration:none;color:var(--navy);white-space:nowrap}.brand span{color:var(--red)}.header nav{display:flex;gap:8px}.nav-item{display:flex;align-items:center;gap:8px;background:transparent;font-size:.9rem;font-weight:700;padding:12px 17px;border-radius:9px;color:var(--muted)}.nav-item .icon{display:none}.nav-item.active{color:var(--navy);background:var(--soft)}.nav-item:hover{color:var(--navy)}.language{background:transparent;border:1px solid var(--line);padding:10px 15px;border-radius:9px;font-size:.85rem;font-weight:700}.language[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:white}main{padding:49px 0 65px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:37px}.btn{background:var(--red);color:white;padding:15px 22px;border-radius:10px;display:inline-flex;gap:20px;justify-content:center;align-items:center;font-size:.9rem;font-weight:700;min-height:50px}.btn:hover{background:#b71227}.btn.navy{background:var(--navy)}.btn.full{width:100%;margin-top:28px}.lessons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.lesson-card{display:flex;align-items:center;gap:20px;text-align:left;background:white;border:1px solid var(--line);padding:26px 24px;border-radius:12px;min-height:117px;transition:background .16s,border-color .16s}.lesson-card:hover{border-color:#a9afc7;background:var(--soft)}.number{font-size:.88rem;font-weight:700;color:var(--red);font-variant-numeric:tabular-nums}.lesson-card>div{min-width:0}.lesson-card h2{font-size:1.05rem;letter-spacing:-.2px}.lesson-card p{font-family:Manrope,Arial,sans-serif;font-size:.85rem;color:var(--muted);margin-top:6px;line-height:1.5}.card-arrow{margin-left:auto;color:#969db8}.card-arrow .icon{width:18px;height:18px}.narrow{max-width:680px;margin:0 auto}.back{padding:6px 0;background:transparent;display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.85rem;margin-bottom:29px}.lesson-title{display:flex;align-items:center;gap:18px;margin-bottom:20px}.lesson-title .number{font-size:1.1rem}.lesson-title h1{font-size:2.2rem}.definition{font-size:1rem;line-height:1.7;max-width:620px}.translate-btn{display:inline-flex;padding:8px 0;margin:0 0 0 0;background:transparent;color:var(--red);font-size:.8rem;font-weight:600;text-decoration:underline;text-decoration-color:#e6afb6;text-underline-offset:4px;min-height:35px}.translation{font-size:.94rem;line-height:1.65;color:var(--muted);margin-top:7px;font-weight:400}.example-card{background:var(--soft);padding:31px;border-radius:16px;margin:24px 0 23px;border-left:3px solid var(--navy)}.example-en{font-size:1.75rem;letter-spacing:-.6px;font-weight:700;line-height:1.5}.example-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:26px}.audio-btn{background:transparent;display:inline-flex;align-items:center;gap:8px;font-size:.83rem;font-weight:700;padding:8px 0;min-height:40px}.example-pager{display:flex;align-items:center;gap:14px}.example-pager button{background:white;border:1px solid var(--line);border-radius:8px;width:36px;height:36px;display:grid;place-items:center}.example-pager span{font-size:.8rem;font-variant-numeric:tabular-nums}.pattern{font-size:.95rem;font-weight:700}.pattern>.translate-btn{margin-left:12px}.help{margin:24px 0;color:var(--muted);font-size:.87rem;line-height:1.7}.help summary{cursor:pointer;width:fit-content}.help p{margin-top:12px;color:var(--navy)}.voice-settings{display:flex;gap:15px;align-items:center;flex-wrap:wrap}.voice-settings select{border:1px solid var(--line);background:white;border-radius:7px;padding:8px;font-size:.8rem;max-width:100%}.voice-settings label{font-size:.8rem;display:flex;align-items:center;gap:6px;color:var(--muted)}input[type=checkbox]{accent-color:var(--navy);width:16px;height:16px}.audio-note{font-size:.8rem;color:var(--muted);margin-top:8px}.audio-settings{padding-top:20px;border-top:1px solid var(--line)}.practice-card{background:white;border:1px solid var(--line);padding:26px;border-radius:13px;display:flex;gap:19px;align-items:center;text-align:left;width:100%;margin-bottom:16px}.practice-card:disabled{opacity:1;color:#8c90a1;background:#fafafb}.practice-card>div{flex:1}.practice-card>div p{font-size:.86rem;color:var(--muted);margin-top:5px}.practice-card h2{font-size:1.13rem}.practice-card:not(:disabled):hover{border-color:var(--navy);background:var(--soft)}.practice-icon{color:var(--red);width:40px;display:flex;justify-content:center}.practice-card:disabled .practice-icon{color:#8c90a1}.exercise-top{display:flex;align-items:center;gap:20px;margin-bottom:42px}.exercise-top .back{margin:0}.exercise-top>span{font-size:.8rem;white-space:nowrap}.meter{height:5px;background:var(--line);border-radius:6px;overflow:hidden;flex:1}.meter>span{display:block;height:100%;background:var(--red);border-radius:6px}.exercise h1{font-size:1.6rem;letter-spacing:-.5px;margin-bottom:28px}.prompt{background:var(--soft);border-radius:13px;padding:25px;margin-bottom:25px;font-size:1.15rem;line-height:1.65}.prompt .example-en{font-size:1.4rem;letter-spacing:-.3px}.prompt .voice-settings{margin-bottom:20px}.prompt>.translate-btn{margin-right:15px}.choices{display:grid;gap:12px}.choice{background:white;border:1.5px solid var(--line);border-radius:11px;padding:17px 19px;text-align:left;display:flex;gap:16px;align-items:center;font-size:.96rem;min-height:63px}.choice.selected{border-color:var(--navy);background:var(--soft)}.choice.correct{border-color:#52765b;background:#f1f7f2}.choice.incorrect{border-color:var(--red);background:var(--pale)}.choice:disabled{opacity:1}.choice-index{color:#8a90a6;width:26px;flex-shrink:0;font-size:.8rem}.option-es{display:block;color:var(--muted);font-size:.85rem;margin-top:6px}.answer-input{width:100%;font-size:1.2rem;border:1.5px solid var(--line);border-radius:11px;padding:18px}.hint{font-size:.82rem;color:var(--muted);margin:12px 0}.built-answer,.word-bank{display:flex;gap:8px;flex-wrap:wrap;min-height:70px}.built-answer{border:1.5px dashed #b8bed0;border-radius:11px;padding:13px;margin-bottom:19px;align-items:center}.word{padding:12px 16px;border-radius:8px;background:var(--soft);border:1px solid var(--line);font-size:.95rem;min-height:44px}.word-bank{align-content:start}.feedback{border-radius:11px;background:#f1f7f2;padding:23px;margin-top:25px;color:var(--navy)}.feedback.wrong{background:var(--pale)}.feedback strong{display:block;margin-bottom:12px;font-size:1rem}.feedback-answer{font-size:1.05rem;font-weight:700}.feedback>p{font-size:.88rem;margin-top:12px}.feedback .translation{font-size:.88rem}.retry{font-size:.8rem;color:var(--red);margin:-15px 0 20px}.results{text-align:center}.result-mark{border-radius:50%;width:64px;height:64px;margin:0 auto 22px;background:var(--soft);display:grid;place-items:center;color:var(--red)}.result-mark .icon{width:30px;height:30px}.score{font-size:5rem;font-weight:800;letter-spacing:-4px;margin-top:20px}.score span{font-size:2.2rem;font-weight:500;letter-spacing:-1px;color:#9ca3bc}.result-review{text-align:left;margin-top:35px}.result-review h2{margin-bottom:8px}.review-link{width:100%;background:white;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;text-align:left;gap:15px;padding:16px 0;font-size:.92rem}.text-button{background:transparent;font-size:.9rem;padding:18px;text-decoration:underline;text-underline-offset:4px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding:25px 0;margin-bottom:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.stats strong{font-size:2rem;font-weight:800;display:block;letter-spacing:-1px}.stats span{font-size:.8rem;color:var(--muted);display:block;margin-top:5px}.progress-row{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;border-bottom:1px solid var(--line);padding:19px 0;background:white;text-align:left;font-size:.95rem}.progress-row small{font-size:.78rem;color:var(--muted);text-align:right}.muted{color:var(--muted);font-size:.9rem}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:20;background:var(--navy);color:white;padding:14px 22px;border-radius:10px;font-size:.9rem;max-width:90vw}.notice{color:var(--red);font-size:.85rem;margin-bottom:24px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1000px){.shell{padding:0 30px}h1{font-size:2rem}.lesson-card{padding:22px 19px;gap:15px}.lesson-card h2{font-size:1rem}.lesson-card p{font-size:.8rem}.header{height:95px}.nav-item{padding:10px 12px;font-size:.85rem}}
@media(max-width:700px){.shell{padding:0 22px}.header{height:85px}.brand{font-size:1.7rem}.header nav{position:fixed;bottom:0;left:0;right:0;z-index:10;justify-content:space-around;padding:8px 10px max(10px,env(safe-area-inset-bottom));background:#fffffff5;backdrop-filter:blur(12px);border-top:1px solid var(--line);gap:4px}.nav-item{flex:1;justify-content:center;flex-direction:column;gap:5px;padding:9px 8px;font-size:.73rem;max-width:160px;border-radius:9px}.nav-item .icon{display:block;width:20px;height:20px}.nav-item.active{color:var(--red);background:transparent}.language{font-size:.78rem;padding:9px 12px}main{padding:32px 0 115px}.page-heading{gap:16px;margin-bottom:28px}.page-heading h1{font-size:1.65rem;letter-spacing:-.9px;line-height:1.3}.page-heading h1 span{display:block}.page-heading .btn{font-size:.8rem;padding:12px 15px;gap:10px;min-height:45px}.page-heading .btn .icon{width:16px;height:16px}.lessons{grid-template-columns:1fr;gap:10px}.lesson-card{padding:23px 20px;gap:20px;min-height:99px;border-radius:11px}.lesson-card h2{font-size:1.04rem}.lesson-card p{font-size:.85rem;margin-top:5px}.number{font-size:.83rem}.back{margin-bottom:25px;font-size:.8rem}.lesson-title{gap:13px;margin-bottom:17px}.lesson-title h1{font-size:1.9rem;letter-spacing:-1px}.lesson-title .number{font-size:.9rem}.definition{font-size:.95rem}.example-card{padding:24px;margin:21px 0}.example-en{font-size:1.55rem}.example-bottom{margin-top:24px}.translation{font-size:.88rem}.pattern{font-size:.9rem}.practice-card{padding:23px 18px;gap:12px}.practice-card h2{font-size:1.02rem}.practice-card>div p{font-size:.8rem}.practice-icon{width:30px}.practice-card>.icon{width:17px}.exercise-top{margin-bottom:30px}.exercise h1{font-size:1.4rem;line-height:1.45}.prompt{padding:22px;font-size:1rem}.prompt .example-en{font-size:1.35rem}.choice{padding:17px 16px;gap:12px;font-size:.92rem}.stats{gap:12px}.stats strong{font-size:1.7rem}.stats span{font-size:.72rem}.progress-row{font-size:.86rem;gap:12px}.progress-row small{font-size:.7rem;max-width:88px;flex-shrink:0}.toast{bottom:105px}.results h1{font-size:2rem}.score{font-size:4rem}.feedback{padding:20px}.voice-settings{gap:12px}}
@media(max-width:370px){.shell{padding:0 16px}.page-heading h1{font-size:1.45rem}.lesson-card{gap:13px;padding:20px 16px}.lesson-card p{font-size:.8rem}.lesson-card h2{font-size:.96rem}.voice-settings select{max-width:210px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.nav-item,.language,.translate-btn,.voice-settings select,.voice-settings label,.audio-btn{font-size:.875rem}.lesson-card p{font-size:.875rem}.example-pager button{width:44px;height:44px}.word:disabled{opacity:1}.nav-item{min-height:44px}

/* Dark learning surface: brand navy and red, quiet illuminated edges. */
:root{color-scheme:dark;--navy:#26346c;--red:#cf152c;--muted:#a4adc7;--line:#ffffff16;--soft:#151e38;--pale:#301421;--light:#edf1ff;background:#080d20;color:var(--light)}
body{background:radial-gradient(ellipse at 88% 0%,#26346c65,transparent 48%),radial-gradient(ellipse at 0% 50%,#cf152c09,transparent 45%),#080d20;min-height:100vh}
.shell{max-width:1160px}.header{height:104px;border-color:#ffffff10}.brand{color:#f5f6ff;font-size:1.9rem;letter-spacing:-1.2px}.brand span{color:#ff526a}
.header nav{padding:5px;background:#11182c;border:1px solid var(--line);border-radius:16px}.nav-item{border-radius:11px;color:#9ca8c9}.nav-item.active{background:#26346c;color:white;box-shadow:0 3px 16px #0002}.nav-item:hover{color:white}
.language{color:#b6c0de;border-color:#3d4970;background:#10172a;border-radius:24px}.language[aria-pressed=true]{background:#26346c55;color:#e4eaff;border-color:#7185cf70}
.page-heading{margin-bottom:30px}h1{font-weight:700;letter-spacing:-1.5px}h1 span{color:#b8c7ff}.btn{background:var(--red);border:1px solid #ff526a44;box-shadow:0 5px 22px #cf152c21;border-radius:13px}.btn:hover{background:#e0213c;box-shadow:0 5px 25px #cf152c38}.btn.navy{background:var(--navy);border-color:#748cff4d;box-shadow:none}
.lessons{gap:16px}.lesson-card{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 24px;gap:19px;align-items:start;padding:27px 26px;min-height:157px;border:1px solid transparent;border-radius:20px;background:linear-gradient(135deg,#17213c,#10172b) padding-box,linear-gradient(125deg,#596ca45c,#ffffff0b 65%) border-box;box-shadow:0 10px 24px #00000016,inset 0 1px 0 #ffffff04;transition:transform .18s,border-color .18s,box-shadow .18s}
.lesson-card:hover{transform:translateY(-3px);border-color:#8198eb66;background:linear-gradient(135deg,#202e51,#141d36);box-shadow:0 10px 30px #0003,0 0 20px #26346c55}
.number{display:grid;place-items:center;width:37px;height:37px;border-radius:12px;background:#26346c55;border:1px solid #8b9cdf26;color:#c4d1ff;font-size:.8rem;letter-spacing:.4px;flex-shrink:0}.lesson-card:nth-child(3n+2) .number{background:#cf152c14;border-color:#f4697b30;color:#ff9ba9}
.lesson-card h2{color:#f0f3ff;font-size:1.03rem;margin:4px 0 12px;line-height:1.45}.lesson-card p[lang=en]{color:#ced6ed;font-size:.95rem;line-height:1.6;margin:0}.lesson-card p.card-translation{color:#97a5c8;font-size:.875rem;line-height:1.6;margin-top:6px}.card-arrow{margin-top:9px;color:#6d7da9}.card-arrow .icon{width:18px;height:18px}
.back{color:#a4b3d5}.lesson-title h1{font-weight:700}.definition{color:#c3cce2}.example-card{background:linear-gradient(130deg,#1e2a4f,#121b32);border:1px solid #6173b63d;border-left:3px solid #748cdf;box-shadow:0 15px 40px #0002;border-radius:20px}.example-en{color:white}.translation{color:#aebbdc}.translate-btn{color:#ff94a5;text-decoration-color:#ff94a544}.example-pager button{background:#26346c66;border-color:#7c91dc33;color:#dbe4ff;border-radius:12px}.audio-btn{color:#c5d3f4}.pattern{color:#c6d4ff;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:#26346c24;font-size:.95rem}.help p{color:#c4cde4}.voice-settings select{background:#111a31;border-color:#566ba34d;border-radius:10px;color:#ccd8f5}.audio-note{color:#9daaca}
.practice-card{background:linear-gradient(135deg,#1a2542,#11192d);border-color:#6173b638;border-radius:19px;color:#edf1ff}.practice-card:not(:disabled):hover{background:#202d50;border-color:#7085c77a}.practice-card:disabled{background:#11182a;color:#919fbe}.practice-card>div p{color:#a4b2cf}.practice-icon{color:#ff7086}.practice-card:disabled .practice-icon{color:#8290b1}
.prompt{background:linear-gradient(125deg,#1a2543,#11192d);border:1px solid #6d80bc30;border-radius:18px;color:#dce5ff}.choice{background:#131c32;border-color:#3c4b703e;border-radius:14px;color:#dfe7ff}.choice.selected{background:#26346c88;border-color:#92a6f0;box-shadow:0 0 20px #26346c44}.choice.correct{background:#152e2b;border-color:#6fa18a;color:#e0f6ec}.choice.incorrect{background:#351b29;border-color:#ef6a82;color:#ffe0e6}.choice-index{color:#9cacd3}.option-es{color:#aebbdc}.answer-input{background:#131d34;border-color:#576ba951;border-radius:14px;color:white}.answer-input::placeholder{color:#a2aec9}.word{background:#26346c60;border-color:#617abb55;color:#e2eaff;border-radius:11px}.built-answer{background:#11192c;border-color:#677db976;border-radius:14px}.feedback{background:#142c28;border:1px solid #6fa18a45;color:#e1edea}.feedback.wrong{background:#2d1825;border-color:#cf152c66}.feedback .translation{color:#c0c9dc}.retry,.notice{color:#ff9aab}.result-mark{background:#26346c66;border:1px solid #738adb40;color:#adbfff}.score{color:#f3f6ff}.score span{color:#8799c4}.review-link,.progress-row{background:transparent;color:#d7e1fb;border-color:#7b8bb221}.stats strong{color:#d4e0ff}.stats span{color:#a4b2d1}.toast{background:#26346c;border:1px solid #8d9fe34d;box-shadow:0 10px 30px #0005}.text-button{color:#c0cfee}input[type=checkbox]{accent-color:#829af0}
@media(max-width:700px){.shell{padding:0 20px}.header{height:82px}.header nav{position:fixed;bottom:14px;left:16px;right:16px;border:1px solid #8399cf30;border-radius:22px;padding:8px 6px max(8px,env(safe-area-inset-bottom));background:#10192eea;backdrop-filter:blur(22px);box-shadow:0 10px 40px #0008}.nav-item{font-size:.875rem;min-width:0;gap:6px;padding:9px 4px}.nav-item.active{color:#eef3ff;background:#26346c99;border-radius:15px;box-shadow:none}.nav-item.active .icon{color:#ff7e91}.brand{font-size:1.65rem}.language{font-size:.8rem;padding:10px 12px}.page-heading h1{font-size:1.85rem;letter-spacing:-1px}.page-heading{align-items:center;gap:12px;margin-bottom:27px}.page-heading .btn{padding:13px 16px;border-radius:12px;font-size:.875rem}.page-heading .btn .icon{display:none}.lessons{gap:13px}.lesson-card{grid-template-columns:32px minmax(0,1fr) 16px;gap:14px;padding:21px 18px;min-height:149px;border-radius:18px}.number{width:32px;height:32px;border-radius:10px;font-size:.75rem}.lesson-card h2{font-size:1rem;margin-top:3px;margin-bottom:10px}.lesson-card p[lang=en]{font-size:.95rem}.lesson-card p.card-translation{font-size:.875rem}.card-arrow .icon{width:16px}.lesson-title .number{font-size:.85rem}.example-card{padding:24px 21px}.exercise h1{font-size:1.45rem}.progress-row{font-size:.95rem}.progress-row small{font-size:.8rem}.stats span{font-size:.8rem}main{padding-top:32px;padding-bottom:133px}}
@media(max-width:370px){.shell{padding:0 15px}.page-heading h1{font-size:1.6rem}.page-heading .btn{padding:12px;font-size:.8rem}.lesson-card{padding:20px 16px;gap:11px}.nav-item{font-size:.8rem}.header nav{left:10px;right:10px}.lesson-title h1{font-size:1.65rem}}

/* Light, depth and responsive motion. Decorative layers never capture input. */
.atmosphere{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;isolation:isolate}.aurora{position:absolute;border-radius:50%;opacity:.52;transform:translate3d(0,0,0)}.aurora-blue{width:85vw;height:75vh;top:-30vh;right:-20vw;background:radial-gradient(ellipse,#3e56b555,#26346c38 40%,transparent 70%)}.aurora-red{width:70vw;height:70vh;bottom:-35vh;left:-32vw;background:radial-gradient(ellipse,#cf152c30,transparent 65%)}.horizon-grid{position:absolute;inset:55% -40% -40%;background-image:linear-gradient(#819dff0c 1px,transparent 1px),linear-gradient(90deg,#819dff0c 1px,transparent 1px);background-size:72px 72px;transform:perspective(500px) rotateX(58deg);transform-origin:50% 0;mask-image:linear-gradient(transparent,#0009 38%,transparent 90%)}
#app{position:relative;z-index:1}.header{gap:14px}.header nav{margin-left:auto;margin-right:auto}.language{flex-shrink:0}
.lesson-card{isolation:isolate;overflow:hidden;transform-style:preserve-3d;transition:transform .28s ease,border-color .28s,box-shadow .28s}.lesson-card>*,.btn>*{position:relative;z-index:2}.lesson-card::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(380px circle at var(--spot-x,50%) var(--spot-y,0%),#849dff22,transparent 68%);opacity:.3;transition:opacity .3s;pointer-events:none}.lesson-card::after{content:'';position:absolute;top:0;left:8%;right:30%;height:1px;background:linear-gradient(90deg,transparent,#afc2ffb3,transparent);box-shadow:0 0 12px #7d9aff55;pointer-events:none}.lesson-card:nth-child(3n+2)::after{background:linear-gradient(90deg,transparent,#ff8d9fa0,transparent);box-shadow:0 0 12px #cf152c50}.lesson-card .card-arrow{transition:transform .25s,color .25s}.lesson-card:hover .card-arrow{color:#d6e1ff;transform:translateX(4px)}.lesson-card:active{transform:scale(.985)}.btn{position:relative;overflow:hidden;transition:transform .18s,box-shadow .25s,background .25s}.btn:active{transform:scale(.97)}.btn::after{content:'';position:absolute;inset:-70% -50%;background:linear-gradient(110deg,transparent 43%,#ffffff26 50%,transparent 57%);transform:translateX(-100%);pointer-events:none}.btn:hover::after{animation:button-sheen .75s ease-out}.example-pager button,.word,.choice{transition:transform .18s,border-color .2s,background .2s}.example-pager button:active,.word:active{transform:scale(.94)}.choice:active:not(:disabled){transform:scale(.992)}.result-mark{position:relative;overflow:visible}.celebration-dot{position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:2px;background:#a9bdff;box-shadow:0 0 9px #849dff77;opacity:0;pointer-events:none}.celebration-dot:nth-child(3n){background:#ff6f86;box-shadow:0 0 9px #cf152c66}
html[data-motion=on] .aurora-blue{animation:ambient-drift 19s ease-in-out infinite alternate}html[data-motion=on] .aurora-red{animation:ambient-drift 23s ease-in-out -7s infinite alternate-reverse}html[data-motion=on] .horizon-grid{animation:grid-drift 24s linear infinite}html[data-motion=on] .page-heading h1 span{background:linear-gradient(100deg,#9fb4ef 5%,#eef4ff 35%,#b0c2ff 55%,#9fb4ef 80%);background-size:240% auto;background-clip:text;-webkit-background-clip:text;color:transparent;animation:title-light 8s ease-in-out infinite}html[data-motion=on] .surface-enter{animation:surface-in .38s ease-out both}html[data-motion=on] .reveal-pending{opacity:0;transform:translateY(16px)}html[data-motion=on] .card-arrive{animation:card-in .55s cubic-bezier(.2,.7,.2,1) var(--arrival-delay,0ms) backwards}html[data-motion=on] .card-arrive::after{animation:edge-light 1.3s ease-out var(--arrival-delay,0ms) both}html[data-motion=on] .feedback{animation:feedback-in .32s ease-out both}html[data-motion=on] .feedback:not(.wrong){box-shadow:0 0 22px #64b89c14}html[data-motion=on] .built-answer .word:last-child{animation:word-in .2s ease-out both}html[data-motion=on] .result-mark>.icon{animation:result-in .6s cubic-bezier(.2,1.6,.4,1) both}html[data-motion=on] .celebration-dot{animation:celebrate 1s ease-out var(--delay,0ms) both}html[data-motion=on] .meter>span{transition:width .45s ease;box-shadow:0 0 12px #cf152c80}
@media(hover:hover) and (pointer:fine){html[data-motion=on] .lesson-card:hover{transform:perspective(900px) translateY(-4px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:0 18px 35px #0004,0 0 25px #26346c44}.lesson-card:hover::before{opacity:1}}
@keyframes ambient-drift{from{transform:translate3d(-2%,0,0) scale(.95)}to{transform:translate3d(9%,12%,0) scale(1.12)}}
@keyframes grid-drift{to{background-position:0 72px,0 72px}}
@keyframes title-light{0%,100%{background-position:0% center}50%{background-position:100% center}}
@keyframes surface-in{from{opacity:.5;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes card-in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes edge-light{from{opacity:0;transform:translateX(-70%)}40%{opacity:1}to{opacity:.65;transform:translateX(0)}}
@keyframes button-sheen{to{transform:translateX(100%)}}
@keyframes feedback-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes word-in{from{opacity:.5;transform:scale(.91)}to{opacity:1;transform:scale(1)}}
@keyframes result-in{from{opacity:0;transform:scale(.3) rotate(-25deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes celebrate{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(120deg) scale(.5)}}
html[data-hidden=true] *,html[data-hidden=true] *::before,html[data-hidden=true] *::after{animation-play-state:paused!important}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html[data-motion=off] .lesson-card:hover,html[data-motion=off] .btn:active{transform:none}html[data-motion=off] .reveal-pending{opacity:1;transform:none}
@media(max-width:700px){.header{gap:10px}.header .brand{margin-right:auto}.horizon-grid{background-size:55px 55px;opacity:.5}.aurora-blue{width:140vw;right:-70vw}.aurora-red{width:130vw;left:-80vw}.lesson-card::before{opacity:.45}}
@media(prefers-reduced-motion:reduce){.reveal-pending{opacity:1!important;transform:none!important}.lesson-card:hover{transform:none!important}.celebration-dot{display:none}}

/* Meaning-specific SVG miniatures; short entrance gestures, no endless loops. */
.lesson-card{grid-template-columns:76px minmax(0,1fr) 20px;align-items:center;min-height:178px;gap:22px}.card-icon{position:relative;display:grid;place-items:center;width:76px;height:82px;border-radius:21px;color:#bccfff;background:radial-gradient(ellipse at 50% 35%,#526cbe3b,#26346c15 72%);border:1px solid #889ee333;box-shadow:inset 0 1px 0 #b6caff14,0 8px 25px #0002}.card-icon::after{content:'';position:absolute;width:31px;height:3px;border-radius:50%;bottom:14px;background:#819eff21;filter:blur(2px)}.meaning-svg{width:38px;height:38px;margin-top:-6px;overflow:visible;filter:drop-shadow(0 0 7px #7a9aff35);transform-origin:50% 50%}.icon-index{position:absolute;bottom:-7px;right:-5px;border:1px solid #7e92d54d;background:#121d36;color:#9cadd6;padding:2px 6px;border-radius:6px;font-size:.65rem;letter-spacing:1px;line-height:1.5}.lesson-card:nth-child(3n+2) .card-icon{color:#ffb0bc;background:radial-gradient(ellipse at 50% 35%,#cf152c26,#26346c15 75%);border-color:#e7758938}.lesson-card:nth-child(3n+2) .meaning-svg{filter:drop-shadow(0 0 7px #cf152c44)}.lesson-card .card-arrow{align-self:start}.lesson-card h2{margin-top:0}
html[data-motion=on] .aurora-blue,html[data-motion=on] .aurora-red{animation:ambient-drift 4.5s ease-out 1 both}html[data-motion=on] .horizon-grid{animation:grid-drift 4.5s ease-out 1 both}html[data-motion=on] .page-heading h1 span{animation:title-light 4s ease-in-out 1 both}
html[data-motion=on] .card-arrive .meaning-svg>*{stroke-dasharray:100;animation:svg-trace 1.35s ease-out var(--arrival-delay,0ms) both}
html[data-motion=on] .card-arrive .icon-mail svg{animation:mail-deliver 1.6s ease-out var(--arrival-delay,0ms) both}
html[data-motion=on] .card-arrive .icon-key-round svg{animation:key-turn 1.8s ease-in-out var(--arrival-delay,0ms) both}
html[data-motion=on] .card-arrive .icon-shopping-bag svg{animation:bag-swing 1.9s ease-in-out var(--arrival-delay,0ms) both;transform-origin:50% 15%}
html[data-motion=on] .card-arrive .icon-coins svg{animation:coin-drop 1.8s ease-out var(--arrival-delay,0ms) both}
html[data-motion=on] .card-arrive .icon-sun svg{animation:sun-rise 2.2s ease-out var(--arrival-delay,0ms) both}
html[data-motion=on] .card-arrive .icon-map-pin svg{animation:pin-land 1.8s ease-out var(--arrival-delay,0ms) both}
html[data-motion=on] .card-arrive .icon-lightbulb svg{animation:bulb-light 2.2s ease-out var(--arrival-delay,0ms) both}
html[data-motion=on] .card-arrive .icon-glass-water svg{animation:water-tilt 2s ease-in-out var(--arrival-delay,0ms) both}
html[data-motion=on] .card-arrive .icon-bus svg{animation:bus-arrive 2s ease-out var(--arrival-delay,0ms) both}
html[data-motion=on] .card-arrive .icon-heart-pulse svg{animation:heart-beat 1.8s ease-in-out var(--arrival-delay,0ms) both}
html[data-motion=on] .card-arrive .icon-users svg{animation:people-meet 1.8s ease-out var(--arrival-delay,0ms) both}
html[data-motion=on] .card-arrive .icon-scissors svg{animation:scissors-snip 1.8s ease-in-out var(--arrival-delay,0ms) both}
html[data-motion=on] .card-arrive .icon-ticket-check svg{animation:ticket-reveal 1.8s ease-out var(--arrival-delay,0ms) both}
html[data-motion=on] .card-arrive .icon-shield-check svg{animation:shield-settle 1.8s ease-out var(--arrival-delay,0ms) both}
@media(hover:hover){html[data-motion=on] .lesson-card:hover .meaning-svg{animation:icon-greet .7s ease-out both}.lesson-card:hover .card-icon{border-color:#b0c5ff80;box-shadow:inset 0 1px 0 #c4d7ff20,0 0 25px #526eb926}}
@keyframes svg-trace{0%{stroke-dashoffset:100;opacity:.2}100%{stroke-dashoffset:0;opacity:1}}
@keyframes mail-deliver{0%{transform:translateY(-9px) scale(.85);opacity:0}55%{transform:translateY(3px) scale(1.05);opacity:1}100%{transform:none}}
@keyframes key-turn{0%{transform:rotate(-32deg)}45%{transform:rotate(15deg)}75%{transform:rotate(-6deg)}100%{transform:none}}
@keyframes bag-swing{0%{transform:rotate(-12deg)}30%{transform:rotate(10deg)}60%{transform:rotate(-5deg)}100%{transform:none}}
@keyframes coin-drop{0%{transform:translateY(-11px) scale(.8)}48%{transform:translateY(4px) scale(1.07,.95)}70%{transform:translateY(-3px)}100%{transform:none}}
@keyframes sun-rise{0%{transform:translateY(7px) rotate(-65deg) scale(.8);opacity:.2}100%{transform:none;opacity:1}}
@keyframes pin-land{0%{transform:translateY(-12px)}50%{transform:translateY(3px) scale(1.05,.95)}75%{transform:translateY(-3px)}100%{transform:none}}
@keyframes bulb-light{0%{opacity:.2;filter:drop-shadow(0 0 0 transparent)}45%{opacity:1;filter:drop-shadow(0 0 12px #b2caffb0)}100%{opacity:1;filter:drop-shadow(0 0 7px #7a9aff35)}}
@keyframes water-tilt{0%{transform:rotate(-9deg)}35%{transform:rotate(8deg)}65%{transform:rotate(-4deg)}100%{transform:none}}
@keyframes bus-arrive{0%{transform:translateX(-16px);opacity:0}55%{transform:translateX(3px);opacity:1}70%{transform:translate(-1px,-2px)}100%{transform:none}}
@keyframes heart-beat{0%,35%,65%,100%{transform:scale(1)}20%,50%{transform:scale(1.14)}}
@keyframes people-meet{0%{transform:translateX(-6px) scale(.85)}60%{transform:translateX(2px) scale(1.04)}100%{transform:none}}
@keyframes scissors-snip{0%,40%,80%,100%{transform:rotate(0deg)}20%,60%{transform:rotate(-13deg)}}
@keyframes ticket-reveal{0%{transform:rotate(-15deg) translateY(6px);opacity:.2}65%{transform:rotate(4deg);opacity:1}100%{transform:none}}
@keyframes shield-settle{0%{transform:scale(.7);opacity:.3}65%{transform:scale(1.1);opacity:1}100%{transform:none}}
@keyframes icon-greet{0%,100%{transform:translateY(0)}45%{transform:translateY(-4px) rotate(-5deg)}}
@media(max-width:700px){.lesson-card{grid-template-columns:60px minmax(0,1fr) 14px;gap:16px;min-height:171px;padding:23px 18px}.card-icon{width:60px;height:70px;border-radius:17px}.meaning-svg{width:32px;height:32px}.icon-index{font-size:.65rem}.lesson-card p[lang=en]{font-size:.9rem}.lesson-card .card-translation{font-size:.875rem}.card-icon::after{bottom:10px;width:24px}}
@media(max-width:370px){.lesson-card{grid-template-columns:48px minmax(0,1fr) 12px;gap:12px;padding:22px 14px}.card-icon{width:48px;height:60px;border-radius:14px}.meaning-svg{width:28px;height:28px}.lesson-card h2{font-size:.94rem}}

/* Course-menu cards: one label, one animated symbol. */
.lessons{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.lesson-card{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;min-height:238px;padding:30px 20px 25px;text-align:center;border-radius:24px}
.lesson-card h2{margin:0;font-size:1rem;line-height:1.5;font-weight:700;max-width:210px;min-height:3em;display:flex;align-items:center;justify-content:center}
.card-icon{width:104px;height:110px;flex-shrink:0;border:0;border-radius:30px;background:radial-gradient(ellipse at center,#526cbe40,transparent 72%);box-shadow:none}
.meaning-svg{width:66px;height:66px;margin-top:0;filter:drop-shadow(0 0 12px #7a9aff55)}
.card-icon::after{bottom:0;width:45px;height:4px;background:#819eff28;filter:blur(3px)}
.lesson-card:nth-child(3n+2) .card-icon{background:radial-gradient(ellipse at center,#cf152c30,transparent 72%);border:0}
.lesson-card:hover .card-icon{box-shadow:none;border:0}
@media(max-width:1000px){.lessons{grid-template-columns:repeat(3,minmax(0,1fr))}.lesson-card{min-height:226px}}
@media(max-width:700px){.lessons{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.lesson-card{gap:17px;min-height:215px;padding:24px 12px 18px;border-radius:21px}.card-icon{width:88px;height:94px;border-radius:25px}.meaning-svg{width:57px;height:57px}.lesson-card h2{font-size:.9rem;line-height:1.45;max-width:100%;min-height:3em}.card-icon::after{width:36px;bottom:0}}
@media(max-width:370px){.lessons{gap:10px}.lesson-card{min-height:202px;padding:21px 10px 17px;gap:14px}.card-icon{width:78px;height:88px}.meaning-svg{width:51px;height:51px}.lesson-card h2{font-size:.875rem}}

/* Continuous icon gestures. Only visible cards run; labels remain still. */
html[data-motion=on] .lesson-card .card-icon .meaning-svg{animation:icon-float var(--loop-duration,4s) ease-in-out var(--loop-delay,0s) infinite;animation-play-state:paused}
html[data-motion=on] .lesson-card.card-live .card-icon .meaning-svg{animation-play-state:running}
html[data-motion=on] .lesson-card .icon-key-round .meaning-svg{animation-name:icon-turn}
html[data-motion=on] .lesson-card .icon-shopping-bag .meaning-svg,html[data-motion=on] .lesson-card .icon-glass-water .meaning-svg{animation-name:icon-sway}
html[data-motion=on] .lesson-card .icon-coins .meaning-svg,html[data-motion=on] .lesson-card .icon-map-pin .meaning-svg{animation-name:icon-bob}
html[data-motion=on] .lesson-card .icon-sun .meaning-svg{animation-name:icon-orbit;animation-duration:18s;animation-timing-function:linear}
html[data-motion=on] .lesson-card .icon-lightbulb .meaning-svg{animation-name:icon-illuminate}
html[data-motion=on] .lesson-card .icon-bus .meaning-svg{animation-name:icon-cruise}
html[data-motion=on] .lesson-card .icon-heart-pulse .meaning-svg{animation-name:icon-pulse}
html[data-motion=on] .lesson-card .icon-scissors .meaning-svg{animation-name:icon-snip}
html[data-motion=on] .lesson-card .icon-ticket-check .meaning-svg{animation-name:icon-sway}
html[data-motion=on] .lesson-card .icon-shield-check .meaning-svg{animation-name:icon-breathe}
@keyframes icon-float{0%,100%{transform:translateY(2px)}50%{transform:translateY(-4px)}}
@keyframes icon-turn{0%,65%,100%{transform:rotate(0deg)}25%{transform:rotate(-18deg)}42%{transform:rotate(8deg)}}
@keyframes icon-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes icon-bob{0%,65%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}45%{transform:translateY(1px)}}
@keyframes icon-orbit{to{transform:rotate(360deg)}}
@keyframes icon-illuminate{0%,100%{filter:drop-shadow(0 0 4px #7a9aff35);transform:scale(1)}50%{filter:drop-shadow(0 0 13px #b2caff99);transform:scale(1.04)}}
@keyframes icon-cruise{0%,100%{transform:translateX(-3px)}45%{transform:translate(4px,-1px)}60%{transform:translate(2px,1px)}}
@keyframes icon-pulse{0%,35%,65%,100%{transform:scale(1)}18%,48%{transform:scale(1.09)}}
@keyframes icon-snip{0%,50%,100%{transform:rotate(0deg)}18%,36%{transform:rotate(-11deg)}27%{transform:rotate(3deg)}}
@keyframes icon-breathe{0%,100%{transform:scale(.97)}50%{transform:scale(1.04)}}