@import "https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";@font-face{font-family:PinkBlue;src:url(/Pink Blue-sa4jmsbw.ttf)}:root{--pink:#fb438a;--blue:#1dc8e8;--background:#26262e;--icon-colour:#fff;--player-height:70px;--buncss-light:initial;--buncss-dark: ;color-scheme:light dark;color:#c7d3eb;background-color:var(--background);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Avenir,Helvetica,Arial,sans-serif;line-height:1.5}@media (prefers-color-scheme:dark){:root{--buncss-light: ;--buncss-dark:initial}}*{box-sizing:border-box;font-family:Inter,sans-serif}h1,h2,h3,h4{margin:0}h1{color:var(--blue);letter-spacing:20px;text-shadow:0 0 10px var(--pink),0 0 10px var(--pink),0 0 10px var(--pink),0 0 10px var(--pink);-webkit-text-stroke:2px black;text-align:center;margin:0;font-family:PinkBlue,sans-serif;font-size:120px}button{background:var(--pink);cursor:pointer;border:none;border-radius:8px;min-height:40px;padding:0 20px;&:hover{background:#e63075}}.login-btn{background:var(--pink);color:#fff;text-decoration:none;border-radius:3px;padding:12px 24px;&:hover{background:#e63075}}.logout-btn{color:#b9bbbe;text-decoration:none;background:0 0;border:1px solid #6d7078;border-radius:3px;padding:8px 18px;font-size:14px;&:hover{border-color:var(--pink);color:#fff}}dialog[popover]:popover-open{display:grid;border:1px solid #fff6;border-radius:8px;gap:20px;padding:40px;&::backdrop{backdrop-filter:blur(2px);background:#0002}& form{display:grid;gap:20px;&:invalid{& button[type=submit]{opacity:.5;cursor:not-allowed}& input[type=submit]{opacity:.5;cursor:not-allowed}}& input{height:40px;padding:0 8px}}}.banner{position:fixed;display:grid;place-items: center;height:40px;top:0;left:0;right:0;&.success{background:green}&.error{background:#ad0303}}.app{display:grid;grid-template-columns:1fr 1fr 1fr;padding-bottom:calc(var(--player-height) + 40px);grid-template-rows:200px max-content max-content;grid-template-areas:"nav nav nav" "upload upload upload" "fingle fingle aside";place-items: center;gap:20px;&>h1{grid-area:nav}&>nav{grid-area:nav;display:grid;grid-template-columns:1fr max-content 1fr;justify-self:stretch;align-items: center;& h1{grid-column:2;white-space:nowrap}& .logout-btn{grid-column:3;white-space:nowrap;justify-self:end;margin:0 20px}}& .login{grid-area:upload;display:grid;place-items: center;gap:20px}& #upload{grid-area:upload}& main{grid-area:fingle;place-self: start stretch}& aside.details{grid-area:aside;overflow:hidden;display:grid;background:#40444b;border-radius:8px;gap:20px;width:100%;min-width:500px;height:100%;&>div{padding:0 16px}&>.heading{background:#36393f;border-bottom:1px solid #2c2f33;padding-top:14px;padding-bottom:14px;&>:nth-child(2){font-size:12px}}& .section{color:#fffb;font-size:14px;font-weight:lighter;&:last-child{padding-bottom:14px}&>.heading{margin-bottom:4px}& span{font-size:12px}& .message{background:#36393f;border:1px solid #fff2;border-radius:8px;min-height:200px;& p{margin:0;padding:12px 16px}}}}}.fingles{display:table;width:100%;& .cell{&:first-child{width:70px;height:70px;& .play{&:hover{background:#e63075}}}&.duration{width:70px}&:last-child{width:100px;&.liked{&>button{&>span:first-child{&>svg{&:nth-child(2){opacity:1}}}}}&>button{display:grid;grid-auto-flow:column;background-color:#0000;justify-content:center;place-items: center;gap:8px;&:hover{&>span:first-child{&>svg{&:nth-child(2){opacity:1}}}}&>span:first-child{display:grid;position:relative;&>svg{height:19px;&:nth-child(2){opacity:0;position:absolute;inset:0}}}}}}& .play{background:var(--pink);display:flex;border-radius:50px;width:40px;height:40px;padding:14px}@media (width>=600px){&{overflow:hidden;border-collapse:collapse;background-color:#36393f;border-radius:8px;box-shadow:0 4px 8px #0003}&>.row{display:table-row;cursor:pointer;&:hover{background-color:#32353b}&:nth-child(2n){background-color:#40444b}&>div{display:table-cell;text-align:left;vertical-align:middle;border-bottom:1px solid #2c2f33;padding:12px 15px}& .artist{font-size:12px}& .user{font-weight:700}}}@media (width<=600px){&{display:grid;gap:8px}&>.row{display:grid;grid-template-columns:max-content max-content max-content 50px;grid-template-rows:1fr 1fr 1fr;grid-template-areas:"title track link likes" "title track link likes" "title track link likes";background-color:#32353b;border-radius:8px;gap:4px;padding:6px;&:first-child{display:none}&:nth-child(2n){background-color:#40444b}&>.rank{display:grid;grid-area:rank;place-items: center}&>.user{grid-area:user}}}}#alsitty{position:fixed;transform-origin:bottom left;z-index:10;width:50px;transition:all .3s;bottom:50px;left:0;&:hover{transform:scale(3)}}.loader{position:relative;animation:.65s linear infinite alternate rikSpikeRoll;background-image:linear-gradient(#fff 50px,#0000 0),linear-gradient(#fff 50px,#0000 0),linear-gradient(#fff 50px,#0000 0),linear-gradient(#fff 50px,#0000 0),linear-gradient(#fff 50px,#0000 0),linear-gradient(#fff 50px,#0000 0);background-position:0,15px,30px,45px,60px,75px,90px;background-repeat:no-repeat;width:85px;height:50px}@keyframes rikSpikeRoll{0%{background-size:10px 3px}16%{background-size:10px 50px,10px 3px,10px 3px,10px 3px,10px 3px,10px 3px}33%{background-size:10px 30px,10px 50px,10px 3px,10px 3px,10px 3px,10px 3px}50%{background-size:10px 10px,10px 30px,10px 50px,10px 3px,10px 3px,10px 3px}66%{background-size:10px 3px,10px 10px,10px 30px,10px 50px,10px 3px,10px 3px}83%{background-size:10px 3px,10px 3px,10px 10px,10px 30px,10px 50px,10px 3px}to{background-size:10px 3px,10px 3px,10px 3px,10px 10px,10px 30px,10px 50px}}#player{position:fixed;height:var(--player-height);background:var(--background);display:grid;grid-template-columns:2fr 6fr 2fr;opacity:1;align-items: center;gap:20px;bottom:0;left:0;right:0;box-shadow:0 -2px 7px #0006;&.hidden{opacity:0;pointer-events:none}& .track{padding-left:20px;& .artist{font-size:12px}}& .controls{display:grid;grid-template-columns:50px 50px 50px 50px 1fr 50px;align-items: center;gap:10px;& .ctrl{cursor:pointer;display:grid;background:0 0;border-radius:40px;place-items: center;width:40px;height:40px;padding:11px;&:hover{background:#1c1c1c}&:disabled{opacity:.35;cursor:default;&:hover{background:0 0}}& img{object-fit:contain;width:100%;height:100%}}& .scrobble{min-width:100px}}& .meta{display:grid;grid-auto-flow:column;place-items: center;& .volume{display:grid;grid-template-columns:40px 1fr;align-items: center;&>:first-child{width:40px;height:40px;padding:11px}& progress{-webkit-appearance:none;appearance:none;&::-webkit-progress-bar{background-color:#eee;border-radius:2px;box-shadow:inset 0 2px 5px #00000040}&::-webkit-progress-value{background:#fff}}}}}input[type=range]{accent-color:#fff}#upload{display:grid;justify-items:center;gap:30px 0;width:100%;padding:30px 0;&>form{display:grid;gap:20px 0;&:has(.file-uploader input:valid){& label:not(.file-uploader){display:grid}}& label:not(.file-uploader){display:none;grid-template-rows:30px 50px;&:has(textarea){grid-template-rows:30px 100px}}& button{height:50px}&:invalid{& button[type=submit]{opacity:.5;cursor:not-allowed}}}& .file-uploader{display:grid;cursor:pointer;border:2px dashed #888;border-radius:8px;place-items: center;gap:16px 0;width:clamp(min(10vw,20rem),500px,max(90vw,55rem));min-height:100px;padding:16px;&:has(input:valid){background:#e63075;border-style:solid;border-color:#fff}&.dragging{background:#e63075}&:hover{background:#404040}& span{pointer-events:none;font-size:14px}& .icon{pointer-events:none;display:grid;background:var(--pink);border-radius:40px;place-items: center;width:60px;height:60px;padding:20px;& img{height:30px}}}& label>input[type=file]{display:none}& .full-loader{position:fixed;display:grid;backdrop-filter:blur(3px);z-index:100;background:#000a;place-items: center;inset:0;& .upload-status{display:grid;background:var(--background);text-align:center;border-radius:8px;justify-items:center;gap:16px;width:min(90vw,420px);padding:32px;box-shadow:0 8px 30px #0009;& h3{color:var(--blue);margin:0;font-size:20px}& p{color:#b9bbbe;margin:0;font-size:14px}& .progress{appearance:none;-webkit-appearance:none;overflow:hidden;background:#1c1c1c;border:none;border-radius:10px;width:100%;height:10px;&::-webkit-progress-bar{background:#1c1c1c}&::-webkit-progress-value{background:linear-gradient(90deg,var(--pink),var(--blue));transition:width .15s}&::-moz-progress-bar{background:linear-gradient(90deg,var(--pink),var(--blue))}}& .pct{color:#b9bbbe;font-variant-numeric:tabular-nums;font-size:14px}}}}