*,:before,:after{box-sizing:border-box}html,body,#root{background:#01020a;width:100%;height:100%;margin:0;padding:0}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{color:#e8eaf2;-webkit-font-smoothing:antialiased;background:#01020a;width:100%;height:100%;min-height:100vh;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.app-shell{flex-direction:column;height:100vh;display:flex;overflow:hidden}.landing-shell{background:radial-gradient(circle at 30% 30%,#5a6eff38,#0000 30%),radial-gradient(circle at 70% 60%,#ff782829,#0000 24%),#02040c;justify-content:center;align-items:center;position:relative}.landing-backdrop{opacity:.3;background:radial-gradient(circle,#ffffff14 0 1px,#0000 1px) 0 0/42px 42px,0 0;position:absolute;inset:0}.hero-panel{z-index:2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#050816b8;border:1px solid #7896ff29;border-radius:28px;width:min(720px,100vw - 40px);padding:38px 34px;position:relative;box-shadow:0 30px 80px #00000073}.hero-kicker{color:#8aa2ff;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px;font-size:12px}.hero-title{color:#f7f9ff;margin-bottom:16px;font-size:clamp(36px,7vw,72px);line-height:.96}.hero-desc{color:#aeb9da;max-width:56ch;font-size:15px;line-height:1.75}.hero-actions{flex-wrap:wrap;align-items:center;gap:14px;margin-top:28px;display:flex}.enter-btn,.skip-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#5f7bff,#8b5cf6);border:0;border-radius:999px;padding:12px 18px;font-weight:700;box-shadow:0 18px 40px #5c6eff57}.hero-badges{flex-wrap:wrap;gap:10px;display:flex}.hero-badges span{color:#c7d3f8;background:#0d1226b8;border:1px solid #7896ff2e;border-radius:999px;padding:8px 12px;font-size:12px}.site-header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20;background:#01020cd1;border-bottom:1px solid #6482ff26;flex-shrink:0;align-items:center;gap:10px;padding:10px 20px;display:flex}.logo-dot{background:radial-gradient(circle,#ffd060,#f70);border-radius:50%;flex-shrink:0;width:10px;height:10px;box-shadow:0 0 8px 2px #ffa01e8c}.site-title{color:#f0f4ff;letter-spacing:.01em;font-size:16px;font-weight:600}.site-sub{color:#7080aa;letter-spacing:.04em;font-size:12px}.canvas-wrap{flex:1;position:relative;overflow:hidden}.canvas-wrap canvas{display:block;width:100%!important;height:100%!important}.planet-label{color:#dce6ff;letter-spacing:.05em;white-space:nowrap;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#050816bf;border:1px solid #a0b4ff61;border-radius:999px;padding:4px 11px;font-family:inherit;font-size:11px;font-weight:500;transition:background .15s,border-color .15s;box-shadow:0 4px 16px #00000059}.planet-label:hover{background:#1e326ed9;border-color:#a0c8ffb3}.moon-label{color:#eef3ff;white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#080a16b8;border:1px solid #8ca0dc52;border-radius:999px;padding:3px 9px;font-size:10px;box-shadow:0 4px 12px #00000047}.loading-overlay{pointer-events:none;z-index:40;background:radial-gradient(circle,#01020a14,#01020a38);flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:absolute;inset:0}.loading-orb{background:radial-gradient(circle,#ffd060,#f70);border-radius:50%;width:22px;height:22px;animation:1.4s ease-in-out infinite pulse-orb;box-shadow:0 0 18px #ffa028cc}.loading-text{color:#e2eaffb3;letter-spacing:.08em;text-transform:uppercase;font-size:12px}@keyframes pulse-orb{0%,to{opacity:.8;transform:scale(.92)}50%{opacity:1;transform:scale(1.14)}}.scene-note{z-index:30;color:#c9d7ff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#050816bd;border:1px solid #7896ff33;border-radius:16px;flex-direction:column;gap:4px;max-width:420px;padding:12px 14px;font-size:12px;display:flex;position:absolute;top:16px;left:16px;box-shadow:0 8px 24px #00000052}.scene-note strong{color:#f2f6ff;font-size:13px}.scene-note span{color:#afbddf;line-height:1.55}.overlay-controls{z-index:30;pointer-events:none;flex-direction:column;align-items:flex-end;gap:12px;display:flex;position:absolute;top:16px;right:16px}.overlay-controls.collapsed{gap:0}.overlay-controls-toggle{pointer-events:all;color:#cdd8ff;cursor:pointer;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#030512d1;border:1px solid #6482ff47;border-radius:12px;width:42px;height:42px;font-family:inherit;font-size:22px;line-height:1;box-shadow:0 8px 32px #0006}.overlay-controls-toggle:hover{background:#1c244ce6;border-color:#78a0ff75}.quality-control,.chapter-nav{pointer-events:all;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#030512d1;border:1px solid #6482ff2e;border-radius:14px;padding:12px 14px;box-shadow:0 8px 32px #0006}.quality-title{color:#6070a0;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;font-size:11px;font-weight:600}.quality-buttons{gap:8px;display:flex}.chapter-title{color:#6070a0;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;font-size:11px;font-weight:600}.chapter-list{gap:8px;display:grid}.chapter-btn{text-align:left;color:#cfdbff;cursor:pointer;background:#12183280;border:1px solid #5064c847;border-radius:12px;gap:4px;padding:10px;display:grid}.chapter-btn small{color:#93a0c5;line-height:1.45}.chapter-btn.active{background:#3c64ff2e;border-color:#6496ff8f}.quality-btn{color:#7d8fc6;text-transform:uppercase;cursor:pointer;background:#141c3c99;border:1px solid #5064c866;border-radius:999px;padding:5px 10px;font-size:11px}.quality-btn.active{color:#a0c0ff;background:#3c64ff40;border-color:#6496ff99}.controls{pointer-events:all;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#030512d1;border:1px solid #6482ff2e;border-radius:14px;min-width:200px;padding:14px 16px;box-shadow:0 8px 32px #0006}.ctrl-title{letter-spacing:.12em;text-transform:uppercase;color:#6070a0;margin-bottom:12px;font-size:11px;font-weight:600}.ctrl-row{color:#b0bcdc;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;font-size:13px;display:flex}.ctrl-row:last-child{margin-bottom:0}.toggle{color:#5060a0;cursor:pointer;letter-spacing:.05em;background:#141c3c99;border:1px solid #5064c866;border-radius:999px;padding:3px 10px;font-family:inherit;font-size:11px;font-weight:600;transition:all .15s}.toggle.on{color:#a0c0ff;background:#3c64ff40;border-color:#6496ff99}.speed-row{flex-direction:column;align-items:flex-start;gap:6px}.speed-slider{accent-color:#6090ff;cursor:pointer;width:100%}.intro-overlay{z-index:35;pointer-events:none;justify-content:center;align-items:center;padding:20px;display:flex;position:absolute;inset:0}.intro-card{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);pointer-events:all;background:#030514c7;border:1px solid #7896ff2e;border-radius:20px;width:min(520px,100%);padding:24px;box-shadow:0 24px 60px #00000073}.intro-step{color:#8aa2ff;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px;font-size:11px}.intro-title{color:#f5f8ff;margin-bottom:10px;font-size:30px;line-height:1.05}.intro-text{color:#b3bedf;margin-bottom:16px;font-size:14px;line-height:1.7}.info-panel{z-index:30;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#030514e0;border:1px solid #7896ff33;border-radius:18px;min-width:300px;max-width:420px;padding:20px 24px;animation:.22s slide-up;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 16px 48px #0000008c}@keyframes slide-up{0%{opacity:0;transform:translate(-50%)translateY(16px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.info-close{color:#5060a0;cursor:pointer;background:0 0;border:none;font-size:16px;line-height:1;transition:color .15s;position:absolute;top:12px;right:14px}.info-close:hover{color:#a0b0e0}.info-dot{border-radius:50%;width:14px;height:14px;margin-bottom:10px;box-shadow:0 0 12px 3px}.info-name{color:#e8eeff;letter-spacing:-.01em;margin-bottom:8px;font-size:22px;font-weight:700}.info-desc{color:#8090c0;margin-bottom:16px;font-size:13px;line-height:1.65}.info-stats{gap:8px;display:grid}.stat{background:#1e285066;border-radius:8px;justify-content:space-between;align-items:center;padding:6px 10px;font-size:12px;display:flex}.stat-label{color:#6070a0}.stat-val{color:#a0bcff;font-variant-numeric:tabular-nums;font-weight:600}@media (width<=600px){.site-sub{display:none}.scene-note{max-width:54vw;font-size:11px}.hero-panel{padding:26px 22px}.hero-desc{font-size:14px}.controls{min-width:160px;padding:10px 12px}.info-panel{min-width:80vw;max-width:92vw;bottom:12px}}