html,body{width:100%;height:100%;overflow:hidden;font-family:sans-serif}#root{width:100vw;height:100vh;overflow:hidden;position:relative}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none}canvas,svg{display:block;max-width:100%;max-height:100%;overflow:hidden}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden!important;position:relative}#root{width:100vw;height:100vh;overflow:hidden!important}#graph-container{height:100%;overflow:hidden;position:relative;display:flex}svg,canvas{display:block;max-width:100%;max-height:100%}.sidebar-container .genre-list::-webkit-scrollbar,.sidebar-container .popularArtistList::-webkit-scrollbar{width:8px}.sidebar-container .genre-list::-webkit-scrollbar-track,.sidebar-container .popularArtistList::-webkit-scrollbar-track{background:transparent}.sidebar-container .genre-list::-webkit-scrollbar-thumb,.sidebar-container .popularArtistList::-webkit-scrollbar-thumb{background-color:#555;border-radius:4px;border:2px solid transparent}.sidebar-container .genre-list:hover::-webkit-scrollbar-track,.sidebar-container .popularArtistList:hover::-webkit-scrollbar-track{background:transparent}.sidebar-container .genre-list:hover::-webkit-scrollbar-thumb,.sidebar-container .popularArtistList:hover::-webkit-scrollbar-thumb{border:2px solid #111}.sidebar-container .genre-list,.sidebar-container .popularArtistList{scrollbar-width:thin;scrollbar-color:#555 transparent}.sidebar-container .genre-list:hover,.sidebar-container .popularArtistList:hover{scrollbar-color:#555 #111}.about-page{position:relative;height:100vh;overflow-y:auto!important;-ms-overflow-style:none;scrollbar-width:none;padding:0 0 46px;box-sizing:border-box}.about-page::-webkit-scrollbar{display:none}.sidebar-container{transition:transform .3s ease-in-out}@media (min-width: 769px){.sidebar-container{width:300px;transform:translate(0)!important;position:absolute;right:0;top:0}}@media (max-width: 768px){.sidebar-container{width:100vw;height:100vh;background:#1a1a1a;position:fixed;right:0;top:0;z-index:1000}.sidebar-toggle{position:absolute;top:12px;left:12px;z-index:1100}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.scroll-area{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;padding:4px 12px;flex:1;scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.container{margin-top:12px}.row{position:relative;display:flex;align-items:center}.card-base{min-width:100px;max-width:100px;text-align:center;flex-shrink:0;background-color:#292929;box-shadow:0 1px 4px #00000080}.card-rounded{border-radius:10px;padding-top:6px}.card-circle{border-radius:50px 50px 10px 10px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:6px}.fade-arrow{position:absolute;top:0;bottom:0;width:30px;font-family:sans-serif;font-size:20px;display:flex;align-items:center;cursor:pointer;z-index:1}.fade-arrow.left{left:0;justify-content:flex-start;background:linear-gradient(to right,#1a1a1a,transparent)}.fade-arrow.right{right:0;justify-content:flex-end;background:linear-gradient(to left,#1a1a1a,transparent)}.artist-sidebar{position:absolute;top:0;right:0;width:300px;height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));margin-top:env(safe-area-inset-top);margin-bottom:env(safe-area-inset-bottom);background-color:#1a1a1a;color:#fff;border-left:1px solid #333;z-index:30;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;box-sizing:border-box}.artist-sidebar .content{padding:0 16px 45px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.artist-sidebar .name-row{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:6px}.artist-sidebar .name{font-size:20px;font-weight:700;color:#fff;text-align:center}.artist-sidebar .name-link{text-decoration:none}.artist-sidebar .spotify-link{display:inline-flex;align-items:center}.artist-sidebar .spotify-icon{height:18px;width:18px;margin-top:1px}.artist-sidebar .expanded{width:100%;font-size:14px;margin-top:6px}.artist-sidebar .image-wrapper{position:relative;width:100%;height:300px;margin-bottom:12px;overflow:hidden}.artist-sidebar .image{width:100%;height:100%;object-fit:cover;display:block}.artist-sidebar .image-fade{position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to top,#1a1a1a,transparent)}.artist-sidebar .section-block{margin-bottom:30px;padding-top:14px;border-top:1px solid #777;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.artist-sidebar .section-title{font-weight:700;text-align:center;font-size:15px;margin-bottom:6px}.artist-sidebar .close-button{position:absolute;top:calc(10px + env(safe-area-inset-top));right:260px;background:#fff;opacity:.75;color:#000;border:none;border-radius:4px;padding:1px 6px;font-size:20px;cursor:pointer;z-index:999}.artist-sidebar .rank-badge{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;width:fit-content;background-color:#1a1a1a;opacity:.6;border:1px solid #444;border-radius:6px;overflow:hidden;font-size:13px;z-index:40}.artist-sidebar .rank-line{padding:4px 6px;color:#fff;text-align:center;border-bottom:1px solid #444}.artist-sidebar .rank-line-last{padding:4px 6px;color:#fff;text-align:left}.artist-sidebar .last-updated{font-size:11px;color:#888;text-align:center;margin-top:auto;padding:0 16px 15px;box-sizing:border-box}@media (max-width: 768px){.artist-sidebar{width:100vw;left:0;border-left:none}.artist-sidebar .content{padding:0 16px}.artist-sidebar .close-button{left:10px;right:auto;top:calc(10px + env(safe-area-inset-top));padding:0 7px 2px}}.sidebar-container{position:absolute;top:0;right:0;width:300px;height:calc(100dvh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 50px);background:#1a1a1a;color:#fff;padding:12px 12px 0;border-left:1px solid #333;display:flex;flex-direction:column;z-index:1000;transition:transform .3s ease-in-out;min-height:0}@media (max-width: 768px){.sidebar-container{position:fixed;top:0;left:0;width:100vw;height:calc(100dvh - env(safe-area-inset-bottom) - env(safe-area-inset-top));padding:calc(12px + env(safe-area-inset-top)) 12px env(safe-area-inset-bottom);transform:translate(100%);border-left:none}.sidebar-container.open{transform:translate(0)}}.sidebar-close{position:absolute;top:12px;right:12px;background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer}.search-section{flex:0 0 auto;position:relative;margin-bottom:12px;display:flex;flex-direction:column;z-index:10}.search-bar-row{position:relative;display:flex;align-items:center;gap:6px;margin-bottom:8px}.search-input{flex:1;padding:4px 8px;font-size:13px;border-radius:6px;border:1px solid #444;background:#111;color:#fff;height:28px;z-index:999}.inline-close{display:none;background:#333;border:1px solid #555;border-radius:4px;color:#fff;font-size:14px;width:28px;height:28px;line-height:24px;cursor:pointer;align-items:center;justify-content:center}.search-results{position:absolute;top:75%;left:0;right:0;background:#222;border:1px solid #444;border-top:none;border-bottom-left-radius:6px;border-bottom-right-radius:6px;overflow-y:auto;max-height:300px;z-index:998;box-shadow:0 4px 6px #00000080}.search-result-item{padding:8px 10px;cursor:pointer;border-bottom:1px solid #333}@media (max-width: 768px){.inline-close{display:flex}}.genre-section{flex:1 1 auto;padding-top:20px;display:flex;flex-direction:column;min-height:0}.genre-header{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:6px;margin-bottom:8px;text-align:center}.genre-title{font-weight:700;font-size:16px}.genre-controls{display:flex;gap:8px;margin-bottom:2px}.genre-controls button{flex:1;font-size:12px;padding:4px 8px;background:#333;color:#fff;border:1px solid #555;border-radius:4px;cursor:pointer}.genre-list{flex:1 1 auto;min-height:0;overflow-y:auto;box-sizing:border-box;padding:6px;background:#111;border-radius:6px;border:1px solid #333;margin-bottom:12px}.genre-item{display:flex;align-items:center;gap:8px;margin-bottom:6px}.popular-artist-section{flex:0 0 34%;display:flex;flex-direction:column;overflow:hidden;background:#1a1a1a}.popular-artist-header{font-weight:700;font-size:16px;text-align:center;margin-bottom:6px}.popularArtistList{flex:1;overflow-y:auto;padding:0 6px 6px;background:#111;border-radius:6px;border:1px solid #333}.popular-artist-item{font-size:13px;padding:6px 4px;border-bottom:1px solid #222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .2s;cursor:pointer}.popular-artist-item.faded{color:#666;cursor:default}.popular-artist-item:hover:not(.faded){background:#222}.toggle-button-group{position:fixed;bottom:calc(45px + env(safe-area-inset-bottom));left:12px;display:flex;flex-direction:column;width:auto;z-index:500}.toggle-button{min-width:140px;background:#2c2c2c;color:#fff;border:1px solid #444;cursor:pointer;font-size:13px;padding:6px 10px;text-align:left}.toggle-button.top{border-radius:6px 6px 0 0}.toggle-button.middle{border-radius:0}.toggle-button.bottom{border-radius:0 0 6px 6px}.toggle-label{display:flex;align-items:center;color:#aaa;opacity:.6}.toggle-label.active{color:#fff;opacity:1}.toggle-icon{display:flex;align-items:center;margin-right:8px}.toggle-img{width:16px;height:16px;filter:invert(1)}.toggle-img.hidden{opacity:.6}.toggle-divider{width:1px;height:16px;background-color:#ddd;margin-left:8px}@media (max-width: 768px){.toggle-button-group{left:5px}}.hamburger-button{position:fixed;top:60px;right:12px;z-index:1200;background:#1a1a1a;border:1px solid #444;color:#fff;font-size:20px;padding:3px 10px 4px;border-radius:4px;cursor:pointer}@media (min-width: 769px){.hamburger-button{display:none}}.graph-footer{position:fixed;bottom:0;left:0;width:100%;display:flex;background-color:#222;height:30px;z-index:100;border-top:1px solid #333;padding-bottom:env(safe-area-inset-bottom)}.graph-footer button{background-color:#2c2c2c;color:#fff;border:none;border-radius:0;padding:0 16px;height:100%;cursor:pointer;font-size:14px;margin:0}.graph-footer button:hover{background-color:#444}.graph-footer button.active{background-color:#3a3a3a;font-weight:700}@media (max-width: 768px){.graph-footer{height:40px;!important}}