
:root{--text:#fff7fa;--muted:rgba(255,235,242,.46);--pink:#ffc5d7;--pink2:#e89bb6;--line:rgba(255,255,255,.09)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}html,body{width:100%;min-height:100%}
body{color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;background:#09070b;overflow-x:hidden}
.background{position:fixed;inset:0;z-index:-10;overflow:hidden;background:radial-gradient(circle at 15% 5%,rgba(126,49,84,.55),transparent 35%),radial-gradient(circle at 92% 42%,rgba(67,49,96,.40),transparent 35%),radial-gradient(circle at 65% 100%,rgba(115,44,65,.35),transparent 40%),linear-gradient(180deg,#170d17 0%,#100a12 50%,#080609 100%)}
.glow{position:absolute;width:430px;height:430px;border-radius:50%;filter:blur(100px);opacity:.36;animation:glowMove 9s ease-in-out infinite alternate}
.glow1{left:-180px;top:-100px;background:#9d416a}.glow2{right:-210px;top:25%;background:#574174;animation-delay:-3s}.glow3{left:20%;bottom:-260px;background:#9a485b;animation-delay:-6s}
@keyframes glowMove{from{transform:scale(.9)}to{transform:scale(1.15)}}
.noise{position:fixed;inset:0;z-index:-9;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
.privacy-note{position:fixed;left:50%;bottom:10px;z-index:1000;transform:translateX(-50%);width:max-content;max-width:92vw;padding:7px 11px;border:1px solid rgba(255,255,255,.06);border-radius:999px;background:rgba(10,7,10,.55);backdrop-filter:blur(12px);color:rgba(255,255,255,.25);font-size:8px;letter-spacing:.3px;pointer-events:none}
.app{width:min(100%,560px);min-height:100vh;margin:auto;padding:max(18px,env(safe-area-inset-top)) 22px calc(45px + env(safe-area-inset-bottom))}
.header{height:58px;display:flex;align-items:center;justify-content:space-between}.brand-small{color:rgba(255,255,255,.35);font-size:9px;font-weight:700;letter-spacing:4px}.brand-name{margin-top:5px;font-size:20px;font-weight:650}
.more-btn{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.09);border-radius:50%;color:white;background:rgba(255,255,255,.055);backdrop-filter:blur(18px);font-size:20px;cursor:pointer}
.badge-wrap{display:flex;justify-content:center;margin-top:28px}.badge{padding:9px 17px;border:1px solid rgba(255,210,224,.14);border-radius:999px;color:rgba(255,218,230,.56);background:rgba(255,255,255,.035);font-size:9px;font-weight:700;letter-spacing:3px}
.turntable{position:relative;width:min(82vw,410px);aspect-ratio:1;margin:35px auto 40px}.record-shadow{position:absolute;left:9%;right:9%;bottom:-8%;height:17%;border-radius:50%;background:rgba(0,0,0,.66);filter:blur(30px)}
.record{position:absolute;left:2%;top:7%;width:88%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.08);background:repeating-radial-gradient(circle,transparent 0,transparent 4px,rgba(255,255,255,.026) 5px,transparent 6px),radial-gradient(circle,#0b090b 0 15%,#181116 16% 22%,#090709 23% 100%);box-shadow:0 35px 80px rgba(0,0,0,.48),inset 0 0 45px rgba(255,255,255,.025);animation:recordSpin 10s linear infinite;animation-play-state:paused}
.record.playing{animation-play-state:running}@keyframes recordSpin{to{transform:rotate(360deg)}}.record::before{content:"";position:absolute;inset:3%;border-radius:50%;background:conic-gradient(from 15deg,transparent 0deg 40deg,rgba(255,255,255,.065) 65deg,transparent 95deg 210deg,rgba(255,255,255,.03) 240deg,transparent 275deg)}
.record-label{position:absolute;left:50%;top:50%;width:36%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#542b3b;background:radial-gradient(circle at 32% 28%,#ffe8ef 0%,#efb5c6 42%,#d889a4 75%,#a85c77 100%);box-shadow:inset 0 0 22px rgba(255,255,255,.38)}
.record-label-title{font-family:"Songti SC","STSong",serif;font-size:clamp(12px,3.3vw,17px);letter-spacing:3px}.record-label-for{margin-top:8px;font-size:7px;font-weight:700;letter-spacing:2px;opacity:.55}.record-hole{position:absolute;left:50%;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);border-radius:50%;background:#321721}
.tonearm-system{position:absolute;right:-1%;top:0;width:47%;height:55%;z-index:20;pointer-events:none}.arm-base{position:absolute;right:0;top:0;width:58px;height:58px;border-radius:50%;z-index:5;background:radial-gradient(circle at 34% 28%,#eee8eb 0%,#c3b9be 17%,#93898e 38%,#5c5559 66%,#292529 100%);border:1px solid rgba(255,255,255,.15);box-shadow:0 10px 25px rgba(0,0,0,.45),inset 0 2px 6px rgba(255,255,255,.28)}
.arm-base::after{content:"";position:absolute;left:50%;top:50%;width:17px;height:17px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#938a8e,#514a4e 65%,#302b2e)}
.arm-rotator{position:absolute;right:28px;top:26px;width:155px;height:7px;z-index:4;transform-origin:calc(100% - 1px) 50%;--arm-angle:-39deg;transform:rotate(var(--arm-angle));transition:transform .85s cubic-bezier(.22,.8,.25,1)}
.arm-stick{position:absolute;inset:0;border-radius:999px;background:linear-gradient(180deg,#f1edef 0%,#d5cdd1 32%,#aaa0a5 65%,#71686c 100%);box-shadow:0 4px 8px rgba(0,0,0,.34),inset 0 1px 1px rgba(255,255,255,.6)}
.headshell{position:absolute;left:-12px;top:-6px;width:28px;height:19px;border-radius:6px 3px 4px 6px;background:linear-gradient(145deg,#e8e1e4,#afa4a9 55%,#6b6266);box-shadow:0 5px 10px rgba(0,0,0,.4);transform:rotate(-5deg)}.headshell::after{content:"";position:absolute;left:5px;bottom:-9px;width:2px;height:10px;background:#cfc3c8;transform:rotate(16deg)}
.song-info{text-align:center;margin-top:4px}.song-title{font-family:"Songti SC","STSong",serif;font-size:clamp(34px,8vw,46px);font-weight:400;letter-spacing:7px}.song-description{margin-top:10px;color:var(--muted);font-family:"Songti SC",serif;font-size:14px;line-height:1.7}.song-for{margin-top:10px;color:#e5afc0;font-size:10px;font-weight:700;letter-spacing:3px}
.progress-area{margin-top:35px}.progress{position:relative;height:22px;display:flex;align-items:center;cursor:pointer;touch-action:none}.progress-track{width:100%;height:5px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.14)}.progress-fill{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#e997b3,#ffd4df)}.progress-knob{position:absolute;left:0;top:50%;width:15px;height:15px;transform:translate(-50%,-50%);border-radius:50%;background:#ffe1ea;box-shadow:0 0 17px rgba(255,184,208,.5)}.time-row{display:flex;justify-content:space-between;color:rgba(255,255,255,.30);font-size:11px;font-variant-numeric:tabular-nums}
.controls{height:118px;display:flex;align-items:center;justify-content:center;gap:42px}.seek-btn{width:55px;height:55px;border:0;color:rgba(255,255,255,.70);background:transparent;font-size:20px;cursor:pointer}
.play-btn{width:76px;height:76px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:linear-gradient(145deg,#ffe8ef,#e9a1b9);box-shadow:0 14px 38px rgba(223,120,156,.28),inset 0 2px 5px rgba(255,255,255,.75);transition:transform .2s ease}.play-btn:active{transform:scale(.94)}
.play-icon{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.play-triangle{width:0;height:0;margin-left:4px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid #542638}.play-icon.is-playing .play-triangle{position:relative;width:20px;height:22px;margin-left:0;border:0}.play-icon.is-playing .play-triangle::before,.play-icon.is-playing .play-triangle::after{content:"";position:absolute;top:0;width:6px;height:22px;border-radius:2px;background:#542638}.play-icon.is-playing .play-triangle::before{left:1px}.play-icon.is-playing .play-triangle::after{right:1px}
.actions{display:grid;grid-template-columns:repeat(3,1fr);padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.action{display:flex;flex-direction:column;align-items:center;gap:7px;border:0;color:rgba(255,255,255,.44);background:transparent;text-decoration:none;cursor:pointer;font-size:10px}.action-icon{min-height:26px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.80);font-size:22px}.action.loved .action-icon{color:#ff9ebe;transform:scale(1.2)}.go-away-arrow{display:inline-block;font-size:24px;transition:transform .25s}#goAwayBtn:hover .go-away-arrow{transform:translate(4px,-4px)}
.lyrics-card{position:relative;margin-top:35px;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));backdrop-filter:blur(25px);box-shadow:0 25px 70px rgba(0,0,0,.16)}
.lyrics-header{height:60px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.055)}.lyrics-title{color:rgba(255,255,255,.50);font-size:11px;font-weight:700;letter-spacing:3px}.live{display:flex;align-items:center;gap:6px;border:0;color:#dda0b4;background:transparent;font-size:9px;letter-spacing:1px;cursor:pointer}.live-dot{width:6px;height:6px;border-radius:50%;background:#eb9db7;box-shadow:0 0 10px #eb9db7}
.lyrics-window{position:relative;height:330px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 87%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 87%,transparent 100%)}.lyrics-list{position:absolute;left:0;top:0;width:100%;padding-top:140px;transition:transform .6s cubic-bezier(.22,.61,.36,1)}.lyric-line{min-height:60px;padding:9px 24px;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;color:rgba(255,237,243,.20);font-family:"Songti SC","STSong",serif;font-size:15px;line-height:1.65;letter-spacing:.8px;opacity:.38;transform:scale(.94);transition:.45s ease}.lyric-line.near{color:rgba(255,235,242,.50);opacity:.72;transform:scale(.97)}.lyric-line.active{color:#fff5f8;opacity:1;font-size:19px;transform:scale(1);text-shadow:0 0 22px rgba(255,184,208,.22)}
.message{padding:55px 10px 25px;text-align:center}.message-label{color:#a88391;font-size:9px;font-weight:700;letter-spacing:5px}.message p{margin-top:23px;color:#d9c4cc;font-family:"Songti SC",serif;font-size:15px;line-height:2.1}.message strong{color:#ffe0e9;font-weight:500}.message .special{color:#ffd0df;font-size:17px}.message .message-last{color:rgba(255,235,242,.52);font-size:13px}.footer{padding:35px 0 10px;text-align:center;color:rgba(255,255,255,.20);font-size:8px;letter-spacing:3px}
.intro{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:30px;background:radial-gradient(circle at 50% 40%,#351725,#110a13 55%,#070608);transition:opacity .8s,visibility .8s}.intro.hide{opacity:0;visibility:hidden}.intro-content{width:100%;text-align:center}.intro-small{color:#b68b9a;font-size:9px;font-weight:700;letter-spacing:6px}.intro-title{margin-top:22px;font-family:"Songti SC",serif;font-size:clamp(40px,11vw,60px);font-weight:400;letter-spacing:6px}.intro-for{margin-top:12px;color:#e2adbe;font-size:11px;letter-spacing:4px}.intro-line{width:1px;height:60px;margin:30px auto;background:linear-gradient(transparent,rgba(255,255,255,.45),transparent)}.intro-message{color:#cbb5bd;font-family:"Songti SC",serif;font-size:14px;line-height:2.1}.intro-message span{color:#ffe1ea;font-size:16px}.enter-btn{margin-top:37px;min-width:150px;padding:15px 28px;border:1px solid rgba(255,216,228,.20);border-radius:999px;color:#ffe8ef;background:rgba(255,255,255,.07);cursor:pointer;font-size:12px;letter-spacing:2px}
.confirm-overlay{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(5,3,6,.74);backdrop-filter:blur(20px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}.confirm-overlay.show{opacity:1;visibility:visible}.confirm-dialog{position:relative;width:min(100%,390px);padding:43px 27px 27px;overflow:hidden;text-align:center;border:1px solid rgba(255,255,255,.12);border-radius:30px;background:linear-gradient(145deg,rgba(54,29,42,.98),rgba(18,12,19,.98));box-shadow:0 35px 100px rgba(0,0,0,.58);transform:translateY(25px) scale(.94);transition:transform .4s cubic-bezier(.2,.8,.2,1)}.confirm-overlay.show .confirm-dialog{transform:translateY(0) scale(1)}.confirm-close{position:absolute;right:17px;top:15px;width:35px;height:35px;border:0;border-radius:50%;color:rgba(255,255,255,.45);background:rgba(255,255,255,.05);cursor:pointer;font-size:21px}.confirm-icon{width:70px;height:70px;margin:0 auto 21px;display:grid;place-items:center;border:1px solid rgba(255,204,221,.16);border-radius:50%;color:#ffd0df;background:rgba(255,255,255,.05);font-size:29px}.confirm-eyebrow{color:#b88b9b;font-size:8px;font-weight:700;letter-spacing:4px}.confirm-dialog h2{margin-top:13px;font-family:"Songti SC",serif;font-size:25px;font-weight:500;letter-spacing:2px}.confirm-dialog p{margin-top:18px;color:rgba(255,235,242,.60);font-family:"Songti SC",serif;font-size:14px;line-height:2}.confirm-line{width:40px;height:1px;margin:25px auto;background:rgba(255,255,255,.16)}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.confirm-actions button{min-height:51px;padding:10px 12px;border-radius:16px;cursor:pointer;font-size:12px}.confirm-cancel{border:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.65);background:rgba(255,255,255,.045)}.confirm-go{border:1px solid rgba(255,201,219,.16);color:#512334;font-weight:650;background:linear-gradient(145deg,#ffe2eb,#e89bb6)}
.confirm-dialog.go-away{animation:goAway .82s cubic-bezier(.65,.02,.88,.35) forwards}@keyframes goAway{0%{transform:translate(0,0) rotate(0) scale(1);opacity:1}20%{transform:translate(-8px,3px) rotate(-3deg) scale(.98)}100%{transform:translate(130vw,-30vh) rotate(48deg) scale(.45);opacity:0}}
.gone-result{position:absolute;left:50%;top:50%;width:calc(100% - 48px);max-width:390px;transform:translate(-50%,-50%) scale(.9);text-align:center;opacity:0;pointer-events:none}.gone-result.show{pointer-events:auto;animation:resultIn .55s cubic-bezier(.2,.8,.2,1) forwards}@keyframes resultIn{to{transform:translate(-50%,-50%) scale(1);opacity:1}}.gone-check{width:76px;height:76px;margin:auto;display:grid;place-items:center;border:1px solid rgba(255,206,222,.16);border-radius:50%;color:#ffd5e2;background:rgba(255,255,255,.055);font-size:31px}.gone-result h2{margin-top:25px;font-family:"Songti SC",serif;font-size:28px;font-weight:400;letter-spacing:3px}.gone-result p{margin-top:14px;color:rgba(255,235,242,.52);font-family:"Songti SC",serif;font-size:14px;line-height:2}.gone-close{margin-top:30px;min-width:135px;padding:13px 20px;border:1px solid rgba(255,255,255,.10);border-radius:999px;color:#ffe4ec;background:rgba(255,255,255,.06);cursor:pointer}
.toast{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));z-index:6000;padding:12px 19px;transform:translate(-50%,20px);border:1px solid rgba(255,255,255,.10);border-radius:999px;color:#f9e9ef;background:rgba(24,16,21,.88);backdrop-filter:blur(20px);font-size:11px;white-space:nowrap;opacity:0;pointer-events:none;transition:.3s}.toast.show{opacity:1;transform:translate(-50%,0)}
body.lyrics-mode{overflow:hidden}body.lyrics-mode .lyrics-card{position:fixed;inset:0;z-index:3000;margin:0;border:0;border-radius:0;padding-top:env(safe-area-inset-top);background:linear-gradient(180deg,rgba(31,14,25,.99),rgba(9,7,11,.99))}body.lyrics-mode .lyrics-window{height:calc(100vh - 70px - env(safe-area-inset-top))}body.lyrics-mode .lyrics-list{padding-top:42vh}
@media(min-width:760px){body{padding:24px 0}.app{min-height:calc(100vh - 48px);border:1px solid rgba(255,255,255,.06);border-radius:38px;background:rgba(5,4,6,.08);box-shadow:0 45px 120px rgba(0,0,0,.42)}}
@media(max-width:430px){.app{padding-left:18px;padding-right:18px}.turntable{width:88vw;max-width:390px}.record{width:86%}.tonearm-system{right:0;top:0;transform:scale(.88);transform-origin:top right}.song-title{font-size:38px}.lyrics-window{height:300px}}
@media(max-width:360px){.turntable{width:90vw}.tonearm-system{transform:scale(.80)}.controls{gap:27px}.confirm-actions{grid-template-columns:1fr}}
