:root{--blue:#4A90E2;--orange:#FF6B35;--green:#7ED321;--yellow:#F5A623;--bg:#F9FBFF;--text:#1F2D3D;--card:#FFFFFF;--muted:#6B7C93}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Nunito',system-ui,-apple-system;}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:linear-gradient(90deg,var(--blue),var(--orange));color:#fff}
.brand{display:flex;align-items:center;gap:12px}
.mascot{font-size:32px}
.title{font-size:28px;font-weight:800}
rt{font-size:14px;opacity:.9}
.nav{display:flex;flex-wrap:wrap;gap:8px}
.nav button{font-size:18px;padding:12px 16px;border:none;border-radius:16px;background:#fff;color:var(--blue);cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.nav button:active{transform:scale(.98)}
.primary{background:var(--orange);color:#fff}
.secondary{background:#fff;color:var(--orange)}
.app-footer{padding:16px;text-align:center;color:var(--muted)}
.view{padding:24px;max-width:1200px;margin:0 auto}
.hidden{display:none}
.hero{display:grid;place-items:center}
.hero-card{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.hero-atom{position:relative;width:280px;height:280px}
.orbit{position:absolute;border:4px solid rgba(255,255,255,.6);border-radius:50%;animation:spin 8s linear infinite}
.o1{width:100%;height:100%}
.o2{width:70%;height:70%;top:15%;left:15%;animation-duration:6s}
.o3{width:40%;height:40%;top:30%;left:30%;animation-duration:4s}
.core{position:absolute;width:32px;height:32px;background:#fff;border-radius:50%;top:calc(50% - 16px);left:calc(50% - 16px);box-shadow:0 0 24px rgba(255,255,255,.8)}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-text h1{font-size:36px;margin:0 0 8px}
.hero-text p{font-size:20px;margin:0 0 16px}
.cta{display:flex;gap:12px}
.section-title h2{font-size:30px;margin:8px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{background:var(--card);border-radius:20px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:20px}
.states{display:flex;gap:16px;align-items:flex-end;height:160px}
.state{flex:1;display:flex;align-items:center;justify-content:center;border-radius:16px;color:#fff;font-size:20px}
.solid{background:var(--blue);height:140px}
.liquid{background:var(--green);height:100px}
.gas{background:var(--yellow);height:70px}
.controls{margin-top:12px;display:flex;gap:12px}
.reaction{display:flex;align-items:center;gap:12px;font-size:24px;justify-content:center;padding:16px}
.reagent{width:80px;height:80px;border-radius:16px;display:grid;place-items:center;color:#fff}
.A{background:var(--blue)}
.B{background:var(--orange)}
.product{width:120px;height:80px;border-radius:16px;background:#7f8cff;color:#fff;display:grid;place-items:center}
.elements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.element-card{background:#fff;border-radius:16px;padding:12px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.element-card .symbol{font-size:28px;font-weight:800}
.element-card .name{font-size:18px}
.element-card .number{font-size:14px;color:var(--muted)}
.lab-tip{font-size:18px;color:#d05400;margin-bottom:8px}
.lab-area{display:grid;place-items:center;height:220px}
.beaker{width:160px;height:200px;border:6px solid #9bb7ff;border-bottom:none;border-radius:16px 16px 0 0;position:relative;background:linear-gradient(#eef3ff,#f9fbff)}
.liquid{position:absolute;bottom:0;width:100%;height:0;background:#ff6b6b;border-radius:0 0 16px 16px;transition:height .6s ease,background .6s ease}
.lab-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.lab-result{font-size:18px;color:var(--muted)}
.tokens{display:flex;gap:12px;flex-wrap:wrap}
.token{width:64px;height:64px;border-radius:16px;background:#fff;border:3px dashed #c5d2ff;display:grid;place-items:center;font-size:22px;color:#4b5b8a;cursor:grab}
.molecule{display:flex;gap:16px;align-items:center;justify-content:center;padding:12px}
.slot{width:72px;height:72px;border-radius:16px;background:#f0f4ff;border:3px solid #a6b5ff;display:grid;place-items:center;font-size:20px;color:#6b7c93}
.slot.filled{background:#c0ffd7;border-color:#48c78e;color:#1f6f43}
.build-result{margin-top:12px;font-size:18px}
.molecule-header{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.molecule-header select{font-size:18px;padding:8px 10px;border-radius:8px;border:2px solid #a6b5ff}
.formula{font-size:20px;color:#4b5b8a}
.quiz .question{font-size:22px;margin-bottom:12px}
.quiz .options{display:grid;gap:12px}
.quiz button{font-size:18px;padding:12px;border:none;border-radius:12px;background:#fff;color:#1f2d3d;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.quiz button.correct{background:#c0ffd7;color:#1f6f43}
.quiz button.wrong{background:#ffd6d6;color:#8a1f1f}
.guidelines{font-size:18px;line-height:1.8}
@media (max-width:1024px){.hero-card{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
@media (min-width:768px){.nav button{font-size:20px;padding:14px 18px}}
@media (min-width:1024px){.view{padding:32px}}