:root{--c-black:#373737;--c-blue:#1295db;--c-blue-d:#1f6fb5;--c-green:#07e26d;--c-red:#ef496f;--c-pink:#fd7683;--c-yellow:#facc94;--c-orange:#ff8e08;--glow-c:#f44;--glow-d:#ff8c00;--glow-e:gold;--glow-f:#0c6;--glow-g:#00bfff;--glow-a:#4169e1;--glow-b:#9b59b6;--glow-sharp:#ff69b4}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{color:var(--c-black);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans SC,sans-serif}#app{flex-direction:column;height:100%;display:flex}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:inherit;font-size:inherit;background:0 0;border:none}ul,ol{list-style:none}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}@keyframes glow-lift{0%{transform:scale(1)}40%{transform:scale(1.035)translateY(-1.5px)}to{transform:scale(1)}}@keyframes glow-ring{0%{box-shadow:0 0 0 0 var(--glow-color,transparent)}50%{box-shadow:0 0 18px 4px var(--glow-color,transparent)}to{box-shadow:0 0 8px 2px var(--glow-color,transparent)}}@keyframes glow-pulse{0%,to{box-shadow:0 0 8px 2px var(--glow-color,transparent)}50%{box-shadow:0 0 22px 6px var(--glow-color,transparent)}}@keyframes glow-radial{0%{box-shadow:0 0 0 0 var(--glow-color,transparent)}to{box-shadow:0 0 30px 10px var(--glow-color,transparent)}}.wkey.glow-c{animation:.3s ease-out glow-lift,.4s ease-out glow-ring;--glow-color:var(--glow-c)!important;background:linear-gradient(#ffe8e8,#fff5f5)!important}.bkey.glow-c{animation:.35s ease-out glow-radial;--glow-color:var(--glow-c)!important;background:linear-gradient(#5a2222,#4a1a1a)!important}.wkey.glow-d{animation:.3s ease-out glow-lift;--glow-color:var(--glow-d)!important;box-shadow:0 8px 20px -4px var(--glow-d)!important;background:linear-gradient(#fff0e0,#fffaf5)!important}.bkey.glow-d{animation:.35s ease-out glow-radial;--glow-color:var(--glow-d)!important;background:linear-gradient(#5a3a1a,#4a2e12)!important}.wkey.glow-e{animation:.28s ease-out glow-lift;--glow-color:var(--glow-e)!important;box-shadow:0 -4px 12px 0 var(--glow-e), 0 4px 12px 0 var(--glow-e)!important;background:linear-gradient(#fff8e0,#fffdf5)!important}.bkey.glow-e{animation:.4s ease-out glow-pulse;--glow-color:var(--glow-e)!important;background:linear-gradient(#5a4a1a,#4a3a12)!important}.wkey.glow-f{animation:.32s ease-out glow-lift,.45s ease-out glow-ring;--glow-color:var(--glow-f)!important;background:linear-gradient(#e8fff0,#f5fff8)!important}.bkey.glow-f{animation:.38s ease-out glow-radial;--glow-color:var(--glow-f)!important;background:linear-gradient(#1a4a2e,#123a22)!important}.wkey.glow-g{animation:.28s ease-out glow-lift,.6s ease-out glow-pulse;--glow-color:var(--glow-g)!important;background:linear-gradient(#e8faff,#f5feff)!important}.bkey.glow-g{animation:.35s ease-out glow-radial;--glow-color:var(--glow-g)!important;background:linear-gradient(#1a3a4a,#122e3a)!important}.wkey.glow-a{animation:.3s ease-out glow-lift;--glow-color:var(--glow-a)!important;box-shadow:inset 0 0 16px 2px var(--glow-a), 0 0 10px 2px var(--glow-a)!important;background:linear-gradient(#e8eeff,#f5f8ff)!important}.bkey.glow-a{animation:.45s ease-out glow-pulse;--glow-color:var(--glow-a)!important;background:linear-gradient(#1a2a5a,#12204a)!important}.wkey.glow-b{animation:.34s ease-out glow-lift;--glow-color:var(--glow-b)!important;box-shadow:0 0 24px 6px var(--glow-b)!important;background:linear-gradient(#f3e8ff,#faf5ff)!important}.bkey.glow-b{animation:.4s ease-out glow-radial;--glow-color:var(--glow-b)!important;background:linear-gradient(#3a1a5a,#2e124a)!important}.wkey.glow-sharp{animation:.26s ease-out glow-lift,.5s ease-out glow-radial;--glow-color:var(--glow-sharp)!important;background:linear-gradient(#ffe8f5,#fff5fa)!important}.bkey.glow-sharp{animation:.3s ease-out glow-radial;--glow-color:var(--glow-sharp)!important;background:linear-gradient(#5a1a3a,#4a122e)!important}.auto-key-active[data-name^=C]{background:#fcc!important;box-shadow:0 0 20px #f449!important}.auto-key-active[data-name^=D]{background:#ffe0b3!important;box-shadow:0 0 20px #ff8c0099!important}.auto-key-active[data-name^=E]{background:#fff5b3!important;box-shadow:0 0 20px #ffd70099!important}.auto-key-active[data-name^=F]{background:#b3ffcc!important;box-shadow:0 0 20px #0c69!important}.auto-key-active[data-name^=G]{background:#b3f0ff!important;box-shadow:0 0 20px #00bfff99!important}.auto-key-active[data-name^=A]{background:#b3c6ff!important;box-shadow:0 0 20px #4169e199!important}.auto-key-active[data-name^=B]{background:#d9b3ff!important;box-shadow:0 0 20px #9b59b699!important}.auto-key-active[data-name^=C\#],.auto-key-active[data-name^=D\#],.auto-key-active[data-name^=F\#],.auto-key-active[data-name^=G\#],.auto-key-active[data-name^=A\#]{background:#ffb3d9!important;box-shadow:0 0 20px #ff69b499!important}