*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{min-height:100svh;display:flex;flex-direction:column;background:#12061f;color:#fbe9ff;
 font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:-1;background:#12061f url(img/bg-tall.jpg) center/cover no-repeat}
.bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(18,6,31,.35),rgba(18,6,31,.82) 75%)}
@media (orientation:landscape){.bg{background-image:url(img/bg-wide.jpg)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.t-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,3vh,24px);padding:max(20px,env(safe-area-inset-top)) 16px 16px;text-align:center}
.t-back{align-self:flex-start;color:#d9b8ff;text-decoration:none;font-size:14px;opacity:.85}
.t-back:hover{opacity:1;text-shadow:0 0 8px #b400ff}
.logo{margin:0;font-size:clamp(30px,8vw,58px);font-weight:800;letter-spacing:.04em;color:#ffd6fb;
 text-shadow:0 0 6px #ff4fd8,0 0 18px #ff2bd0,0 0 40px #b400ff}
.logo span{color:#c9f3ff;text-shadow:0 0 6px #35c8ff,0 0 18px #1aa0ff,0 0 40px #3a5bff}
.t-player{width:min(94vw,600px);display:flex;gap:18px;align-items:center;padding:16px;border-radius:18px;text-align:left;
 background:rgba(20,6,40,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
 border:2px solid #ff5fe0;box-shadow:0 0 10px #ff3fd6,0 0 30px rgba(180,0,255,.55),inset 0 0 14px rgba(255,63,214,.35)}
.t-cover{flex:0 0 auto;width:150px;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#1d0a33;
 box-shadow:0 0 14px rgba(53,200,255,.45);display:flex;align-items:center;justify-content:center}
.t-cover img{width:100%;height:100%;object-fit:cover;display:block}
.t-cover-ph{font-size:56px;color:#7fe3ff;text-shadow:0 0 12px #1aa0ff}
.t-body{flex:1;min-width:0}
.t-cap{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#7fe3ff;text-shadow:0 0 8px #1aa0ff}
.t-title{margin-top:4px;font-size:clamp(17px,4.4vw,22px);font-weight:700;line-height:1.3;word-break:break-word;
 text-shadow:0 0 10px rgba(255,79,216,.7);min-height:1.3em}
.t-seek{width:100%;margin:12px 0 2px;accent-color:#ff5fe0;height:18px;cursor:pointer}
.t-seek:disabled{opacity:.4;cursor:default}
.t-time{display:flex;justify-content:space-between;font-size:13px;color:#d9b8ff;font-variant-numeric:tabular-nums}
.t-ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:8px}
.t-btn{width:46px;height:46px;border-radius:50%;border:2px solid #7fe3ff;background:rgba(40,8,70,.75);cursor:pointer;
 display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 0 10px rgba(53,200,255,.5);transition:transform .12s;-webkit-tap-highlight-color:transparent}
.t-btn svg{width:22px;height:22px;fill:#fff}
.t-btn:hover:not(:disabled){transform:scale(1.07)}.t-btn:active:not(:disabled){transform:scale(.95)}
.t-btn:disabled{opacity:.35;cursor:default}
.t-btn:focus-visible{outline:3px solid #7fe3ff;outline-offset:3px}
.t-main{width:62px;height:62px;border-color:#ff6ae4;background:radial-gradient(circle at 50% 40%,rgba(255,80,220,.35),rgba(40,8,70,.85) 70%);
 box-shadow:0 0 12px #ff3fd6,0 0 26px rgba(196,0,255,.7)}
.t-main svg{width:30px;height:30px}
.t-main .i-pause{display:none}.t-main.on .i-play{display:none}.t-main.on .i-pause{display:block}
.t-vol{display:flex;align-items:center;gap:8px;margin-top:10px}
.t-vol svg{width:18px;height:18px;fill:#d9b8ff;flex:0 0 auto}
.t-vol input{flex:1;accent-color:#7fe3ff}
.t-note{width:min(94vw,600px);padding:12px 16px;border-radius:14px;background:rgba(20,6,40,.6);color:#ffd6fb;line-height:1.45;font-size:15px}
.t-list{width:min(94vw,600px);text-align:left;background:rgba(20,6,40,.55);border-radius:14px;padding:10px 14px}
.t-list summary{cursor:pointer;color:#7fe3ff;font-weight:600}
.t-list ol{margin:8px 0 0;padding-left:28px;max-height:300px;overflow:auto}
.t-list li{padding:5px 4px;cursor:pointer;border-radius:6px;color:#fbe9ff}
.t-list li:hover{background:rgba(255,95,224,.15)}
.t-list li.cur{color:#ff8ff0;font-weight:700;text-shadow:0 0 8px #ff4fd8}
.t-list li.bad{opacity:.4;text-decoration:line-through;cursor:default}
.t-list .d{float:right;color:#d9b8ff;font-variant-numeric:tabular-nums;font-size:13px}
.t-credit{max-width:min(94vw,600px);font-size:13px;color:#d9b8ff;opacity:.85;line-height:1.5;margin:0}
.t-credit a{color:#c9f3ff}
.foot{text-align:center;padding:10px 0 max(14px,env(safe-area-inset-bottom));font-size:13px}
.foot a{color:#d9b8ff;text-decoration:none;opacity:.8}.foot a:hover{opacity:1;text-shadow:0 0 8px #b400ff}
@media (max-width:520px){
 .t-player{flex-direction:column;text-align:center}
 .t-cover{width:min(62vw,230px)}
 .t-body{width:100%}
}
.t-cover img[hidden],.t-cover-ph[hidden],[hidden]{display:none!important}