:root{color-scheme:light;--navy:#0b1739;--blue:#3366ff;--muted:#5c6780;--border:#e0e6f2;font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;color:var(--navy);background:#f3f6fc;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 86% 0%,#e1eaff 0,transparent 46%),#f3f6fc}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.wrap{max-width:1160px;width:calc(100% - 80px);margin-inline:auto}.site-header{display:flex;align-items:center;justify-content:space-between;padding-block:32px}.brand{display:flex;align-items:center;gap:12px;font-size:1.4375rem;font-weight:750;letter-spacing:-.8px}.brand-light{font-weight:400}.brand-mark{display:flex;align-items:center;justify-content:center;width:43px;height:43px;border-radius:13px;background:var(--navy);color:#fff;font-size:1.5rem;letter-spacing:-3px;padding-right:3px}.brand-mark span{color:#8faaff}.header-label{font-size:0.875rem;color:var(--muted);padding:8px 14px;border:1px solid #d8e1f1;border-radius:999px;background:#ffffff70}.intro{padding:34px 0 30px}.eyebrow{font-size:0.75rem;font-weight:700;letter-spacing:1.8px;display:flex;align-items:center;gap:10px;margin:0 0 18px}.tricolor{width:27px;height:5px;border-radius:3px;background:linear-gradient(90deg,#111 0 33%,#dd303b 33% 66%,#e6b544 66%)}h1{font-size:clamp(2.25rem,4.5vw,3.625rem);line-height:1.1;letter-spacing:-2.2px;margin:0 0 18px;font-weight:750}h1 span{color:var(--blue)}.intro-text{font-size:1.125rem;line-height:1.65;color:var(--muted);margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:22px}.languages{background:#fff;padding:30px;border:1px solid var(--border);border-radius:24px;box-shadow:0 8px 32px #12306306}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.step{font-size:0.75rem;letter-spacing:1.5px;font-weight:700;color:#707d96;display:block}.section-heading h2{font-size:1.5rem;letter-spacing:-.7px;margin:10px 0 0;line-height:1.3}.language-count{font-size:0.75rem;white-space:nowrap;border-radius:7px;background:#edf2fc;padding:7px 9px;color:#536580}.section-copy{font-size:0.875rem;color:var(--muted);margin:10px 0 23px;line-height:1.5}.language-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.language-card{display:flex;align-items:center;gap:12px;border:1px solid var(--border);padding:16px 12px;border-radius:14px;transition:background .15s,border-color .15s,transform .15s;min-height:88px}.language-card:hover{background:#f4f7ff;border-color:#98b2ff;transform:translateY(-2px)}.language-symbol{background:#edf2ff;color:#315ee0;font-size:1.5625rem;border-radius:12px;width:43px;height:45px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.language-name{display:flex;flex-direction:column;gap:4px;min-width:0}.language-name b{font-size:1.125rem;line-height:1.4;font-weight:650;text-align:start}.language-name span{font-size:0.75rem;color:var(--muted)}.card-action{font-size:0.875rem;color:var(--blue);margin-inline-start:auto;font-weight:650}.test-panel{background:var(--navy);color:#fff;border-radius:24px;padding:30px;display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 15px 35px #0b17391a}.test-panel .step{color:#a6b7de}.test-badge{width:58px;height:58px;color:#b4c6ff;background:#263861;border:1px solid #3c4c70;border-radius:16px;display:grid;place-items:center;margin:26px 0 18px}.test-badge svg{width:29px;height:29px}.test-panel h2{font-size:1.875rem;line-height:1.2;letter-spacing:-.6px;margin:0 0 13px}.test-panel p{font-size:1.0rem;line-height:1.65;color:#bac8e3;margin:0 0 25px;max-width:290px}.start-button{background:var(--blue);padding:17px 15px;text-align:center;border-radius:12px;font-size:1.0rem;font-weight:650;margin-top:auto;transition:background .15s;box-shadow:0 6px 20px #3366ff35}.start-button:hover{background:#4776ff}.start-button:focus-visible{outline-color:#fff}.test-note{text-align:center;font-size:0.8125rem;color:#a6b7de;margin-top:12px;line-height:1.7}.site-footer{display:flex;justify-content:space-between;gap:20px;margin-top:27px;padding-block:18px 30px;color:#717d94;font-size:0.75rem}
@media(max-width:1000px){.wrap{width:calc(100% - 48px)}.workspace{grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr)}.languages,.test-panel{padding:24px}.language-grid{grid-template-columns:1fr}.language-card{min-height:75px}.test-panel h2{font-size:1.75rem}.language-count{display:none}}
@media(max-width:680px){.wrap{width:calc(100% - 32px)}.site-header{padding-block:22px}.brand{font-size:1.3125rem}.brand-mark{width:37px;height:37px;border-radius:11px}.header-label{font-size:0.75rem;padding:7px 10px}.intro{padding:26px 0}.eyebrow{font-size:0.625rem;letter-spacing:1px}h1{font-size:2.5rem;letter-spacing:-1.7px}.intro-text{font-size:1.0rem}.desktop-break{display:none}.workspace{grid-template-columns:1fr;gap:16px}.languages,.test-panel{padding:22px;border-radius:20px}.section-heading h2{font-size:1.375rem}.language-grid{grid-template-columns:1fr}.language-card{padding:12px;min-height:76px}.language-name span{font-size:0.8125rem}.card-action{font-size:0.875rem}.test-badge{margin:20px 0 16px}.test-panel h2 br{display:none}.test-panel p{max-width:none}.site-footer{font-size:0.75rem;padding-bottom:24px}.site-footer span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Shared study surfaces */
[hidden]{display:none!important}.header-tools{display:flex;align-items:center;gap:16px}.home-link{font-size:0.875rem;color:#536580}.home-link:hover{color:var(--blue)}select{font:inherit;font-size:0.875rem;color:var(--navy);background:#fff;padding:10px 34px 10px 12px;border:1px solid var(--border);border-radius:10px;max-width:180px;min-height:44px}select:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.study-main{padding-top:27px}.study-heading{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:26px}.study-heading h1{font-size:2.0rem;letter-spacing:-.5px;line-height:1.6;margin:0}.study-heading .eyebrow{font-size:0.75rem;letter-spacing:1px;color:var(--muted);direction:ltr;text-align:start;margin:0 0 8px}.mode-badge{font-size:0.8125rem;white-space:nowrap;background:#e8eefb;color:#456084;border:1px solid #dbe4f5;padding:9px 14px;border-radius:999px;direction:ltr}.study-card{border-radius:24px;background:#fff;border:1px solid var(--border);padding:32px;box-shadow:0 8px 32px #12306306}.progress-heading{display:flex;justify-content:space-between;align-items:center;font-size:0.875rem;color:var(--muted);gap:16px;margin-bottom:12px}.progress-heading #progressText{font-variant-numeric:tabular-nums;font-weight:650;color:#234987}.progress-track{height:6px;background:#edf1fa;border-radius:999px;overflow:hidden;direction:ltr;margin-bottom:28px}#progressBar{height:100%;background:var(--blue);border-radius:999px;transition:width .18s ease}.study-block{border-radius:16px;padding:22px 24px;overflow-wrap:anywhere}.question-block{background:#f5f7fc;border:1px solid #e5eaf4;margin-bottom:16px}.answer-block{background:#eef3ff;border:1px solid #dfe7ff}.block-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px}.block-label{font-size:0.875rem;font-weight:650;color:#536580}.audio-btn{display:grid;place-items:center;color:#2852d5;background:#e6edff;border:1px solid #d6e0fc;border-radius:12px;width:44px;height:44px;padding:0;cursor:pointer;flex:0 0 44px}.audio-btn:hover{background:#d4e0ff}.audio-btn svg{width:22px;height:22px}.audio-btn:disabled{opacity:.45;cursor:not-allowed}.study-block h2,#question{font-size:1.5rem;line-height:1.6;font-weight:650;margin:0;color:var(--navy);text-align:left;max-width:850px}.study-block #answer{font-size:1.3125rem;line-height:1.7;font-weight:600;margin:0;max-width:850px}.translation{font-size:1.125rem;line-height:1.85;color:#536580;margin:12px 0 0;max-width:850px}.controls{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--border);padding-top:24px;margin-top:24px}.button{font:inherit;font-size:1.0rem;font-weight:600;line-height:1.5;min-height:49px;min-width:160px;border:1px solid transparent;border-radius:12px;padding:12px 22px;cursor:pointer;text-align:center;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.button.primary{background:var(--blue);color:#fff}.button.primary:hover{background:#2454e5}.button.secondary{background:#edf2ff;border-color:#dbe4fc;color:#315187}.button.secondary:hover{background:#dfe8ff}.button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible{outline:3px solid var(--blue);outline-offset:4px}.end-screen{text-align:center;padding:30px 0;outline:none}.end-screen h2{font-size:1.75rem;line-height:1.5;margin:18px 0 12px}.end-screen p{font-size:1.125rem;color:var(--muted);line-height:1.7}.end-screen .controls{justify-content:center}.completion-mark{width:70px;height:70px;display:grid;place-items:center;background:#edf2ff;color:var(--blue);border-radius:22px;font-size:2.1875rem;margin-inline:auto}.app-status{color:#8d3b17;font-size:1.0rem;line-height:1.7;padding:14px;background:#fff4e7;border-radius:12px}.options-container{display:grid;gap:12px;margin:22px 0}.option{display:block;text-align:start;font:inherit;font-size:1.125rem;line-height:1.7;border:1px solid var(--border);border-radius:14px;background:#fff;color:var(--navy);padding:16px 20px;cursor:pointer;transition:background .15s,border-color .15s}.option:hover:enabled{border-color:#98b2ff;background:#f4f7ff}.option.correct{background:#e8f6ee;color:#185e3c;border:2px solid #2a8054}.option.wrong{background:#fff0f1;color:#982f3c;border:2px solid #bd5260}.option:disabled{cursor:default;opacity:1}html[dir="rtl"] .study-heading h1{letter-spacing:0}html[dir="rtl"] .translation,html[dir="rtl"] #feedback #answer{text-align:right}html[dir="ltr"] .translation{text-align:left}@view-transition{navigation:auto}
@media(max-width:680px){.header-tools{gap:10px}.home-link{font-size:0.75rem}select{max-width:120px;font-size:0.8125rem;padding-right:22px}.study-main{padding-top:16px}.study-heading{margin-bottom:20px;display:block}.study-heading h1{font-size:1.5625rem;line-height:1.65}.study-heading .eyebrow{font-size:0.625rem}.mode-badge{display:inline-block;margin-top:12px;font-size:0.75rem}.study-card{padding:20px 16px;border-radius:20px}.study-block{padding:18px 16px}.study-block h2,#question{font-size:1.25rem}.study-block #answer{font-size:1.1875rem}.translation{font-size:1.0625rem}.controls{padding-top:20px;gap:10px}.button{min-width:0;flex:1;font-size:0.9375rem;padding:12px 14px}.end-screen .controls{flex-direction:column}.option{font-size:1.0625rem;padding:14px 16px}.progress-track{margin-bottom:22px}}
@media(max-width:380px){.brand{font-size:1.125rem;gap:8px}.brand-mark{width:32px;height:32px;font-size:1.3125rem}.home-link{display:none}.header-tools{gap:5px}select{max-width:110px}.study-heading h1{font-size:1.4375rem}}
/* Keep enlarged text and long translated labels within the layout. */
.site-header{flex-wrap:wrap;gap:16px}.header-tools{flex-wrap:wrap}.language-name b{overflow-wrap:anywhere}.study-heading>*{min-width:0}.study-heading h1{overflow-wrap:anywhere}.button{overflow-wrap:anywhere}.mode-badge{white-space:normal}.eyebrow{flex-wrap:wrap}.site-footer{flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}