.site-header{position:sticky;top:0;width:100%;height:180px;border-bottom:20px solid var(--red);z-index:1;background-color:#fff;display:flex;justify-content:center;padding:32px 0;transition:all .8s ease-in-out}.site-header.__isLoaded{height:50px;border-bottom-width:10px;padding-top:8px;padding-bottom:8px}.site-header img{max-height:100%}.page-header{display:grid;grid-template-columns:2fr 1fr}.page-header figure{margin-right:0}.page-header figure img{width:100%}.page-footer{display:flex;justify-content:space-between;margin-bottom:40px}.page-footer-item{padding:8px 16px;border:4px solid currentColor;display:flex;flex-flow:column;gap:8px;justify-content:center}.page-footer-item h3{margin:0}.page-footer-item span{opacity:.32;font-style:italic;display:inline-block}.page-404{display:flex;overflow:hidden;width:100vw;height:100vh;flex-flow:row wrap;gap:40px;justify-content:center;align-items:center;font-size:2vw}.page-404-title{position:absolute;top:50%;left:50%;display:inline-block;width:50vw;z-index:2024;translate:-50% -50%;font-size:8vw;margin:0;padding:0;text-shadow:0 0 8px rgba(255,255,255.8)}.music-player{position:fixed;bottom:0;left:0;right:0;background:#0f0f0f;border-top:1px solid #2a2a2a;padding:12px 24px;z-index:100;display:flex;flex-flow:column;align-items:center}.player-bar{display:flex;align-items:center;gap:24px;max-width:1200px;margin:0 auto;width:100%}.music-player .track-info{width:50vw}.track-info{display:flex;align-items:center;gap:12px}.album-art{width:44px;height:44px;border-radius:4px;overflow:hidden;background:#1e1e1e;flex-shrink:0}.album-art img{width:100%;height:100%;object-fit:cover}.album-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#555}.track-meta{display:flex;flex-direction:column;overflow:hidden;color:#fff}.track-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist{opacity:.5;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.controls{display:flex;align-items:center;gap:8px;flex-shrink:0}.controls button{background:none;border:none;color:#aaa;cursor:pointer;padding:6px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}.controls button:hover{color:#fff;background:#1e1e1e}.controls button svg{width:20px;height:20px}.play-btn{background:#fff!important;color:#000!important;width:38px;height:38px}.play-btn:hover{background:#ddd!important}.play-btn svg{width:22px!important;height:22px!important}.progress-section{display:flex;align-items:center;gap:10px;flex:1}.time{color:#666;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}.progress-bar{flex:1;height:4px;background:#2a2a2a;border-radius:2px;cursor:pointer;position:relative}.progress-bar:hover .progress-thumb{opacity:1}.progress-fill{height:100%;background:#fff;border-radius:2px;pointer-events:none}.progress-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:#fff;border-radius:50%;opacity:0;transition:opacity .15s;pointer-events:none}.volume-section{display:flex;align-items:center;gap:8px;min-width:130px}.volume-section button{background:none;border:none;color:#aaa;cursor:pointer;padding:4px;display:flex;align-items:center;transition:color .15s;flex-shrink:0}.volume-section button:hover{color:#fff}.volume-section button svg{width:18px;height:18px}.volume-slider{-webkit-appearance:none;width:80px;height:4px;background:#2a2a2a;border-radius:2px;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:#fff;border-radius:50%;cursor:pointer}.homepage{padding-top:64px;overflow:auto;box-sizing:border-box}.playlists{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:480px;margin:0 auto 32px;text-align:center}.playlists h2{margin:8px 0}.playlists figure{margin:0;border-radius:16px;width:100%;overflow:hidden;display:flex}.playlists img{width:100%}.playlists .__isSelected figure{outline:4px solid var(--red)}.tracklist .track-info{background-color:#333;border-radius:0 16px 16px 0;max-width:calc(50vw - 44px)}.tracklist{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-bottom:160px}.tracklist .track.__isSelected .track-info{background-color:var(--red)}:root{--blue: #b2e0f9;--yellow: #fff7b5;--red: #e28c75;--pink: #ffccff}html,body{padding:0;margin:0}select,input{border:0 none transparent;border-bottom:2px solid transparent}:is(select,input):focus{outline:none;border-bottom-color:var(--blue)}body{font-family:Arial,Helvetica,sans-serif;overflow-x:hidden;background-color:#eee}#app{width:100%}#main{width:100%;height:calc(100vh - 64px);padding:0;margin:0;float:left}.__isGoed{background-color:var(--yellow)}.__isDoel{background-color:var(--blue)}.__isSlecht{background-color:var(--pink)}.filters{display:flex;flex-flow:row;width:100%;gap:40px;margin:0 0 16px;font-size:16px;background-color:#333;padding:20px 0;align-items:flex-end;color:#fff;position:relative}.filters:before{content:"";position:absolute;width:200vw;left:-100vw;top:0;bottom:0;z-index:-1;background-color:#333}.filter{display:flex;flex-flow:column;gap:8px;font-weight:700}.filter span{display:flex;align-items:center;gap:8px}.container{width:calc(100% - 80px);max-width:1280px;padding:0 40px;margin:auto}