:root{color-scheme:light;--surface:#e9edf0;--ink:#343e49;--muted:#64717d;--accent:#ae431e;--raised:12px 12px 28px #cbd1d7,-12px -12px 28px #fff;--inset:inset 5px 5px 10px #cdd3da,inset -5px -5px 10px #fff;font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--surface)}
*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input{font:inherit}button{color:inherit;cursor:default}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button{border:0}svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.definitions{position:absolute;width:0;height:0;overflow:hidden}
.review{padding:15px 28px;background:#dfe5e9;display:flex;justify-content:space-between;gap:16px;color:#53616d;font-size:13px;line-height:1.6}.review b{color:#344451;font-weight:600}.review a{color:#53616d;text-underline-offset:4px}main{max-width:1100px;padding:46px 40px 60px;margin:auto}.brand{display:flex;align-items:center;gap:15px;margin-bottom:42px}.brandmark{width:44px;height:44px;border-radius:14px;box-shadow:5px 5px 12px #cbd1d7,-5px -5px 12px white;display:grid;place-items:center;color:var(--accent)}h1{font-size:23px;letter-spacing:3px;margin:0}.brand small{display:block;font-size:12px;letter-spacing:4px;margin-top:6px;color:var(--muted)}.label{font-size:12px;letter-spacing:2.5px;color:var(--muted);font-weight:600}.player{display:grid;grid-template-columns:1.1fr 1fr;gap:62px;padding:44px 48px;border-radius:32px;box-shadow:var(--raised);border:1px solid #f7f9fa}.current{text-align:center;min-width:0}.topline{display:flex;align-items:center;justify-content:space-between;text-align:left}.topline .mode{font-size:13px;color:var(--muted)}.visual{height:208px;display:grid;place-items:center;margin:19px auto 12px}.sound-ring{width:192px;height:192px;border-radius:50%;box-shadow:var(--raised);border:1px solid #f8fafb;display:grid;place-items:center}.sound-inner{width:148px;height:148px;box-shadow:var(--inset);border-radius:50%;display:flex;align-items:center;justify-content:center;gap:6px}.sound-inner span{width:5px;border-radius:10px;background:linear-gradient(#db8059,#aa471f);height:var(--h)}h2{font-size:30px;letter-spacing:2px;font-weight:600;margin:22px 0 9px}.artist{font-size:14px;color:var(--muted);margin:0 0 27px}.seek{width:100%;appearance:none;height:8px;border-radius:20px;box-shadow:var(--inset);background:linear-gradient(to right,#b95229 31%,transparent 31%);display:block;margin:0;accent-color:var(--accent)}.seek::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--surface);border:5px solid #b95229;box-shadow:2px 2px 5px #bec5ce}.time{display:flex;justify-content:space-between;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);margin-top:12px}.transport{display:flex;align-items:center;justify-content:center;gap:25px;margin:25px 0 30px}.round{width:52px;height:52px;display:grid;place-items:center;padding:0;border-radius:50%;background:var(--surface);box-shadow:6px 6px 13px #c9cfd5,-6px -6px 13px #fff}.primary{width:74px;height:74px;color:#fff;background:linear-gradient(135deg,#d87b51,#ac411d);box-shadow:6px 6px 14px #c0c6cc,-6px -6px 14px #fff,inset 1px 1px 2px #f7bd97}.primary svg{width:27px;height:27px}.volume{display:flex;align-items:center;gap:16px;max-width:232px;margin:auto;color:var(--muted)}.volume .seek{height:6px;background:linear-gradient(to right,#71808c 65%,transparent 65%)}.volume .seek::-webkit-slider-thumb{width:14px;height:14px;border:4px solid #71808c}.volume span{font-size:12px;font-variant-numeric:tabular-nums}.queue{border-left:1px solid #d3dbe1;padding-left:38px;min-width:0}.queue-header{display:flex;align-items:center;justify-content:space-between;margin:2px 0 32px}.queue h3{font-size:18px;margin:0;letter-spacing:1px}.count{font-size:12px;color:var(--muted)}.list{display:flex;flex-direction:column;gap:13px}.track{display:flex;align-items:center;width:100%;gap:15px;text-align:left;background:transparent;padding:19px 14px;border-radius:17px;min-height:86px}.track.selected{box-shadow:var(--inset)}.track .number{font-size:12px;color:var(--muted);width:23px;text-align:center}.selected .number{color:var(--accent)}.track .name{display:block;font-size:16px;font-weight:600;letter-spacing:1px}.track .detail{display:block;font-size:12px;color:var(--muted);margin-top:7px}.duration{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.selection-note{margin:37px 0 0;color:var(--muted);font-size:13px;line-height:1.8;display:flex;gap:11px;align-items:center}.selection-note svg{width:18px;height:18px}.lower{display:flex;justify-content:space-between;gap:20px;margin:25px 6px 0;font-size:12px;color:var(--muted)}.states{margin-top:62px;border-top:1px solid #cbd4db;padding-top:25px}.states h3{font-size:15px;font-weight:500;margin:0 0 20px}.state-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.state{border-radius:18px;padding:20px;box-shadow:5px 5px 13px #cfd5db,-5px -5px 13px #fff;display:flex;gap:16px;align-items:center}.state .round{width:42px;height:42px;flex-shrink:0}.state strong{font-size:14px;font-weight:600}.state p{font-size:12px;color:var(--muted);line-height:1.6;margin:6px 0 0}.state.error strong{color:#a33f23}.state.error button{font-size:12px;color:#a33f23;padding:0;margin-top:6px;background:none;text-decoration:underline;text-underline-offset:3px}.spinner{width:19px;height:19px;border:2px solid #c0c9d1;border-top-color:#ad461f;border-radius:50%}.state-caption{font-size:12px;line-height:1.8;color:var(--muted);margin-top:22px}
@media(max-width:760px){main{padding:30px 22px 45px;max-width:510px}.review{padding:12px 18px;font-size:12px}.review span{max-width:220px}.review a{white-space:nowrap}.brand{margin-bottom:30px}.player{grid-template-columns:1fr;padding:28px 26px;gap:34px;border-radius:26px}.visual{height:184px}.sound-ring{width:174px;height:174px}.sound-inner{width:134px;height:134px}.queue{padding:27px 0 0;border-left:0;border-top:1px solid #cbd4db}.queue-header{margin-bottom:17px}.track{min-height:77px;padding:16px 13px}.selection-note{margin-top:22px}.state-grid{grid-template-columns:1fr}.states{margin-top:42px}.lower{line-height:1.7}.lower span:last-child{text-align:right}h2{font-size:27px}.state{min-height:87px}}

button{cursor:pointer;transition:box-shadow .18s,transform .18s}button:hover{filter:brightness(1.025)}button:active{transform:translateY(1px)}button:disabled{cursor:wait;opacity:.65}.track:hover{background:#e4e9ed}.track .name{overflow-wrap:anywhere}.seek{cursor:pointer;height:24px;box-shadow:none;background:transparent!important}.seek::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(to right,var(--fill,#b95229) var(--progress,0%),#d9e0e6 var(--progress,0%));box-shadow:inset 2px 2px 4px #c6cdd5,inset -2px -2px 4px #fff}.seek::-webkit-slider-thumb{margin-top:-5px}.seek::-moz-range-track{height:8px;border-radius:8px;background:#cbd4dd}.seek::-moz-range-progress{background:#b95229;height:8px}.seek::-moz-range-thumb{width:10px;height:10px;border:4px solid #b95229;border-radius:50%;background:var(--surface)}.time{margin-top:4px}.volume .seek{height:24px;--fill:#71808c}.volume .seek::-webkit-slider-thumb{margin-top:-3px}.volume .seek::-webkit-slider-runnable-track{height:8px}.volume span{min-width:32px}.notice{margin:22px 0 0;padding:14px 16px;border:1px solid #bd684c;border-radius:12px;text-align:left;font-size:14px;line-height:1.7;color:#923619}.notice button{background:none;color:inherit;text-decoration:underline;padding:5px 10px;font:inherit}.notice[hidden]{display:none}.player[data-status=playing] .sound-inner span{animation:pulse 1.4s ease-in-out infinite alternate;animation-delay:calc(var(--h)*-.03s)}.primary[aria-busy=true] svg{display:none}.primary[aria-busy=true]::after{content:'';width:23px;height:23px;border-radius:50%;border:2px solid #ffffff80;border-top-color:white;animation:spin 1s linear infinite}.lower{flex-wrap:wrap}.source-note{font-size:12px;color:var(--muted);margin-top:20px;line-height:1.7}.selection-note{margin-top:34px}@keyframes pulse{to{transform:scaleY(.55)}}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}@media(max-width:360px){main{padding-left:16px;padding-right:16px}.player{padding:24px 20px}.track{gap:10px;padding:15px 9px}.track .name{font-size:15px}.duration{font-size:12px}}
.seek:focus-visible{outline-offset:0}