@font-face{font-family:ZCOOLKuaiLe-Regular;src:url(https://my-first-woker.xuzhengkai2.workers.dev/api/files/audio1.0/ZCOOLKuaiLe-Regular.ttf)}*{margin:0;-webkit-user-select:none;user-select:none}[data-theme=white]{--main-top-font-color:rgb(255, 255, 255);--bg-color:rgb(255, 255, 255);--bg-picture:null;--background-size: null;--main-top-bg:rgb(0, 115, 255);--songrow-bg:rgba(0, 255, 247, .546);--songs-box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, .3);--song-color:rgb(0, 0, 0);--song-color-hover:rgb(255, 255, 255);--song-bg-color-hover:rgb(76, 183, 255);--song-bg-color-filter-hover:blur(5px);--bottom--bg-color:rgba(0, 255, 72, .3);--bufanlist-bg:rgba(0, 225, 255, .169);--bufanlist-font-color:rgb(0, 0, 0);--top-button-color:rgba(71, 247, 121, .68)}[data-theme=dark]{--main-top-font-color:rgb(0, 157, 255);--bg-color:rgb(72, 72, 72);--bg-picture:null;--background-size: null;--main-top-bg:rgb(61, 61, 61);--songrow-bg:rgba(40, 40, 40, .5);--songs-box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, .3);--song-color:rgb(255, 255, 255);--song-color-hover:rgb(0, 0, 0);--song-bg-color-hover:rgb(130, 130, 130);--song-bg-color-filter-hover:blur(5px);--bottom--bg-color:rgba(251, 255, 252, .3);--bufanlist-bg:rgba(248, 248, 248, .363);--bufanlist-font-color:rgb(255, 255, 255);--top-button-color:rgba(222, 250, 229, .224)}[data-theme=sky]{--main-top-font-color:rgb(255, 255, 255);--bg-color:rgba(255, 255, 255, 0);--bg-picture:url(https://my-first-woker.xuzhengkai2.workers.dev/api/files/audio1.0/sky.png);--background-size: auto 100%;--main-top-bg:linear-gradient(135deg, #4595f7c8 0%, #6b00ced4 100%);--songrow-bg:rgba(108, 140, 255, .6);--songs-box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, .897);--song-color:rgb(255, 255, 255);--song-color-hover:rgba(0, 255, 183);--song-bg-color-hover:rgba(178, 220, 255, .3);--song-bg-color-filter-hover:blur(5px);--bottom--bg-color:rgba(202, 213, 56, .457);--bufanlist-bg:rgba(36, 206, 149, .388);--bufanlist-font-color:rgba(255, 255, 255);--top-button-color:rgba(240, 254, 50, .475)}.main{height:260vh;transition:all .5s ease;display:grid;grid-template-columns:3fr 1fr;grid-template-rows:10vh 180vh;grid-template-areas:"a a" "b c";background:var(--bg-color);background-image:var(--bg-picture);background-size:var(--background-size);align-items:start}.main-top{transition:all .5s ease;display:grid;grid-template-columns:10vh 30vh 70vh 50vh calc(100vw - 165vh);justify-items:center;align-items:center;font-size:6vh;color:var(--main-top-font-color);font-family:ZCOOLKuaiLe-Regular;grid-area:a;height:10vh;background:var(--main-top-bg)}.main-top-navigation{display:grid;grid-template-columns:23vh 23vh 23vh;justify-items:center;align-items:center;grid-template-areas:a b c;height:100%}.main-top-button{font-family:ZCOOLKuaiLe-Regular;color:#fff;font-size:4vh;height:100%;width:100px;text-align:center;padding-left:10px;line-height:4vh;display:grid;justify-self:center;align-items:center}.router_view{grid-area:b c}.songrows{transition:all .5s ease;justify-self:center;display:none;grid-template-rows:repeat(14,10vh);align-items:center;justify-items:center;background-color:var(--songrow-bg);box-shadow:var(--songs-box-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;margin-top:5vh}.songcolumns{display:grid;grid-template-columns:15vw 30vw 10vw 10vw;align-items:center;justify-items:start;color:var(--song-color);border-bottom:1.5px solid rgba(0,0,0,.3);height:9vh}.songcolumns:hover:not(:nth-child(2)){border-radius:10px;background-color:var(--song-bg-color-hover);-webkit-backdrop-filter:var(--song-bg-color-filter-hover);backdrop-filter:var(--song-bg-color-filter-hover);color:var(--song-color-hover);box-shadow:0 4px 6px 1px #0003;transform:translateY(-4px) scale(1.005);transition:all .1s ease}.listcolumns{display:grid;grid-template-columns:13vw 6vw 6vw;align-items:center;justify-items:center}.listcolumns:hover{border-radius:10px;background-color:var(--song-bg-color-hover);-webkit-backdrop-filter:var(--song-bg-color-filter-hover);backdrop-filter:var(--song-bg-color-filter-hover);color:var(--song-color-hover);box-shadow:0 4px 6px 1px #0003;transform:translateY(-2px);transition:all .1s ease}.picture{justify-self:center;width:60px;height:60px}.button{transition:all .1s;width:40px;height:40px}.button:active{transform:scale(.8)}.button-previous{transition:all .15s;grid-area:b;width:40px;height:40px}.button-previous:active{transform:scale(.9)}.button-play{grid-area:c}.button-next{transition:all .15s;grid-area:d;width:40px;height:40px}.button-next:active{transform:scale(.9)}.bottom{transition:all .5s ease;display:grid;grid-template-columns:repeat(15,6.7vw);grid-template-rows:1fr 1fr;grid-template-areas:". b c d e h h h h . g i i i" ". b c d e h h h h . g i i i";align-items:center;position:fixed;bottom:0%;width:100%;height:15vh;background-color:var(--bottom--bg-color);border-radius:2vw 2vw 0 0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100}.bottom-image{grid-area:e;width:80px;height:80px}.bottom-song{grid-area:h;display:grid;align-self:stretch;align-items:center;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"a a b" "c c c"}.bottom-list{grid-area:g;width:40px;height:40px}.bottom-lyrics{grid-area:i;justify-self:center}.bottom-song-name{grid-area:a}.bottom-song-time{grid-area:b}.bottom-song-progress{grid-area:c;align-self:start}.bufanlist{transition:all .5s ease;position:fixed;right:0%;bottom:30%;width:25%;height:50%;overflow:auto;border-radius:10px;background-color:var(--bufanlist-bg);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:var(--bufanlist-font-color);z-index:99;display:none}.button-play{transition:all .12s;display:block;width:40px;height:40px;opacity:1}.button-pause{display:none;width:40px;height:40px;opacity:1}.button-play:active{transform:scale(.9)}.playing .button-play{display:none}.playing .button-pause{display:block}.playing .button-pause:active{transition:all .12s;transform:scale(.9)}.theme-switcher{padding-right:10px;justify-self:end;position:relative;display:inline-block;z-index:100}.theme-button{background:var(--main-top-bg);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:none;border-radius:10px;color:#fff;padding:12px 30px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 5px 15px #0000001a;justify-self:end;display:flex;align-items:center;justify-content:center;gap:8px}.theme-button:hover{background:var(--main-top-bg);transform:translateY(-2px);box-shadow:0 8px 20px #00000026}.theme-button i{font-size:18px;transition:transform .2s ease}.theme-switcher:hover .theme-button i{transform:rotate(180deg)}.theme-options{position:absolute;top:100%;left:0;width:100%;font-size:16px;background:var(--main-top-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:15px;box-shadow:0 10px 30px #00000026;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .4s cubic-bezier(.175,.885,.32,1.275);z-index:10}.theme-switcher:hover .theme-options{opacity:1;visibility:visible;transform:translateY(10px)}.theme-option{display:flex;align-items:center;padding:15px 20px;cursor:pointer;transition:all .3s ease;border-bottom:1px solid rgba(0,0,0,.05)}.theme-option:last-child{border-bottom:none}.theme-option:hover{background:#0000000d}.theme-option.active .theme-name{font-weight:600}.theme-option.active:after{content:"✓";margin-left:auto;color:#fcff41;font-weight:700}.theme-color{width:20px;height:20px;border-radius:50%;margin-right:12px;box-shadow:0 2px 5px #0000001a}.theme-name{font-weight:100;color:#fff}*{margin:0;padding:0}.newsongs{margin-top:10vh;margin-bottom:10vh;position:relative;display:grid;align-items:center;justify-items:center;grid-row-gap:4vh;grid-column-gap:4vh;justify-content:center;left:-50px;width:180vh;height:150vh;grid-template-columns:40vh 40vh 40vh 40vh;grid-template-rows:20vh 40vh 20vh 40vh;grid-template-areas:"a a a a" "a1 a2 a3 a4" "b b b b" "b1 b2 b3 b4";z-index:50}.carousel-container{position:relative;width:800px;height:400px;margin:50px auto}.carousel-images{position:relative;width:100%;height:100%;cursor:pointer}.carousel-item{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .5s ease-in-out;z-index:0}.carousel-item.active{opacity:1;z-index:1}.carousel-img{width:100%;height:100%;object-fit:cover}.carousel-btn{position:absolute;top:50%;transform:translateY(-40px);width:80px;height:80px;border-radius:50%;border:none;background:#0000004d;color:#fff;cursor:pointer;z-index:100;transition:all .2s;font-size:40px;opacity:.6}.carousel-btn-start{opacity:0}.carousel-btn:hover{background:#000000b3}.carousel-btn:active{transform:translateY(-40px) scale(.9)}.carousel-btn-prev{left:10px}.carousel-btn-next{right:10px}.carousel-btn:focus{outline:none}.img-show{transition:all .4s ease-in-out;width:100%;height:100%;cursor:pointer;display:block}.img-show:hover{transform:scale(1.08)}.space{overflow:hidden;border-radius:15px}