@font-face{font-family:'Baloo 2';src:url('/fonts/baloo2.woff2') format('woff2'),url('/fonts/baloo2.woff') format('woff');font-weight:400;font-style:normal}@font-face{font-family:'Comic Neue';src:url('/fonts/comicneue.woff2') format('woff2'),url('/fonts/comicneue.woff') format('woff');font-weight:400;font-style:normal}@font-face{font-family:'Fredoka One';src:url('/fonts/fredoka4.woff2') format('woff2'),url('/fonts/fredoka3.woff') format('woff');font-weight:400;font-style:normal}@font-face{font-family:Nunito;src:url('/fonts/nunito.woff2') format('woff2'),url('/fonts/nunito.woff') format('woff');font-weight:400;font-style:normal}@font-face{font-family:Quicksand;src:url('/fonts/quicksand.woff2') format('woff2'),url('/fonts/quicksand.woff') format('woff');font-weight:400;font-style:normal}*{margin:0;padding:0;box-sizing:border-box}:root{--cream-vanilla:#FFF8F0;--warm-bone:#F5F0E6;--soft-green:#A8E6CF;--butter-yellow:#FFEAA7;--vintage-pink:#FFC8B4;--soft-lavender:#D8CFFF;--warm-brown:#8B7355;--warm-gray:#A69A8D;--soft-brown:#B8A99A;--line-art:#9C8B7A;--line-light:rgba(156, 139, 122, 0.3);--shadow-soft:rgba(139, 115, 85, 0.08);--shadow-medium:rgba(139, 115, 85, 0.12);--font-heading:'Fredoka One',cursive;--font-subheading:'Comic Neue',cursive;--font-body:'Nunito',sans-serif;--font-accent:'Quicksand',sans-serif;--font-numbers:'Baloo 2',cursive}body{font-family:var(--font-body);background-color:var(--cream-vanilla);color:var(--warm-brown);min-height:100vh;line-height:1.5;display:flex;justify-content:center;align-items:center;padding:1.5rem;position:relative;overflow-x:hidden}body::before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 20% 30%,rgba(168,230,207,.03) 0,transparent 50%),radial-gradient(circle at 80% 70%,rgba(255,200,180,.03) 0,transparent 50%),linear-gradient(rgba(139,115,85,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(139,115,85,.02) 1px,transparent 1px);background-size:100% 100%,100% 100%,40px 40px,40px 40px;pointer-events:none;z-index:-1}body::after{content:"♪ ♫ ♪";position:fixed;top:50px;right:50px;font-size:2rem;color:var(--line-light);animation:floatNotes 8s ease-in-out infinite;z-index:-1;font-family:var(--font-numbers)}@keyframes floatNotes{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(5deg)}}.main-container{max-width:900px;width:100%;position:relative;z-index:1}.kawaii-card{background:var(--warm-bone);border-radius:32px;padding:2.5rem;position:relative;overflow:hidden;box-shadow:0 8px 32px var(--shadow-soft),inset 0 1px 0 rgba(255,255,255,.5),0 0 0 2px rgba(255,255,255,.8);border:2px solid var(--line-light)}.kawaii-card::before{content:"";position:absolute;top:12px;left:12px;right:12px;bottom:12px;border:1px solid var(--line-light);border-radius:24px;pointer-events:none}.kawaii-card::after{content:"";position:absolute;top:20px;right:20px;width:40px;height:40px;background:radial-gradient(circle at 30% 30%,transparent 60%,var(--soft-lavender) 61%,transparent 62%),radial-gradient(circle at 70% 70%,transparent 60%,var(--vintage-pink) 61%,transparent 62%);opacity:.4;z-index:0}.header{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem;position:relative;z-index:2;animation:bounceIn .8s cubic-bezier(.68,-.55,.265,1.55)}@keyframes bounceIn{0%{opacity:0;transform:scale(.3) translateY(-50px)}50%{opacity:.7;transform:scale(1.05) translateY(10px)}70%{transform:scale(.95) translateY(0)}100%{opacity:1;transform:scale(1) translateY(0)}}.logo-container{width:150px;height:150px;border-radius:40% 60% 70% 30%/40% 50% 60% 50%;position:relative;margin-bottom:1.5rem;background:linear-gradient(135deg,var(--soft-green),var(--butter-yellow));box-shadow:0 6px 20px var(--shadow-medium),inset 0 4px 8px rgba(255,255,255,.3),inset 0 -4px 8px rgba(139,115,85,.1),0 0 0 3px rgba(255,255,255,.8);overflow:hidden;transition:all .5s cubic-bezier(.34, 1.56, .64, 1)}.logo-container:hover{border-radius:60% 40% 30% 70%/50% 40% 60% 50%;transform:translateY(-5px) rotate(5deg);box-shadow:0 10px 30px var(--shadow-medium),inset 0 4px 12px rgba(255,255,255,.4),inset 0 -4px 12px rgba(139,115,85,.15),0 0 0 3px rgba(255,255,255,.9)}.logo-container::before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border-radius:inherit;background:linear-gradient(135deg,var(--vintage-pink),var(--soft-lavender));z-index:-1;opacity:.5;animation:rotateGradient 10s linear infinite}@keyframes rotateGradient{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.logo{width:100%;height:100%;object-fit:cover;border-radius:inherit;filter:sepia(.2) brightness(1.05);padding:8px}.station-name{font-family:var(--font-heading);font-size:3rem;font-weight:700;color:var(--warm-brown);margin-bottom:.5rem;text-align:center;position:relative;display:inline-block;letter-spacing:1px;text-shadow:2px 2px 0 rgba(255,255,255,.5),-1px -1px 0 rgba(139,115,85,.1)}.station-name::after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:80%;height:4px;background:linear-gradient(90deg,transparent,var(--soft-green),var(--vintage-pink),transparent);border-radius:2px;opacity:.6}.station-frequency{font-family:var(--font-numbers);font-size:.9rem;color:var(--warm-gray);margin-top:.5rem;padding:.6rem 2.2rem;background:rgba(255,255,255,.7);border-radius:50px;border:2px dashed var(--line-light);display:inline-block;position:relative;transition:all .3s ease;letter-spacing:2px}.station-frequency:hover{transform:translateY(-3px) rotate(-1deg);background:rgba(255,255,255,.9);border-color:var(--soft-green);box-shadow:0 4px 12px var(--shadow-medium)}.player-section{background:rgba(255,255,255,.7);border-radius:28px;padding:2rem;margin-bottom:2rem;position:relative;z-index:2;border:2px solid var(--line-light);box-shadow:0 4px 20px var(--shadow-soft),inset 0 1px 0 rgba(255,255,255,.6);animation:slideUp .8s ease-out .2s both}@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.player-section::before{content:"";position:absolute;top:-2px;left:20%;width:60%;height:4px;background:linear-gradient(90deg,var(--soft-green),var(--butter-yellow),var(--vintage-pink));border-radius:0 0 4px 4px}.player-title{font-family:var(--font-subheading);font-size:1.4rem;font-weight:700;color:var(--warm-brown);margin-bottom:1.5rem;text-align:center;position:relative;display:inline-block;left:50%;transform:translateX(-50%);padding:.7rem 2.2rem;background:linear-gradient(135deg,var(--soft-green),var(--butter-yellow));border-radius:50px;box-shadow:0 4px 12px var(--shadow-medium),inset 0 2px 4px rgba(255,255,255,.4)}.player-controls{display:flex;justify-content:center;align-items:center;gap:1.5rem;margin-bottom:1.5rem}.player-btn{width:70px;height:70px;border-radius:40% 60% 40% 60%/60% 40% 60% 40%;background:#fff;border:2px solid var(--line-art);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .4s cubic-bezier(.34, 1.56, .64, 1);position:relative;box-shadow:0 6px 16px var(--shadow-medium),inset 0 4px 8px rgba(255,255,255,.6),inset 0 -4px 8px rgba(139,115,85,.1)}.player-btn::before{content:"";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border-radius:inherit;background:linear-gradient(135deg,var(--soft-green),var(--vintage-pink));opacity:0;z-index:-1;transition:opacity .3s ease}.player-btn:hover{transform:translateY(-8px) scale(1.1) rotate(5deg);border-color:var(--soft-green);box-shadow:0 12px 24px var(--shadow-medium),inset 0 6px 12px rgba(255,255,255,.7),inset 0 -6px 12px rgba(139,115,85,.15)}.player-btn:hover::before{opacity:.3}.player-btn svg{width:28px;height:28px;fill:var(--warm-brown);transition:all .3s ease;filter:drop-shadow(1px 1px 1px rgba(139, 115, 85, .2))}.player-btn:hover svg{fill:var(--soft-green);transform:scale(1.1)}.play-btn{width:85px;height:85px;border-radius:45% 55% 50% 50%/50% 45% 55% 50%;background:linear-gradient(135deg,var(--vintage-pink),var(--soft-lavender));border:3px solid var(--line-art);box-shadow:0 8px 24px rgba(255,200,180,.4),inset 0 6px 12px rgba(255,255,255,.5),inset 0 -6px 12px rgba(139,115,85,.3),0 0 0 4px rgba(255,255,255,.9);position:relative}.play-btn::after{content:"";position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border-radius:inherit;border:2px solid rgba(255,255,255,.8);z-index:-1;pointer-events:none}.play-btn svg{fill:var(--warm-bone);filter:drop-shadow(2px 2px 3px rgba(139, 115, 85, .4))}.play-btn:hover{background:linear-gradient(135deg,var(--soft-lavender),var(--vintage-pink));transform:translateY(-10px) scale(1.15) rotate(-5deg);box-shadow:0 16px 32px rgba(255,200,180,.5),inset 0 8px 16px rgba(255,255,255,.6),inset 0 -8px 16px rgba(139,115,85,.35),0 0 0 4px rgba(255,255,255,.9)}.spinner{display:none;width:32px;height:32px;border:3px solid transparent;border-radius:50%;border-top:3px solid var(--vintage-pink);border-right:3px solid var(--soft-green);border-bottom:3px solid var(--butter-yellow);border-left:3px solid var(--soft-lavender);animation:spin 1.2s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes spin{to{transform:rotate(360deg)}}.now-playing{text-align:center;padding:1.5rem;background:rgba(255,255,255,.8);border-radius:24px;margin-top:1.5rem;display:none;border:2px dashed var(--line-light);box-shadow:0 4px 16px var(--shadow-soft),inset 0 2px 8px rgba(255,255,255,.5);animation:popIn .5s cubic-bezier(.68,-.55,.265,1.55)}@keyframes popIn{0%{opacity:0;transform:scale(.5) translateY(20px)}80%{transform:scale(1.05) translateY(0)}100%{opacity:1;transform:scale(1) translateY(0)}}.now-playing::after,.now-playing::before{content:"";position:absolute;height:2px;background:linear-gradient(90deg,transparent,var(--line-light),transparent);left:20%;right:20%}.now-playing::before{top:10px}.now-playing::after{bottom:10px}.current-track{font-family:var(--font-accent);font-size:1.5rem;font-weight:700;color:var(--warm-brown);margin-bottom:.5rem;text-shadow:1px 1px 0 rgba(255,255,255,.5);letter-spacing:.5px}.current-artist{font-family:var(--font-body);font-size:1.1rem;color:var(--warm-gray);font-weight:500;opacity:.9}.volume-control{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2rem}.volume-container{position:relative;width:180px}.volume-slider{width:100%;height:8px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,var(--soft-green),var(--butter-yellow),var(--vintage-pink));border-radius:10px;outline:0;cursor:pointer;border:2px solid var(--line-light);box-shadow:inset 0 2px 4px rgba(139,115,85,.1),0 2px 4px var(--shadow-soft)}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--vintage-pink),var(--soft-lavender));border:3px solid var(--warm-bone);cursor:pointer;box-shadow:0 4px 12px var(--shadow-medium),inset 0 2px 4px rgba(255,255,255,.4);transition:all .3s ease}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2) rotate(15deg);background:linear-gradient(135deg,var(--soft-lavender),var(--vintage-pink))}.social-section{background:rgba(255,255,255,.7);border-radius:28px;padding:2rem;border:2px solid var(--line-light);box-shadow:0 4px 20px var(--shadow-soft),inset 0 1px 0 rgba(255,255,255,.6);animation:slideUp .8s ease-out .4s both}.section-title{font-family:var(--font-subheading);font-size:1.4rem;font-weight:700;color:var(--warm-brown);margin-bottom:1.5rem;text-align:center;position:relative;display:inline-block;left:50%;transform:translateX(-50%);padding:.7rem 2.2rem;background:linear-gradient(135deg,var(--butter-yellow),var(--vintage-pink));border-radius:50px;box-shadow:0 4px 12px var(--shadow-medium),inset 0 2px 4px rgba(255,255,255,.4)}.social-icons{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}.social-icon{width:60px;height:60px;border-radius:35% 65% 65% 35%/35% 45% 55% 65%;background:#fff;border:2px solid var(--line-art);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .4s cubic-bezier(.34, 1.56, .64, 1);text-decoration:none;box-shadow:0 6px 16px var(--shadow-medium),inset 0 4px 8px rgba(255,255,255,.6),inset 0 -4px 8px rgba(139,115,85,.1)}.social-icon:hover{transform:translateY(-8px) scale(1.15) rotate(-5deg);border-color:var(--butter-yellow);box-shadow:0 12px 24px var(--shadow-medium),inset 0 6px 12px rgba(255,255,255,.7),inset 0 -6px 12px rgba(139,115,85,.15)}.social-icon svg{width:24px;height:24px;fill:var(--warm-brown);transition:all .3s ease;filter:drop-shadow(1px 1px 1px rgba(139, 115, 85, .2))}.social-icon:hover svg{fill:var(--butter-yellow);transform:scale(1.1)}.contact-info{text-align:center;padding-top:1.5rem;border-top:2px dashed var(--line-light);position:relative}.contact-info p{margin-bottom:.75rem;color:var(--warm-gray);font-size:.95rem;font-family:var(--font-accent);font-weight:500}.contact-info a{color:var(--soft-green);text-decoration:none;font-weight:600;border-bottom:1px dotted var(--soft-green);transition:all .3s ease;font-family:var(--font-accent)}.contact-info a:hover{color:var(--vintage-pink);border-bottom-color:var(--vintage-pink);transform:translateY(-2px)}.footer{text-align:center;margin-top:2rem;padding-top:1.5rem;border-top:2px dashed var(--line-light);color:var(--warm-gray);font-size:.9rem;font-family:var(--font-accent);animation:slideUp .8s ease-out .6s both;position:relative}.footer::before{content:"♬";position:absolute;top:-15px;left:50%;transform:translateX(-50%);color:var(--vintage-pink);font-size:1.6rem;animation:wobble 2s ease-in-out infinite;text-shadow:1px 1px 2px rgba(255,255,255,.8)}@keyframes wobble{0%,100%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(-50%) rotate(-5deg)}75%{transform:translateX(-50%) rotate(5deg)}}@media (max-width:768px){body{padding:1rem}.kawaii-card{padding:1.5rem;border-radius:24px}.station-name{font-size:2.2rem}.logo-container{width:130px;height:130px}.player-section,.social-section{padding:1.5rem;border-radius:20px}.player-controls{gap:1rem}.player-btn{width:60px;height:60px}.play-btn{width:70px;height:70px}.player-btn svg{width:24px;height:24px}.social-icon{width:55px;height:55px}.social-icon svg{width:22px;height:22px}.current-track{font-size:1.3rem}.volume-container{width:150px}.player-title,.section-title{font-size:1.2rem;padding:.6rem 1.8rem}}@media (max-width:480px){.kawaii-card{padding:1.25rem}.station-name{font-size:1.8rem}.player-controls{gap:.75rem}.social-icons{gap:.75rem}.player-title,.section-title{font-size:1.1rem;padding:.5rem 1.5rem}}.kawaii-card,.player-section,.social-section{animation:gentleFloat 6s ease-in-out infinite;animation-delay:calc(var(--i, 0) * .1s)}@keyframes gentleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}