@font-face{font-family:medeo;src:url('assets/medeo-mono.ttf')}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#000;color:#fff}main{height:100%;height:100dvh;position:relative}h1{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;white-space:nowrap;font:400 clamp(23px,2vw,38px) medeo,monospace;letter-spacing:.02em}.music{position:absolute;top:10%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;font:24px/1.3 Arial,sans-serif}.music[hidden]{display:none}.cover{width:68px;height:68px;flex:none;position:relative}.cover img{width:100%;height:100%;object-fit:cover;border-radius:11px}.cover:after{content:'';position:absolute;inset:0;background:#0004;border-radius:11px}.bars{position:absolute;z-index:1;inset:0;display:flex;align-items:center;justify-content:center;gap:3px}.bars i{width:3px;height:12px;background:white;border-radius:2px;animation:pulse .8s ease-in-out infinite alternate}.bars i:nth-child(2){height:22px;animation-delay:-.4s}.bars i:nth-child(3){height:16px;animation-delay:-.2s}.bars i:nth-child(4){height:9px;animation-delay:-.6s}.music.paused .bars i{animation-play-state:paused}.details{display:flex;flex-direction:column;white-space:nowrap}.details span:last-child{color:#888}@keyframes pulse{to{transform:scaleY(.45)}}@media(max-width:600px){.music{top:8%;gap:10px;font-size:17px}.cover{width:48px;height:48px;border-radius:8px}h1{font-size:clamp(22px,6vw,30px)}}@media(prefers-reduced-motion:reduce){.bars i{animation:none}}
.pause-icon{display:none;position:absolute;z-index:2;left:25%;top:25%;width:50%;height:50%}.music.paused .pause-icon{display:block}.music.paused .bars{display:none}