*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;background-color:#000;overflow:hidden}#app{width:100vw;height:100vh;position:relative}canvas{display:block;width:100%;height:100%}.type3{border:1px solid #5678A5;border-radius:5px;padding:10px;color:#fff;background-color:#334f7599}.closeButton{position:absolute;top:10px;right:10px;background:none;border:none;color:#fff;font-size:20px;font-weight:700;cursor:pointer;padding:0;width:25px;height:25px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease-in-out}.closeButton:hover{transform:scale(1.1)}.infoButton{position:absolute;bottom:0;margin:18px;cursor:pointer;width:25px;transition:all .2s ease-in-out;box-shadow:0 0 #ff572200;border-radius:2em;mix-blend-mode:screen}.infoButton:hover{transform:scale(1.2)}#collapseInfo{width:380px;max-height:350px;position:absolute;bottom:50px;margin:10px;overflow:hidden;padding-right:40px;transition:all .5s ease-in-out}#collapseInfo.collapsed{width:0;max-height:0;opacity:0;overflow:hidden}@media (max-width: 768px){.infoButton{width:30px;margin:10px}#collapseInfo{width:90vw;max-width:350px;font-size:14px}.infoBox{left:10px;font-size:14px}.tab-content-wrapper{min-height:200px}}@media (max-width: 480px){#collapseInfo{bottom:60px;padding:8px 35px 8px 8px}.closeButton{width:20px;height:20px;font-size:16px;top:3px;right:5px}.loading-box{min-width:280px;padding:20px;margin:0 10px}.loading-box h2{font-size:20px}.loading-text{font-size:14px}.loading-details{font-size:12px}}.info-tabs{display:flex;margin-bottom:15px;border-bottom:1px solid #5678A5}.tab-button{background:none;border:none;color:#fff;padding:8px 16px;cursor:pointer;border-bottom:2px solid transparent;transition:all .3s ease;font-size:14px;font-family:Arial,sans-serif}.tab-button:hover{background-color:#ffffff1a}.tab-button.active{border-bottom-color:#5678a5;font-weight:700}.tab-content-wrapper{min-height:180px;position:relative}.tab-content{display:none;position:absolute;top:0;left:0;width:100%;opacity:0;transition:opacity .3s ease;font-size:15px;font-family:Arial,sans-serif}.tab-content.active{display:block;opacity:1}.tab-content h3{margin-top:0;margin-bottom:10px;color:#87ceeb;font-family:Arial,sans-serif}.tab-content p{margin:8px 0;line-height:1.4;font-family:Arial,sans-serif}.loading-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#334f75e6;border:2px solid #5678A5;border-radius:10px;padding:30px;color:#fff;text-align:center;min-width:300px;z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 32px #0000004d}.loading-box h2{margin-bottom:20px;color:#87ceeb;font-size:24px;font-weight:700}.loading-progress{width:100%;height:8px;background-color:#fff3;border-radius:4px;margin:20px 0;overflow:hidden}.loading-bar{height:100%;background:linear-gradient(90deg,#5678a5,#87ceeb);border-radius:4px;transition:width .3s ease;width:0%}.loading-text{font-size:16px;margin-bottom:10px;color:#e0e0e0}.loading-details{font-size:14px;color:#b0b0b0;margin-top:15px}.loading-box.hidden{opacity:0;pointer-events:none;transition:opacity .5s ease}.spinner{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#87ceeb;animation:spin 1s ease-in-out infinite;margin-right:10px}@keyframes spin{to{transform:rotate(360deg)}}