*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:Inter,system-ui,sans-serif;color:#fff;background:#160616;overflow-x:hidden}button,input,textarea{font:inherit}button{border:0;color:inherit;cursor:pointer}img{display:block;max-width:100%}.aurora{position:fixed;inset:-25%;z-index:0;background:radial-gradient(circle at 18% 8%,rgba(255,65,139,.55),transparent 26%),radial-gradient(circle at 88% 2%,rgba(91,92,255,.45),transparent 29%),radial-gradient(circle at 48% 88%,rgba(255,180,92,.18),transparent 34%),linear-gradient(145deg,#10030f,#281038 46%,#090d24);filter:saturate(150%);animation:aurora 16s ease-in-out infinite alternate}.love .aurora{background:radial-gradient(circle at 18% 8%,rgba(119,230,198,.38),transparent 27%),radial-gradient(circle at 88% 2%,rgba(101,170,255,.42),transparent 29%),linear-gradient(145deg,#071e25,#0b3842 46%,#122b1f)}.heart-floaters{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}.floating-heart{position:absolute;animation:floatUp 1.9s ease-out forwards;color:#ff78a7;text-shadow:0 14px 28px rgba(0,0,0,.35);font-size:26px}.falling{position:absolute;top:-8vh;opacity:.55;animation:fall linear forwards}.app-shell{position:relative;z-index:2;width:min(580px,100% - 16px);margin:0 auto;padding:12px 0 34px}.topbar{position:sticky;top:10px;z-index:12;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.info-button{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);box-shadow:0 16px 34px rgba(0,0,0,.24);font-weight:900;backdrop-filter:blur(18px)}.mode-switch{width:82px;height:44px;border-radius:999px;position:relative;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);box-shadow:0 16px 34px rgba(0,0,0,.24);backdrop-filter:blur(18px);overflow:hidden}.mode-track{position:absolute;inset:0;background:linear-gradient(90deg,#42dac0,#6da8ff)}.more-love .mode-track{background:linear-gradient(90deg,#ff5f98,#9d6fff)}.mode-knob{position:absolute;top:5px;left:5px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#ff5f98;box-shadow:0 10px 24px rgba(0,0,0,.25);transition:.34s}.more-love .mode-knob{transform:translateX(38px)}.cover-wrap{perspective:1400px;margin:8px 0 14px}.flip-card{width:100%;aspect-ratio:1/1;position:relative;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.8,.2,1)}.flip-card.flipped{transform:rotateY(180deg)}.flip-face{position:absolute;inset:0;border-radius:34px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 44px 100px rgba(0,0,0,.55),0 18px 36px rgba(255,80,140,.12),inset 0 1px 0 rgba(255,255,255,.28)}.front-face img{width:100%;height:100%;object-fit:cover}.front-face:after{content:"";position:absolute;inset:0;background:linear-gradient(165deg,rgba(255,255,255,.16),transparent 34%,rgba(0,0,0,.22));pointer-events:none}.cover-play{position:absolute;right:16px;bottom:16px;z-index:5;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff6a98,#8d6eff 58%,#53d4ff);box-shadow:0 22px 48px rgba(255,105,152,.38),0 0 0 10px rgba(255,255,255,.07)}.cover-play span{width:0;height:0;border-top:13px solid transparent;border-bottom:13px solid transparent;border-left:20px solid #fff;margin-left:5px}.playing .cover-play span{width:24px;height:28px;border:0;margin:0;position:relative}.playing .cover-play span:before,.playing .cover-play span:after{content:"";position:absolute;top:0;width:9px;height:28px;background:#fff;border-radius:3px}.playing .cover-play span:before{left:1px}.playing .cover-play span:after{right:1px}.back-face{transform:rotateY(180deg);display:grid;align-content:center;gap:8px;text-align:center;padding:26px;background:radial-gradient(circle at top,rgba(255,120,172,.22),transparent 30%),linear-gradient(145deg,rgba(37,10,45,.94),rgba(15,6,24,.96))}.back-face .script{font-family:"Great Vibes",cursive;font-size:3.5rem;line-height:1;color:#ff8bad;margin:0}.back-face h1{margin:0;font-size:1rem;text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.6)}.back-face p{margin:4px 0;color:rgba(255,255,255,.78);line-height:1.45}.back-face small{margin-top:12px;color:#ffd4e1;font-weight:800}.close-back{position:absolute;right:14px;top:12px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);font-size:1.4rem}.player-card,.action-grid button,.stats div,.message-board{background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.07) 45%,rgba(0,0,0,.16));border:1px solid rgba(255,255,255,.15);box-shadow:0 30px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.22);backdrop-filter:blur(24px)}.player-card{border-radius:32px;padding:18px}.song-head{display:grid;grid-template-columns:1fr 62px;gap:12px;align-items:center}.eyebrow{margin:0 0 3px;color:#ffc0d6;text-transform:uppercase;letter-spacing:.15em;font-size:.7rem;font-weight:900}.song-head h2{font-family:"Great Vibes",cursive;font-size:3.35rem;font-weight:400;line-height:.94;margin:0}.song-head span{display:block;color:rgba(255,255,255,.62);font-size:.84rem;margin-top:6px;font-weight:700}.love-button{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff5f98,#9f6dff);box-shadow:0 18px 36px rgba(255,91,149,.42),0 0 0 7px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.35)}.special-heart{width:26px;height:26px;position:relative;transform:rotate(-45deg);background:linear-gradient(145deg,#fff,#ffd7e5 38%,#ff6f9f);border-radius:7px 0 0 7px;filter:drop-shadow(0 5px 8px rgba(0,0,0,.22))}.special-heart:before,.special-heart:after{content:"";position:absolute;width:26px;height:26px;border-radius:50%;background:inherit}.special-heart:before{top:-13px;left:0}.special-heart:after{left:13px;top:0}.love-button.pop{animation:pop .45s}.waveform{height:68px;display:flex;align-items:center;gap:3px;margin:16px 0 6px}.waveform i{flex:1;height:var(--h);border-radius:99px;background:linear-gradient(180deg,#ff78a7,#9d75ff);opacity:.72;transform-origin:center}.playing .waveform i{animation:bar 1s ease-in-out infinite alternate}.waveform i:nth-child(3n){animation-duration:.72s}.waveform i:nth-child(4n){animation-duration:1.2s}.time-row{display:grid;grid-template-columns:42px 1fr 42px;gap:10px;align-items:center;color:rgba(255,255,255,.68);font-weight:800;font-size:.84rem}.seek,.volume-row input{-webkit-appearance:none;appearance:none;height:8px;border-radius:999px;background:linear-gradient(90deg,#ff6d9d,#9c70ff,#54d1ff);outline:0}.seek::-webkit-slider-thumb,.volume-row input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:5px solid #ff6d9d;box-shadow:0 8px 20px rgba(0,0,0,.32)}.transport{display:flex;justify-content:center;align-items:center;gap:16px;margin:20px 0}.transport button{width:66px;height:66px;border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 40px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.24);font-weight:900}.transport .main-play{width:96px;height:96px;background:linear-gradient(135deg,#ff6a98,#8d6eff 58%,#53d4ff);display:grid;place-items:center}.main-play span{width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:25px solid #fff;margin-left:6px}.playing .main-play span{width:28px;height:34px;border:0;margin:0;position:relative}.playing .main-play span:before,.playing .main-play span:after{content:"";position:absolute;top:0;width:10px;height:34px;background:#fff;border-radius:4px}.playing .main-play span:before{left:2px}.playing .main-play span:after{right:2px}.volume-row{display:grid;grid-template-columns:58px 1fr 48px;gap:10px;align-items:center;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.11);border-radius:22px;padding:10px}.volume-row button{height:40px;border-radius:999px;background:rgba(255,255,255,.1);font-weight:900;font-size:.73rem}.volume-row strong{text-align:right;color:rgba(255,255,255,.74);font-size:.82rem}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.action-grid button{border-radius:22px;padding:14px 12px;font-weight:900;text-align:left;min-height:66px}.action-grid strong{display:block;font-size:.72rem;color:#ffd4e1;margin-top:4px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stats div{border-radius:22px;padding:14px 8px;text-align:center}.stats strong{display:block;font-size:1.18rem;letter-spacing:.04em}.stats span{display:block;margin-top:3px;color:rgba(255,255,255,.56);font-size:.68rem;text-transform:uppercase;letter-spacing:.13em;font-weight:900}.message-board{border-radius:32px;padding:20px;margin-top:14px}.section-title p{margin:0 0 4px;color:#ffc0d6;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:900}.section-title h2{font-family:"Great Vibes",cursive;font-size:3rem;font-weight:400;margin:0 0 14px}form{display:grid;gap:10px;margin-bottom:18px}input[type=text],textarea{width:100%;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18);color:#fff;padding:14px;outline:0}textarea{min-height:98px;resize:vertical}label{color:rgba(255,255,255,.68);font-size:.9rem}form button{border-radius:999px;padding:14px 16px;background:linear-gradient(135deg,#ff6a98,#8d6eff);font-weight:900}.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}.message-list{display:grid;gap:10px}.message-list article{padding:14px;border-radius:20px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.1)}.message-list strong span{color:#ff78a7}.message-list p{margin:8px 0;color:rgba(255,255,255,.72);line-height:1.45}.message-list small{color:rgba(255,255,255,.5)}footer{text-align:center;color:rgba(255,255,255,.6);font-weight:800;padding:24px 0 8px}.hint-panel{position:fixed;left:50%;bottom:16px;z-index:30;width:min(520px,calc(100% - 24px));transform:translate(-50%,120%);transition:.35s cubic-bezier(.2,.8,.2,1);padding:24px;border-radius:28px;background:rgba(18,6,24,.9);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(24px);box-shadow:0 30px 80px rgba(0,0,0,.5)}.hint-panel.open{transform:translate(-50%,0)}.hint-panel button{position:absolute;right:12px;top:10px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);font-size:1.35rem}.hint-panel h2{font-family:"Great Vibes",cursive;font-size:3rem;font-weight:400;margin:0 0 8px}.hint-panel p{color:rgba(255,255,255,.72);line-height:1.45}.toast{position:fixed;left:50%;bottom:18px;z-index:40;transform:translate(-50%,16px);opacity:0;pointer-events:none;background:rgba(0,0,0,.74);color:#fff;border:1px solid rgba(255,255,255,.14);padding:12px 16px;border-radius:999px;transition:.25s;box-shadow:0 18px 40px rgba(0,0,0,.32)}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes aurora{to{transform:scale(1.05) rotate(2deg);filter:hue-rotate(10deg) saturate(165%)}}@keyframes bar{to{transform:scaleY(1.35);opacity:1}}@keyframes pop{50%{transform:scale(1.16)}}@keyframes floatUp{0%{opacity:0;transform:translate(-50%,0) scale(.7)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-140px) scale(1.8)}}@keyframes fall{to{transform:translate3d(var(--shift),110vh,0) rotate(360deg)}}@media(max-width:430px){.app-shell{width:min(100% - 12px,430px)}.flip-face{border-radius:28px}.player-card{padding:16px;border-radius:28px}.song-head h2{font-size:3rem}.cover-play{width:68px;height:68px}.transport{gap:12px}.transport button{width:58px;height:58px}.transport .main-play{width:86px;height:86px}.action-grid{gap:8px}.action-grid button{padding:12px 10px;min-height:62px}.stats strong{font-size:1rem}.section-title h2{font-size:2.7rem}}