body{margin:0;height:100vh}canvas{display:block}.infoBox{font-family:sans-serif;width:auto;position:absolute;bottom:0;left:50px;margin:10px}.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)}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.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)}.loadedFiles,.aboveSea{display:inline}p:has(div.aboveSea){margin-left:.5em}#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}ul{margin-top:.5em;margin-bottom:.5em}@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}}.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:280px;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-content{text-align:center;max-width:400px}
