body,html{width:100%;overflow-x:hidden}*,*:before,*:after{box-sizing:border-box}#controls{position:absolute;top:20px;left:20px;background:#0009;padding:10px;z-index:100;border-radius:10px;font-family:sans-serif}#tooltip{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:auto;z-index:1001;display:none;background:#1a1a1a;color:#fff;padding:20px;border-radius:10px;font-size:1rem;max-width:90vw;max-height:70vh;font-family:sans-serif;line-height:1.5;box-shadow:0 0 12px #0009;overflow:hidden}#tooltip .content{overflow-y:auto;max-height:55vh;padding-right:8px}#tooltip .close-btn{position:absolute;top:6px;right:10px;background:none;border:none;color:#fff;font-size:18px;cursor:pointer}.legend-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:middle}#sidebar{position:absolute;top:0;left:0;width:100vw;background:#00000080;color:#fff;padding:10px 20px 40px;font-family:sans-serif;font-size:1rem;border-bottom-left-radius:10px;border-bottom-right-radius:10px;display:flex;flex-direction:column;align-items:center;transform:translateY(0);transition:transform .3s ease;z-index:1000}#sidebar.closed .info-wrapper{display:none}#sidebar-inner{max-width:960px;margin:0 auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:20px}.info-wrapper{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;margin-top:20px;font-family:sans-serif}.how-to,.colors{flex:1;min-width:200px;max-width:450px}.how-to h3,.colors h4{margin-bottom:8px}.how-to ul,.colors ul{margin-top:0;padding-left:20px}.toggle-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:20px}.toggle{font-size:14px;padding:10px 16px;border-radius:6px;background:#ca5770;color:#fff;border:1px solid #555;font-family:sans-serif;white-space:nowrap;transition:background .3s}.toggle.active{background:#a5d48f;color:#000}#chevron-toggle{background:#4b505c;border:none;color:#fff;font-size:18px;content:">";cursor:pointer;padding:6px 12px;border-radius:6px;z-index:1001;position:absolute;right:20px;bottom:10px;font-family:sans-serif;transition:background .3s,color .3s}canvas{touch-action:none}#chevron-toggle.closed{background:#ca5770;color:#fff}#chevron-toggle:before{content:attr(data-icon);font-size:20px;line-height:1}#chevron-toggle.closed:before{content:">"}@media (max-width: 768px){.toggle{font-size:20px;padding:14px 22px;width:100%;display:block;margin:10px 0}.info-wrapper{flex-direction:column}#tooltip{font-size:1.2rem!important;padding:1.2rem!important;max-width:90vw!important}#legend{font-size:1rem!important;padding:1rem!important}#sidebar{width:90vw}button{font-size:1rem}}