@font-face{font-family:Boink;src:url(/Fonts/boink.otf) format("opentype")}body{margin:0;padding:0;box-sizing:border-box;font-family:Boink,sans-serif}h3,h2,h1{letter-spacing:1px;word-spacing:10px}a{color:#fff;text-decoration:none}a:hover{color:#1e90ff}.app{position:relative;width:100vw;height:100vh;background-size:cover;background-position:center;display:flex;justify-content:center;align-items:center}.credits{position:absolute;top:20px;left:20px;color:#fff;font-size:.9rem;text-shadow:1px 1px 2px rgba(0,0,0,.5);z-index:1}.credits a{color:#61dafbaa;text-decoration:none}.credits a:hover{text-decoration:underline}.flicker-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0000001a;animation:flicker 1.5s infinite;pointer-events:none}@keyframes flicker{0%,to{filter:brightness(1.2)}50%{filter:brightness(.8)}}.play-button-container{position:relative;display:flex;justify-content:center;align-items:center}.glow{position:absolute;width:100px;height:100px;transition:transform .1s ease-out}.play-pause-button{background:none;border:none;cursor:pointer;z-index:1}.play-pause-button img{width:100px;height:100px}.track-name{position:relative;color:#ff0;font-size:1.45rem;text-shadow:-1px -1px 0px red,1px 1px 0px red,1px -1px 0px red,-1px 1px 0px red}.track-name:before{content:"Now Playing: ";font-size:1.45rem;opacity:.5;color:#fff;text-shadow:none;font-weight:400}.track-info-container h1{color:#fff;font-size:1.2rem;margin:0;-webkit-user-select:none;user-select:none}.bottom-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);width:550px;display:flex;flex-direction:row;align-items:center;gap:15px;box-sizing:border-box}.left-controls{display:flex;flex-direction:column;align-items:center;gap:1.5rem;flex-grow:1}.button-container{display:flex;align-items:center;gap:15px;background-color:#00000080;padding:10px 15px;border-radius:10px;width:100%;box-sizing:border-box;justify-content:space-between}.action-buttons{display:flex;align-items:center;gap:15px}.track-info-container{display:flex;position:relative;align-items:center;gap:100px;background-color:#00000080;padding:20px 15px;border-radius:10px;white-space:nowrap;justify-content:center;width:100%;box-sizing:border-box}.next-button{background-color:#00000080;color:#ff0;border:none;border-radius:10px;padding:10px 15px;font-size:1.5rem;font-family:Boink,sans-serif;cursor:pointer;transition:background-color .3s ease}.next-button:hover{background-color:#000c}.playlist-button{background:none;border:none;cursor:pointer;padding:0;line-height:0}.playlist-button img{width:32px;height:32px;filter:invert(1);opacity:.5;transition:opacity .3s ease}.playlist-button:hover img{opacity:1}.download-button{background:none;border:none;cursor:pointer;opacity:.5;transition:opacity .3s ease;padding:0;line-height:0}.download-button img{width:24px;height:24px;filter:invert(1)}.download-button:disabled{opacity:.3;cursor:not-allowed}.download-button:hover{opacity:1}.personal-link{text-decoration:none;font-size:1rem;opacity:.7;transition:opacity .3s ease}.personal-link:hover{opacity:1;text-decoration:underline}.icon-button{background:none;border:none;cursor:pointer;padding:0;line-height:0;opacity:.5;transition:opacity .3s ease}.icon-button img{width:32px;height:32px;filter:invert(1)}.icon-button:hover{opacity:1}.icon-button:disabled{opacity:.3;cursor:not-allowed}.volume-slider{-webkit-appearance:none;appearance:none;width:100px;height:10px;background:#ffffff4d;border-radius:5px;outline:none;opacity:.7;transition:opacity .2s}.volume-slider:hover{opacity:1}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:#fff;border-radius:50%;cursor:pointer}.volume-slider::-moz-range-thumb{width:18px;height:18px;background:#fff;border-radius:50%;cursor:pointer}.volume-slider.vertical{-webkit-appearance:slider-vertical;writing-mode:bt-lr;width:10px;height:120px}.volume-controls{display:flex;flex-direction:column;align-items:center;background-color:#00000080;padding:10px;border-radius:10px}.volume-button{background:none;border:none;color:#fff;cursor:pointer;font-size:1.2rem;opacity:.7;transition:opacity .2s}.volume-button:hover{opacity:1}@media (max-width: 640px){.track-name,.track-name:before,.track-info-container h1,.next-button,.select-track-button{font-size:18px}.track-info-container{padding:10px 7.5px}.next-button,.select-track-button{padding:5px 7.5px}.bottom-controls{bottom:60px;flex-direction:column-reverse;gap:16px}.track-name:before{display:none}.playlist-button{position:static}.vignette-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,#0000 50%,#000000b3);pointer-events:none}}.modal-content{background-color:#242424;width:80%;max-width:800px;max-height:80vh;min-height:65%;display:flex;flex-direction:column;color:#fff;border-radius:10px}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;border-bottom:1px solid #444}.modal-header h2{margin:0}.close-button{background:none;border:none;font-size:1.5rem;color:#fff;cursor:pointer}.modal-tabs{display:flex;padding:10px 20px;border-bottom:1px solid #444}.modal-tabs button{background:none;border:none;color:#fff;padding:10px 15px;cursor:pointer;opacity:.6}.modal-tabs button.active{opacity:1;border-bottom:2px solid yellow}.track-list{flex-grow:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:20px}.track-list::-webkit-scrollbar{width:8px}.track-list::-webkit-scrollbar-track{background:transparent}.track-list::-webkit-scrollbar-thumb{background-color:#fff3;border-radius:4px}.track-list::-webkit-scrollbar-thumb:hover{background-color:#fff6}.track-group h3{border-bottom:1px solid #444;padding-bottom:5px}.track-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding-top:10px}.play-button{display:block;min-width:24px;min-height:24px;align-self:center;cursor:pointer;color:#fff;opacity:.5;transition:opacity .2s ease;background-image:url("data:image/svg+xml,%3csvg%20width='2436'%20height='2729'%20viewBox='0%200%202436%202729'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1999.5%20986.513C2290.17%201154.33%202435.5%201238.24%202435.5%201364.1C2435.5%201489.96%202290.17%201573.87%201999.5%201741.69L654%202518.51C363.333%202686.33%20218%202770.24%20109%202707.31C-0.000244141%202644.37%20-1.46601e-05%202476.56%201.0852e-08%202140.92V587.275C1.46818e-05%20251.642%20-7.62939e-06%2083.8253%20109%2020.8941C218%20-42.0371%20363.333%2041.8715%20654%20209.688L1999.5%20986.513Z'%20fill='black'/%3e%3c/svg%3e")}.play-button:hover{opacity:1}.track-card-name{display:flex;width:100%;align-items:center;justify-content:center}.track-card-name:disabled:after{display:none}.track-card{display:flex;-webkit-user-select:none;user-select:none;border:1px solid rgba(255,255,255,.2);border-radius:5px;padding:10px;cursor:pointer;text-align:center;transition:box-shadow .2s ease,transform .2s ease}.track-card:hover{box-shadow:0 0 0 1px #fff}.track-card:active{transform:scale(.95)}.track-card.animating{animation:bounce .5s ease}.track-card.disabled{color:gray;text-decoration:line-through;opacity:.3}.modal-footer{display:flex;justify-content:flex-end;padding:10px 20px;border-top:1px solid #444}.modal-footer button{background-color:#444;color:#fff;border:none;padding:10px 15px;border-radius:5px;cursor:pointer;margin-left:10px}.modal-footer button:hover{background-color:#555}.track-card.disabled>.play-button{display:none}@media (max-width: 640px){.modal-content{width:95%;max-height:90vh}.modal-header,.modal-tabs,.modal-footer{padding:10px 15px}.track-list{padding:15px}.track-cards{grid-template-columns:1fr}}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:#242424;padding:20px;border-radius:10px;width:80%;max-width:600px;max-height:80vh;overflow-y:auto;position:relative;color:#fff}.credit-text{font-size:1.2rem;font-weight:600;line-height:1.2;margin:5px;letter-spacing:1px}.credit-header{font-size:1.2rem;font-weight:600;line-height:1.2;margin:10px;letter-spacing:1px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#fff;text-decoration-thickness:2px}.info-card{display:flex;flex-direction:column;gap:10px;margin:10px}.banner{width:60%;height:auto;margin:auto;border-radius:10px}.info-card-header{display:flex;justify-content:center;align-items:center;gap:10px}.close-button{position:absolute;top:10px;right:10px;background:none;border:none;font-size:1.5rem;color:#fff;cursor:pointer}