body{margin:0;overflow:hidden}audioplayer{width:100%;max-width:640px;height:fit-content;background:#4d4d4d;display:block;padding-top:3px;box-sizing:border-box}

#top{width: 100%;background:linear-gradient(to top,#555,#666,#aaa);height: 35px;border-radius:9px 9px 0 0;border-bottom:solid 1px #333;box-shadow: 0 1px #666}
.topcontrols{background:linear-gradient(150deg,#aaa,#555 40%,#222);border:solid 1px #444;outline:none;color:#ddd;height:31px;cursor:pointer}
#top .controls{padding-top:2px;padding-inline:4px;user-select:none}.topcontrols:hover{filter:brightness(1.1)}.topcontrols:active{filter:contrast(1.3);transform:translateY(1px);border-bottom:solid 1px #555}
#B_pp{width:31px;border-radius: 50%;}#B_pt,#B_nt,#B_rp{width:20px;margin-inline:1px;text-align:center;display:inline;padding:0;height:20px;margin-top:5px}
#U_eqp{width:75px;height:24px;background: #000;border:inset 2px #555;margin-top:2px;margin-right:1px;border-radius:0 8px 0 0;color:white;position: relative;}
  #P_eqp{background:black;color:white;rotate:-90deg;display:flex;flex-direction:column;width:24px;position: absolute;transform-origin:top left;margin-left:7px;margin-top:24px;font-family:catv;font-size:8px;position:relative}
  #P_eqp::after{background:url(bars.png);content:"";position:absolute;height:100%;top:0;left:0;width:100%;mix-blend-mode:color-burn;}
  #P_eqp span{display:inline-block;white-space:pre;margin-top:-3px;}
#U_tcl{width:calc(100% - 184px);display:flex;flex-direction:column;margin-top:2px;justify-content: space-between;height:27px}
#U_tcb{border-radius:50px;background:#222;width:100%;height:6px;}#tcb_c{border-radius:50px 0 0 50px;background:linear-gradient(to top,#ddd,#ccc);width:1%;height:100%}.slider_hand{background:linear-gradient(#aaa,#fff, #ddd);width:4px;height:9px;border:outset 1px #888;border-right:0;border-top:0;position:relative;margin-top:-8px;margin-left:-2px;cursor:pointer}.slider_hand:hover{outline:solid 1px #bbb}
.controls button{position:relative;overflow:hidden}
#U_eqp::after{background:url("LCD-normal.png")0/12px;content:"";position:absolute;height:100%;top:0;left:0;width:100%;mix-blend-mode:screen;opacity:.2}

.sunkcontrols{background:linear-gradient(150deg,#111,#000 40%,#222);border:inset 1px #666;outline:none;color:aqua;height:31px;cursor:pointer}.sunkcontrols:hover{filter:brightness(1.1)}.sunkcontrols:active{filter:contrast(1.3)}

.controls{display:flex;flex-direction:row;justify-content:space-between;position:relative}
.box{height:13px;background:linear-gradient(#111, #222);border:inset 2px #444;font-family:"Erbos Draco";color:aqua;text-shadow:0 0 3px #0ff5;font-size:9px;display:flex;justify-content:space-between;padding-inline:5vw;overflow:hidden;position:relative}
@font-face{font-family:'Erbos Draco';src:url('Erbos-Draco-Open-NBP.woff2')format('woff2')}
@font-face {font-family:'catv';src:url('CatV_6x12_9.woff2')format('woff2')}

#mid{margin:5px;}
.tracklist{height:96px;display:block;overflow-y:scroll;scrollbar-color:#666 #333;padding-right:6px;padding-left:16.6px;user-select:none;font-family:catv;font-size:12px;line-height:1;}
.track{outline:solid 1px #0000;transition:steps(5) 64ms;background:#333;display:flex;justify-content:space-between;letter-spacing:-.42px;border-bottom:solid 1px #444;margin-top:2px;margin-bottom:2px;border-radius:3px;padding:0 2px;cursor:pointer}
.track span:first-of-type{width:calc(100% - 55px);overflow:hidden;text-overflow:ellipsis;display:inline;text-wrap:nowrap;padding-left:3px}
.track span:last-of-type{color:#aaa}
.track img{position:absolute;left:2px}
.track:hover{outline:solid 1px #666}
.track a{color:cyan;letter-spacing:-.3px;font-size:11px;background:#0006;height:100%;padding-top:1px;display:inline-block;text-decoration:none}.track a:hover{text-decoration:underline}
.track sub{height:100%;display:inline-block;letter-spacing:-.3px;color:gray;text-shadow:0 0 0;line-height:1px;transform:translateY(-2px)}.track sub::before{content:"("}.track sub::after{content:")"}

#bottom{width:100%;height: 20px;background:linear-gradient(to bottom,#555,#666);border-top:solid 1px #666}
#ftrack{width:50%;padding:0 3px;letter-spacing:-.9px;border-radius:0 0 20vw 0}
#U_volp{width:75px;height:10px;position:relative;margin:none;margin-top:5px;margin-right:-24px}
#U_volc{background:linear-gradient(to top,#ddd,#999);height:14px;position:absolute}
#U_volt{position:absolute;width:4px;height:12px;margin-top:-1px;z-index:2}
#U_volc_wrap {position:absolute;background: #222;height:100%;overflow:hidden;width:100%;/*clip-path:polygon(0 100%, 100% 100%, 100% 0)*/}
#U_volp img{position:absolute;margin-left:-16px;margin-top:-1px;user-select:none;pointer-events:none}
#lstyle{user-select:none}

           .box::before{position:fixed;content:"";width:calc(100% - 12px);top:44px;left:5px;background:url("hgdfghfg.webp");mix-blend-mode:overlay;opacity:.25;pointer-events: none;height:calc(100% - 72px)}
       .controls::after{position:absolute;content:"";width:100vw;height:100%;top:0;left:-3px;background:url("metal2.webp");mix-blend-mode:overlay;opacity:.5;pointer-events:none}
.controls button::after{position:absolute;content:"";width:100%;height:100%;top:0;left:0;background:url("carbon.gif");mix-blend-mode:overlay;opacity:.1;pointer-events:none}

@media (max-width:340px){#U_tcl{width:calc(100% - 162px)}#U_eqp{width:60px}.track span:first-of-type{width:calc(100% - 50px)}.track span:last-of-type{font-size:8px;margin-top:1px}}

#U_tcl.artroom{width:calc(100% - 220px)!important}#U_tcl.artroom .box{font-size:8px!important;padding-inline:6px}
#artspot{width:31px;height:30px;display:none;outline:inset 1px gray}#artimg{object-fit:contain}

sc{display:block}
.ICONS16{background-image:url(16x_mc.webp);background-repeat:no-repeat;background-size:auto;width:17px;height:16px;}