.starry-background{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#0c0c0c,#1a1a2e,#16213e,#0f3460,#000);overflow:hidden}.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle 4s ease-in-out infinite;box-shadow:0 0 6px #fffc}@keyframes twinkle{0%,to{opacity:.2;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.galaxy-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at 20% 50%,rgba(120,119,198,.3) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(255,119,198,.15) 0%,transparent 50%),radial-gradient(ellipse at 40% 80%,rgba(120,200,255,.2) 0%,transparent 50%);animation:galaxyShift 20s ease-in-out infinite}@keyframes galaxyShift{0%,to{transform:rotate(0)}50%{transform:rotate(1deg)}}.question-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:10;max-width:700px;width:90%}.question{font-family:Dancing Script,cursive;font-size:2.5rem;color:#fff;margin-bottom:30px;font-weight:700;text-shadow:0 0 20px rgba(255,255,255,.5);line-height:1.2;animation:questionGlow 3s ease-in-out infinite}@keyframes questionGlow{0%,to{text-shadow:0 0 20px rgba(255,255,255,.5)}50%{text-shadow:0 0 30px rgba(255,255,255,.8),0 0 40px rgba(120,119,198,.4)}}.answer-form{display:flex;flex-direction:column;gap:20px;align-items:center}.input-container{display:flex;flex-direction:row;align-items:center;gap:8px;width:320px;max-width:90%}.answer-label{font-family:Cinzel,serif;font-size:1.2rem;color:#fff;font-weight:600;text-shadow:0 0 10px rgba(255,255,255,.3)}.answer-input{flex:1;padding:12px 16px;font-size:1rem;border:2px solid rgba(255,255,255,.2);border-radius:8px;background:#ffffff1a;color:#fff;text-align:center;font-family:Cinzel,serif;transition:all .3s ease;outline:none}.answer-input:focus{border-color:#7877c699;background:#ffffff26;box-shadow:0 0 20px #7877c64d}.answer-input.wrong{border-color:#ff4757;background:#ff475733;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.answer-input::placeholder{color:#ffffff80}.submit-arrow-btn{width:44px;height:auto;padding:12px 8px;border:2px solid rgba(255,255,255,.3);border-radius:8px;background:#ffffff1a;color:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.submit-arrow-btn:hover{border-color:#7877c699;background:#7877c633;transform:translate(2px);box-shadow:0 0 15px #7877c64d}.submit-arrow-btn:active{transform:translate(0);background:#7877c64d}.error-message{color:#ff4757;font-size:1rem;font-weight:600;text-shadow:0 0 10px rgba(255,71,87,.5);animation:errorFade 2s ease-in-out}@keyframes errorFade{0%{opacity:0;transform:translateY(-10px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}@media (max-width: 768px){.question{font-size:2rem}.question-content{padding:30px 20px}.input-container{width:280px}.answer-input{font-size:.9rem;padding:10px 14px}.submit-arrow-btn{width:40px;padding:10px 6px}}.video-player{position:relative;width:100vw;height:100vh;background:#000;overflow:hidden;cursor:none;display:flex;justify-content:center;align-items:center}.video-element{width:min(100vw,56.25vh);height:min(100vh,calc(100vw * 16 / 9));object-fit:cover;cursor:pointer;aspect-ratio:9 / 16}.video-controls{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,rgba(0,0,0,.7) 0%,transparent 20%,transparent 80%,rgba(0,0,0,.8) 100%);opacity:0;transition:opacity .3s ease;pointer-events:none;cursor:default;width:min(100vw,56.25vh);height:min(100vh,calc(100vw * 16 / 9));margin:auto}.video-controls.visible{opacity:1;pointer-events:all}.video-player:hover{cursor:default}.back-btn{position:absolute;top:20px;left:20px;display:flex;align-items:center;gap:8px;padding:12px 20px;background:#000000b3;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:16px;font-family:Cinzel,serif;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-btn:hover{background:#000000e6;border-color:#fff6;transform:translateY(-2px)}.controls-bottom{position:absolute;bottom:0;left:0;right:0;padding:20px}.progress-container{margin-bottom:15px;cursor:pointer}.progress-bar{width:100%;height:6px;background:#ffffff4d;border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:3px;transition:width .1s ease}.controls-row{display:flex;justify-content:space-between;align-items:center}.left-controls{display:flex;align-items:center;gap:15px}.play-btn{width:50px;height:50px;border:none;border-radius:50%;background:#fff3;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.play-btn:hover{background:#ffffff4d;transform:scale(1.1)}.volume-control{display:flex;align-items:center;gap:10px;color:#fff}.volume-btn{background:none;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;border-radius:4px;transition:background-color .3s ease}.volume-btn:hover{background:#ffffff1a}.volume-slider{width:80px;height:4px;background:#ffffff4d;border-radius:2px;outline:none;cursor:pointer;-webkit-appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer}.volume-slider::-moz-range-thumb{width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;border:none}.time-display{color:#fff;font-size:14px;font-family:Cinzel,serif;font-weight:500}.video-overlay{position:absolute;top:0;left:0;pointer-events:none;width:min(100vw,56.25vh);height:min(100vh,calc(100vw * 16 / 9));margin:auto}.video-title{position:absolute;top:20px;right:20px;color:#fff;font-family:Dancing Script,cursive;font-size:2rem;font-weight:700;text-shadow:0 0 20px rgba(255,255,255,.5);opacity:.8}@media (max-width: 768px){.video-element,.video-controls,.video-overlay{width:100vw;height:calc(100vw * 16 / 9);max-height:100vh}.back-btn{top:10px;left:10px;padding:10px 16px;font-size:14px}.video-title{font-size:1.5rem;top:10px;right:10px}.controls-bottom{padding:15px}.volume-control{display:none}}.app{width:100vw;height:100vh;background:#000;position:relative;overflow:hidden}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:Cinzel,serif;background:#000;overflow:hidden}#root{width:100vw;height:100vh}