*{margin:0;padding:0;box-sizing:border-box}:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;font-weight:400;color:#1a1a1a;background:linear-gradient(135deg,#667eea,#764ba2);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}#app{width:100%;max-width:800px;margin:0 auto}.container{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;overflow:hidden;animation:fadeIn .6s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:40px 30px;text-align:center}h1{font-size:2.5em;margin-bottom:10px;font-weight:700}.subtitle{font-size:1.1em;opacity:.95}.quiz-section{padding:40px 30px}.question-card{margin-bottom:30px;animation:slideIn .4s ease-out backwards;display:none;opacity:0}.question-card.active{display:block;animation:slideIn .4s ease-out;opacity:1}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}label{display:block;font-size:1.1em;margin-bottom:10px;color:#333;font-weight:500;line-height:1.6}.question-text{display:block;margin-top:8px;font-weight:400;font-size:1em}.video-link{color:#667eea;text-decoration:none;font-weight:600;word-break:break-all}.video-link:hover{text-decoration:underline}.question-number{display:inline-block;width:30px;height:30px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:50%;text-align:center;line-height:30px;margin-right:10px;font-weight:600}.answer-input{width:100%;padding:15px 20px;font-size:1.1em;border:2px solid #e0e0e0;border-radius:10px;transition:all .3s ease;outline:none}.answer-input:focus{border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.answer-input.correct{border-color:#10b981;background-color:#f0fdf4}.answer-input.incorrect{border-color:#ef4444;background-color:#fef2f2;animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.feedback{display:block;margin-top:8px;font-size:.9em;min-height:20px}.feedback.correct{color:#10b981}.feedback.incorrect{color:#ef4444}.sentence-display{margin-top:40px;padding:30px;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);border-radius:15px;text-align:center}.sentence-label{font-size:1.1em;color:#666;margin-bottom:15px;font-weight:600}.sentence-words{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;font-size:1.3em;font-weight:600;color:#333}.word-slot{min-width:80px;padding:8px 16px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;transition:all .3s ease}.word-slot.filled{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transform:scale(1.05)}.video-section{padding:40px 30px;text-align:center}.video-section.hidden{display:none}.success-message{margin-bottom:30px;animation:bounceIn .8s ease-out}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}.success-message h2{font-size:2.5em;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:15px}.revealed-sentence{font-size:1.8em;font-weight:700;color:#333;margin:20px 0;font-style:italic}.success-message p:last-child{font-size:1.2em;color:#666}.video-container{border-radius:15px;overflow:hidden;box-shadow:0 10px 30px #0003}video{width:100%;max-width:100%;display:block}@media (max-width: 600px){h1{font-size:1.8em}.subtitle{font-size:1em}header{padding:30px 20px}.quiz-section,.video-section{padding:30px 20px}.sentence-words{font-size:1.1em}.word-slot{min-width:60px}.revealed-sentence{font-size:1.4em}}