:root{color-scheme:light;--mint:#E8F3E6;--cream:#FFF8E6;--soft:#D8E9CE;--green:#3E8069;--text:#344C40;--muted:#687568;--line:#D5DEBC;--peach:#F2C9A0;font-family:"Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;color:var(--text);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background-color:var(--mint);background-image:linear-gradient(90deg,#fff3 1px,transparent 1px),linear-gradient(#fff3 1px,transparent 1px);background-size:32px 32px;display:grid;place-items:center;padding:40px 20px}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button{border:0;color:inherit}button:disabled{cursor:default;opacity:.4}button:active:not(:disabled){transform:scale(.96)}button{transition:transform .18s,background-color .18s,box-shadow .18s}button:focus-visible,input:focus-visible{outline:3px solid var(--green);outline-offset:4px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.player{width:100%;max-width:420px;background:var(--cream);border:1px solid #fff9;border-radius:36px;padding:27px 32px 18px;box-shadow:0 22px 65px #476e5115,0 3px 0 #b8c9a75c;position:relative}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:29px}.brand{display:flex;align-items:center;gap:10px}.brand-mark{display:grid;place-items:center;width:35px;height:35px;background:var(--soft);border-radius:13px;transform:rotate(-9deg);color:var(--green)}.brand-mark svg{width:23px;height:23px}h1{font-size:18px;font-weight:650;letter-spacing:.5px;margin:0}.icon-button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:transparent}.icon-button:hover{background:#d8e9ce80}.header>.icon-button{background:#e7ecd8;box-shadow:0 2px 0 #d5debc80}.status-line{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;letter-spacing:.6px;margin:0 auto 16px;max-width:300px}.status-dot{width:6px;height:6px;border-radius:50%;background:#92a891}.status-line-rule{height:1px;flex:1;background:var(--line);margin:0 9px}#record-number{font-size:10px;letter-spacing:1.2px;font-variant-numeric:tabular-nums}.cover-frame{width:min(100%,300px);aspect-ratio:1;margin:auto;background:#fdfbf0;padding:9px;border-radius:24px;box-shadow:0 8px 18px #4b6a4614,0 1px 2px #3f654c1c;position:relative;transform:rotate(-2deg)}#cover{display:block;width:100%;height:100%;object-fit:contain;border-radius:17px;background:var(--soft)}.cover-corner{position:absolute;bottom:-10px;right:-9px;width:40px;height:40px;border-radius:14px;background:var(--peach);display:grid;place-items:center;transform:rotate(12deg);border:3px solid var(--cream);color:#765c40;box-shadow:0 3px 6px #5f604515}.cover-corner svg{width:21px;height:21px}.track-info{text-align:center;margin:25px 0 21px;min-height:67px}.track-info h2{margin:0 0 8px;font-size:24px;font-weight:650;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}.track-meta{display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;color:var(--muted)}.meta-dot{color:#a6ad91}.preview-label{font-size:10px;background:#f2c9a04d;color:#82674b;border:1px solid #e8c7a159;padding:2px 7px;border-radius:12px;letter-spacing:.4px}.equalizer{display:flex;align-items:center;gap:2px;height:13px;width:13px}.equalizer i{display:block;width:3px;height:3px;border-radius:3px;background:var(--green)}.is-playing .equalizer i{animation:wave .9s ease-in-out infinite alternate}.is-playing .equalizer i:nth-child(2){animation-delay:-.6s}.is-playing .equalizer i:nth-child(3){animation-delay:-.3s}.is-playing .status-dot{background:var(--green)}
.version-switch{display:flex;width:194px;padding:4px;margin:auto;background:#e2e9d4;border-radius:30px;position:relative}.version-switch button{flex:1;height:34px;z-index:1;background:transparent;border-radius:22px;font-size:13px;color:var(--muted);font-weight:500}.version-switch button[aria-pressed=true]{color:var(--text);font-weight:600}.version-highlight{position:absolute;width:calc(50% - 4px);height:34px;left:4px;top:4px;background:var(--cream);border-radius:22px;box-shadow:0 2px 4px #4c644012;transition:transform .18s}.version-switch.live .version-highlight{transform:translateX(100%)}.timeline{margin:23px 0 13px}.timeline input{display:block;appearance:none;-webkit-appearance:none;width:100%;height:26px;margin:0;background:transparent;cursor:pointer;--progress:0%}.timeline input::-webkit-slider-runnable-track{height:6px;background:linear-gradient(to right,var(--green) var(--progress),#dce5cd var(--progress));border-radius:20px}.timeline input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--green);margin-top:-4px;box-shadow:0 0 0 3px var(--cream);transition:transform .15s}.timeline input:active::-webkit-slider-thumb{transform:scale(1.2)}.timeline input::-moz-range-track{height:6px;background:#dce5cd;border-radius:20px}.timeline input::-moz-range-progress{height:6px;background:var(--green);border-radius:20px}.timeline input::-moz-range-thumb{width:14px;height:14px;border:3px solid var(--cream);border-radius:50%;background:var(--green)}.time-labels{display:flex;justify-content:space-between;font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted);margin-top:1px;letter-spacing:.5px}.playback-controls{display:flex;align-items:center;justify-content:center;gap:29px}.skip-button{display:grid;place-items:center;width:48px;height:48px;background:#e5ecd8;border-radius:50%}.skip-button svg{width:23px;height:23px}.play-button{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:var(--cream);box-shadow:0 5px 0 #306653,0 8px 15px #3e80691c}.play-button:hover{background:#35755f}.play-button:active:not(:disabled){box-shadow:0 2px 0 #306653;transform:translateY(3px) scale(.97)}.play-button svg{width:33px;height:33px}.feedback{min-height:30px;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:#946543;margin-top:5px}.feedback button{font-size:11px;background:transparent;text-decoration:underline;padding:6px}.feedback button[hidden]{display:none}.library-link{width:100%;display:flex;align-items:center;gap:9px;padding:14px 0 11px;background:transparent;border-top:1px dashed var(--line);font-size:12px;color:var(--muted)}.library-link svg{width:17px;height:17px}.library-link #track-count{margin-left:auto;font-size:11px;color:#7a866d}.library-link .chevron{width:14px;height:14px}.speaker{display:flex;gap:5px;justify-content:center;margin-top:8px}.speaker i{width:3px;height:3px;border-radius:50%;background:#bdc6ac}.spinner{display:none;width:25px;height:25px;border:2px solid #fff5;border-top-color:var(--cream);border-radius:50%;animation:spin .8s linear infinite}.is-loading .play-button svg{display:none}.is-loading .spinner{display:block}
dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(88vw,380px);max-width:none;height:100dvh;max-height:none;border:0;border-left:1px solid #fffa;border-radius:28px 0 0 28px;padding:30px 22px max(18px,env(safe-area-inset-bottom));background:var(--cream);color:var(--text);box-shadow:-14px 0 50px #344c4014;overflow:hidden}dialog[open]{display:flex;flex-direction:column;animation:drawer-in .28s cubic-bezier(.2,.7,.2,1)}dialog::backdrop{background:#2f4e3d40;animation:fade-in .28s}dialog.closing{animation:drawer-out .22s ease-in forwards}dialog.closing::backdrop{animation:fade-in .22s reverse forwards}.drawer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.drawer-eyebrow{font-size:11px;color:var(--muted);letter-spacing:1px}.drawer-header h2{font-size:22px;margin:5px 0 0}.drawer-header h2 span{font-size:12px;font-weight:500;color:var(--green);vertical-align:middle;background:var(--soft);border-radius:20px;padding:3px 8px;margin-left:5px}.search-box{display:flex;align-items:center;gap:9px;padding:0 12px;background:#e9eddb;border:1px solid #dce3ca;border-radius:16px;flex-shrink:0}.search-box svg{width:18px;height:18px;color:var(--muted)}.search-box input{min-width:0;width:100%;height:46px;border:0;background:transparent;outline:none;color:var(--text);font-size:14px}.search-box:focus-within{outline:2px solid var(--green);outline-offset:2px}.search-box input:focus-visible{outline:none}.search-box kbd{font:9px system-ui;color:#78836f;background:#fff7;padding:3px 4px;border-radius:4px}.list-caption{display:flex;justify-content:space-between;margin:20px 3px 11px;color:var(--muted);font-size:10px}.song-list{flex:1;overflow:auto;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#bdcdb5 transparent}.song-row{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:10px 9px;margin:2px 0;background:transparent;border-radius:16px;min-height:70px}.song-row:hover{background:#e8edda}.song-row.active{background:var(--soft)}.song-row img{width:48px;height:48px;object-fit:contain;border-radius:10px;background:#e5e9d4;flex-shrink:0}.song-row .song-copy{display:flex;flex-direction:column;gap:5px;min-width:0}.song-title{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-subtitle{font-size:10px;color:var(--muted);letter-spacing:.2px}.song-row .row-indicator{margin-left:auto;flex-shrink:0;width:15px;color:var(--green)}.song-row .row-indicator svg{width:15px;height:15px}.drawer-footer{font-size:10px;color:var(--muted);padding-top:16px;display:flex;gap:7px;align-items:center;justify-content:center;border-top:1px solid var(--line);margin-top:12px}.drawer-footer svg{width:14px;height:14px}#empty-state{text-align:center;margin:auto;color:var(--muted);font-size:13px}#empty-state[hidden]{display:none}#empty-state svg{width:30px;height:30px;color:#93a28a}#empty-state span{font-size:11px}body.dialog-open{overflow:hidden}.song-list:empty{flex:0}.song-list:empty+#empty-state{flex:1;padding-top:80px}
@keyframes wave{from{height:3px}to{height:13px}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes drawer-in{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes drawer-out{to{transform:translateX(100%)}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes record-in{from{opacity:.45}to{opacity:1}}.record-changed{animation:record-in .18s ease-out}
@media(max-width:540px){body{padding:16px 14px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));background-size:24px 24px}.player{padding:22px 24px 14px;border-radius:30px;max-width:420px}.header{margin-bottom:22px}.cover-frame{width:min(100%,72vw,300px)}.track-info{margin-top:24px;margin-bottom:18px}.timeline{margin-top:20px}.search-box kbd{display:none}}
@media(max-width:360px){body{padding-left:10px;padding-right:10px}.player{padding-left:20px;padding-right:20px}h1{font-size:17px}.track-info h2{font-size:22px}.playback-controls{gap:25px}}
@media(min-width:541px) and (max-height:850px){body{padding:8px 20px}.player{padding:20px 32px 12px}.header{margin-bottom:15px}.status-line{margin-bottom:12px}.cover-frame{width:232px}.track-info{margin:19px 0 14px;min-height:60px}.timeline{margin:15px 0 10px}.feedback{min-height:25px}.library-link{padding-top:11px;padding-bottom:9px}}
.cover-stage{position:relative;overflow:hidden;margin:-16px;padding:16px;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.cover-stage img{-webkit-user-drag:none}.cover-stage.is-dragging{cursor:grabbing}.cover-stage.is-dragging .cover-frame{will-change:transform}.cover-ghost{position:absolute!important;margin:0!important;pointer-events:none;z-index:2}
@media(max-width:540px){.cover-stage{cursor:grab}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.is-playing .equalizer i{height:8px}.is-playing .equalizer i:nth-child(2){height:13px}button:active:not(:disabled){transform:none!important}}