body.index-body{margin:0;height:100%;display:flex;flex-direction:column;min-height:auto;background:linear-gradient(135deg,#88caf2,#a8d5f2);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}#root{display:flex;flex-direction:column;flex-grow:1}.header{background:linear-gradient(90deg,#5a5a87,#4a4a77);color:#fff;padding:20px 0;box-shadow:0 4px 12px #5a5a874d;position:sticky;top:0;width:100%;z-index:1000}.header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><linearGradient id="a" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></linearGradient></defs><rect width="100" height="20" fill="url(%23a)"/></svg>') repeat-x;pointer-events:none}.header-content{max-width:1200px;margin:0 auto;padding:0 20px;text-align:center;position:relative;z-index:1}.header h1{margin:0;font-size:2.5em;font-weight:300;letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,.2)}.header p{margin:10px 0 0;font-size:1.1em;opacity:.9;font-weight:300}.main-content{flex-grow:1;max-width:100vw;padding:30px;width:100vw;box-sizing:border-box;margin-top:30px}.scene-title{text-align:center;color:#5a5a87;font-size:2em;font-weight:400;margin-bottom:40px;text-shadow:0 2px 4px rgba(90,90,135,.1)}.image-container-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px;max-width:1200px;margin:0 auto}.banner{position:relative;width:100%;height:280px;margin:0;overflow:hidden;border-radius:20px;box-shadow:0 8px 25px #5a5a8726;transition:all .3s ease;background:#fff}.banner:hover{transform:translateY(-5px);box-shadow:0 15px 35px #5a5a8740}.banner-link{display:block;width:100%;height:100%;text-decoration:none;position:relative}.image-container-index .Main{display:block;width:100%;height:100%;margin:0;padding:0;border-radius:20px;object-fit:cover;object-position:center center;transition:transform .3s ease}.banner:hover .Main{transform:scale(1.05)}.banner:nth-child(1) .Main{object-position:center 30%}.banner:nth-child(2) .Main{object-position:center 35%}.banner:nth-child(3) .Main{object-position:center 45%}.overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000c);color:#fff;padding:30px 20px 20px;font-size:26px;font-weight:700;text-align:center;z-index:10;transition:background .3s ease;text-shadow:0 2px 4px rgba(0,0,0,.5)}.banner:hover .overlay{background:linear-gradient(transparent,#5a5a87e6)}.footer{background:linear-gradient(90deg,#5a5a87,#4a4a77);color:#fff;padding:20px 0;text-align:center;position:relative;overflow:hidden;max-width:100vw}.footer:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent)}.footer-content{padding:0 20px;position:relative;display:flex;align-items:center;gap:5px;justify-content:center;z-index:1}.footer p{font-size:.9em;opacity:.9}.footer-links{margin-top:15px}.footer-links a{color:#fffc;text-decoration:none;margin:0 15px;font-size:.9em;transition:color .3s ease}.footer-links a:hover{color:#fff;text-decoration:underline}@media (max-width: 768px){.header{padding:15px 0}.header h1{font-size:1.8em}.header p{font-size:1em}.header-content{padding:0 15px}.main-content{margin-top:80px;padding:15px 10px}.scene-title{font-size:1.3em;margin-bottom:20px}.banner{height:140px}.overlay{font-size:.9rem;padding:10px}.image-container-index{gap:15px}}@media (max-width: 480px){.header{padding:12px 0}.header h1{font-size:1.5em;letter-spacing:.5px}.header p{font-size:.9em}.main-content{margin-top:80px}}html,body{height:100%!important}body{background-color:#88caf2;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0}.image-container{position:relative;display:inline-block;border-radius:20px;box-shadow:0 8px 16px #0078d226;max-width:100%;max-height:85vh;text-align:center}.image-container img{border-radius:18px;display:block;max-width:100%;max-height:100vh;object-fit:contain}.Main{display:block;max-width:100%;max-height:85vh;margin:0 auto;padding:0;background-color:#ffffff80;border-radius:25px;box-shadow:0 10px 30px #0064c814;object-fit:contain}.dropdown-menu{position:absolute;background:#ffffffe6;border:2px solid #88c0ff;border-radius:12px;box-shadow:0 4px 8px #0064c81a;z-index:1000;padding:12px}.dropdown-menu ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-direction:column;justify-content:left}.dropdown-menu li{display:flex;align-items:center;justify-content:left;width:10vw;padding:5px;cursor:pointer;position:relative}.dropdown-menu li:hover{background-color:#e6f4ff;border-radius:8px}.dropdown-menu li img{width:auto;height:5vh;margin-right:5px}.check-mark{position:absolute;top:50%;left:15px;transform:translateY(-50%);color:green;font-size:20px;font-weight:700;z-index:10}.timer{position:absolute;top:10px;left:10px;color:#fff;background:#000000b3;padding:5px 10px;border-radius:5px;font-size:16px;z-index:10}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fffffff2;padding:25px;border-radius:15px;text-align:center;max-width:400px;width:100%;box-shadow:0 6px 16px #0078d226;border:3px solid #a7d7ff}.modal-content h2{margin-top:0;color:#007bff}.modal-content p{margin:10px 0;color:#333}.modal-content form{display:flex;flex-direction:column;gap:10px}.modal-content input{padding:8px;font-size:16px;border:1px solid #ccc;border-radius:4px}.modal-content button{padding:10px;background:#4db8ff;color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:16px;font-weight:700;box-shadow:0 3px #2e9ede;transition:all .2s ease}.modal-content button:hover{background:#3aa8f5;transform:translateY(-2px);box-shadow:0 5px #2e9ede}.modal-content button:active{transform:translateY(2px);box-shadow:0 1px #2e9ede}.feedback{position:absolute;font-size:40px;z-index:100;animation:fadeInOut 2s ease-in-out forwards;opacity:0}.feedback-correct{color:green}.feedback-incorrect{color:red}.leaderboard-table{width:100%;border-collapse:collapse;margin:20px 0}.leaderboard-table th,.leaderboard-table td{border:1px solid #ccc;padding:10px;text-align:center}.leaderboard-table th{background:#f4f4f4;font-weight:700}.leaderboard-table tr:nth-child(2n){background:#f9f9f9}.loading-content{display:flex;flex-direction:column;align-items:center;gap:10px}.loading-spinner{width:48px;height:48px;border:5px solid #fff;border-bottom-color:#90caf9;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}.warning{padding-top:2vh;font-size:small;font-style:italic}@keyframes fadeInOut{0%{opacity:0;transform:scale(.8)}20%{opacity:1;transform:scale(1.1)}30%{opacity:1;transform:scale(1)}80%{opacity:1}to{opacity:0;transform:scale(.9)}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}