:root{--a1:190,60,255;--a2:155,40,235;--a3:125,20,205;--a4:100,10,180;--a5:80,0,160;--at:210,175,255;--as:200,155,255;--ab:160,80,255;--ah:185,100,255;--bg:18,4,32}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#000}canvas#bg{position:fixed;top:0;left:0;width:100vw;height:100vh;filter:blur(2px) brightness(.75);z-index:0}.vig{position:fixed;inset:0;background:radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,.88) 100%);z-index:1;pointer-events:none}.wrap{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;pointer-events:none}.title{font-family:Outfit,-apple-system,system-ui,sans-serif;font-weight:800;font-size:clamp(2.4rem,8vw,7rem);color:#fff;text-align:center;letter-spacing:.03em;line-height:1.1;user-select:none;padding:0 1rem;white-space:nowrap;overflow:hidden;max-width:calc(100vw - 2rem);display:inline-block;transform-origin:center center;will-change:transform,filter;text-shadow:0 0 2px rgba(255,255,255,.09);filter:drop-shadow(0 0 6px rgba(var(--a1),.72)) drop-shadow(0 0 14px rgba(var(--a2),.34)) drop-shadow(0 0 28px rgba(var(--a3),.18));animation:glow 4s ease-in-out infinite alternate,arriveDown 1.1s cubic-bezier(.22,1,.36,1) both}.title .char{display:inline-block;white-space:pre;min-width:.55ch}.title .char.trailing-pad{min-width:0;width:0;overflow:hidden;padding:0;margin:0}.sub{font-family:Outfit,Hiragino Kaku Gothic Pro,Yu Gothic,Meiryo,sans-serif;font-weight:200;font-size:clamp(.82rem,2.4vw,1.45rem);color:rgba(var(--as),.5);margin-top:.65rem;text-shadow:0 0 12px rgba(var(--ab),.32),0 0 35px rgba(var(--a3),.14);animation:arriveUp 1.4s cubic-bezier(.22,1,.36,1) .25s both;letter-spacing:.22em;user-select:none}.socials{display:flex;gap:1.15rem;margin-top:2.8rem;pointer-events:all;animation:arriveUp 1.7s cubic-bezier(.22,1,.36,1) .5s both}.sb{position:relative;width:46px;height:46px;border-radius:50%;background:rgba(var(--a3),.06);border:1px solid rgba(var(--a2),.14);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .45s cubic-bezier(.22,1,.36,1);text-decoration:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.sb:before{content:"";position:absolute;inset:-3px;border-radius:50%;background:radial-gradient(circle,rgba(var(--ab),.25),transparent 70%);opacity:0;transition:opacity .4s ease;z-index:-1}.sb:hover{background:rgba(var(--ab),.22);border-color:rgba(var(--ah),.72);box-shadow:0 0 22px rgba(var(--ab),.45),0 0 48px rgba(var(--a3),.22),inset 0 0 10px rgba(var(--ah),.07);transform:translateY(-4px) scale(1.14)}.sb:hover:before{opacity:1}.sb:active{transform:translateY(-1px) scale(1.04);transition-duration:.12s}.sb svg{width:18px;height:18px;fill:rgba(var(--at),.62);transition:fill .3s ease}.sb:hover svg{fill:#fff}.player{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);z-index:20;display:flex;align-items:center;gap:.85rem;background:rgba(var(--bg),.55);border:1px solid rgba(var(--a2),.12);border-radius:60px;padding:.5rem .55rem;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);animation:playerIn 2s cubic-bezier(.22,1,.36,1) .7s both;pointer-events:all}.play-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(var(--a2),.25);background:rgba(var(--a3),.1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .4s cubic-bezier(.22,1,.36,1);flex-shrink:0;position:relative;outline:none}.play-btn:before{content:"";position:absolute;inset:-3px;border-radius:50%;background:radial-gradient(circle,rgba(var(--ab),.2),transparent 70%);opacity:0;transition:opacity .4s ease}.play-btn:hover{background:rgba(var(--ab),.25);border-color:rgba(var(--ah),.72);box-shadow:0 0 18px rgba(var(--ab),.4),0 0 40px rgba(var(--a3),.18);transform:scale(1.12)}.play-btn:hover:before{opacity:1}.play-btn:active{transform:scale(1.02);transition-duration:.1s}.play-btn svg{width:16px;height:16px;fill:rgba(var(--at),.7);transition:fill .3s ease}.play-btn:hover svg{fill:#fff}.play-btn .icon-pause,.play-btn.playing .icon-play{display:none}.play-btn.playing .icon-pause{display:block}.player-info{display:flex;flex-direction:column;gap:.08rem;padding-right:.7rem;min-width:0}.song-name{font-family:Outfit,sans-serif;font-weight:400;font-size:.78rem;color:rgba(var(--at),.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.song-artist{font-family:Outfit,sans-serif;font-weight:200;font-size:.62rem;color:rgba(var(--as),.42);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.eq-bars{display:flex;align-items:flex-end;gap:2px;height:16px;padding-right:.3rem;flex-shrink:0}.eq-bars span{display:block;width:2.5px;border-radius:2px;background:rgba(var(--ab),.45);transition:background .3s}.eq-bars.active span{background:rgba(var(--ab),.75);animation:eqBounce .6s ease-in-out infinite alternate}.eq-bars span:nth-child(1){height:4px;animation-delay:0s}.eq-bars span:nth-child(2){height:9px;animation-delay:.15s}.eq-bars span:nth-child(3){height:6px;animation-delay:.08s}.eq-bars span:nth-child(4){height:12px;animation-delay:.22s}.eq-bars span:nth-child(5){height:5px;animation-delay:.05s}.color-picker{position:fixed;top:1.4rem;right:1.4rem;z-index:20;display:flex;align-items:center;gap:.55rem;background:rgba(var(--bg),.5);border:1px solid rgba(var(--a2),.12);border-radius:40px;padding:.45rem .65rem;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);animation:pickerIn 2.2s cubic-bezier(.22,1,.36,1) .9s both;pointer-events:all}.color-picker .label{font-family:Outfit,sans-serif;font-weight:200;font-size:.6rem;color:rgba(var(--as),.38);letter-spacing:.08em;text-transform:uppercase;margin-right:.15rem;user-select:none}.cdot{width:18px;height:18px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .35s cubic-bezier(.22,1,.36,1);position:relative;outline:none;flex-shrink:0}.cdot:after{content:"";position:absolute;inset:2px;border-radius:50%;background:inherit}.cdot:hover{transform:scale(1.25)}.cdot.active{border-color:#ffffffb3;box-shadow:0 0 12px var(--dot-glow);transform:scale(1.15)}.cdot.active:hover{transform:scale(1.3)}.cdot[data-scheme=purple]{background:#9b28eb;--dot-glow:rgba(155,40,235,.6)}.cdot[data-scheme=blue]{background:#22d3ee;--dot-glow:rgba(34,211,238,.6)}.cdot[data-scheme=red]{background:#f43f5e;--dot-glow:rgba(244,63,94,.6)}.cdot[data-scheme=green]{background:#34d399;--dot-glow:rgba(52,211,153,.6)}.cdot[data-scheme=yellow]{background:#f59e0b;--dot-glow:rgba(245,158,11,.6)}@keyframes eqBounce{0%{transform:scaleY(.35)}to{transform:scaleY(1.2)}}@keyframes playerIn{0%{opacity:0;transform:translate(-50%) translateY(30px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes pickerIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes arriveDown{0%{opacity:0;transform:translateY(-38px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes arriveUp{0%{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}@keyframes glow{0%{filter:drop-shadow(0 0 5px rgba(var(--a1),.62)) drop-shadow(0 0 12px rgba(var(--a2),.28)) drop-shadow(0 0 22px rgba(var(--a3),.12))}to{filter:drop-shadow(0 0 8px rgba(var(--a1),.88)) drop-shadow(0 0 18px rgba(var(--a2),.4)) drop-shadow(0 0 34px rgba(var(--a3),.16))}}@media(max-width:480px){.color-picker .label{display:none}.color-picker{padding:.4rem .5rem;gap:.45rem;top:1rem;right:1rem}.cdot{width:16px;height:16px}}