@charset "UTF-8";
/***!  Style Declaration  !***/

:root{--color-background:rgba(252,252,249,1);--color-text:rgba(19,52,59,1);--color-primary:rgb(105,7,47);--color-staff-line:rgba(94,82,64,0.3);--color-note:rgb(105,7,47)}@media (prefers-color-scheme:dark){:root{--color-background:rgba(31,33,33,1);--color-text:rgba(245,245,245,1);--color-staff-line:rgba(119,124,124,0.3);--color-note:rgba(50,184,198,1)}}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--color-background);min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}.staff-container{position:relative;width:90%;max-width:1200px;height:150px;margin:0 auto}.staff{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.staff-lines{position:absolute;width:100%;height:60px;display:flex;flex-direction:column;justify-content:space-between;top:50%;transform:translateY(-50%)}.staff-line{width:100%;height:2px;background-color:var(--color-staff-line)}.clef{position:absolute;left:30px;font-size:45px;color:var(--color-primary);z-index:10;font-weight:bold;top:50%;transform:translateY(-50%);opacity:0;animation:fadeInClef 1s ease forwards}@keyframes fadeInClef{to{opacity:1}}.notes-container{position:absolute;width:100%;height:100%;top:0;left:0}.note{position:absolute;font-size:25px;color:var(--color-note);opacity:0;animation:danceNote 4s ease-in-out infinite}.note::before{content:'♪'}.note.eighth::before{content:'♫'}.note.quarter::before{content:'♩'}@keyframes danceNote{0%{left:-60px;opacity:0;transform:translateY(0) rotate(0deg) scale(1)}10%{opacity:1}25%{transform:translateY(-20px) rotate(10deg) scale(1.1)}50%{transform:translateY(10px) rotate(-10deg) scale(0.95)}75%{transform:translateY(-15px) rotate(8deg) scale(1.05)}90%{opacity:1}100%{left:calc(100% + 60px);opacity:0;transform:translateY(0) rotate(0deg) scale(1)}}.note:nth-child(1){top:30%;animation-delay:0s;animation-duration:6s}.note:nth-child(2){top:40%;animation-delay:1s;animation-duration:5s}.note:nth-child(3){top:50%;animation-delay:0.5s;animation-duration:5.5s}.note:nth-child(4){top:60%;animation-delay:2s;animation-duration:6.5s}.note:nth-child(5){top:35%;animation-delay:1.5s;animation-duration:5.8s}.note:nth-child(6){top:55%;animation-delay:0.8s;animation-duration:6.2s}.note:nth-child(7){top:45%;animation-delay:2.5s;animation-duration:5.3s}.note:nth-child(8){top:65%;animation-delay:1.8s;animation-duration:6.8s}@keyframes springNote{0%{left:-60px;opacity:0;transform:translateY(0) scale(1)}10%{opacity:1}20%,40%,60%,80%{transform:translateY(-25px) scale(1.15)}30%,50%,70%{transform:translateY(5px) scale(0.9)}90%{opacity:1}100%{left:calc(100% + 60px);opacity:0;transform:translateY(0) scale(1)}}.note.bouncy{animation-name:springNote}.info-panel{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.95);padding:15px 25px;border-radius:12px;font-size:14px;color:var(--color-text);box-shadow:0 4px 12px rgba(0,0,0,0.1);z-index:20;text-align:center}@media (prefers-color-scheme:dark){.info-panel{background:rgba(38,40,40,0.95)}}.info-panel h3{margin-bottom:5px;color:var(--color-primary);font-size:16px}@media (max-width:768px){.staff-container{height:200px}.staff-lines{height:100px}.clef{font-size:60px;left:15px}.note{font-size:35px}.info-panel{font-size:12px;padding:10px 15px}}