*{box-sizing:border-box}body{margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif}.page{background:linear-gradient(#f4f1ec 0%,#eae6df 100%);justify-content:center;align-items:center;min-height:100svh;padding:24px;display:flex}@media (prefers-color-scheme:dark){.page{background:linear-gradient(#1b1c22 0%,#14151a 100%)}}.card{text-align:center;box-sizing:border-box;background:#fff;border-radius:20px;width:100%;max-width:420px;padding:48px 32px 32px;position:relative;box-shadow:0 10px 15px -3px #00000014,0 4px 6px -2px #0000000d}@media (prefers-color-scheme:dark){.card{background:#21222a;box-shadow:0 10px 15px -3px #00000059,0 4px 6px -2px #00000040}}.switch-button{color:#7c3aed;cursor:pointer;background:#f2e9fb;border:2px solid #d8c9f0;border-radius:999px;justify-content:center;align-items:center;width:40px;height:40px;transition:background-color .2s,border-color .2s,transform .15s;display:flex;position:absolute;top:16px;right:16px}.switch-button:hover{background:#e6d6f9;border-color:#c9a9ec}.switch-button:active{transform:scale(.94)}.switch-button:focus-visible{outline-offset:2px;outline:2px solid #7c3aed}@media (prefers-color-scheme:dark){.switch-button{color:#c9a3f5;background:#362a45;border-color:#4c3a63}.switch-button:hover{background:#40324f;border-color:#5c4576}}.direction-label{letter-spacing:.06em;text-transform:uppercase;color:#9b93a3;margin:0 0 20px;font-size:.8rem;font-weight:600}.source-word{color:#201c2a;word-break:break-word;margin:0;font-size:3rem;font-weight:600;line-height:1.1}@media (prefers-color-scheme:dark){.source-word{color:#f3f1f7}}.pronunciation{color:#9a93a3;margin:8px 0 0;font-size:1.05rem;font-style:italic}.pronunciation.inline{margin:0;font-size:.95rem;display:inline}.pronunciation-hidden{visibility:hidden}.answer-input{color:#201c2a;box-sizing:border-box;background:#faf9fc;border:2px solid #e0dae8;border-radius:12px;width:100%;margin-top:28px;padding:12px 16px;font-size:1.1rem;transition:border-color .2s,background-color .2s}.answer-input:focus{background:#fff;border-color:#7c3aed;outline:none}.answer-input:read-only{color:#6f6880;background:#f1eef5}@media (prefers-color-scheme:dark){.answer-input{color:#f3f1f7;background:#2a2b34;border-color:#3a3945}.answer-input:focus{background:#2f303a;border-color:#c9a3f5}.answer-input:read-only{color:#a89fb5;background:#26272f}}.button-row{gap:12px;margin-top:16px;display:flex}.btn{cursor:pointer;border:2px solid #0000;border-radius:12px;flex:1;padding:12px 0;font-size:1rem;font-weight:600;transition:background-color .2s,border-color .2s,transform .15s,opacity .2s}.btn:active{transform:scale(.97)}.btn:focus-visible{outline-offset:2px;outline:2px solid #7c3aed}.btn:disabled{cursor:not-allowed;opacity:.5}.btn-submit{color:#fff;background:#7c3aed}.btn-submit:hover:not(:disabled){background:#6b2fd4}.btn-next{color:#5b21b6;background:#f2e9fb;border-color:#d8c9f0}.btn-next:hover{background:#e6d6f9}@media (prefers-color-scheme:dark){.btn-next{color:#d5b8f7;background:#362a45;border-color:#4c3a63}.btn-next:hover{background:#40324f}}.feedback{border-radius:12px;margin-top:20px;padding:14px 16px;font-size:.95rem}.feedback.correct{color:#3f7a52;background:#e8f2ea}.feedback.incorrect{color:#a24942;background:#f5e9e8}@media (prefers-color-scheme:dark){.feedback.correct{color:#86c99a;background:#1f2e22}.feedback.incorrect{color:#e0968f;background:#2e2120}}.feedback-status{margin:0;font-weight:700}.feedback-answer{margin:6px 0 0}@media (width<=400px){.card{border-radius:16px;padding:40px 20px 24px}.source-word{font-size:2.3rem}.button-row{flex-direction:column}}