:root{color-scheme:light;--paper:#f3f0e7;--ink:#333b30;--muted:#8b8d80;--green:#52624b;--orange:#cb623f;--line:#dcded2;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);min-height:100svh;display:flex;flex-direction:column;background-image:radial-gradient(#68745b0b .7px,transparent .7px);background-size:5px 5px}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--orange);outline-offset:5px}button:disabled{cursor:wait;opacity:.5}.symbols{position:absolute;width:0;height:0;overflow:hidden}.masthead{width:calc(100% - 96px);max-width:1280px;margin:0 auto;height:100px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center;font-size:12px;letter-spacing:2.5px;font-weight:700}.brand-mark{font-family:Georgia,serif;font-size:36px;letter-spacing:-3px;line-height:1}.edition{font-size:10px;letter-spacing:2px;color:var(--muted);display:flex;align-items:center;gap:14px}.edition-dot{width:6px;height:6px;border-radius:50%;background:var(--orange)}main{width:100%;flex:1;padding:45px 24px 30px}.intro{text-align:center;margin:0 auto 30px}.eyebrow{font-size:9px;letter-spacing:2.5px;color:var(--muted)}h1{font-family:"Songti SC","Noto Serif CJK SC",SimSun,serif;font-size:43px;font-weight:500;letter-spacing:6px;margin:13px 0 13px;line-height:1.25}h1>span{color:var(--orange)}.intro p{font-size:12px;letter-spacing:2px;color:#858a7c;margin:0}.player{width:min(100%,450px);margin:auto;padding:23px 32px 0;border:1px solid #fff;background:#faf9f3;border-radius:20px;box-shadow:0 18px 48px #3943340a,0 2px 5px #39433404}.deck-top{display:flex;justify-content:space-between;align-items:center;color:#858b7b;font-size:10px;letter-spacing:1.5px}.deck-top>span:first-child{display:flex;gap:8px;align-items:center}.status-light{width:5px;height:5px;border-radius:50%;background:#b5b9aa;box-shadow:0 0 0 3px #b5b9aa18}.playing .status-light{background:#72885e;box-shadow:0 0 0 3px #72885e18}.deck-number{font-family:monospace;letter-spacing:1.5px}.turntable{position:relative;height:290px;margin:21px 0 2px;border-radius:10px;background:linear-gradient(145deg,#e7e8dd,#efefe5);overflow:hidden;border:1px solid #e3e5da}.record{position:absolute;left:50%;top:17px;margin-left:-121px;width:242px;height:242px;border-radius:50%;background:repeating-radial-gradient(circle at center,#262c26 0,#262c26 1px,#363c331a 1.4px,#1f251f 2.4px,#30372e 3px);box-shadow:3px 8px 13px #1d241d26;animation:spin 18s linear infinite;animation-play-state:paused}.record:before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 15deg,transparent 5%,#c4d2b829 16%,transparent 27%,#0002 40%,transparent 49%,#c4d2b825 65%,transparent 75%);border:5px solid #252b24}.record-label{position:absolute;inset:32%;border-radius:50%;background:#bcc5a4;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #d5dbbd;color:#3b4838}.label-top{font-size:5px;letter-spacing:1px;position:absolute;top:15px}.label-title{font-family:SimSun,serif;font-size:15px;position:absolute;top:28px;letter-spacing:2px}.spindle{width:7px;height:7px;border-radius:50%;background:#30392f;border:2px solid #dadfcf;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.label-bottom{font-size:4px;letter-spacing:.5px;position:absolute;bottom:16px}.tonearm{position:absolute;right:26px;top:24px;width:30px;height:174px;transform-origin:15px 15px;transform:rotate(-9deg);transition:transform .8s ease}.arm{position:absolute;left:12px;top:12px;width:7px;height:125px;border-radius:4px;background:linear-gradient(90deg,#899083,#e4e7dd 45%,#adb3a6 65%,#747d6c);box-shadow:4px 3px 4px #0002}.arm:after{content:"";position:absolute;top:113px;left:-2px;width:11px;height:26px;border-radius:2px;background:#57614f;transform:rotate(15deg)}.arm-base{width:30px;height:30px;border-radius:50%;position:absolute;top:0;left:0;background:radial-gradient(circle,#707a64 0 5px,#b1b9a7 6px 10px,#d7dbce 11px 13px,#afb7a4 14px);box-shadow:2px 2px 5px #0002}.table-note{position:absolute;bottom:10px;left:14px;font-size:6px;letter-spacing:1.5px;color:#909885}.playing .record{animation-play-state:running}.playing .tonearm{transform:rotate(20deg)}.listening{height:45px;display:flex;justify-content:center;align-items:center;gap:8px}.listening p{font-size:11px;color:#8b8f80;margin:0;letter-spacing:.5px}.equalizer{height:12px;display:flex;align-items:center;gap:2px}.equalizer i{display:block;width:2px;height:3px;border-radius:1px;background:#869578}.playing .equalizer i{animation:pulse .8s ease-in-out infinite alternate}.equalizer i:nth-child(2){animation-delay:-.3s}.equalizer i:nth-child(3){animation-delay:-.6s}.equalizer i:nth-child(4){animation-delay:-.2s}input[type=range]{--fill:0%;appearance:none;-webkit-appearance:none;display:block;width:100%;height:18px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:8px;background:linear-gradient(to right,var(--green) var(--fill),#e1e3d8 var(--fill))}input[type=range]::-moz-range-track{height:3px;border-radius:8px;background:linear-gradient(to right,var(--green) var(--fill),#e1e3d8 var(--fill))}input[type=range]::-webkit-slider-thumb{appearance:none;width:9px;height:9px;background:var(--green);border-radius:50%;margin-top:-3px;border:0}input[type=range]::-moz-range-thumb{width:9px;height:9px;border:0;background:var(--green);border-radius:50%}input:disabled{cursor:default;opacity:.55}.time-labels{display:flex;justify-content:space-between;font-family:monospace;font-size:10px;color:#969b8b;letter-spacing:.5px}.controls{display:flex;align-items:center;justify-content:space-between;margin:17px 13px 21px}.icon-button{display:flex;align-items:center;justify-content:center;position:relative;padding:0;width:40px;height:40px;border:0;background:transparent;color:#909785;border-radius:50%;transition:background .2s,color .2s,transform .2s}.icon-button:hover{background:#e9ecdf;color:var(--green)}button:active{transform:scale(.94)}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.skip{color:#58634f}.skip svg{width:23px;height:23px}.mode svg{width:18px;height:18px}.active{color:var(--green)}.mode.active:after{content:"";position:absolute;width:3px;height:3px;background:var(--green);border-radius:50%;bottom:1px}.play-button{width:65px;height:65px;border:0;border-radius:50%;color:#fff8ea;background:var(--orange);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 13px #ba553126;transition:transform .2s,background .2s}.play-button:hover{background:#b85536;transform:translateY(-1px)}.play-button svg{width:27px;height:27px}.repeat-one{display:none;position:absolute;font-size:8px;font-weight:700;background:#faf9f3;line-height:10px;top:15px;left:18px}.active .repeat-one{display:block}.player-bottom{display:flex;align-items:center;justify-content:space-between;height:59px;border-top:1px solid #e7e8de;color:#8a9180;font-size:9px;letter-spacing:1px}.volume-control{display:flex;align-items:center;gap:5px}.volume-control input{width:62px}.volume-control .icon-button{width:34px;height:36px}.volume-control svg{width:15px;height:15px}.volume-control input::-webkit-slider-thumb{width:7px;height:7px;margin-top:-2px}.volume-control input::-moz-range-thumb{width:7px;height:7px}.collection-count{white-space:nowrap}.afterword{text-align:center;color:#979b8e;font-size:10px;letter-spacing:2px;margin:24px 0 0}footer{width:calc(100% - 96px);max-width:1280px;margin:0 auto;min-height:75px;display:flex;align-items:center;justify-content:space-between;color:#999e91;font-size:9px;letter-spacing:1.5px}.footer-star{display:inline-block;color:#839074;font-size:21px;vertical-align:middle;margin-left:13px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{from{height:3px}to{height:12px}}
@media(min-width:1500px) and (min-height:950px){main{padding-top:65px}.intro{margin-bottom:38px}.player{width:470px}.turntable{height:310px}.record{width:262px;height:262px;margin-left:-131px}}
@media(max-width:600px){.masthead{width:calc(100% - 40px);height:72px}.brand{font-size:10px;gap:9px}.brand-mark{font-size:30px}.edition{font-size:8px;letter-spacing:1px;gap:8px}main{padding:30px 20px 20px}.intro{margin-bottom:24px}.eyebrow{font-size:8px;letter-spacing:1.7px}h1{font-size:35px;margin:11px 0}.intro p{font-size:11px;letter-spacing:1px}.player{padding:20px 22px 0;border-radius:17px}.turntable{height:263px;margin-top:18px}.record{width:220px;height:220px;margin-left:-110px;top:15px}.tonearm{right:16px;top:19px}.controls{margin:16px 0 19px}.play-button{width:61px;height:61px}.label-top{top:12px;font-size:4.5px}.label-title{top:24px;font-size:13px}.label-bottom{bottom:13px;font-size:3.6px}.afterword{font-size:9px;letter-spacing:1px}footer{width:calc(100% - 40px);font-size:7px;letter-spacing:.7px;min-height:63px}footer>span:nth-child(2){font-size:8px}.footer-star{font-size:17px;margin-left:7px}}
@media(max-width:360px){.player{padding-left:16px;padding-right:16px}.turntable{height:236px}.record{width:195px;height:195px;margin-left:-97.5px}.tonearm{right:11px}.label-top{top:10px;font-size:4px}.label-title{top:21px;font-size:11px}.label-bottom{font-size:3px;bottom:11px}.volume-control input{width:45px}.player-bottom{letter-spacing:.4px}.listening p{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}