:root { --ink:#201e1e; --muted:#8d8986; --line:#ebe8e4; --paper:#fbfaf8; --red:#e94f43; --red-dark:#d64137; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; }
.app-shell { min-height:100vh; padding:0 0 92px 224px; overflow-x:hidden; }
.sidebar { position:fixed; inset:0 auto 88px 0; z-index:20; width:224px; padding:29px 18px 20px; display:flex; flex-direction:column; background:#f4f1ed; border-right:1px solid #ebe7e1; }
.brand { display:flex; align-items:center; gap:11px; padding:0 13px 28px; color:#242222; font-size:23px; font-weight:800; letter-spacing:.08em; text-decoration:none; }
.brand-mark { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; gap:2px; background:var(--red); box-shadow:0 7px 18px #e94f4342; }
.brand-mark span { width:2px; height:11px; background:white; border-radius:4px; }
.brand-mark span:nth-child(2) { height:17px; }.brand-mark span:nth-child(3) { height:14px; }.brand-mark span:nth-child(4) { height:8px; }
.nav-list { display:grid; gap:5px; }.nav-list a { height:44px; display:flex; align-items:center; gap:13px; padding:0 14px; border-radius:12px; color:#6e6a67; font-size:14px; font-weight:600; text-decoration:none; transition:.18s ease; }
.nav-list a:hover { background:#ece8e3; color:#252322; }.nav-list a.active { color:var(--red); background:#fff; box-shadow:0 6px 20px #33291e0a; }
.nav-label { margin:31px 14px 9px; color:#aaa5a1; font-size:11px; font-weight:700; letter-spacing:.12em; }
.sidebar-bottom { margin-top:auto; display:grid; gap:14px; }.nas-status { display:flex; align-items:center; gap:10px; padding:13px; background:#ebe7e1; border-radius:13px; }.status-dot { width:8px; height:8px; border-radius:50%; background:#40b97b; box-shadow:0 0 0 4px #40b97b1b; }.nas-status div { display:flex; flex-direction:column; gap:3px; }.nas-status b { font-size:12px; }.nas-status small { color:#9b9691; font-size:9px; }
.sidebar-bottom button { height:40px; border:0; background:transparent; display:flex; align-items:center; gap:10px; padding:0 13px; color:#77726e; font-size:12px; cursor:pointer; }
.sidebar-bottom .admin-link { height:40px; display:flex; align-items:center; gap:10px; padding:0 13px; color:#77726e; font-size:12px; text-decoration:none; }
.sidebar-bottom .guide-link{height:28px;margin-top:-10px;color:#a49d97;font-size:10px}
.main { width:100%; max-width:1440px; margin:0 auto; padding:0 54px 62px; }
.topbar { height:87px; display:flex; align-items:center; gap:18px; }.history-buttons { display:flex; gap:7px; }.history-buttons button { width:33px; height:33px; display:grid; place-items:center; border:1px solid #e8e4df; background:#fff; border-radius:50%; color:#aaa5a0; cursor:pointer; }
.search-box { width:min(360px,36vw); height:39px; margin-left:8px; display:flex; align-items:center; gap:10px; padding:0 15px; border:1px solid #ece7e1; background:#f4f1ed; border-radius:99px; color:#a7a29e; }.search-box:focus-within { border-color:#dbd4cd; background:#fff; }.search-box input { width:100%; border:0; outline:0; background:transparent; color:#35312f; font-size:12px; }.search-box input::placeholder{color:#aaa5a0;}
.avatar { margin-left:auto; width:35px; height:35px; display:grid; place-items:center; text-decoration:none; border:0; border-radius:50%; background:linear-gradient(145deg,#d7af86,#854b34); color:white; font-size:12px; cursor:pointer; box-shadow:0 4px 14px #6b3c2625; }
.hero { min-height:346px; position:relative; overflow:hidden; display:flex; align-items:center; padding:50px 57px; border-radius:25px; background:linear-gradient(115deg,#f7ded8 0%,#f8e5df 47%,#eed4cc 100%); box-shadow:inset 0 1px #ffffffa8; }
.hero::before { content:""; position:absolute; width:500px; height:500px; right:-105px; top:-170px; border-radius:50%; border:1px solid #e9c9c0; opacity:.7; }.hero::after { content:""; position:absolute; width:330px; height:330px; right:-20px; bottom:-250px; border-radius:50%; border:1px solid #e4c0b7; }
.hero-copy { position:relative; z-index:2; }.eyebrow { display:flex; align-items:center; gap:8px; color:#c3544c; font-size:11px; font-weight:700; letter-spacing:.12em; }.eyebrow i { width:16px; height:1px; background:#c3544c; }.hero h1 { margin:18px 0 15px; font-family:Georgia,"Songti SC",serif; font-size:43px; line-height:1.26; font-weight:500; letter-spacing:.02em; }.hero p { margin:0; color:#8b6963; font-size:13px; }.hero-actions { display:flex; gap:10px; margin-top:28px; }.hero-actions button { height:40px; border:0; cursor:pointer; }.hero-actions .primary { display:flex; align-items:center; gap:8px; padding:0 21px; border-radius:99px; color:white; background:var(--red); font-size:12px; box-shadow:0 9px 22px #df514344; }.hero-actions .primary:hover{background:var(--red-dark);transform:translateY(-1px)}.hero-actions .round { width:40px; display:grid; place-items:center; border:1px solid #e9c7c0; border-radius:50%; color:#aa7168; background:#fff8; }
.hero-art { position:absolute; width:390px; height:330px; right:58px; top:8px; }.vinyl { position:absolute; width:250px; height:250px; top:40px; right:30px; border-radius:50%; background:repeating-radial-gradient(circle at center,#292323 0 2px,#383130 3px 5px,#211d1c 6px 8px); box-shadow:0 26px 50px #68403838; animation:spin 16s linear infinite; animation-play-state:paused; }.vinyl::after { content:""; position:absolute; inset:33px; border-radius:50%; border:1px solid #ffffff15; }.vinyl-shine { position:absolute; inset:13px; border-radius:50%; background:conic-gradient(from 120deg,transparent,#ffffff10,transparent 18%,#ffffff0a,transparent 42%); }.vinyl-label { position:absolute; inset:80px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; background:#e45a4f; color:white; font-size:9px; letter-spacing:.12em; }.vinyl-label b { margin:1px 0; font-family:Georgia,serif; font-size:16px; letter-spacing:.18em; }.vinyl-label small { font-size:5px; }.tiny-wave { font-size:15px; }.orb { position:absolute; border-radius:50%; filter:blur(.2px); }.orb-one{width:42px;height:42px;right:3px;top:28px;background:#ffffff56}.orb-two{width:65px;height:65px;left:18px;bottom:12px;background:#dc887248}.floating-note{position:absolute;color:#bd6257;font-family:Georgia;font-size:20px;transform:rotate(-12deg)}.note-one{top:42px;left:45px}.note-two{right:0;bottom:63px;font-size:28px;opacity:.55}
@keyframes spin{to{transform:rotate(360deg)}}
.section { padding-top:37px; }.section-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:18px; }.section-head h2 { margin:0 0 5px; font-size:20px; letter-spacing:.02em; }.section-head p { margin:0; color:#aaa5a0; font-size:10px; }.section-head a { display:flex; align-items:center; gap:4px; color:#9e9995; font-size:10px; text-decoration:none; }
.playlist-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }.playlist-card { padding:0; text-align:left; border:0; background:transparent; cursor:pointer; min-width:0; }.cover { aspect-ratio:1.2/1; position:relative; overflow:hidden; display:block; border-radius:15px; box-shadow:0 10px 25px #38281b14; transition:.25s ease; }.playlist-card:hover .cover{transform:translateY(-3px);box-shadow:0 16px 30px #38281b20}.playlist-card b { display:block; margin:12px 2px 4px; font-size:12px; }.playlist-card small { margin-left:2px; color:#aaa5a0; font-size:9px; }.cover-word { position:absolute; left:15px; bottom:15px; color:#fff; font-family:Georgia,serif; font-size:10px; letter-spacing:.22em; opacity:.9; }.cover-lines { position:absolute; inset:0; opacity:.55; }.cover-lines::before,.cover-lines::after{content:"";position:absolute;border:1px solid #fff5;border-radius:50%}.cover-lines::before{width:140px;height:140px;right:-40px;top:-35px}.cover-lines::after{width:90px;height:90px;right:1px;top:2px}.card-play{position:absolute;right:12px;bottom:11px;width:33px;height:33px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#e4554a;opacity:0;transform:translateY(5px);transition:.2s}.playlist-card:hover .card-play{opacity:1;transform:none}
.skeleton-card{aspect-ratio:1.2/1;border-radius:15px;background:linear-gradient(100deg,#eee9e4 25%,#f8f5f2 42%,#eee9e4 62%);background-size:300% 100%;animation:skeleton 1.5s ease infinite}@keyframes skeleton{to{background-position:-100% 0}}
.night{background:linear-gradient(145deg,#3c425e,#171823 62%,#885f55)}.sunset{background:linear-gradient(145deg,#ffbe82,#e76d59 55%,#6e3150)}.ocean{background:linear-gradient(145deg,#8fd0c8,#307d91 58%,#23455c)}.forest{background:linear-gradient(145deg,#9db58d,#456551 62%,#1f3935)}.violet{background:linear-gradient(145deg,#d9b5d8,#765e94 62%,#332e58)}.blue{background:linear-gradient(145deg,#aec9de,#537ca3 62%,#2b4b6c)}
.songs-section { padding-bottom:26px; }.song-table { overflow:hidden; border-radius:16px; background:#fff; border:1px solid #efebe7; }.song-header,.song-row { display:grid; grid-template-columns:47px minmax(210px,1.7fr) minmax(130px,1fr) 55px 45px; align-items:center; min-height:61px; padding:0 14px; }.song-header { min-height:38px; border-bottom:1px solid #f0ece8; color:#b3aeaa; font-size:9px; }.song-row { border-bottom:1px solid #f5f2ef; transition:.15s; }.song-row:last-child{border:0}.song-row:hover,.song-row.selected{background:#faf7f4}.song-index { border:0; background:transparent; color:#b7b2ae; font-size:9px; cursor:pointer; }.song-main { min-width:0; display:flex; align-items:center; gap:12px; padding:0; border:0; background:transparent; text-align:left; cursor:pointer; }.mini-cover,.player-cover,.queue-cover { display:grid; place-items:center; flex:0 0 auto; color:#fff; font-family:Georgia,"Songti SC",serif; }.mini-cover { width:38px; height:38px; border-radius:8px; font-size:14px; }.song-main span:last-child { min-width:0; display:flex; flex-direction:column; gap:4px; }.song-main b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }.song-main small,.album-name,.duration { color:#9f9a96; font-size:9px; }.album-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.like { border:0;background:transparent;color:#c8c3be;cursor:pointer}.is-liked { color:var(--red)!important; }.equalizer{display:inline-flex;align-items:end;gap:2px;height:13px}.equalizer i{width:2px;background:var(--red);border-radius:2px;animation:eq .55s ease-in-out infinite alternate}.equalizer i:nth-child(1){height:6px}.equalizer i:nth-child(2){height:12px;animation-delay:.2s}.equalizer i:nth-child(3){height:8px;animation-delay:.35s}@keyframes eq{to{height:3px}}.empty{padding:40px;text-align:center;color:#aaa5a0;font-size:12px}
.player { position:fixed; inset:auto 0 0 0; z-index:40; height:88px; display:grid; grid-template-columns:1fr minmax(360px,1.25fr) 1fr; align-items:center; gap:28px; padding:0 31px; background:#fffefdeb; border-top:1px solid #ebe7e2; backdrop-filter:blur(18px); box-shadow:0 -8px 32px #5a46340b; }.now-playing { min-width:0; display:flex; align-items:center; gap:11px; }.player-cover{width:48px;height:48px;border-radius:9px;font-size:18px;box-shadow:0 5px 14px #31251b1e}.now-playing>div{min-width:0;display:flex;flex-direction:column;gap:4px}.now-playing b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing small{color:#9f9a95;font-size:9px}.now-playing button,.player-tools button,.controls button{border:0;background:transparent;cursor:pointer}.now-playing>button{margin-left:5px;color:#b7b2ae}.player-center{display:grid;gap:8px}.controls{display:flex;align-items:center;justify-content:center;gap:19px;color:#615d59}.play-button{width:36px!important;height:36px!important;display:grid;place-items:center;border-radius:50%!important;background:#252222!important;color:white!important}.timeline{display:grid;grid-template-columns:29px 1fr 29px;align-items:center;gap:9px;color:#aaa5a0;font-size:8px}.timeline input,.volume{appearance:none;height:3px;border-radius:9px;background:linear-gradient(90deg,var(--red) var(--progress,50%),#e8e4e0 var(--progress,50%));cursor:pointer}.timeline input::-webkit-slider-thumb,.volume::-webkit-slider-thumb{appearance:none;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px #fff}.player-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;color:#85807c}.volume{width:75px;background:linear-gradient(90deg,#8f8a86 68%,#e8e4e0 68%)}.player-tools button{margin-left:8px}.player-tools button.active{color:var(--red)}
.queue-panel{position:fixed;z-index:35;right:18px;bottom:99px;width:340px;max-height:510px;overflow:auto;padding:17px;background:#fffefdf5;border:1px solid #ece7e2;border-radius:18px;box-shadow:0 24px 70px #2b211a2b;backdrop-filter:blur(20px)}.queue-head{display:flex;justify-content:space-between;align-items:start;padding:5px 5px 13px}.queue-head h3{margin:0 0 3px;font-size:16px}.queue-head span{color:#aaa5a0;font-size:9px}.queue-head button{border:0;background:transparent;font-size:24px;color:#aaa5a0;cursor:pointer}.queue-panel #queueList>button{width:100%;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:8px;border:0;border-radius:10px;background:transparent;text-align:left;cursor:pointer}.queue-panel #queueList>button:hover,.queue-panel #queueList>button.active{background:#f6f2ee}.queue-cover{width:34px;height:34px;border-radius:7px;font-size:12px}.queue-panel button span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:3px}.queue-panel b{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-panel small,.queue-panel em{color:#aaa5a0;font-size:8px;font-style:normal}
@media(max-width:1000px){.app-shell{padding-left:190px}.sidebar{width:190px}.main{padding-left:30px;padding-right:30px}.hero{padding-left:40px}.hero-art{right:10px;transform:scale(.85)}.playlist-grid{gap:13px}.player{grid-template-columns:1fr minmax(340px,1.3fr) .65fr}.volume{display:none}}
@media(max-width:760px){.app-shell{padding:0 0 78px}.sidebar{display:none}.main{padding:0 16px 35px}.topbar{height:70px}.history-buttons{display:none}.search-box{width:calc(100% - 52px);margin:0}.hero{min-height:310px;padding:34px 26px;align-items:flex-start}.hero h1{font-size:34px}.hero p{max-width:220px;line-height:1.7}.hero-art{width:220px;height:210px;right:-25px;top:104px;opacity:.72}.vinyl{width:165px;height:165px;right:8px;top:20px}.vinyl-label{inset:53px}.orb,.floating-note{display:none}.section{padding-top:29px}.playlist-grid{grid-template-columns:repeat(2,1fr);gap:22px 13px}.song-header{display:none}.song-row{grid-template-columns:30px 1fr 36px;padding:0 8px}.album-name,.duration{display:none}.song-table{border:0;background:transparent}.song-row{border-radius:10px;border:0}.player{height:72px;grid-template-columns:1fr auto;padding:0 14px;gap:8px}.player-center{display:block}.controls button:not(.play-button),.timeline,.player-tools{display:none}.now-playing>button{display:none}.player-cover{width:44px;height:44px}.queue-panel{right:10px;left:10px;bottom:82px;width:auto}.section-head a{display:none}.playlist-card b{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}

/* v0.2 player, playlists and full-screen vinyl */
.new-playlist{margin:8px 7px 0;height:38px;border:1px dashed #d7d1cb;border-radius:10px;background:transparent;color:#8e8883;font-size:11px;cursor:pointer}.new-playlist:hover{background:#ebe7e1;color:#4d4845}.nav-list a small{margin-left:auto;color:#aaa29d;font-size:9px}.nav-list a>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.playlist-nav-item{display:grid;grid-template-columns:1fr 22px 22px;align-items:center}.playlist-nav-item a{min-width:0}.playlist-nav-item>button{width:22px;height:28px;padding:0;border:0;background:transparent;color:#aaa39e;font-size:10px;opacity:0;cursor:pointer}.playlist-nav-item:hover>button{opacity:1}.playlist-nav-item>button:hover{color:var(--red)}
.shortcut-tip{width:30px;height:30px;border:1px solid #e6e1dc;border-radius:50%;background:#fff;color:#aaa39e;font-size:11px;cursor:pointer}.song-header,.song-row{grid-template-columns:47px minmax(210px,1.7fr) minmax(130px,1fr) 55px 38px 38px}.song-more{border:0;background:transparent;color:#aaa39e;font-size:18px;cursor:pointer}.song-more:hover{color:var(--red)}
.player{grid-template-columns:minmax(180px,1fr) 32px minmax(360px,1.25fr) 1fr}.now-playing{min-width:0;display:flex;align-items:center;gap:11px;padding:0;border:0;background:transparent;text-align:left;cursor:pointer}.now-playing>span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:4px}.now-playing b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing small{color:#9f9a95;font-size:9px}.footer-like{border:0;background:transparent;color:#b7b2ae;font-size:20px;cursor:pointer}.player-tools button{display:flex;align-items:center;gap:3px}.player-tools button small{color:var(--red);font-size:8px}
.now-page{position:fixed;inset:0 0 88px 0;z-index:34;overflow:hidden;color:#fff;background:#1b1717}.now-backdrop{position:absolute;inset:-35px;background:linear-gradient(135deg,#5b3836,#171414);background-size:cover;background-position:center;filter:blur(24px);transform:scale(1.08);opacity:.9}.now-page::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#110e0ec7,#1b15158a 48%,#0e0b0bd1)}.now-page>header{position:relative;z-index:2;height:78px;display:grid;grid-template-columns:45px 1fr 45px;align-items:center;padding:0 35px;text-align:center}.now-page>header button{width:40px;height:40px;border:0;border-radius:50%;background:#ffffff10;color:#fff;font-size:21px;cursor:pointer}.now-page>header button.active{background:#fff;color:#2e2927}.now-page>header div{display:grid;gap:3px}.now-page>header span{font-size:9px;letter-spacing:.18em;opacity:.6}.now-page>header b{font-size:11px;font-weight:500}.now-layout{position:relative;z-index:2;height:calc(100% - 78px);display:grid;grid-template-columns:minmax(420px,.9fr) minmax(430px,1.1fr);align-items:center;gap:5vw;padding:0 7vw 4vh}.turntable{position:relative;display:grid;justify-items:center}.big-vinyl{position:relative;width:min(33vw,430px);height:min(33vw,430px);border-radius:50%;background:repeating-radial-gradient(circle,#171313 0 3px,#292222 4px 7px,#151111 8px 10px);box-shadow:0 35px 90px #0009;animation:spin 18s linear infinite;animation-play-state:paused}.big-vinyl::before{content:"";position:absolute;inset:7%;border-radius:50%;background:conic-gradient(transparent,#ffffff0b,transparent 18%,#ffffff09,transparent 50%)}.big-cover{position:absolute;inset:28%;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:Georgia,"Songti SC",serif;font-size:30px;background-size:cover;background-position:center;box-shadow:0 0 0 7px #171313}.tonearm{position:absolute;z-index:3;top:-3%;right:6%;width:31%;height:55%;transform-origin:76% 12%;transform:rotate(-12deg);transition:transform .5s}.tonearm::before{content:"";position:absolute;width:20px;height:80%;right:28%;top:10%;border-radius:12px;background:linear-gradient(90deg,#9d9690,#e7e1db,#77706c);transform:rotate(-18deg);box-shadow:3px 4px 10px #0008}.tonearm i{position:absolute;right:10%;top:0;width:52px;height:52px;border-radius:50%;background:#9c9690;box-shadow:inset 0 0 0 9px #403b38,0 8px 18px #0008}.now-song{text-align:center;margin-top:27px}.now-song h2{margin:0 0 8px;font-size:21px}.now-song p{margin:0;color:#c3b9b5;font-size:11px}.lyrics-wrap{height:min(67vh,610px);overflow:hidden;mask-image:linear-gradient(transparent,#000 12%,#000 87%,transparent)}.lyrics{height:100%;overflow:auto;padding:45% 20px;scrollbar-width:none;text-align:center}.lyrics::-webkit-scrollbar{display:none}.lyrics p{margin:0;padding:13px 8px;color:#b9afab;font-size:15px;line-height:1.7;cursor:pointer;transition:.28s}.lyrics p.active{color:#fff;font-size:21px;font-weight:700;text-shadow:0 4px 20px #000}.lyrics p:hover{color:#fff}
.timer-menu{position:fixed;z-index:55;right:28px;bottom:101px;width:180px;padding:12px;border:1px solid #e9e4df;border-radius:15px;background:#fff;box-shadow:0 20px 60px #2d211927}.timer-menu b{display:block;padding:7px 9px 9px;font-size:12px}.timer-menu button{width:100%;padding:9px;border:0;border-radius:8px;background:transparent;text-align:left;color:#68635f;font-size:10px;cursor:pointer}.timer-menu button:hover{background:#f5f1ed;color:var(--red)}
dialog{border:0}.playlist-dialog,.shortcut-dialog{width:min(430px,calc(100vw - 28px));padding:23px;border-radius:20px;background:#fff;color:#2c2826;box-shadow:0 30px 100px #241a1645}.playlist-dialog::backdrop,.shortcut-dialog::backdrop{background:#18131283;backdrop-filter:blur(5px)}.dialog-head{display:flex;align-items:start;justify-content:space-between;margin-bottom:18px}.dialog-head h3{margin:0 0 5px;font-size:18px}.dialog-head p{margin:0;color:#9c9691;font-size:10px}.dialog-head button{border:0;background:transparent;color:#aaa39e;font-size:24px;cursor:pointer}.playlist-choices{max-height:265px;overflow:auto;display:grid;gap:6px}.playlist-choices>button{display:flex;align-items:center;gap:11px;padding:11px;border:0;border-radius:11px;background:#f7f4f1;text-align:left;cursor:pointer}.playlist-choices>button>span:first-child{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:#e6ded8;color:var(--red)}.playlist-choices>button>span:last-child{display:grid;gap:3px}.playlist-choices b{font-size:11px}.playlist-choices small{color:#aaa39e;font-size:9px}.new-playlist-form{display:grid;grid-template-columns:1fr 75px;gap:8px;margin-top:16px}.new-playlist-form input{height:40px;padding:0 12px;border:1px solid #e6e0db;border-radius:10px;outline:0}.new-playlist-form button{border:0;border-radius:10px;background:var(--red);color:#fff;font-size:11px;cursor:pointer}.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.shortcut-grid span{display:flex;align-items:center;gap:8px;color:#6f6965;font-size:10px}.shortcut-grid kbd{min-width:54px;padding:7px 8px;border:1px solid #ddd6d0;border-bottom-width:2px;border-radius:7px;background:#f7f4f1;text-align:center;font-size:9px}.toast{position:fixed;z-index:80;left:50%;bottom:112px;transform:translateX(-50%);padding:11px 17px;border-radius:99px;background:#292524e9;color:#fff;font-size:11px;box-shadow:0 10px 35px #0003}
@media(max-width:1000px){.player{grid-template-columns:minmax(150px,1fr) 28px minmax(330px,1.2fr) .6fr}.now-layout{grid-template-columns:1fr 1fr;padding-left:4vw;padding-right:4vw}.big-vinyl{width:36vw;height:36vw}}
@media(max-width:760px){.shortcut-tip{display:none}.song-header{display:none}.song-row{grid-template-columns:30px 1fr 34px 34px}.song-more{display:block}.player{grid-template-columns:1fr 30px auto;height:72px}.player-center{grid-column:3}.player-tools{display:none}.now-page{inset:0 0 72px}.now-page>header{height:65px;padding:0 14px}.now-layout{height:calc(100% - 65px);display:block;padding:3vh 18px 0;overflow:auto}.turntable{min-height:48vh}.big-vinyl{width:min(70vw,310px);height:min(70vw,310px)}.tonearm{right:7%;top:-2%;width:28%;height:49%}.now-song{margin-top:20px}.lyrics-wrap{height:48vh;margin-top:4vh}.lyrics{padding:44% 5px}.lyrics p{font-size:13px}.lyrics p.active{font-size:18px}.shortcut-grid{grid-template-columns:1fr}.timer-menu{right:10px;bottom:82px}.footer-like{font-size:18px}}