nav{position:fixed;top:0;width:100%;padding:1.2rem 8% 1.2rem 12%;display:flex;justify-content:space-between;align-items:center;background:var(--bg-navbar);backdrop-filter:blur(10px);z-index:1000;border-bottom:1px solid var(--border-color);box-shadow:0 4px 20px var(--shadow);transition:background .3s ease,border-color .3s ease}.music-player{display:flex;align-items:center;gap:12px;margin-left:auto;margin-right:4%}.volume-control{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bg-card);border:0;border-radius:20px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .5s ease;position:relative}.volume-control:hover{background:var(--bg-card-hover);box-shadow:0 0 40px rgba(0,150,255,1);transform:translateY(-5px)}.volume-control::before{content:'';position:absolute;inset:0;border-radius:20px;padding:2px;background:linear-gradient(90deg,transparent,transparent);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;transition:all .5s ease}.volume-control:hover::before{background:linear-gradient(90deg,#30ddff,#001aff,#001aff,#30ddff);background-size:200%;animation:borderGradient 2s linear infinite}.volume-icon{width:18px;height:18px;color:var(--text-secondary);flex-shrink:0;transition:all .5s ease}.volume-control:hover .volume-icon{background:linear-gradient(90deg,#30ddff,#001aff,#001aff,#30ddff);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 10px rgba(0,150,255,1));animation:cardTitleGradient 2s linear infinite}.volume-slider{width:80px;height:4px;-webkit-appearance:none;appearance:none;background:transparent;border-radius:2px;cursor:pointer;transition:all .3s ease}.volume-slider::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,#30ddff,#001aff) 0/var(--volume-percent,50%) 100% no-repeat,rgba(255,255,255,0.2);box-shadow:0 0 8px rgba(0,150,255,0.5)}.volume-slider:hover::-webkit-slider-runnable-track{box-shadow:0 0 15px rgba(0,150,255,1)}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(90deg,#30ddff,#001aff);cursor:pointer;box-shadow:0 0 10px rgba(0,150,255,1);transition:all .3s ease;margin-top:-5px}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.3);box-shadow:0 0 20px rgba(0,150,255,1)}.volume-slider::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,0.2)}.volume-slider::-moz-range-progress{height:4px;border-radius:2px;background:linear-gradient(90deg,#30ddff,#001aff);box-shadow:0 0 8px rgba(0,150,255,0.5)}.volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:linear-gradient(90deg,#30ddff,#001aff);cursor:pointer;border:0;box-shadow:0 0 10px rgba(0,150,255,1)}.music-btn{width:40px;height:40px;border-radius:50%;border:0;background:var(--bg-card);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .5s ease;position:relative}.music-btn:hover{background:var(--bg-card-hover);color:white;box-shadow:0 0 40px rgba(0,150,255,1);transform:translateY(-5px)}.music-btn::before{content:'';position:absolute;inset:0;border-radius:50%;padding:2px;background:linear-gradient(90deg,transparent,transparent);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;transition:all .5s ease}.music-btn:hover::before{background:linear-gradient(90deg,#30ddff,#001aff,#001aff,#30ddff);background-size:200%;animation:borderGradient 2s linear infinite}.music-btn:hover .music-icon{filter:drop-shadow(0 0 10px rgba(0,150,255,1))}.music-icon{width:20px;height:20px;transition:all .5s ease}@keyframes borderGradient{0%{background-position:0 0}100%{background-position:200%}}@keyframes cardTitleGradient{0%{background-position:0 0}100%{background-position:200% 0}}@media(max-width:768px){.volume-control{padding:4px 8px}.volume-slider{width:50px}.volume-icon{width:16px;height:16px}}.nav-links{display:flex;gap:2rem;list-style:none}.nav-links a{color:var(--text-secondary);text-decoration:none;font-weight:500;transition:all .3s ease;position:relative}.nav-links a.active{background:linear-gradient(90deg,#30ddff,#001aff,#001aff,#30ddff);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 20px rgba(0,123,255,1);animation:textGradient 2s ease-in-out infinite}.nav-links a:hover{background:linear-gradient(90deg,#30ddff,#001aff,#001aff,#30ddff)!important;background-size:200%!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important;text-shadow:0 0 10px rgba(132,191,255,1)!important;animation:hoverGradient 2s ease-in-out infinite!important}
@keyframes hoverGradient{0%{background-position:0 0}100%{background-position:200%}}@keyframes textGradient{0%{background-position:0 0}100%{background-position:200%}}@keyframes titleGradient{0%{background-position:0 0}100%{background-position:200% 0}}.nav-links a::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;background:linear-gradient(90deg,#30ddff,#001aff,#001aff,#30ddff);background-size:200%;box-shadow:0 0 8px rgba(132,191,255,0.6);transition:width .3s ease}.nav-links a.active::after{background:linear-gradient(90deg,#52a6ff,#0048ff,#0048ff,#52a6ff);background-size:200%}.nav-links a:hover::after{background:linear-gradient(90deg,#30ddff,#001aff,#001aff,#30ddff)!important;background-size:200%!important;animation:lineGradient 2s ease-in-out infinite!important}.nav-links a:hover::after,.nav-links a.active::after{width:100%;animation:lineGradient 2s ease-in-out infinite}@keyframes lineGradient{0%{background-position:0 0}100%{background-position:200%}}@media(max-width:768px){.nav-links{display:none}}