:root{color-scheme:dark;--white:#f7f2ff;--muted:#a8a9c8;--pink:#ff4f9d;--violet:#9752eb;font-family:Inter,ui-sans-serif,system-ui,Roboto,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}html,body{padding:0;margin:0;width:100%;min-height:100%;background:#080a1c;color:var(--white);overflow-x:hidden}
button{font:inherit;cursor:pointer}button:focus-visible,.tv-focus:focus{outline:4px solid #fce4fc;outline-offset:6px;box-shadow:0 0 0 9px #f755ab50}
.tv-shell{min-height:100svh;max-width:2400px;margin:0 auto;padding:clamp(22px,3vw,64px) clamp(25px,5vw,110px) 24px;display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden}
.tv-shell:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 85% 30%,#5b26746a,transparent 38%),radial-gradient(ellipse at 18% 100%,#1b23569c,transparent 53%),linear-gradient(125deg,#0a0c20,#111129 60%,#0a1026);z-index:-2}
.tv-header{display:flex;justify-content:space-between;align-items:center;gap:26px}.tv-brand{display:flex;gap:17px;align-items:center}.tv-bars{width:43px;height:45px;display:flex;align-items:center;gap:4px;transform:skewY(-8deg)}.tv-bars i{display:block;width:6px;border-radius:10px;background:linear-gradient(#ff64b0,#9451ff)}.tv-bars i:nth-child(1){height:19px}.tv-bars i:nth-child(2){height:35px}.tv-bars i:nth-child(3){height:24px}.tv-bars i:nth-child(4){height:44px}.tv-bars i:nth-child(5){height:28px}
.tv-brand strong{display:block;font-weight:950;letter-spacing:-2px;font-size:clamp(23px,2.5vw,42px);line-height:1.1}.tv-brand strong span{color:#f787bc}.tv-brand small{display:block;color:#b9b6d4;letter-spacing:3px;font-weight:800;font-size:clamp(7px,.7vw,12px);margin-top:7px}
.tv-head-right{display:flex;align-items:center;gap:clamp(16px,2.5vw,45px)}.tv-on-air{display:flex;align-items:center;gap:11px;color:#f3dfeb;font-size:clamp(12px,1.15vw,19px);font-weight:850;letter-spacing:1px}.tv-dot{width:11px;height:11px;background:#ff548e;box-shadow:0 0 0 7px #ff548e22;border-radius:50%;animation:pulse 2s ease-in-out infinite}.tv-clock{font-variant-numeric:tabular-nums}#tvClock{font-size:clamp(17px,1.8vw,29px);color:#b8b9d5;font-weight:750;font-variant-numeric:tabular-nums}
.tv-lang{display:flex;border:1px solid #ffffff33;border-radius:12px;padding:4px;gap:3px;background:#ffffff09}.tv-lang button{background:transparent;border:0;color:#b2b0ce;border-radius:9px;padding:9px 11px;font-size:clamp(13px,1vw,19px);font-weight:900}.tv-lang button[aria-pressed=true]{color:#0c1022;background:white}
.tv-main{flex:1;display:grid;grid-template-columns:minmax(0,1.13fr) minmax(0,.87fr);align-items:center;gap:3vw;padding:clamp(23px,4.5vh,60px) 0 min(4vh,42px)}
.tv-kicker{display:flex;gap:15px;align-items:center;color:#f38aba;letter-spacing:2px;font-weight:900;font-size:clamp(11px,1vw,18px)}.tv-kicker-line{width:43px;height:2px;background:linear-gradient(90deg,#c16bea,#fc66ab)}.tv-kicker span:last-child{color:#a6a6c1}
.tv-track-label{font-size:clamp(12px,1.1vw,18px);font-weight:850;color:#b3a0ce;letter-spacing:3px;margin-top:clamp(27px,5vh,70px)}
.tv-music h1{line-height:1.09;font-size:clamp(40px,5.4vw,95px);font-weight:950;letter-spacing:-.055em;max-width:13ch;overflow-wrap:anywhere;margin:11px 0 13px;text-shadow:0 12px 50px #0005}
.tv-artist{font-size:clamp(18px,1.8vw,32px);color:#bdc0dc;line-height:1.5;max-width:30ch;margin:0}.tv-progress{display:flex;gap:16px;align-items:center;max-width:560px;margin-top:25px;color:#b5b5cd;font-variant-numeric:tabular-nums;font-weight:650}.tv-progress[hidden]{display:none}.tv-progress-track{flex:1;background:#ffffff22;height:7px;border-radius:10px;overflow:hidden}.tv-progress-track>div{height:100%;width:0;background:linear-gradient(90deg,#fe4d9c,#9766eb);transition:width 1s linear;border-radius:10px}
.tv-controls{display:flex;align-items:center;gap:16px;margin-top:clamp(23px,5vh,64px);flex-wrap:wrap}.tv-play{border:0;border-radius:18px;padding:clamp(14px,1.5vw,25px) clamp(24px,2.8vw,49px);background:linear-gradient(110deg,#ff418e,#b85bdb);box-shadow:0 14px 45px #d53a8657;color:white;font-weight:900;font-size:clamp(15px,1.45vw,24px);display:flex;align-items:center;gap:15px}.play-icon{font-size:clamp(22px,1.7vw,34px);line-height:1}.tv-soft{display:grid;place-items:center;width:clamp(53px,5vw,80px);height:clamp(53px,5vw,80px);background:#ffffff13;border:1px solid #ffffff27;color:#e2dcee;border-radius:17px;font-size:clamp(20px,2vw,33px);font-weight:800}.tv-soft:hover{background:#ffffff22}
.tv-message{min-height:24px;font-size:clamp(12px,1.1vw,19px);color:#a6abca;margin-top:22px}
.tv-disc-area{position:relative;min-height:clamp(280px,38vw,660px);display:grid;place-items:center;isolation:isolate}
.tv-spectrum-stage{position:relative;isolation:isolate;display:grid;place-items:center;width:min(39vw,62vh,680px);height:auto;max-width:100%;aspect-ratio:1;overflow:visible;--tv-wave-size:1}
.tv-spectrum-glow{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle at center,rgba(221,62,198,.25) 0%,rgba(137,57,215,.19) 33%,rgba(78,81,226,.11) 50%,transparent 70%);filter:blur(30px);pointer-events:none}
.tv-spectrum-core{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(36,24,69,.46) 0%,rgba(24,18,47,.39) 35%,rgba(14,14,38,.17) 65%,transparent 83%);box-shadow:0 0 90px 13px rgba(180,57,182,.10),inset 0 0 40px rgba(178,106,249,.07);pointer-events:none}
.tv-spectrum-canvas{position:absolute;inset:0;display:block;pointer-events:none;max-width:100%;max-height:100%;z-index:2}
/* Official MIXIA PWA icon, centered inside TV circular spectrum. */
.tv-spectrum-icon{
 position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.78);transform-origin:center center;
 width:clamp(72px,40%,220px);height:auto;aspect-ratio:1;
 display:block;object-fit:contain;z-index:3;pointer-events:none;
 border-radius:25%;filter:drop-shadow(0 12px 28px rgba(8,6,31,.35));
}
.playing .tv-spectrum-glow{filter:blur(26px) brightness(1.16);transition:filter .18s ease-out}
.tv-spectrum-stage.beat-hit .tv-spectrum-glow{filter:blur(28px) brightness(1.67) saturate(1.4)}
.tv-spectrum-stage.beat-hit .tv-spectrum-core{box-shadow:0 0 100px 24px rgba(230,65,208,.23),inset 0 0 55px rgba(180,98,243,.13)}
.tv-bottom{display:flex;justify-content:space-around;align-items:center;gap:12px;border:1px solid #ffffff19;background:linear-gradient(100deg,#191c39c9,#241c38c9);backdrop-filter:blur(22px);padding:clamp(18px,2.1vw,34px) clamp(18px,3vw,58px);border-radius:clamp(20px,2vw,32px)}.tv-detail{display:flex;align-items:center;gap:15px;min-width:0;flex:1}.tv-detail small{display:block;color:#9493b7;letter-spacing:1.8px;font-size:clamp(10px,.8vw,14px);font-weight:800;margin-bottom:4px}.tv-detail strong{font-size:clamp(16px,1.4vw,26px);line-height:1.25;overflow-wrap:anywhere}.tv-mini-icon{width:clamp(45px,4.5vw,72px);height:clamp(45px,4.5vw,72px);display:grid;place-items:center;flex-shrink:0;background:#f947902b;color:#ff9cc8;border-radius:19px;font-size:28px}.tv-mini-icon.time-icon{background:#7655d030;color:#b5a3fd}.tv-mini-icon.listeners-icon{background:#2b8ba328;color:#7fcdea}.tv-separator{width:1px;height:47px;background:#ffffff20}
.tv-footer{display:flex;justify-content:space-between;gap:18px;align-items:center;font-size:clamp(12px,1vw,17px);color:#868eab;padding-top:20px}.tv-footer-actions{display:flex;gap:16px;align-items:center}.tv-link{border:0;background:transparent;color:#b4b5d4;font-size:inherit;font-weight:700;padding:8px;border-radius:8px}
.tv-dialog{width:min(720px,85vw);max-height:75vh;border:1px solid #9f69b77a;border-radius:25px;background:#1b1c36;color:#fdf3ff;padding:45px;font:clamp(16px,1.4vw,25px)/1.6 system-ui;box-shadow:0 30px 120px #000}.tv-dialog::backdrop{background:#02030bd9}.tv-dialog h2{font-size:1.35em;margin:0 0 20px}.tv-dialog p{color:#c3c5de}.tv-dialog-actions{text-align:right}.tv-dialog button{background:#d74c96;color:white;border:0;border-radius:13px;padding:15px 30px;font:700 18px system-ui}
@keyframes pulse{50%{opacity:.55;box-shadow:0 0 0 12px #ff548e08}}
@media (max-width:900px){.tv-shell{padding:22px 24px}.tv-main{grid-template-columns:1.1fr .9fr}.tv-disc-area{min-height:300px}.tv-spectrum-stage{width:min(36vw,54vh,430px)}.tv-brand small{letter-spacing:1.8px}}
@media (max-height:720px) and (min-width:900px){.tv-shell{padding-top:16px}.tv-main{padding:13px 0}.tv-track-label{margin-top:18px}.tv-controls{margin-top:22px}.tv-disc-area{min-height:330px}.tv-spectrum-stage{width:min(30vw,53vh,410px)}.tv-bottom{padding:13px 22px}.tv-footer{padding-top:12px}}
@media(max-width:700px){.tv-header{gap:12px}.tv-on-air{display:none}.tv-brand small{display:none}.tv-main{grid-template-columns:1fr}.tv-disc-area{display:none}.tv-music h1{font-size:clamp(35px,8vw,64px)}.tv-track-label{margin-top:24px}.tv-bottom{gap:10px}.tv-detail{gap:9px}.tv-detail:nth-of-type(5),.tv-separator{display:none}.tv-detail strong{font-size:14px}.tv-mini-icon{display:none}.tv-footer{display:block}.tv-footer-actions{justify-content:flex-start}.tv-music{padding:24px 0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.tv-spectrum-glow{filter:blur(30px)!important}}

/* MIXIA TV responsive adaptation v4 · preserve readable controls on 720p / 540p / 480p */
.tv-shell{width:100%;min-width:0;overflow:visible}
.tv-main,.tv-music,.tv-disc-area,.tv-bottom,.tv-detail{min-width:0}
.tv-header,.tv-bottom,.tv-footer{flex-shrink:0}
.tv-music h1{overflow-wrap:anywhere}
.tv-spectrum-stage{max-width:100%;max-height:100%;flex:none}
.tv-progress-track{min-width:0}
.tv-bottom{width:100%}
@media (max-height:820px) and (min-width:701px){
 .tv-shell{min-height:100vh;min-height:100dvh;padding:clamp(10px,2vh,19px) clamp(18px,3.4vw,56px) 9px}
 .tv-header{min-height:38px;gap:12px}
 .tv-brand{gap:11px}
 .tv-brand strong{font-size:clamp(22px,2.1vw,34px)}
 .tv-brand small{margin-top:3px;font-size:9px;letter-spacing:1.5px}
 .tv-bars{transform:scale(.79);transform-origin:left center;width:35px}
 .tv-head-right{gap:clamp(12px,2vw,28px)}
 .tv-main{flex:1 1 auto;min-height:0;padding:12px 0;gap:clamp(15px,3vw,38px)}
 .tv-disc-area{min-height:0;align-self:stretch}
 .tv-spectrum-stage{width:min(34vw,57vh,500px)}
 .tv-track-label{margin-top:clamp(12px,3vh,25px);font-size:12px}
 .tv-music h1{font-size:clamp(36px,4.5vw,66px);margin:8px 0;line-height:1.1}
 .tv-artist{font-size:clamp(16px,1.7vw,24px)}
 .tv-progress{margin-top:15px}
 .tv-controls{margin-top:clamp(13px,2.6vh,26px);gap:12px}
 .tv-play{padding:14px 25px;font-size:clamp(14px,1.4vw,19px)}
 .tv-soft{width:55px;height:55px;font-size:23px}
 .tv-message{margin-top:11px;min-height:16px;font-size:13px}
 .tv-bottom{padding:13px 20px}
 .tv-mini-icon{width:46px;height:46px;font-size:21px;border-radius:13px}
 .tv-detail{gap:11px}
 .tv-detail small{font-size:10px;letter-spacing:1px}
 .tv-detail strong{font-size:clamp(13px,1.4vw,20px)}
 .tv-footer{padding-top:10px}
 .tv-footer-actions{gap:8px}
}
@media (max-height:640px) and (min-width:701px){
 .tv-shell{padding:9px clamp(15px,2.8vw,33px) 6px}
 .tv-brand strong{font-size:clamp(18px,2.1vw,28px)}
 .tv-brand small{font-size:8px}
 .tv-header{min-height:30px}
 .tv-on-air{font-size:11px}
 .tv-head-right{gap:14px}
 #tvClock{font-size:19px}
 .tv-lang button{padding:5px 7px;font-size:12px}
 .tv-main{padding:5px 0;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:12px}
 .tv-spectrum-stage{width:min(32vw,54vh,330px)}
 .tv-kicker{font-size:10px;letter-spacing:1px}
 .tv-track-label{font-size:10px;letter-spacing:1.2px;margin-top:11px}
 .tv-music h1{font-size:clamp(28px,3.65vw,46px);margin:5px 0;line-height:1.06;max-width:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .tv-artist{font-size:clamp(14px,1.55vw,19px);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
 .tv-progress{margin-top:10px;gap:10px;font-size:11px}
 .tv-controls{margin-top:12px;gap:9px}
 .tv-play{padding:11px 16px;font-size:13px;border-radius:12px;gap:9px}
 .tv-soft{width:43px;height:43px;font-size:21px;border-radius:12px}
 .tv-message{font-size:11px;line-height:1.3;margin-top:8px;min-height:0}
 .tv-bottom{padding:9px 14px;gap:7px;border-radius:16px}
 .tv-detail{gap:7px}
 .tv-detail small{font-size:9px;letter-spacing:.5px;margin-bottom:1px}
 .tv-detail strong{font-size:clamp(12px,1.35vw,17px)}
 .tv-mini-icon{width:37px;height:37px;font-size:18px;border-radius:10px}
 .tv-separator{height:32px}
 .tv-footer{padding-top:6px;font-size:11px}
 .tv-link{padding:4px 6px}
}
@media (max-height:500px) and (min-width:701px){
 .tv-shell{padding:6px 14px 4px}
 .tv-main{padding:2px 0}
 .tv-spectrum-stage{width:min(30vw,51vh,275px)}
 .tv-track-label{margin-top:5px}
 .tv-music h1{font-size:clamp(23px,3.05vw,37px);margin:3px 0}
 .tv-artist{font-size:13px}
 .tv-progress{margin-top:5px}
 .tv-controls{margin-top:8px}
 .tv-play{padding:9px 13px;font-size:12px}
 .tv-soft{height:37px;width:37px;font-size:19px}
 .tv-message{margin-top:5px;font-size:10px}
 .tv-bottom{padding:7px 10px}
 .tv-mini-icon{width:31px;height:31px;font-size:15px}
 .tv-detail small{font-size:8px}
 .tv-detail strong{font-size:11px}
 .tv-footer{padding-top:4px}
 .tv-footer #tvHint{font-size:10px}
}
@media (max-width:900px) and (min-width:701px){
 .tv-main{grid-template-columns:minmax(0,1.23fr) minmax(0,.77fr)}
 .tv-spectrum-stage{width:min(30vw,51vh,285px)}
 .tv-brand strong{font-size:21px}
 .tv-brand small{letter-spacing:.8px}
 .tv-head-right{gap:12px}
 .tv-bottom{gap:5px}
 .tv-detail{gap:5px}
}
@media (max-width:700px){
 .tv-shell{padding:16px 16px 12px;min-height:100vh;min-height:100dvh;overflow:visible}
 .tv-main{display:flex;flex-direction:column;min-height:0;gap:9px;padding:12px 0}
 .tv-music{padding:8px 0;min-width:0}
 .tv-music h1{max-width:none;font-size:clamp(30px,7vw,52px);line-height:1.08;margin:7px 0}
 .tv-track-label{margin-top:12px}
 .tv-progress{margin-top:14px}
 .tv-controls{margin-top:17px;gap:9px}
 .tv-play{padding:13px 18px;font-size:13px}
 .tv-soft{width:47px;height:47px}
 .tv-disc-area{display:grid;flex:none;min-height:165px}
 .tv-spectrum-stage{width:min(54vw,240px);max-height:none}
 .tv-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:13px 15px}
 .tv-bottom .tv-separator{display:none}
 .tv-detail{min-width:0}
 .tv-detail:nth-of-type(5),.tv-detail.listeners{display:flex;grid-column:1/-1}
 .tv-detail strong{font-size:13px}
 .tv-detail small{font-size:9px}
 .tv-footer{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:11px;padding-top:10px}
 .tv-footer-actions{gap:7px}
 .tv-footer .tv-link{padding:7px}
 .tv-dialog{padding:22px;width:min(590px,95vw)}
}
@media (max-width:700px) and (orientation:landscape){
 .tv-shell{padding:7px 12px 5px}
 .tv-header{gap:8px}
 .tv-brand{gap:5px}
 .tv-brand strong{font-size:18px;letter-spacing:-.7px}
 .tv-bars{transform:scale(.65);transform-origin:left center;width:27px}
 .tv-head-right{gap:8px}
 #tvClock{font-size:15px}
 .tv-lang{padding:2px}
 .tv-lang button{padding:4px 5px;font-size:11px}
 .tv-main{display:grid;grid-template-columns:minmax(0,1.21fr) minmax(0,.79fr);gap:8px;padding:4px 0;flex:1 1 auto;align-items:center}
 .tv-music{padding:0}
 .tv-kicker{font-size:9px;letter-spacing:.6px}
 .tv-kicker-line{width:19px}
 .tv-track-label{font-size:9px;letter-spacing:1px;margin-top:7px}
 .tv-music h1{font-size:clamp(22px,4.1vw,34px);line-height:1.05;margin:4px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .tv-artist{font-size:12px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
 .tv-progress{margin-top:7px;font-size:10px;gap:7px}
 .tv-controls{margin-top:8px;gap:6px}
 .tv-play{padding:9px 12px;font-size:11px;border-radius:10px;gap:7px}
 .play-icon{font-size:17px}
 .tv-soft{width:34px;height:34px;font-size:17px;border-radius:9px}
 .tv-message{margin-top:6px;min-height:0;font-size:10px}
 .tv-disc-area{display:grid;min-height:0;height:100%;align-self:stretch}
 .tv-spectrum-stage{width:min(30vw,53vh,210px);max-height:100%}
 .tv-bottom{display:flex;align-items:center;gap:6px;border-radius:13px;padding:8px 10px}
 .tv-detail:nth-of-type(5),.tv-detail.listeners{display:flex;grid-column:auto}
 .tv-detail strong{font-size:10px}
 .tv-detail small{font-size:8px;letter-spacing:0;margin-bottom:1px}
 .tv-footer{display:flex;flex-wrap:nowrap;justify-content:space-between;font-size:9px;padding-top:4px}
 .tv-footer-actions{flex-shrink:0}
 .tv-footer .tv-link{padding:3px 5px}
}
@media (max-height:420px) and (orientation:landscape){
 .tv-shell{padding-top:4px;padding-bottom:3px}
 .tv-kicker,.tv-track-label,.tv-message{display:none}
 .tv-progress{margin-top:5px}
 .tv-controls{margin-top:7px}
 .tv-bottom{padding:5px 8px}
 .tv-footer #tvHint{display:none}
}

/* TV rhythm and controls adjustment v5: spectrum hugs the centered icon.
   Separate playback controls from both the progress bar and bottom status. */
.tv-controls{margin-top:clamp(24px,4vh,42px)}
.tv-bottom{margin-top:clamp(17px,2.6vh,32px)}
.tv-spectrum-icon{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 34px rgba(225,73,185,.20)}
@media (max-height:820px) and (min-width:701px){
 .tv-controls{margin-top:clamp(21px,3.25vh,29px)}
 .tv-bottom{margin-top:clamp(13px,2.2vh,22px)}
}
@media (max-height:640px) and (min-width:701px){
 .tv-controls{margin-top:clamp(17px,3vh,22px)}
 .tv-bottom{margin-top:10px}
}
@media (max-height:500px) and (min-width:701px){
 .tv-controls{margin-top:12px}
 .tv-bottom{margin-top:7px}
}
@media (max-width:700px){
 .tv-controls{margin-top:21px}
 .tv-bottom{margin-top:16px}
}
@media (max-width:700px) and (orientation:landscape){
 .tv-controls{margin-top:15px}
 .tv-bottom{margin-top:9px}
}
@media (max-height:420px) and (orientation:landscape){
 .tv-controls{margin-top:11px}
 .tv-bottom{margin-top:6px}
}

/* MIXIA TV overscan-safe viewport v6.
   A consistent four-sided safe zone prevents physical TVs from clipping UI.
   Sizes scale down for 480p/540p while preserving an actual viewable border. */
.tv-shell{
  box-sizing:border-box;
  width:100%;
  max-width:2400px;
  min-height:100vh;
  min-height:100dvh;
  padding:clamp(24px,4.5vh,68px) clamp(38px,5.2vw,132px);
  overflow:visible;
}
.tv-header,.tv-main,.tv-bottom,.tv-footer{max-width:100%;min-width:0}
.tv-header,.tv-footer{flex-shrink:0}
.tv-main{min-height:0}
.tv-disc-area{min-height:0;max-width:100%;overflow:visible}
.tv-spectrum-stage{max-width:100%;max-height:100%;width:min(33vw,51vh,620px)}
.tv-spectrum-icon{max-width:45%;height:auto}
.tv-music h1{overflow-wrap:anywhere}
.tv-controls{flex-wrap:wrap}
.tv-bottom{flex-shrink:0;margin-top:clamp(12px,2vh,24px)}
.tv-footer{min-height:0}
@media (max-height:820px) and (min-width:701px){
  .tv-shell{padding:clamp(19px,4.5vh,42px) clamp(34px,5.2vw,115px)}
  .tv-main{padding-block:clamp(7px,1.6vh,18px)}
  .tv-spectrum-stage{width:min(29vw,49vh,490px)}
  .tv-bottom{margin-top:clamp(9px,1.6vh,15px)}
  .tv-footer{padding-top:clamp(5px,.9vh,11px)}
}
@media (max-height:640px) and (min-width:701px){
  .tv-shell{padding:clamp(16px,4.5vh,28px) clamp(30px,5.2vw,80px)}
  .tv-main{padding-block:clamp(2px,.65vh,6px)}
  .tv-spectrum-stage{width:min(27vw,47vh,340px)}
  .tv-bottom{margin-top:clamp(7px,1.5vh,11px)}
  .tv-footer{padding-top:5px}
}
@media (max-height:500px) and (min-width:701px){
  .tv-shell{padding:clamp(14px,4.2vh,23px) clamp(27px,5.2vw,62px)}
  .tv-main{padding-block:2px}
  .tv-spectrum-stage{width:min(26vw,44vh,280px)}
  .tv-track-label{margin-top:3px}
  .tv-music h1{font-size:clamp(22px,2.9vw,36px);line-height:1.03}
  .tv-controls{margin-top:9px}
  .tv-bottom{margin-top:7px}
  .tv-footer{padding-top:4px}
}
@media (max-width:900px) and (min-width:701px){
  .tv-main{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
  .tv-spectrum-stage{width:min(26vw,46vh,300px)}
  .tv-detail strong{overflow-wrap:anywhere}
}
@media (max-width:700px){
  .tv-shell{padding:clamp(17px,4.5vh,32px) clamp(22px,5.2vw,38px)}
  .tv-main{padding-block:clamp(6px,1.8vh,16px)}
  .tv-spectrum-stage{width:min(48vw,27vh,230px)}
  .tv-bottom{margin-top:12px}
  .tv-footer{padding-top:10px}
}
@media (max-width:700px) and (orientation:landscape){
  .tv-shell{padding:clamp(13px,4vh,24px) clamp(25px,5.2vw,45px)}
  .tv-main{padding-block:2px;gap:7px}
  .tv-spectrum-stage{width:min(25vw,43vh,190px)}
  .tv-bottom{margin-top:6px}
  .tv-footer{padding-top:4px}
}
@media (max-height:420px) and (orientation:landscape){
  .tv-shell{padding:clamp(12px,3.5vh,19px) clamp(26px,5vw,60px)}
  .tv-main{padding-block:1px}
  .tv-spectrum-stage{width:min(23vw,42vh,170px)}
  .tv-controls{margin-top:8px}
  .tv-bottom{margin-top:4px}
  .tv-footer{padding-top:2px}
}