*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111;font-family:Arial,Helvetica,sans-serif}
body{display:flex;align-items:center;justify-content:center}
#app{position:relative;width:min(100vw,56.25vh);height:min(100vh,177.7778vw);overflow:hidden;background:#000;container-type:size;perspective:16000px;transform-style:preserve-3d}
.page{position:absolute;inset:0;visibility:hidden;transform:rotateY(0deg);transform-origin:center center;backface-visibility:hidden;will-change:transform;z-index:1}
.page.active{visibility:visible;transform:rotateY(0deg);z-index:2}
.page.turn-under{visibility:visible;transform:rotateY(0deg);z-index:1}
.full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* V60: isolate the playback artwork from the page-turn 3D stacking context */
#player{width:100%;height:100%;transform:none!important;transform-style:flat!important;backface-visibility:visible!important;-webkit-backface-visibility:visible!important;isolation:isolate;overflow:hidden}
#playerBg{display:block;position:absolute;left:0;top:0;right:0;bottom:0;width:100%!important;height:100%!important;min-width:100%;min-height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center center;transform:none!important}
#player .playerDim,#player .trackTitleCue,#player .authorCue,#player .controlPanel{transform:none}
.turn-sheet{visibility:visible!important;position:absolute;inset:0;z-index:100;pointer-events:none;transform:rotateY(0deg);transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform;box-shadow:none}
.turn-sheet.forward{transform-origin:left center;animation:apkPageForward 1.1s ease-in-out forwards}
.turn-sheet.backward{transform-origin:right center;animation:apkPageBackward 1.1s ease-in-out forwards}
@keyframes apkPageForward{0%{transform:rotateY(0deg)}100%{transform:rotateY(-92deg)}}
@keyframes apkPageBackward{0%{transform:rotateY(0deg)}100%{transform:rotateY(92deg)}}
.coverImage{opacity:0;animation:coverIntroFade 1s ease-in-out forwards;will-change:opacity}
@keyframes coverIntroFade{from{opacity:0}to{opacity:1}}
#page2{opacity:0;transition:opacity 1s ease-in-out}
#page2.active{opacity:1}
#page2NextHit{z-index:50;pointer-events:auto;touch-action:manipulation}
.hit{position:absolute;border:0;background:transparent;padding:0;margin:0;cursor:pointer;z-index:30}
#coverArrow{right:2.5%;top:1.4%;width:15%;height:12%}
#page2NextHit{right:1%;top:1.8%;width:18%;height:9%}
#page3BackHit{left:0;top:0;width:15%;height:9%}
.songHit{width:9.6%;aspect-ratio:1;border:0;background:transparent;position:absolute;transform:translate(-50%,-50%);cursor:pointer;z-index:25}
.playerDim{position:absolute;inset:0;background:rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .18s;z-index:4}
.playerDim.visible{opacity:1}
.trackTitleCue{position:absolute;left:6%;right:6%;top:46%;transform:translateY(-50%);text-align:center;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:clamp(26px,7vw,44px);font-weight:800;font-style:italic;line-height:1.12;text-shadow:0 2px 8px rgba(0,0,0,.8);opacity:0;visibility:hidden;z-index:12;pointer-events:none;transition:opacity .35s ease}
.trackTitleCue.visible{opacity:1;visibility:visible}
.authorCue{position:absolute;left:8%;right:8%;bottom:15.5%;text-align:center;color:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:700;text-shadow:0 2px 7px rgba(0,0,0,.9);opacity:0;visibility:hidden;z-index:12;pointer-events:none;transition:opacity .3s ease}
.authorCue.visible{opacity:1;visibility:visible}.authorLabel{font-size:clamp(19px,5vw,26px);margin-bottom:5px}.authorCue #authorName{font-size:clamp(22px,5.8vw,33px);font-style:italic}
.controlPanel{position:absolute;inset:0;z-index:20;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease;}
.controlPanel.visible{opacity:1;visibility:visible;pointer-events:auto}

.homeControl{position:absolute;right:2.5%;top:2%;width:13%;height:auto;aspect-ratio:1/1;box-sizing:border-box;min-width:0;min-height:0;max-width:none;max-height:none;display:flex;align-items:center;justify-content:center;padding:0;border:1.5px solid rgba(255,211,139,.96);border-radius:50%;background:radial-gradient(circle,rgba(255,190,94,.18) 0%,rgba(0,0,0,.42) 72%);box-shadow:0 0 10px rgba(255,177,78,.48),inset 0 0 8px rgba(255,205,128,.18);color:#ffd17e;cursor:pointer;z-index:25}
.homeControl svg{display:block;width:66%;height:66%;fill:currentColor;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(255,184,88,.72))}
.playerTopInfo{position:absolute;left:5%;top:2.5%;color:#fff;font-weight:700;text-shadow:0 2px 5px rgba(0,0,0,.75);pointer-events:none}
#panelTrackName{font-size:clamp(19px,5vw,28px);line-height:1.2}.panelArtist{font-size:clamp(14px,3.8vw,20px);margin-top:3px;color:rgba(255,255,255,.8)}
.centerControls{position:absolute;left:0;right:0;top:49%;transform:translateY(-50%);display:flex;align-items:center;justify-content:space-evenly;padding:0 10%}
.roundControl{width:clamp(58px,13vw,82px);height:clamp(58px,13vw,82px);border:0;border-radius:50%;background:rgba(0,0,0,.38);display:flex;align-items:center;justify-content:center;padding:15px;color:#fff;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);cursor:pointer}
.roundControl.mainControl{width:clamp(76px,17vw,106px);height:clamp(76px,17vw,106px);background:rgba(0,0,0,.43);padding:18px}
.roundControl svg{width:100%;height:100%;fill:#fff;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.timelineArea{position:absolute;left:4%;right:4%;bottom:2.2%;height:8.5%;}
.timeRow{position:absolute;left:0;right:0;bottom:29px;display:flex;justify-content:space-between;color:#fff;font-size:clamp(13px,3.7vw,18px);text-shadow:0 2px 5px rgba(0,0,0,.85);}
.dynamicTimeline{position:absolute;left:0;right:0;bottom:6px;height:20px;touch-action:none;cursor:pointer;z-index:3}
.dynamicTimeline:before{content:"";position:absolute;left:0;right:0;top:50%;height:5px;transform:translateY(-50%);background:rgba(220,220,220,.68);border-radius:6px}
.dynamicProgress{position:absolute;left:0;top:50%;height:5px;width:0;transform:translateY(-50%);background:#f00042;border-radius:6px;z-index:1}
.dynamicKnob{position:absolute;left:0;top:50%;width:19px;height:19px;border-radius:50%;background:#f00042;transform:translate(-50%,-50%);z-index:2}
.seekBubble{position:absolute;left:0;bottom:48px;transform:translateX(-50%);background:rgba(0,0,0,.72);color:#fff;border-radius:22px;padding:8px 17px;font-size:20px;line-height:1.2;opacity:0;visibility:hidden;pointer-events:none}
.seekBubble.visible{opacity:1;visibility:visible}
@media(max-width:430px){.roundControl{width:clamp(54px,12vw,70px);height:clamp(54px,12vw,70px)}.roundControl.mainControl{width:clamp(72px,16vw,92px);height:clamp(72px,16vw,92px)}}