@import "https://fonts.googleapis.com/css2?family=Mitr:wght@400;600&family=Sarabun:wght@300;400&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{touch-action:none;background:#000;overflow:hidden}.root{background:radial-gradient(circle at 50% 40%,#1c0028 0%,#0b0016 55%,#000 100%);position:fixed;inset:0}.canvas{cursor:grab;background:0 0;display:block;position:absolute;inset:0}.canvas:active{cursor:grabbing}.overlay{z-index:10;pointer-events:none;flex-direction:column;align-items:center;gap:4px;padding-top:36px;display:flex;position:absolute;top:0;left:0;right:0}.sub{letter-spacing:.18em;color:#d580ffaa;font-family:Sarabun,sans-serif;font-size:12px;font-weight:300;animation:1s both fd}.name{background:linear-gradient(135deg,#ffb3e6,#e080ff,#a855f7);color:#0000;filter:drop-shadow(0 0 14px #c4fa);letter-spacing:.04em;-webkit-background-clip:text;background-clip:text;font-family:Mitr,sans-serif;font-size:clamp(28px,8vw,54px);font-weight:600;animation:1s .2s both fd}@keyframes fd{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.now-playing{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:20;background:#1c002899;border:1px solid #e080ff4d;border-radius:50px;align-items:center;gap:12px;width:max-content;max-width:80%;padding:10px 24px;animation:.8s forwards slideUpFade;display:flex;position:absolute;bottom:40px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #00000080,0 0 10px #a855f733}.title-wrapper{white-space:nowrap;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0%,#000 5% 95%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0%,#000 5% 95%,#0000 100%)}.song-title{color:#f1d4ff;letter-spacing:.05em;font-family:Sarabun,sans-serif;font-size:13px;font-weight:400;display:inline-block}@media (width<=600px){.now-playing{width:90%;max-width:350px}.song-title{padding-right:20px;animation:8s ease-in-out infinite alternate scrollText}}@keyframes scrollText{0%,15%{transform:translate(0)}85%,to{transform:translate(min(0px,200px - 100%))}}.visualizer{align-items:flex-end;gap:3px;height:16px;display:flex}.bar{background:#e080ff;border-radius:2px;width:4px;animation:.5s ease-in-out infinite alternate bounce;box-shadow:0 0 5px #e080ff}.bar:first-child{height:30%;animation-delay:0s}.bar:nth-child(2){height:60%;animation-delay:.2s}.bar:nth-child(3){height:100%;animation-delay:.4s}.bar:nth-child(4){height:50%;animation-delay:.1s}.bar:nth-child(5){height:80%;animation-delay:.3s}@keyframes bounce{0%{transform:scaleY(.3)}to{transform:scaleY(1)}}@keyframes slideUpFade{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.hint{color:#ffb3e6;margin-top:24px;font-family:Sarabun,sans-serif;font-size:20px;animation:1.5s infinite pulse}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.yt-input{color:#fff;text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1c002880;border:1px solid #e080ff66;border-radius:30px;outline:none;width:90%;max-width:320px;padding:12px 24px;font-family:Sarabun,Mitr,sans-serif;font-size:15px;transition:all .3s;box-shadow:0 4px 15px #0000004d}.yt-input::placeholder{color:#fff9;font-weight:300}.yt-input:focus{background:#1c0028cc;border-color:#ff6b9d;box-shadow:0 0 15px #ff6b9d66}