*{box-sizing:border-box}html,body{overscroll-behavior-y:none;background:#eae6df;height:100%;margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){html,body{background:#14151a}}.page{overscroll-behavior-y:none;background:linear-gradient(#f4f1ec 0%,#eae6df 100%);justify-content:center;align-items:center;min-height:100dvh;padding:24px;display:flex}@media (prefers-color-scheme:dark){.page{background:linear-gradient(#1b1c22 0%,#14151a 100%)}}.stack{width:100%;max-width:420px;position:relative}.card{z-index:1;text-align:center;box-sizing:border-box;background:#fff;border-radius:20px;width:100%;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,.level-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}.switch-button{right:16px}.level-button{left:16px}.switch-button:hover,.level-button:hover{background:#e6d6f9;border-color:#c9a9ec}.switch-button:active,.level-button:active{transform:scale(.94)}.switch-button:focus-visible,.level-button:focus-visible{outline-offset:2px;outline:2px solid #7c3aed}@media (prefers-color-scheme:dark){.switch-button,.level-button{color:#c9a3f5;background:#362a45;border-color:#4c3a63}.switch-button:hover,.level-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-locked{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-locked{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}}.level-backdrop{z-index:2;cursor:default;background:0 0;position:fixed;inset:0}.level-popup{z-index:3;box-sizing:border-box;background:#fff;border-radius:16px;min-width:160px;margin-bottom:12px;padding:12px;animation:.22s ease-out level-popup-slide-in;position:absolute;bottom:100%;left:0;box-shadow:0 10px 15px -3px #00000014,0 4px 6px -2px #0000000d}@keyframes level-popup-slide-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-color-scheme:dark){.level-popup{background:#21222a;box-shadow:0 10px 15px -3px #00000059,0 4px 6px -2px #00000040}}.level-popup-title{text-transform:uppercase;letter-spacing:.06em;color:#9b93a3;text-align:left;margin:0 0 8px;font-size:.75rem;font-weight:700}.level-options{flex-direction:column;gap:4px;display:flex}.level-option{text-align:left;color:#201c2a;cursor:pointer;background:0 0;border:none;border-radius:10px;padding:8px 12px;font-size:.9rem;font-weight:600;transition:background-color .15s,color .15s}.level-option:hover{background:#f2e9fb}.level-option.active{color:#fff;background:#7c3aed}@media (prefers-color-scheme:dark){.level-option{color:#f3f1f7}.level-option:hover{background:#362a45}.level-option.active{color:#fff;background:#7c3aed}}.feedback-panel{z-index:0;box-sizing:border-box;border-radius:0 0 20px 20px;margin-top:-20px;padding:40px 16px 16px;font-size:.95rem;animation:.32s ease-out feedback-slide-in;position:absolute;top:100%;left:0;right:0;box-shadow:0 10px 15px -3px #00000014,0 4px 6px -2px #0000000d}@keyframes feedback-slide-in{0%{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:translateY(0)}}.feedback-panel.correct{color:#3f7a52;background:#e8f2ea}.feedback-panel.incorrect{color:#a24942;background:#f5e9e8}@media (prefers-color-scheme:dark){.feedback-panel{box-shadow:0 10px 15px -3px #00000059,0 4px 6px -2px #00000040}.feedback-panel.correct{color:#86c99a;background:#1f2e22}.feedback-panel.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}}