*{box-sizing:border-box}:root{--bg-soft:#f6f9fc;--bg-warm:#fef6e6;--text-main:#1f2937;--text-muted:#64748b;--card-bg:rgba(255,255,255,0.9);--card-border:rgba(15,23,42,0.08);--accent:#0f766e;--accent-strong:#0b5f59;--accent-soft:#d8f3ef}body{margin:0;min-width:320px;min-height:100vh;font-family:Trebuchet MS,Avenir Next,Segoe UI,sans-serif;background:radial-gradient(circle at 15% 18%,var(--bg-warm) 0,transparent 45%),radial-gradient(circle at 85% 6%,#dff8ff 0,transparent 38%),linear-gradient(180deg,#f8fbff 0,var(--bg-soft) 60%,#eef4fb 100%);color:var(--text-main)}button{font:inherit}.app{min-height:100vh;padding:28px;display:flex;justify-content:center;align-items:flex-start}.page-shell{position:relative}.links{width:min(1400px,100%);margin:0 auto;padding:14px 28px 0}.links a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(15,118,110,.2);background:rgba(255,255,255,.72);color:var(--accent);font-size:.92rem;font-weight:700;text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .15s ease,border-color .15s ease,background-color .15s ease}.links a:hover{transform:translateY(-1px);border-color:rgba(15,118,110,.35);background:#ffffff}.quiz-card{width:min(1400px,100%);max-width:1400px;padding:24px 28px 28px;border:1px solid var(--card-border);border-radius:24px;background:var(--card-bg);box-shadow:0 24px 46px rgba(15,23,42,.08),0 8px 18px rgba(15,23,42,.06);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.quiz-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);grid-gap:32px;gap:32px;align-items:start}.quiz-main,.teacher-column{min-width:0}.teacher-panel{position:-webkit-sticky;position:sticky;top:24px;width:100%}.quiz-header{display:flex;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid #e6edf5}.quiz-header div{display:flex;flex-direction:column}.label{margin-bottom:3px;color:var(--text-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}.quiz-header strong{font-size:1.35rem}.question-area{padding:38px 0 28px;text-align:center}.type-badge{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.85rem;font-weight:700}.question-area h1{margin:18px 0 10px;font-size:clamp(2rem,7vw,3.4rem);line-height:1.1}.question-area p{margin:0;color:var(--text-muted)}.answers{display:grid;grid-gap:14px;gap:14px}.answer-button{width:100%;padding:16px 18px;border:2px solid #d8e2ec;border-radius:12px;background:#ffffff;color:var(--text-main);cursor:pointer;box-shadow:0 5px 14px rgba(15,23,42,.05);transition:border-color .15s ease,background-color .15s ease,transform .15s ease,box-shadow .15s ease}.answer-button:hover:not(:disabled){border-color:#2f968d;background:#f2fbfa;transform:translateY(-1px);box-shadow:0 8px 16px rgba(15,23,42,.09)}.answer-button:disabled{cursor:default}.answer-correct{border-color:#16a34a;background:#dcfce7;color:#166534}.answer-wrong{border-color:#dc2626;background:#fee2e2;color:#991b1b}.answer-disabled{opacity:.55}.feedback{min-height:52px;display:grid;place-items:center;text-align:center}.feedback p{margin:18px 0 0;font-weight:700}.correct-text{color:#15803d}.wrong-text{color:#b91c1c}.next-button{width:100%;margin-top:16px;padding:14px 18px;border:0;border-radius:12px;background:linear-gradient(140deg,var(--accent) 0,#0ea5a0 100%);color:#ffffff;font-weight:700;cursor:pointer;box-shadow:0 10px 18px rgba(15,118,110,.3)}.next-button:hover:not(:disabled){background:linear-gradient(140deg,var(--accent-strong) 0,#0b8f8b 100%)}.next-button:disabled{background:#cbd5e1;cursor:not-allowed}.language-selector{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;grid-gap:14px;gap:14px;padding:22px 0;border-bottom:1px solid #e6edf5}.language-field{display:grid;grid-gap:7px;gap:7px}.language-field span{color:var(--text-muted);font-size:.82rem;font-weight:700}.language-field select{width:100%;padding:11px 36px 11px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#ffffff;color:#172033;font:inherit;cursor:pointer}.language-field select:focus{outline:3px solid rgba(99,102,241,.2);border-color:#6366f1}.swap-button{width:44px;height:44px;border:1px solid #cbd5e1;border-radius:50%;background:#ffffff;color:var(--accent);font-size:1.4rem;font-weight:700;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .15s ease}.swap-button:hover{background:#f2fbfa;border-color:#2f968d;transform:rotate(180deg)}.source-content{text-align:center}.pronunciation{margin-top:8px;color:var(--accent);font-size:1.2rem;font-weight:600}.answer-button{display:flex;flex-direction:column;align-items:center;gap:5px}.answer-text{font-size:1.05rem;font-weight:700}.answer-pronunciation{color:#64748b;font-size:.9rem;font-weight:500}.answer-correct .answer-pronunciation{color:#166534}.answer-wrong .answer-pronunciation{color:#991b1b}@media (max-width:560px){.app{padding:12px}.quiz-card{padding:20px 16px 18px;border-radius:16px}.links{padding:8px 12px 0}.language-selector{grid-template-columns:1fr}.swap-button{justify-self:center;transform:rotate(90deg)}.swap-button:hover{transform:rotate(270deg)}}.chinese-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:14px;gap:14px;padding:18px 0;border-bottom:1px solid #e6edf5}.source-title-row{display:flex;align-items:center;justify-content:center;gap:12px}.source-title-row h1{margin-right:0}.answer-audio-button,.speak-button{border:1px solid #cbd5e1;background:#ffffff;cursor:pointer}.speak-button{width:42px;height:42px;flex:0 0 42px;border-radius:50%}.answer-audio-button:hover,.speak-button:hover{background:#f2fbfa;border-color:#2f968d}.answer-row{display:grid;grid-template-columns:minmax(0,1fr) 46px;grid-gap:8px;gap:8px}.answer-audio-button{border-radius:12px;font-size:1.05rem}.speech-error{color:#b45309;font-size:.9rem}@media (max-width:560px){.chinese-settings{grid-template-columns:1fr}.source-title-row{align-items:center}}.language-field-label{color:var(--text-muted);font-size:.82rem;font-weight:700}.custom-language-selector{position:relative}.language-selector-trigger{width:100%;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#ffffff;color:#172033;cursor:pointer;text-align:left}.language-selector-trigger:hover{border-color:#2f968d;background:#f8fafc}.language-selector-trigger:focus-visible{outline:3px solid rgba(15,118,110,.22);border-color:#2f968d}.language-option-content{display:flex;align-items:center;gap:10px;min-width:0}.language-flag{width:27px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden;border:1px solid rgba(15,23,42,.18);border-radius:3px;background:#ffffff;box-shadow:0 1px 2px rgba(15,23,42,.12)}.language-flag-svg{display:block;width:100%;height:100%}.language-chevron{color:#64748b;transition:transform .15s ease}.language-chevron.is-open{transform:rotate(180deg)}.language-options{position:absolute;z-index:30;top:calc(100% + 7px);left:0;right:0;display:grid;grid-gap:4px;gap:4px;padding:6px;border:1px solid #dbe3ed;border-radius:12px;background:#ffffff;box-shadow:0 16px 35px rgba(15,23,42,.16)}.language-option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:0;border-radius:8px;background:transparent;color:#172033;cursor:pointer;text-align:left}.language-option:focus-visible:not(:disabled),.language-option:hover:not(:disabled){background:#f2fbfa;outline:none}.language-option.is-selected{background:var(--accent-soft);color:var(--accent);font-weight:700}.language-option:disabled{color:#94a3b8;cursor:not-allowed;opacity:.58}.language-check{color:var(--accent);font-weight:800}.quiz-main{display:flex;flex-direction:column;gap:12px}.quiz-main .question-area{margin:0;padding:16px 18px}.quiz-main .question-area .type-badge{margin-bottom:6px}.quiz-main .source-content{margin:6px 0}.quiz-main .source-title-row{gap:8px}.quiz-main .source-title-row h1{margin:0;font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.1}.quiz-main .pronunciation{margin-top:4px;font-size:1.05rem}.quiz-main .question-area>p{margin:8px 0 0}.quiz-main .answers{display:flex;flex-direction:column;gap:8px}.quiz-main .answer-row{gap:8px}.quiz-main .answer-button{min-height:52px;padding:10px 16px}.quiz-main .answer-audio-button{width:52px;min-width:52px;height:52px}.quiz-main .feedback{min-height:28px;margin:0}.quiz-main .feedback p{margin:4px 0}.quiz-main .next-button{margin-top:0;min-height:48px;padding:10px 18px}.teacher-image{width:100%;margin:0}.teacher-image-frame{position:relative;width:100%;overflow:hidden;border:2px solid #dbe3ed;border-radius:18px;background:#e2e8f0;box-shadow:0 14px 32px rgba(15,23,42,.14);aspect-ratio:1122/1402}.teacher-image-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;animation:teacher-image-appear .18s ease-out}.teacher-image-caption{margin-top:10px;color:#334155;font-size:1.05rem;font-weight:800;text-align:center}.teacher-image[data-expression=correct] .teacher-image-frame{border-color:#22c55e;box-shadow:0 14px 32px rgba(15,23,42,.14),0 0 0 3px rgba(34,197,94,.16)}.teacher-image[data-expression=wrong] .teacher-image-frame{border-color:#f59e0b;box-shadow:0 14px 32px rgba(15,23,42,.14),0 0 0 3px rgba(245,158,11,.16)}@keyframes teacher-image-appear{0%{opacity:.84}to{opacity:1}}