:root{--bg-color:#F8F9FA;--text-color:#2C3E50;--grid-line:rgba(52, 73, 94, 0.08);--text-shadow:hsla(0, 0%, 100%, .7);--card-bg:rgba(255, 255, 255, 0.95);--border-color:#A8D5BA;--accent-color:#27AE60;--link-color:#3498DB;--link-hover:#2980B9;--button-bg:linear-gradient(135deg, #34495E, #2C3E50);--button-hover:linear-gradient(135deg, #2C3E50, #34495E);--footer-color:#2980B9;--hover-bg:rgba(168, 213, 186, 0.15);--shadow-color:rgba(39, 174, 96, 0.25);--shine-bg:rgba(168, 213, 186, 0.2);--glow-color:rgba(39, 174, 96, 0.5);--premium-shadow:rgba(39, 174, 96, 0.15);--premium-glow:rgba(39, 174, 96, 0.1);--premium-border:rgba(168, 213, 186, 0.3);--bg-logo-opacity:0.3;--player-bg:linear-gradient(135deg, var(--card-bg), rgba(255,255,255,0.1));--player-text:var(--text-color);--player-accent:var(--link-color);--player-progress:var(--border-color);--player-glow:rgba(168, 213, 186, 0.2);--player-shine:rgba(255, 255, 255, 0.15);--footer-bg:linear-gradient(135deg, var(--card-bg), rgba(255,255,255,0.6));--footer-border:var(--border-color);--caret-color:var(--accent-color)}:root.dark-mode{--bg-color:#121212;--text-color:#E8E8E8;--grid-line:rgba(255,255,255,0.06);--text-shadow:hsla(0, 0%, 0%, .7);--card-bg:rgba(30, 30, 30, 0.95);--border-color:#4A90E2;--accent-color:#4CAF50;--link-color:#81D4FA;--link-hover:#4FC3F7;--button-bg:linear-gradient(135deg, #37474F, #263238);--button-hover:linear-gradient(135deg, #263238, #37474F);--footer-color:#81D4FA;--hover-bg:rgba(74, 144, 226, 0.2);--shadow-color:rgba(76, 175, 80, 0.3);--shine-bg:rgba(74, 144, 226, 0.15);--glow-color:rgba(76, 175, 80, 0.6);--premium-shadow:rgba(76, 175, 80, 0.15);--premium-glow:rgba(76, 175, 80, 0.1);--premium-border:rgba(74, 144, 226, 0.3);--bg-logo-opacity:0.4;--player-bg:linear-gradient(135deg, var(--card-bg), rgba(0,0,0,0.1));--player-text:var(--text-color);--player-accent:var(--link-color);--player-progress:var(--border-color);--player-glow:rgba(74, 144, 226, 0.2);--player-shine:rgba(255, 255, 255, 0.08);--footer-bg:linear-gradient(135deg, var(--card-bg), rgba(0,0,0,0.2));--footer-border:var(--border-color);--caret-color:var(--accent-color)}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{background-attachment:fixed;background-color:var(--bg-color);background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:10px 10px;color:var(--text-color);font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:clamp(14px, 2vw, 16px);line-height:1.5;margin:0;padding:clamp(10px, 2vw, 15px) 0;text-shadow:0 1px var(--text-shadow);text-rendering:optimizeLegibility;min-height:100vh;opacity:1!important;overflow-x:hidden;transition:all 0.4s cubic-bezier(.25,.46,.45,.94);position:relative}body.loaded{animation:fadeInGlow 1.2s cubic-bezier(.25,.46,.45,.94)}@keyframes fadeInGlow{from{opacity:0;transform:translateY(20px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;background-image:radial-gradient(2px 2px at 20px 30px,var(--accent-color),transparent),radial-gradient(2px 2px at 40px 70px,rgb(124 179 66 / .6),transparent),radial-gradient(1px 1px at 90px 40px,#7cb342,transparent),radial-gradient(1px 1px at 130px 80px,rgb(70 136 71 / .4),transparent),radial-gradient(2px 2px at 160px 30px,var(--accent-color),transparent),radial-gradient(3px 3px at 200px 50px,rgb(168 213 186 / .5),transparent);background-repeat:repeat;background-size:250px 120px;animation:floatParticles 25s linear infinite,subtleGlow 3s ease-in-out infinite alternate;filter:drop-shadow(0 0 10px var(--premium-glow))}@keyframes floatParticles{from{transform:translateY(0) rotate(0deg)}to{transform:translateY(-120px) rotate(360deg)}}@keyframes subtleGlow{from{opacity:.8}to{opacity:1}}body::after{content:'';position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;background-image:radial-gradient(1px 1px at 50px 50px,rgb(39 174 96 / .3),transparent),radial-gradient(1px 1px at 100px 100px,rgb(52 152 219 / .3),transparent),radial-gradient(1px 1px at 150px 150px,rgb(231 76 60 / .3),transparent);background-repeat:repeat;background-size:200px 200px;animation:sparkleFloat 15s linear infinite,sparkleTwinkle 2s ease-in-out infinite alternate;opacity:.6}@keyframes sparkleFloat{from{transform:translateY(0) scale(1)}to{transform:translateY(-200px) scale(1.1)}}@keyframes sparkleTwinkle{from{opacity:.6}to{opacity:1}}:root.dark-mode body::before{background-image:radial-gradient(2px 2px at 20px 30px,var(--accent-color),transparent),radial-gradient(2px 2px at 40px 70px,rgb(124 179 66 / .4),transparent),radial-gradient(1px 1px at 90px 40px,#4a8f28,transparent),radial-gradient(1px 1px at 130px 80px,rgb(74 143 40 / .3),transparent),radial-gradient(2px 2px at 160px 30px,var(--accent-color),transparent),radial-gradient(3px 3px at 200px 50px,rgb(74 144 226 / .4),transparent)}:root.dark-mode body::after{background-image:radial-gradient(1px 1px at 50px 50px,rgb(76 175 80 / .3),transparent),radial-gradient(1px 1px at 100px 100px,rgb(74 144 226 / .3),transparent),radial-gradient(1px 1px at 150px 150px,rgb(244 67 54 / .3),transparent)}.container{margin:0 auto;max-width:min(100%, 750px);padding:0 clamp(5px, 3vw, 20px);display:flex;flex-direction:column;min-height:100vh;position:relative;z-index:1}#background-logos{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-2;animation:logoCycle 7s ease-in-out infinite}.bg-logo{position:absolute;width:clamp(30px, 6vw, 60px);height:auto;opacity:var(--bg-logo-opacity);filter:drop-shadow(0 2px 4px var(--premium-shadow));animation:gentleFloat 3s ease-in-out infinite alternate;border-radius:8px}#background-logos .bg-logo:nth-child(1){top:10%;left:10%;transform:rotate(0deg)}#background-logos .bg-logo:nth-child(2){top:20%;right:15%;transform:rotate(45deg)}#background-logos .bg-logo:nth-child(3){top:60%;left:20%;transform:rotate(90deg)}#background-logos .bg-logo:nth-child(4){bottom:30%;right:10%;transform:rotate(135deg)}#background-logos .bg-logo:nth-child(5){top:40%;left:70%;transform:rotate(180deg)}#background-logos .bg-logo:nth-child(6){bottom:20%;left:60%;transform:rotate(225deg)}@keyframes logoCycle{0%,71%{opacity:var(--bg-logo-opacity)}72%,100%{opacity:0}}@keyframes gentleFloat{from{transform:translateY(0) rotate(var(--rotation,0deg))}to{transform:translateY(-2px) rotate(var(--rotation,0deg))}}#loading-spinner{position:fixed;inset:0;background:var(--bg-color);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10000;transition:opacity 0.4s cubic-bezier(.25,.46,.45,.94),transform 0.4s cubic-bezier(.25,.46,.45,.94);opacity:1;transform:scale(1)}#loading-spinner.hidden{opacity:0;transform:scale(.9);pointer-events:none}.spinner-container{display:flex;flex-direction:column;align-items:center;gap:clamp(10px, 2vw, 20px);animation:fadeInGlow 0.8s cubic-bezier(.25,.46,.45,.94)}.spinner{width:clamp(40px, 8vw, 60px);height:clamp(40px, 8vw, 60px);border:3px solid #fff0;border-top:3px solid var(--accent-color);border-radius:50%;animation:premiumSpin 1s linear infinite;position:relative;box-shadow:0 0 20px var(--glow-color)}.spinner::before{content:'';position:absolute;top:50%;left:50%;width:clamp(10px, 3vw, 20px);height:clamp(10px, 3vw, 20px);background:radial-gradient(circle,var(--accent-color) 0%,transparent 70%);border-radius:50%;transform:translate(-50%,-50%);opacity:.3;animation:pulse 2s ease-in-out infinite alternate}@keyframes premiumSpin{to{transform:rotate(360deg)}}@keyframes pulse{to{opacity:.8;transform:translate(-50%,-50%) scale(1.1)}}.loading-text{color:var(--text-color);font-size:clamp(12px, 2vw, 1rem);font-weight:500;text-shadow:0 1px var(--text-shadow)}.logo{display:block;margin:0 auto 15px;width:clamp(60px, 12vw, 120px);height:auto;border:2px solid var(--border-color);border-radius:12px;box-shadow:0 4px 15px var(--premium-shadow),0 0 0 1px var(--premium-border);transition:all 0.4s cubic-bezier(.25,.46,.45,.94);animation:gentleFloat 3s ease-in-out infinite,logoGlow 2s ease-in-out infinite alternate;position:relative;overflow:hidden}.logo::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,var(--shine-bg) 0%,transparent 70%);opacity:0;transition:opacity 0.6s;animation:rotateSlow 20s linear infinite}.logo:hover::before{opacity:.3}.logo:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 8px 25px var(--shadow-color),0 0 20px var(--glow-color),0 0 0 1px var(--premium-border)}@keyframes gentleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes logoGlow{from{filter:drop-shadow(0 0 5px var(--premium-glow))}to{filter:drop-shadow(0 0 10px var(--premium-glow))}}@keyframes rotateSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}a{color:var(--link-color);text-decoration:none;position:relative;overflow:hidden;transition:all 0.3s cubic-bezier(.25,.46,.45,.94)}a::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:linear-gradient(90deg,var(--link-hover),var(--accent-color));transition:all 0.3s cubic-bezier(.25,.46,.45,.94);transform:translateX(-50%)}a:hover::after{width:100%}a:hover,a:focus,a:active{color:var(--link-hover);text-shadow:0 0 5px var(--glow-color)}a:focus{outline:thin dotted var(--text-color)}.btn{padding:clamp(10px, 2vw, 14px) clamp(15px, 3vw, 22px);background:var(--button-bg);color:#fff;border:none;border-radius:8px;font-size:clamp(13px, 1.8vw, 16px);font-weight:600;cursor:pointer;transition:all 0.4s cubic-bezier(.25,.46,.45,.94);display:inline-flex;align-items:center;gap:clamp(6px, 1.5vw, 10px);flex:1;min-width:clamp(100px, 20vw, 140px);justify-content:center;white-space:nowrap;position:relative;overflow:hidden;box-shadow:0 4px 15px rgb(0 0 0 / .1),0 0 0 1px var(--premium-border)}.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);transition:left 0.6s}.btn:hover::before{left:100%}.btn:hover{background:var(--button-hover);transform:translateY(-2px) scale(1.02);box-shadow:0 6px 20px var(--shadow-color),0 0 20px var(--glow-color),0 0 0 1px var(--premium-border)}.btn:active{transform:translateY(-1px) scale(1.01)}.btn-group{display:flex;justify-content:center;gap:clamp(8px, 2vw, 12px);margin-top:20px;flex-wrap:wrap}#theme-toggle{padding:8px 12px!important;min-width:auto!important;font-size:14px!important;position:absolute;top:10px;right:10px;z-index:10}.jumbotron{margin:clamp(20px, 6vw, 60px) 0;text-align:center;flex-shrink:0;animation:slideInFromTop 1.5s cubic-bezier(.25,.46,.45,.94);position:relative}@keyframes slideInFromTop{from{opacity:0;transform:translateY(-60px);filter:blur(10px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.jumbotron h1{color:inherit;font-family:inherit;font-size:clamp(1.8rem, 6vw, 4.5rem);font-weight:700;line-height:1.1;margin:10px 0;cursor:default;text-rendering:optimizeLegibility;position:relative;text-shadow:0 2px 4px var(--premium-shadow);word-break:break-word;hyphens:auto}.jumbotron h1::after{content:'';position:absolute;bottom:-10px;left:50%;width:0;height:3px;background:linear-gradient(90deg,var(--accent-color),var(--link-color));transition:width 0.5s ease;transform:translateX(-50%);box-shadow:0 2px 4px var(--premium-glow)}.jumbotron:hover h1::after{width:60px}.jumbotron .lead{font-size:clamp(0.8rem, 2vw, 1.1rem);font-weight:300;line-height:1.5;margin-bottom:20px;text-shadow:0 1px 2px var(--premium-shadow);word-break:break-word;hyphens:auto}.typewriter-container{position:relative;display:block;width:100%}.typewriter-text{border-right:.15em solid var(--caret-color);white-space:nowrap;overflow:hidden;animation:blink-caret 0.75s step-end infinite;display:block}.typewriter-text.typewriter-complete{white-space:normal;overflow:visible;border-right:none;animation:none}@keyframes blink-caret{from,to{border-color:#fff0}50%{border-color:var(--caret-color)}}:root.dark-mode .typewriter-text{border-right-color:var(--caret-color)}.welcome-card{background:linear-gradient(135deg,var(--card-bg),rgb(255 255 255 / .8));backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:16px;padding:clamp(15px, 4vw, 30px);margin-bottom:20px;text-align:center;position:relative;overflow:hidden;animation:pulseGlow 3s cubic-bezier(.25,.46,.45,.94) infinite;flex-shrink:0;box-shadow:0 10px 40px var(--shadow-color),0 0 0 1px var(--premium-border);transition:all 0.4s cubic-bezier(.25,.46,.45,.94)}.welcome-card:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 15px 50px var(--shadow-color),0 0 30px var(--glow-color)}@keyframes pulseGlow{0%{box-shadow:0 0 0 0 var(--shadow-color),0 10px 40px var(--shadow-color),0 0 0 1px var(--premium-border)}70%{box-shadow:0 0 0 20px #fff0,0 10px 40px var(--shadow-color),0 0 0 1px var(--premium-border)}100%{box-shadow:0 0 0 0 #fff0,0 10px 40px var(--shadow-color),0 0 0 1px var(--premium-border)}}.welcome-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,var(--shine-bg) 0%,transparent 70%);opacity:0;transition:opacity 0.6s;animation:rotateSlow 15s linear infinite}.welcome-card:hover::before{opacity:1}@keyframes rotateSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.welcome-card h3{color:var(--accent-color);font-size:clamp(1.3rem, 3.5vw, 1.75rem);margin-bottom:15px;animation:bounceInGlow 1.2s cubic-bezier(.25,.46,.45,.94);font-weight:700;text-shadow:0 2px 4px var(--premium-shadow)}@keyframes bounceInGlow{0%{transform:scale(.3);opacity:0;filter:blur(10px)}50%{transform:scale(1.05);filter:blur(0)}70%{transform:scale(.9)}100%{transform:scale(1);opacity:1}}.welcome-card p{font-size:clamp(13px, 2.2vw, 16px);line-height:1.6;animation:fadeInUpGlow 1s cubic-bezier(.25,.46,.45,.94) 0.4s both;opacity:.9;text-shadow:0 1px 2px var(--premium-shadow);word-break:break-word;hyphens:auto}@keyframes fadeInUpGlow{from{opacity:0;transform:translateY(30px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.music-player-section{background:var(--player-bg);background-attachment:fixed;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px),var(--player-bg);background-size:10px 10px,10px 10px,cover;border-radius:16px;padding:clamp(12px, 2.5vw, 20px);margin-bottom:20px;text-align:center;position:relative;overflow:hidden;box-shadow:0 8px 30px var(--shadow-color),0 0 0 1px var(--premium-border),inset 0 0 15px var(--player-shine);backdrop-filter:blur(10px);border:1px solid var(--border-color);animation:slideInUpGlow 1s cubic-bezier(.25,.46,.45,.94) 0.5s both;flex-shrink:0;transition:all 0.4s cubic-bezier(.25,.46,.45,.94)}.music-player-section:hover{transform:translateY(-3px);box-shadow:0 12px 40px var(--shadow-color),0 0 25px var(--glow-color)}@keyframes slideInUpGlow{from{opacity:0;transform:translateY(40px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.music-player-section::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:radial-gradient(2px 2px at 20px 30px,var(--accent-color),transparent),radial-gradient(2px 2px at 40px 70px,rgb(124 179 66 / .6),transparent),radial-gradient(1px 1px at 90px 40px,#7cb342,transparent),radial-gradient(1px 1px at 130px 80px,rgb(70 136 71 / .4),transparent),radial-gradient(2px 2px at 160px 30px,var(--accent-color),transparent),radial-gradient(3px 3px at 200px 50px,rgb(168 213 186 / .5),transparent);background-repeat:repeat;background-size:250px 120px;animation:floatParticles 25s linear infinite,subtleGlow 3s ease-in-out infinite alternate;filter:drop-shadow(0 0 10px var(--premium-glow));opacity:.8;z-index:-1}.music-player-section:hover::before{opacity:1;animation-duration:20s,2s}:root.dark-mode .music-player-section::before{background-image:radial-gradient(2px 2px at 20px 30px,var(--accent-color),transparent),radial-gradient(2px 2px at 40px 70px,rgb(124 179 66 / .4),transparent),radial-gradient(1px 1px at 90px 40px,#4a8f28,transparent),radial-gradient(1px 1px at 130px 80px,rgb(74 143 40 / .3),transparent),radial-gradient(2px 2px at 160px 30px,var(--accent-color),transparent),radial-gradient(3px 3px at 200px 50px,rgb(74 144 226 / .4),transparent)}.music-player-section::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,var(--player-shine),transparent);transition:left 0.6s;z-index:1}.music-player-section:hover::after{left:100%}.music-player-section h2{color:var(--player-text);font-size:clamp(0.9rem, 2.2vw, 1.25rem);margin-bottom:15px;text-align:center;font-weight:600;position:relative;z-index:2;text-shadow:0 1px 3px var(--premium-shadow);animation:fadeInUpGlow 1s ease 0.6s both}.music-player{display:flex;flex-direction:column;align-items:center;gap:clamp(8px, 1.5vw, 12px);position:relative;z-index:2}.album-art{width:clamp(80px, 20vw, 150px);height:clamp(80px, 20vw, 150px);border-radius:12px;box-shadow:0 6px 20px rgb(0 0 0 / .2),0 0 20px var(--player-glow);transition:all 0.3s cubic-bezier(.25,.46,.45,.94);object-fit:cover;position:relative;overflow:hidden;border:1px solid var(--premium-border);animation:gentleFloat 2s ease-in-out infinite alternate}.album-art::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,var(--player-shine),transparent);transition:left 0.6s}.album-art:hover::before{left:100%}.album-art.playing{animation:albumRotate 20s linear infinite,gentleFloat 2s ease-in-out infinite alternate;box-shadow:0 6px 20px rgb(0 0 0 / .2),0 0 25px var(--player-glow);transform:scale(1.03)}@keyframes albumRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes gentleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}.album-art:hover{transform:scale(1.05) rotate(2deg)}.track-info{color:var(--player-text);text-align:center;animation:fadeInUpGlow 1s ease 0.7s both;word-break:break-word}.track-info h4{font-size:clamp(0.9rem, 2vw, 1.1rem);font-weight:600;margin:0 0 3px 0;text-shadow:0 1px 3px var(--premium-shadow);transition:color 0.3s ease}.track-info h4:hover{color:var(--player-accent);text-shadow:0 0 8px var(--player-glow)}.track-info p{font-size:clamp(0.75rem, 1.5vw, 0.85rem);opacity:.8;margin:0;color:var(--player-text);font-style:italic}#audioPlayer{width:100%;margin:10px 0;outline:none;appearance:none;background:#fff0;animation:fadeInUpGlow 1s ease 0.8s both}#audioPlayer::-webkit-media-controls-panel{background:var(--card-bg);border-radius:8px;box-shadow:0 3px 15px var(--player-glow);border:1px solid var(--premium-border)}#audioPlayer::-webkit-media-controls-play-button,#audioPlayer::-webkit-media-controls-volume-slider,#audioPlayer::-webkit-media-controls-current-time-display,#audioPlayer::-webkit-media-controls-time-remaining-display{filter:none;transition:all 0.3s ease;border-radius:4px;box-shadow:inset 0 1px 2px rgb(255 255 255 / .2),0 1px 3px rgb(0 0 0 / .1)}#audioPlayer::-webkit-media-controls-play-button:hover{box-shadow:inset 0 1px 2px rgb(255 255 255 / .3),0 2px 5px rgb(0 0 0 / .2),0 0 8px var(--player-glow);transform:translateY(-1px)}#audioPlayer::-webkit-media-controls-timeline{background-color:var(--player-progress);border-radius:4px;box-shadow:inset 0 1px 2px rgb(0 0 0 / .1)}.progress-container{width:100%;height:clamp(2px, 0.5vw, 4px);background:rgb(255 255 255 / .1);border-radius:2px;overflow:hidden;margin-top:10px;position:relative;box-shadow:inset 0 1px 2px rgb(0 0 0 / .05);border:1px solid var(--premium-border);animation:fadeInUpGlow 1s ease 0.9s both}.progress-bar{height:100%;background:linear-gradient(90deg,var(--player-accent),var(--accent-color));width:0%;transition:width 0.2s ease;border-radius:1px;position:relative;overflow:hidden;box-shadow:inset 0 1px 2px rgb(255 255 255 / .2),0 1px 2px rgb(0 0 0 / .1)}.progress-bar::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,var(--player-shine),transparent);transform:translateX(-100%);animation:progressShine 2s linear infinite}@keyframes progressShine{from{transform:translateX(-100%)}to{transform:translateX(400%)}}:root.dark-mode .music-player-section{border-color:var(--border-color);box-shadow:0 8px 30px var(--shadow-color),0 0 0 1px var(--premium-border),inset 0 0 15px var(--player-shine)}:root.dark-mode #audioPlayer::-webkit-media-controls-panel{background:var(--card-bg)}@media only screen and (max-width:1024px){.container{max-width:95%}.jumbotron h1{font-size:clamp(1.8rem, 5vw, 3.5rem)}}@media only screen and (max-width:768px){.btn-group{justify-content:stretch;flex-direction:column}.btn{flex:1 1 100%;min-width:auto;margin-bottom:10px}.music-player{gap:10px;flex-direction:column;align-items:center}.album-art{width:clamp(70px, 18vw, 120px);height:clamp(70px, 18vw, 120px)}.container{padding:0 clamp(4px, 2.5vw, 15px)}.welcome-card{margin-bottom:15px;padding:clamp(12px, 3.5vw, 20px)}.jumbotron .lead{padding:0 10px}#theme-toggle{top:5px;right:5px;padding:6px 10px!important;font-size:12px!important}}@media only screen and (max-width:600px){body{padding:clamp(3px, 1.5vw, 10px) 0}.jumbotron{margin:clamp(15px, 4vw, 30px) 0}.jumbotron .lead{font-size:clamp(0.75rem, 1.8vw, 1rem);padding:0 5px}.container{padding:0 clamp(3px, 1.5vw, 10px);gap:12px}.welcome-card{padding:clamp(10px, 3vw, 15px)}.welcome-card h3{font-size:clamp(1.1rem, 3.2vw, 1.5rem)}.welcome-card p{font-size:clamp(12px, 2vw, 14px)}.music-player-section{padding:clamp(8px, 2vw, 12px)}.album-art{width:clamp(60px, 16vw, 100px);height:clamp(60px, 16vw, 100px)}.btn-group{gap:6px}.typewriter-container{font-size:clamp(1.4rem, 5vw, 2.5rem)}}@media only screen and (max-width:480px){.jumbotron h1{font-size:clamp(1.5rem, 5vw, 2.2rem)}.welcome-card p{font-size:clamp(12px, 2vw, 14px)}.music-player{gap:6px}.track-info h4{font-size:clamp(0.8rem, 1.8vw, 1rem)}.progress-container{height:2px}.typewriter-container{font-size:clamp(1.2rem, 4.5vw, 2rem)}.logo{width:clamp(50px, 10vw, 80px)}.jumbotron .lead{font-size:clamp(0.7rem, 2.2vw, 0.9rem);line-height:1.4}#theme-toggle{padding:5px 8px!important;font-size:11px!important}}@media only screen and (max-width:360px){body{font-size:clamp(12px, 1.8vw, 14px)}.container{padding:0 clamp(2px, 1vw, 8px)}.welcome-card{padding:clamp(8px, 2.5vw, 12px)}.welcome-card h3{font-size:clamp(1rem, 2.8vw, 1.3rem)}.btn{padding:clamp(8px, 1.5vw, 12px) clamp(12px, 2.5vw, 18px);font-size:clamp(12px, 1.6vw, 14px)}.music-player-section h2{font-size:clamp(0.8rem, 2vw, 1rem)}.album-art{width:clamp(50px, 14vw, 80px);height:clamp(50px, 14vw, 80px)}.jumbotron .lead{font-size:clamp(0.65rem, 2.5vw, 0.85rem);padding:0 2px}.typewriter-text.typewriter-complete{font-size:clamp(1.1rem, 4vw, 1.8rem)}}footer{background:var(--footer-bg);backdrop-filter:blur(10px);border-top:1px solid var(--footer-border);border-radius:16px 16px 0 0;padding:clamp(12px, 2.5vw, 25px);font-size:clamp(10px, 1.5vw, 0.85rem);color:var(--footer-color);font-weight:600;margin-top:auto;transition:all 0.4s cubic-bezier(.25,.46,.45,.94);flex-shrink:0;text-shadow:0 1px 2px var(--premium-shadow);position:relative;overflow:hidden;box-shadow:0 -10px 40px var(--shadow-color),0 0 0 1px var(--premium-border);animation:slideInFromBottom 1s cubic-bezier(.25,.46,.45,.94) 1s both}@keyframes slideInFromBottom{from{opacity:0;transform:translateY(50px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}footer::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,var(--shine-bg) 0%,transparent 70%);opacity:0;transition:opacity 0.6s;animation:rotateSlow 20s linear infinite}footer:hover::before{opacity:.5}footer:hover{transform:translateY(-2px);box-shadow:0 -15px 50px var(--shadow-color),0 0 20px var(--glow-color);text-shadow:0 0 10px var(--glow-color)}.footer-content{display:flex;flex-direction:column;align-items:center;gap:clamp(8px, 1.5vw, 15px)}.footer-links{display:flex;justify-content:center;gap:clamp(6px, 1.5vw, 20px);flex-wrap:wrap;width:100%}.footer-links a{color:inherit;transition:all 0.3s ease;position:relative;padding:clamp(4px, 1vw, 8px) clamp(8px, 1.5vw, 15px);border-radius:20px;font-size:clamp(10px, 1.5vw, 14px);min-width:fit-content}.footer-links a:hover{color:var(--accent-color);transform:scale(1.05);background:var(--hover-bg);box-shadow:0 4px 12px var(--shadow-color)}.footer-copyright{opacity:.8;font-style:italic;animation:fadeInUpGlow 1s ease 1.1s both;text-align:center;width:100%;margin-top:clamp(4px, 0.8vw, 10px);font-size:clamp(9px, 1.2vw, 0.8rem)}@media (max-width:768px){.footer-links{flex-direction:row;justify-content:center;gap:clamp(6px, 1.2vw, 15px)}.footer-links a{flex:1;min-width:70px;text-align:center}}@media (max-width:480px){.footer-links{flex-direction:column;gap:clamp(4px, 1vw, 10px);align-items:center}.footer-links a{width:100%;max-width:180px;justify-content:center}}@media (max-width:360px){.footer-links a{padding:clamp(3px, 0.8vw, 6px) clamp(6px, 1.2vw, 12px);font-size:clamp(9px, 1.2vw, 12px)}.footer-copyright{font-size:clamp(8px, 1vw, 10px)}}