:root{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#332739;background:#fff7fa;font-size:16px;--pink:#f44484;--ink:#332739;--muted:#826e80}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 13% 40%,#fbd6e8 0,transparent 46%),radial-gradient(ellipse at 88% 38%,#eee7ff 0,transparent 42%),#fff8fa;overflow-x:hidden}button,a,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible{outline:3px solid #a52b68;outline-offset:5px}.ambient{position:fixed;inset:0;pointer-events:none;opacity:.35;background-image:radial-gradient(#c8a7bb .65px,transparent .65px);background-size:7px 7px;mask-image:linear-gradient(transparent,#000)}header{height:98px;max-width:1512px;padding:0 5%;margin:auto;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-size:17px;font-weight:800;letter-spacing:2px}.brand-light{font-weight:350}.brand-icon{display:grid;place-items:center;background:var(--pink);color:white;width:39px;height:39px;border-radius:12px;font-size:30px;letter-spacing:-3px;padding-right:4px;font-style:italic}.header-center{font-size:13px;color:var(--muted);letter-spacing:2px}.edit-button{display:flex;gap:10px;align-items:center;border:1px solid #ffffffc9;border-radius:30px;padding:10px 15px;background:#ffffff88;font-size:14px;color:#514051}.count-badge{background:#f7e6ee;color:#b43e6d;font-size:12px;border-radius:20px;padding:3px 7px}main{max-width:1512px;min-height:660px;height:auto;max-height:none;min-height:max(660px,calc(100vh - 244px));margin:auto;display:grid;grid-template-columns:1fr 1fr;position:relative}.scene{position:relative;isolation:isolate;min-width:0;overflow:hidden}.scene-copy{position:absolute;top:38px;left:10%;z-index:2;pointer-events:none}.overline{font-size:10px;letter-spacing:2.2px;font-weight:600;color:#8d667e;display:flex;align-items:center;gap:7px}.overline>span{width:5px;height:5px;background:var(--pink);border-radius:50%}h1{font-size:clamp(44px,4.6vw,70px);line-height:1.17;letter-spacing:-3px;margin:22px 0 17px;font-weight:800;position:relative}h1>span{color:var(--pink)}h1 i{font-size:43px;position:absolute;right:-44px;top:9px;font-style:normal;color:var(--pink);animation:lazy-turn 24s linear infinite}.scene-copy p{font-size:14px;color:#896b80;line-height:1.9;margin:0;letter-spacing:1px}.big-type{position:absolute;bottom:15px;left:4%;font-size:clamp(150px,18vw,285px);letter-spacing:-18px;line-height:1;color:#e9a6c340;font-weight:800;font-style:italic;z-index:-1}.character{position:absolute;width:94%;height:91%;object-fit:contain;object-position:center bottom;right:-19%;bottom:0;z-index:1;filter:drop-shadow(0 18px 28px #bf62842b);animation:breathe 7s ease-in-out infinite;mask-image:linear-gradient(#000 90%,transparent)}.character-caption{position:absolute;bottom:30px;left:10%;z-index:2;display:flex;align-items:center;gap:10px;background:#ffffffa6;padding:13px 18px;backdrop-filter:blur(16px);border-radius:18px;border:1px solid white;transform:rotate(-5deg);box-shadow:0 10px 40px #a64b6710}.character-caption>span{color:var(--pink);font-size:30px}.character-caption div{font-size:17px;font-weight:650}.character-caption i{font-family:Georgia,serif;font-weight:400}.character-caption small{display:block;font-size:10px;font-weight:400;color:#8a7581;margin-top:4px;letter-spacing:2px}.floating-note{position:absolute;bottom:36%;left:12%;font-size:44px;color:#c96392;transform:rotate(-20deg);animation:breathe 5s ease-in-out infinite}.floating-star{position:absolute;right:5%;top:3%;font-size:65px;color:#d282b2}.player{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:18px 7% 18px 4%;min-width:0}.player-heading{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:475px;margin-bottom:15px}.mini-label{font-size:11px;letter-spacing:2.5px;font-weight:650;color:#89748a}.live-label{font-size:12px;color:#9c5d82;display:flex;gap:7px;align-items:center}.live-label i{width:6px;height:6px;background:#e97aaa;border-radius:50%}.turntable{width:min(100%,465px);aspect-ratio:1;position:relative;display:grid;place-items:center;margin:10px auto 13px}.record{position:absolute;inset:17px;border:11px solid #ffffffa1;border-radius:50%;box-shadow:0 20px 50px #9e588122,inset 0 0 0 1px #fff;overflow:hidden;background:#f4dbe8}.record svg{display:block;width:100%;height:100%;border-radius:50%;will-change:transform}.orbit{position:absolute;border:1px solid #d9b8d180;border-radius:50%;inset:0;pointer-events:none}.orbit-two{inset:-12px;border-style:dashed;opacity:.5;animation:lazy-turn 120s linear infinite}.orbit-star{position:absolute;right:7%;top:4%;font-size:30px;color:#ee599c;z-index:2}.pointer{position:absolute;top:6px;z-index:5;width:17px;height:28px;background:var(--pink);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 2px 3px #8c4569)}.record-center{position:absolute;inset:24%;border-radius:50%;background:linear-gradient(140deg,#fffefef5,#fff4faf5);box-shadow:0 0 0 1px #fff,0 0 0 13px #ffffff59,0 10px 30px #964d791c;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:3;min-width:0}.center-label{font-size:12px;letter-spacing:2px;color:#a87893}.song-window{height:82px;overflow:hidden;position:relative;width:145%;margin:5px -22.5%;mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent)}#song-track{will-change:transform}.song-row{height:82px;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 14px;font-size:clamp(22px,2.5vw,35px);line-height:1.15;letter-spacing:-1px;font-weight:750;color:#714366;overflow-wrap:anywhere}.center-bottom{font-size:8px;letter-spacing:1.5px;color:#b18c9f;max-width:80%;text-align:center}.result-summary{min-height:26px;text-align:center;color:#8b7185;font-size:13px;line-height:1.6;margin:5px 0 18px;max-width:100%;overflow-wrap:anywhere}.spin-button{width:min(100%,335px);border:0;border-radius:50px;display:flex;justify-content:space-between;align-items:center;padding:19px 24px;background:var(--ink);color:white;box-shadow:0 12px 30px #4a274927;font-size:17px;font-weight:550;transition:transform .2s,background .2s,box-shadow .2s}.spin-button:hover:not(:disabled){transform:translateY(-3px);background:#ed4081;box-shadow:0 16px 32px #ed408130}.play-icon{font-size:12px}.button-star{font-size:23px;font-weight:400}.player-bottom{display:flex;gap:18px;font-size:11px;color:#9b8496;margin-top:16px}.playlist-dock{max-width:1360px;margin:12px auto 0;width:90%;padding:19px 24px;display:flex;align-items:center;gap:25px;border-radius:22px;background:#ffffff91;border:1px solid #fff;backdrop-filter:blur(20px);position:relative;z-index:4}.dock-label{display:flex;gap:14px;align-items:center;flex-shrink:0;font-size:14px;font-weight:550}.dock-label small{font-size:10px;color:#a18498;font-weight:400;display:block;margin-top:5px}.equalizer{height:27px;display:flex;gap:3px;align-items:center}.equalizer i{width:3px;height:12px;background:#df659b;border-radius:3px}.equalizer i:nth-child(2){height:24px}.equalizer i:nth-child(3){height:17px}.song-preview{display:flex;gap:8px;overflow:hidden;flex:1;mask-image:linear-gradient(90deg,#000 85%,transparent)}.song-chip{white-space:nowrap;font-size:12px;color:#8a6c82;padding:9px 14px;background:#f4e9f180;border-radius:25px}.dock-edit{border:0;background:none;font-size:13px;white-space:nowrap;color:#6e5369}.dock-edit span{margin-left:12px;font-size:20px}footer{width:90%;max-width:1360px;margin:18px auto 20px;display:flex;justify-content:space-between;color:#a18c9b;font-size:10px;letter-spacing:1.5px}footer i{color:#e57aa5;font-style:normal;margin-left:8px}dialog{width:min(560px,calc(100% - 32px));max-height:90dvh;border:1px solid #fff;border-radius:26px;padding:35px;background:#fff9fc;box-shadow:0 30px 120px #6f385440;color:var(--ink)}dialog::backdrop{background:#46354750;backdrop-filter:blur(12px)}.dialog-close{position:absolute;right:17px;top:14px}.dialog-close button{border:0;background:none;font-size:30px;color:#9b7c91}dialog h2{font-size:28px;letter-spacing:-1px;margin:14px 0}dialog p{font-size:13px;line-height:1.7;color:#8c6f83}textarea{width:100%;height:260px;resize:vertical;min-height:100px;border:1px solid #e7d7e3;border-radius:14px;background:white;padding:16px;font:16px/1.8 "PingFang SC","Microsoft YaHei",sans-serif;color:#65475d;outline:none}textarea:focus{border-color:#f06b9e;box-shadow:0 0 0 3px #fce1ee}textarea::placeholder{color:#b69bae}.input-meta{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:12px;color:#a07f94}.text-button{padding:0;border:0;background:none;font-size:12px;color:#cb477f}.apply-button{width:100%;padding:15px 20px;border:0;background:var(--pink);color:white;border-radius:14px;display:flex;justify-content:space-between;font-weight:600}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.is-spinning .orbit-one{box-shadow:0 0 45px #f36c9f40}.is-spinning .equalizer i{animation:levels .5s ease-in-out infinite alternate}.is-spinning .equalizer i:nth-child(2){animation-delay:.2s}.is-spinning .equalizer i:nth-child(3){animation-delay:.35s}.is-spinning .center-label{color:var(--pink)}.celebrate .record-center{animation:win .65s ease-out}.celebrate .orbit-star{animation:lazy-turn 1.5s ease-out}.celebrate .song-row{color:#ec4086}@keyframes breathe{50%{transform:translateY(-9px)}}@keyframes lazy-turn{to{transform:rotate(360deg)}}@keyframes levels{to{transform:scaleY(.35)}}@keyframes win{40%{transform:scale(1.06)}}@media(min-width:1600px){.character{right:-12%;width:100%}.scene-copy{top:60px}.turntable{width:500px}}@media(max-width:1050px){.header-center{display:none}main{min-height:600px}.scene-copy{left:9%}h1{font-size:48px}.overline{font-size:8px;letter-spacing:1px}.character{right:-27%;width:110%;height:85%}.character-caption{left:8%;bottom:30px}.song-row{font-size:25px}.center-bottom{font-size:7px}.player{padding-right:10%;padding-left:0}.song-window,.song-row{height:72px}.scene-copy p{font-size:13px}.song-preview{gap:5px}.playlist-dock{gap:16px}}@media(max-width:720px){header{height:78px;padding:0 6%}.brand{font-size:13px;letter-spacing:1px}.brand-icon{width:33px;height:33px;font-size:27px}.edit-button{font-size:12px;gap:6px;padding:9px 12px}.count-badge{font-size:10px}main{display:block;height:auto;max-height:none;min-height:0}.scene{height:330px;overflow:hidden}.scene-copy{top:20px;left:7%}h1{font-size:49px;margin-top:18px;margin-bottom:12px}.scene-copy p{font-size:12px}.character{width:75%;right:-9%;height:115%;bottom:-20%;mask-image:linear-gradient(#000 73%,transparent)}.big-type{font-size:180px;bottom:-15px;left:5%;letter-spacing:-14px}.character-caption{display:none}.floating-note{display:none}.floating-star{font-size:45px;top:2%;right:6%}.player{padding:0 9% 20px;margin-top:-20px}.player-heading{margin-bottom:10px}.turntable{max-width:370px;margin-top:13px}.record{inset:13px;border-width:8px}.song-row{font-size:26px}.center-bottom{font-size:7px}.record-center{inset:24%}.result-summary{font-size:12px;margin-bottom:13px}.player-bottom{font-size:10px}.playlist-dock{padding:15px 17px;gap:12px;margin-top:5px}.song-preview{display:none}.dock-edit{margin-left:auto}.dock-label{font-size:12px}.spin-button{padding:17px 24px}.mini-label{font-size:10px}.live-label{font-size:11px}footer{font-size:8px;letter-spacing:.8px}dialog{padding:27px 23px}dialog h2{font-size:25px}textarea{height:240px}.input-meta{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Keep the entire player in normal flow so the playlist never covers controls. */
.player > *{flex-shrink:0}
.player{min-height:min-content}
.playlist-dock{isolation:isolate}
@media (min-width:721px) and (max-height:700px){
 header{height:76px}
 main{min-height:0}
 .player{padding-top:18px;padding-bottom:26px}
 .turntable{width:min(100%,340px)}
 .scene-copy{top:24px}
 .character{height:95%}
 .player-heading{margin-bottom:10px}
 .spin-button{padding-top:15px;padding-bottom:15px}
}



/* Keep the heart attached to the artwork's coordinates at every screen size. */
.character{display:flex;align-items:flex-end;justify-content:center}
.character-art{position:relative;height:100%;max-width:100%;aspect-ratio:2/3;flex:none}
.character-art img{display:block;width:100%;height:100%;object-fit:contain}
.heart-sticker{position:absolute;left:58%;top:37%;width:28%;height:22%;display:flex;align-items:center;justify-content:center;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:clamp(70px,9vw,145px);line-height:1;transform:rotate(-8deg);filter:drop-shadow(0 5px 8px #b7507933);user-select:none}
@media(max-width:720px){.heart-sticker{font-size:clamp(65px,19vw,100px)}}

.character[data-variant="braid"]{mix-blend-mode:normal;filter:none}
.character[data-variant="braid"] .heart-sticker{display:none}

/* Reserve the artwork space, but never paint an unselected/default character. */
.character[data-ready="false"]{visibility:hidden}