html,body,#root{width:100%;height:100%;margin:0}body{background:#000;overflow:hidden}.player-shell{width:100vw;height:100vh;position:relative;overflow:hidden}.tv-set{position:absolute;inset:0;container:tv-set/size}.screen-area{border-radius:8%/10%;width:61.15%;height:72.43%;position:absolute;top:10%;left:13.24%;overflow:hidden;container:tv-screen/inline-size}.player-viewport{background:#000;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.tv-overlay{pointer-events:none;z-index:99;width:100%;height:100%;position:absolute;top:0;left:0}.mtv-logo{z-index:60;opacity:.7;pointer-events:none;width:5.4%;height:auto;position:absolute;top:5%;right:3.4%}.old-tv-effect{pointer-events:none;z-index:50;opacity:.75;mix-blend-mode:screen;background:radial-gradient(circle,#0000 35%,#0000005c 100%),repeating-linear-gradient(#ffffff0f 0 1px,#0000 2px 4px);animation:.16s steps(2,end) infinite old-tv-flicker;position:absolute;inset:0}.old-tv-effect:before{content:"";opacity:.16;background:linear-gradient(#fff0 0%,#fff3 48%,#fff0 100%);animation:6s linear infinite old-tv-sweep;position:absolute;inset:0}@keyframes old-tv-flicker{0%{opacity:.68}50%{opacity:.78}to{opacity:.72}}@keyframes old-tv-sweep{0%{transform:translateY(-100%)}to{transform:translateY(100%)}}.playback-controls{z-index:100;flex-direction:column;align-items:stretch;gap:.8cqmin;width:19.8cqmin;display:flex;position:absolute;top:12.5%;right:6.4%}.playback-control{box-sizing:border-box;color:#000;letter-spacing:.06em;text-transform:uppercase;text-align:center;cursor:pointer;background:#f2e9dd;border:.08cqmin solid #000;width:100%;padding:.7cqmin 1.1cqmin;font-size:1.2cqmin;font-weight:700}.player-start-mask{opacity:1;pointer-events:none;z-index:2;background:#000;border-radius:8%/10%;transition:opacity .35s;position:absolute;inset:0}.player-start-mask.is-hidden{opacity:0}.track-overlay{box-sizing:border-box;pointer-events:none;z-index:40;opacity:0;align-items:flex-end;padding:0 10% 10%;font-family:Arial;transition:opacity .35s;display:flex;position:absolute;inset:0}.track-overlay.is-visible{opacity:.9}.track-overlay-card{color:#fff;background:#00000080 url(/mtv.png) 100%/auto 90% no-repeat;width:100%}.track-overlay-artist{text-transform:uppercase;margin:4px;padding-right:150px;font-size:clamp(12px,1.7vw,24px);font-weight:700}.track-overlay-title{margin:4px;padding-right:150px;font-size:clamp(10px,1.3vw,20px)}@container tv-screen (width>=0){.track-overlay-card{margin:clamp(8px,2.2cqw,22px);padding:clamp(6px,1.5cqw,16px)}.track-overlay-artist{margin:0 0 clamp(2px,.8cqw,10px);font-size:clamp(12px,3.2cqw,38px)}.track-overlay-title{margin:0;font-size:clamp(10px,2.4cqw,30px)}}.welcome-screen{z-index:80;color:#fff;letter-spacing:.03em;pointer-events:none;opacity:.9;background:#000000bf;border:0;border-radius:20px;font-size:clamp(10px,1.7vw,18px);font-weight:700;line-height:2em;position:absolute;top:10%;left:50%;transform:translate(-50%)}@container tv-screen (width>=0){.welcome-screen{padding:clamp(6px,1cqw,14px) clamp(10px,1.6cqw,20px);font-size:clamp(10px,1.8cqw,20px)}}.player-frame{aspect-ratio:4/3;pointer-events:none;z-index:1;background:#000;border:0;width:100%;max-height:100%;display:block}