*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #121212;--bg-secondary: #1E1E1E;--bg-tertiary: #2D2D2D;--text-primary: #FFFFFF;--text-secondary: #B3B3B3;--text-on-accent: #FFFFFF;--accent-purple: #BB86FC;--accent-purple-light: #E0B6FF;--accent-teal: #03DAC6;--accent-green: #4CAF50;--border-color: #333333;--card-bg: #1E1E1E;--liquid-wave-amplitude: 20px;--liquid-wave-frequency: .02;--liquid-animation-duration: 3s;--liquid-animation-easing: cubic-bezier(.4, 0, .2, 1);--liquid-distortion-strength: .3;--liquid-ripple-duration: .8s;--liquid-ripple-scale: 2.5;--liquid-fill-duration: .6s;--liquid-morph-speed: 4s;--liquid-blur-radius: 2px;--liquid-glow-intensity: .4;--liquid-transition-speed: .4s;--sparkle-color: rgba(255, 255, 255, .85);--sparkle-shadow: rgba(255, 255, 255, .6)}[data-theme=light]{--bg-primary: #FEF9E1;--bg-secondary: #E5D0AC;--bg-tertiary: #d5c09c;--text-primary: #6D2323;--text-secondary: #A31D1D;--text-on-accent: #FFFFFF;--accent-purple: #A31D1D;--accent-purple-light: #b32d2d;--accent-teal: #A31D1D;--accent-green: #A31D1D;--border-color: #E5D0AC;--card-bg: #FEF9E1;--liquid-wave-amplitude: 16px;--liquid-wave-frequency: .025;--liquid-animation-duration: 2.5s;--liquid-distortion-strength: .25;--liquid-ripple-duration: .7s;--liquid-ripple-scale: 2.2;--liquid-fill-duration: .5s;--liquid-morph-speed: 3.5s;--liquid-blur-radius: 1.5px;--liquid-glow-intensity: .3;--liquid-transition-speed: .35s;--sparkle-color: rgba(163, 29, 29, .55);--sparkle-shadow: rgba(163, 29, 29, .35)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh}#root{min-height:100vh}button{cursor:pointer;border:none;background:none;color:inherit;font-family:inherit}input[type=file]{display:none}.theme-invert-icon{transition:filter .3s ease}[data-theme=dark] .theme-invert-icon{filter:invert(1)}[data-theme=light] .theme-invert-icon{filter:invert(0)}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.tuner-sparkles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:0}.tuner-sparkle{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,var(--sparkle-color),transparent);opacity:0;box-shadow:0 0 12px var(--sparkle-shadow);animation-name:tunerSparkleFloat;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes tunerSparkleFloat{0%{transform:translateY(10px) scale(.6);opacity:0}20%{opacity:.9}50%{opacity:1}80%{opacity:0}to{transform:translateY(-20px) scale(1);opacity:0}}.floating-notes-container{position:fixed;pointer-events:none;top:0;right:0;bottom:0;left:0;z-index:5;overflow:hidden}.floating-note{position:absolute;color:var(--text-primary);animation-name:noteFade;animation-timing-function:ease-in-out;animation-iteration-count:1;will-change:transform,opacity;transform:translateZ(0) scale(1)}@keyframes noteFade{0%{opacity:0;transform:scale(.9)}15%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.92)}}.music-wave-notes-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none}.music-wave-note{position:absolute;color:var(--text-primary);animation-name:noteFade;animation-timing-function:ease-in-out;animation-iteration-count:1;will-change:transform,opacity}.minimal-gradient-bg{background:linear-gradient(180deg,#a31d1d0f,#a31d1d00)}[data-theme=dark] .minimal-gradient-bg{background:linear-gradient(180deg,#bb86fc14,#bb86fc05)}.chord-card{position:relative;border-radius:16px;border:1px solid var(--border-color);box-shadow:0 8px 24px #0000002e;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden;transform-style:preserve-3d;will-change:transform;animation-name:chordFloat;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-iteration-count:infinite}.chord-card-content{padding:24px}.chord-card:hover,.chord-card:focus-within{animation-play-state:paused;transform:scale(1.03);box-shadow:0 12px 36px #a31d1d59}[data-theme=dark] .chord-card:hover,[data-theme=dark] .chord-card:focus-within{box-shadow:0 12px 36px #bb86fc59}.chord-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at 20% 10%,rgba(255,255,255,.18),transparent 60%);mix-blend-mode:soft-light}[data-theme=light] .chord-card{background:#ffffff73}[data-theme=dark] .chord-card{background:#1e1e1e59}@keyframes chordFloat{0%{transform:translate3d(0,-2px,0) rotate(.6deg)}50%{transform:translate3d(0,3px,0) rotate(-.6deg)}to{transform:translate3d(0,-2px,0) rotate(.6deg)}}@media (max-width: 768px){.desktop-only{display:none!important}.mobile-container{padding:0 16px}}@keyframes liquidWave{0%,to{transform:translateY(0) scale(1);filter:blur(0px)}25%{transform:translateY(calc(var(--liquid-wave-amplitude) * -.5)) scale(1.02);filter:blur(var(--liquid-blur-radius))}50%{transform:translateY(var(--liquid-wave-amplitude)) scale(.98);filter:blur(calc(var(--liquid-blur-radius) * 1.5))}75%{transform:translateY(calc(var(--liquid-wave-amplitude) * -.3)) scale(1.01);filter:blur(calc(var(--liquid-blur-radius) * .8))}}@keyframes liquidMorph{0%,to{border-radius:50%/60% 40%}25%{border-radius:40% 60% 70% 30%/40% 50% 50% 60%}50%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}75%{border-radius:30% 70% 40% 60%/50% 60% 40% 50%}}@keyframes liquidRipple{0%{transform:scale(0);opacity:1}50%{opacity:.5}to{transform:scale(var(--liquid-ripple-scale));opacity:0}}@keyframes liquidFill{0%{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}@keyframes liquidGlow{0%,to{box-shadow:0 0 calc(var(--liquid-glow-intensity) * 20px) var(--accent-purple)}50%{box-shadow:0 0 calc(var(--liquid-glow-intensity) * 40px) var(--accent-purple-light)}}@keyframes liquidDistort{0%,to{filter:url(#liquid-distortion-1)}33%{filter:url(#liquid-distortion-2)}66%{filter:url(#liquid-distortion-3)}}.liquid-wave{animation:liquidWave var(--liquid-animation-duration) var(--liquid-animation-easing) infinite}.liquid-morph{animation:liquidMorph var(--liquid-morph-speed) var(--liquid-animation-easing) infinite}.liquid-ripple{position:relative;overflow:hidden}.liquid-ripple:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:radial-gradient(circle,var(--accent-purple) 0%,transparent 70%);transform:translate(-50%,-50%);animation:liquidRipple var(--liquid-ripple-duration) var(--liquid-animation-easing);pointer-events:none}.liquid-fill{position:relative;overflow:hidden}.liquid-fill span{position:relative;z-index:1}.liquid-fill:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,var(--accent-purple),var(--accent-teal));transform:scaleX(0);transform-origin:left;transition:transform var(--liquid-fill-duration) var(--liquid-animation-easing);z-index:0}.liquid-fill:hover:after{transform:scaleX(1)}.liquid-glow{animation:liquidGlow var(--liquid-animation-duration) var(--liquid-animation-easing) infinite}.liquid-distort{animation:liquidDistort var(--liquid-animation-duration) var(--liquid-animation-easing) infinite}@media (prefers-reduced-motion: reduce){.liquid-wave,.liquid-morph,.liquid-ripple:before,.liquid-glow,.liquid-distort{animation:none}.liquid-fill:after{transition:none}}.liquid-page-wrapper{position:relative;overflow:hidden}.liquid-page-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.liquid-page-transition{animation-duration:var(--liquid-transition-speed);animation-timing-function:var(--liquid-animation-easing);width:100%}.animating-in{animation-name:liquidPageIn}.animating-out{animation-name:liquidPageOut}.liquid-transition-container{position:relative;width:100%;height:100%;overflow:hidden}.liquid-page-transition{position:relative;width:100%;height:100%;transition:all var(--liquid-transition-duration) cubic-bezier(.4,0,.2,1)}.liquid-page-transition.animating-in{animation:liquidMorphIn var(--liquid-transition-duration) cubic-bezier(.4,0,.2,1)}@keyframes liquidMorphIn{0%{opacity:0;transform:scale(.9) rotate(-2deg);filter:blur(10px)}50%{opacity:.5;transform:scale(1.05) rotate(1deg);filter:blur(5px)}to{opacity:1;transform:scale(1) rotate(0);filter:blur(0px)}}@keyframes liquidPageOut{0%{opacity:1;transform:scale(1) rotate(0);filter:blur(0px)}50%{opacity:.5;transform:scale(.95) rotate(1deg);filter:blur(5px)}to{opacity:0;transform:scale(.9) rotate(-2deg);filter:blur(10px)}}.liquid-transition-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:radial-gradient(circle at center,var(--accent-purple) 0%,var(--accent-teal) 50%,transparent 100%);z-index:9998;pointer-events:none;opacity:0;transform:scale(0) rotate(0);animation:liquidOverlay var(--liquid-transition-duration) cubic-bezier(.4,0,.2,1)}@keyframes liquidOverlay{0%{opacity:0;transform:scale(0) rotate(0)}25%{opacity:.6;transform:scale(1.5) rotate(180deg)}75%{opacity:.3;transform:scale(2.5) rotate(360deg)}to{opacity:0;transform:scale(3) rotate(540deg)}}@media (prefers-reduced-motion: reduce){.liquid-page-transition,.liquid-page-transition.animating-in,.liquid-transition-overlay{animation:none!important;transition:opacity .3s ease!important}.liquid-page-transition.animating-in{opacity:1!important}.liquid-transition-overlay{display:none!important}}.liquid-blob-1{top:10%;left:10%}.liquid-blob-2{bottom:10%;right:10%}.liquid-waves-container{position:fixed;bottom:0;left:0;width:100%;height:100px;z-index:-1;overflow:hidden}.liquid-waves-container .liquid-wave{position:absolute;bottom:0;left:-50%;width:200%;height:100%;background-color:var(--accent-teal);opacity:.1;border-radius:45% 55% 40% 60%/60% 50% 50% 40%;pointer-events:none}.liquid-bg-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.15;animation:liquidMorph 8s ease-in-out infinite}.liquid-bg-blob-1{width:300px;height:300px;background:linear-gradient(135deg,var(--accent-purple),var(--accent-teal));top:20%;left:10%;animation-delay:0s}.liquid-bg-blob-2{width:400px;height:400px;background:linear-gradient(135deg,var(--accent-teal),var(--accent-purple));top:60%;right:15%;animation-delay:3s}.liquid-bg-blob-3{width:250px;height:250px;background:linear-gradient(135deg,var(--accent-purple-light),var(--accent-purple));bottom:30%;left:60%;animation-delay:6s}.liquid-transition-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:radial-gradient(circle,var(--accent-purple) 0%,var(--accent-teal) 100%);z-index:9999;pointer-events:none;opacity:0;transform:scale(0);transition:all .8s cubic-bezier(.4,0,.2,1)}.liquid-transitioning .liquid-transition-overlay{opacity:.8;transform:scale(2)}@media (max-width: 768px){.mobile-stack{flex-direction:column!important;gap:16px!important}.mobile-text-center{text-align:center!important}.mobile-full-width{width:100%!important;max-width:100%!important}.responsive-heading{font-size:32px!important}.responsive-padding-large{padding:24px 20px!important}.responsive-card-padding{padding:20px!important}.responsive-grid-col{grid-template-columns:1fr!important}.responsive-flex-wrap{flex-wrap:wrap!important}}@media (min-width: 769px){.mobile-only{display:none!important}}