*,:after,:before{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:#0a0a1a;color:#e0e0f0;line-height:1.6;min-height:100vh;overflow-x:hidden}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0a0a1a}::-webkit-scrollbar-thumb{background:#3a3a6a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#5a5a9a}.starfield{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}.star{position:absolute;border-radius:50%;background:#fff;animation:twinkle var(--duration,3s) ease-in-out infinite alternate}@keyframes twinkle{0%{opacity:.15;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}.meteor{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;box-shadow:0 0 4px #fff,0 0 8px #6af;animation:meteorShoot var(--speed,2s) linear infinite;animation-delay:var(--delay,0s)}@keyframes meteorShoot{0%{transform:translate(0) rotate(0deg);opacity:1}to{transform:translate(-300px,300px) rotate(-45deg);opacity:0}}.header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,10,30,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(100,100,200,.15);padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:60px}.header .logo{font-size:1.4rem;font-weight:700;background:linear-gradient(135deg,#6af,#a6f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header .logo span{-webkit-text-fill-color:#e0e0f0}.nav{display:flex;gap:1.5rem}.nav a{font-size:.9rem;color:#aac;transition:color .2s;position:relative}.nav a.active,.nav a:hover{color:#fff}.nav a:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:linear-gradient(90deg,#6af,#a6f);transition:width .3s}.nav a.active:after,.nav a:hover:after{width:100%}.main{position:relative;z-index:1;padding-top:80px;min-height:100vh}.container{max-width:1100px;margin:0 auto;padding:2rem 1.5rem}.page-title{font-size:2.5rem;font-weight:800;text-align:center;margin-bottom:.5rem;background:linear-gradient(135deg,#6af,#c6f,#f6a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-subtitle{text-align:center;color:#88b;margin-bottom:2.5rem;font-size:1.1rem}.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 80px);text-align:center;padding:2rem}.hero h1{font-size:4rem;font-weight:900;color:#f33;margin-bottom:1rem;animation:fadeInUp 1s ease-out}.hero p{font-size:1.3rem;color:#99c;max-width:600px;margin-bottom:2.5rem;animation:fadeInUp 1s ease-out .3s both}.hero-btn{display:inline-block;padding:.9rem 2.5rem;font-size:1.1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#6af,#a6f);border-radius:50px;border:none;cursor:pointer;transition:transform .3s,box-shadow .3s;animation:fadeInUp 1s ease-out .6s both}.hero-btn:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(100,160,255,.4)}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:1.5rem;gap:1.5rem}.planet-card{background:rgba(30,30,60,.6);border:1px solid rgba(100,100,200,.15);border-radius:16px;padding:1.5rem;cursor:pointer;transition:transform .4s,box-shadow .4s;perspective:1000px}.planet-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 12px 40px rgba(100,100,200,.3);border-color:rgba(100,160,255,.4)}.planet-card .emoji{font-size:3rem;display:block;margin-bottom:.5rem;transition:transform .4s}.planet-card:hover .emoji{transform:rotateY(180deg) scale(1.2)}.planet-card h3{font-size:1.3rem;margin-bottom:.4rem;color:#d0d0ff}.planet-card p{font-size:.9rem;color:#88b}.flip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-gap:1.5rem;gap:1.5rem}.flip-card{perspective:1000px;height:220px;cursor:pointer}.flip-card-inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}.flip-card.flipped .flip-card-inner{transform:rotateY(180deg)}.flip-card-back,.flip-card-front{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.flip-card-front{background:linear-gradient(135deg,rgba(60,60,120,.5),rgba(30,30,60,.5));border:1px solid rgba(100,100,200,.2)}.flip-card-front .icon{font-size:2.5rem;margin-bottom:.5rem}.flip-card-front p{font-size:1rem;color:#aad}.flip-card-back{background:linear-gradient(135deg,rgba(100,160,255,.15),rgba(170,100,255,.15));border:1px solid rgba(100,160,255,.3);transform:rotateY(180deg)}.flip-card-back p{font-size:.95rem;color:#cce;line-height:1.5}.quiz-box{max-width:650px;margin:0 auto;background:rgba(30,30,60,.5);border:1px solid rgba(100,100,200,.2);border-radius:20px;padding:2rem}.quiz-progress{display:flex;justify-content:space-between;margin-bottom:1.5rem;font-size:.85rem;color:#88b}.quiz-question{font-size:1.3rem;font-weight:600;margin-bottom:1.5rem;color:#d0d0ff;text-align:center}.quiz-options{display:flex;flex-direction:column;gap:.8rem}.quiz-option{padding:1rem 1.2rem;background:rgba(50,50,90,.5);border:1px solid rgba(100,100,200,.2);border-radius:12px;cursor:pointer;transition:all .3s;font-size:1rem;color:#cce;text-align:left;font-family:inherit}.quiz-option:hover:not(:disabled){background:rgba(80,80,160,.4);border-color:rgba(100,160,255,.5);transform:translateX(5px)}.quiz-option.correct{background:rgba(40,200,100,.25);border-color:rgba(40,200,100,.5);color:#6f6}.quiz-option.wrong{background:rgba(220,60,60,.25);border-color:rgba(220,60,60,.5);color:#f66}.quiz-option:disabled{cursor:default;opacity:.7}.quiz-result{text-align:center;padding:2rem 0}.quiz-result h2{font-size:2rem;margin-bottom:.5rem;background:linear-gradient(135deg,#6af,#f6a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.quiz-result p{color:#aad;margin-bottom:1.5rem;font-size:1.1rem}.restart-btn{padding:.8rem 2rem;background:linear-gradient(135deg,#6af,#a6f);border:none;border-radius:50px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.restart-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(100,160,255,.4)}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-gap:1.2rem;gap:1.2rem}.gallery-item{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;cursor:pointer;border:1px solid rgba(100,100,200,.15);transition:transform .3s,box-shadow .3s;background:rgba(20,20,50,.6)}.gallery-item:hover{transform:scale(1.04);box-shadow:0 8px 30px rgba(100,100,200,.3)}.gallery-item .placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(60,60,120,.3),rgba(30,30,60,.3));font-size:3rem}.gallery-item .placeholder span{font-size:.9rem;color:#88b;margin-top:.5rem}.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.75);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-out}.modal-content{background:linear-gradient(135deg,#1a1a3a,#0e0e2a);border:1px solid rgba(100,100,200,.3);border-radius:20px;padding:2rem;max-width:500px;width:90%;text-align:center;animation:scaleIn .3s ease-out}.modal-content .modal-icon{font-size:4rem;margin-bottom:1rem;display:block}.modal-content h2{font-size:1.4rem;margin-bottom:.5rem;color:#d0d0ff}.modal-content p{font-size:.95rem;color:#99c;line-height:1.6}.modal-close{margin-top:1.5rem;padding:.6rem 1.5rem;background:rgba(100,100,200,.2);border:1px solid rgba(100,100,200,.3);border-radius:50px;color:#cce;cursor:pointer;font-size:.9rem;transition:background .2s;font-family:inherit}.modal-close:hover{background:rgba(100,100,200,.35)}.footer{position:relative;z-index:1;text-align:center;padding:2rem;border-top:1px solid rgba(100,100,200,.1);color:#66a;font-size:.85rem}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (max-width:768px){.hero h1{font-size:2.5rem}.hero p{font-size:1rem}.nav{gap:.8rem;font-size:.85rem}.page-title{font-size:1.8rem}}