:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:inherit;background-color:#f7f7f7;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:block;min-width:320px;min-height:100vh;overflow-x:auto;width:100%}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}@media (orientation: landscape) and (max-height: 600px){.landscape-height{height:100vh!important;min-height:100vh!important;overflow:hidden!important}.app-footer{display:none!important}.tool-panel{flex-direction:row!important;flex-wrap:wrap!important;max-height:none!important;overflow-x:auto!important;padding:4px!important}.tool-panel .MuiIconButton-root,.tool-panel .MuiButton-root{padding:4px!important;min-width:unset!important}.piano-container{height:180vh!important;max-height:180vh!important}::-webkit-scrollbar{width:6px!important;height:6px!important}}body,html{margin:0;padding:0;overflow-x:hidden}#root{max-width:100%;margin:0;padding:0;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}@keyframes pulse-highlight{0%{box-shadow:0 0 #8a2be2cc}70%{box-shadow:0 0 0 10px #8a2be200}to{box-shadow:0 0 #8a2be200}}@keyframes pulse{0%{opacity:1}50%{opacity:.6}to{opacity:1}}.guided-tour-pulse{animation:pulse-highlight 1.5s infinite;position:relative;z-index:1000;border-radius:4px;outline:4px solid rgba(138,43,226,.8)!important;box-shadow:0 0 15px #8a2be2b3!important}.guided-tour-highlight{position:relative;z-index:1000;border-radius:4px;outline:4px solid rgba(138,43,226,.8);box-shadow:0 0 20px #8a2be2b3}.MuiTooltip-popper,.MuiDialog-root{z-index:10001!important}.landing-container{position:relative;width:100vw;height:100vh;overflow:hidden;background:radial-gradient(ellipse at 60% 40%,#2e003e,#0d0d0d 80%)}.bg-blob-container{position:absolute;top:50%;left:50%;width:1200px;height:1200px;transform:translate(-50%,-50%) scale(1.1);filter:blur(220px) saturate(1.5) brightness(1.05);animation:bg-filter 30s ease-in-out infinite alternate;z-index:1;pointer-events:none}.bg-blob{position:absolute;top:0;left:0;width:100%;height:100%;background:conic-gradient(from 180deg at 50% 50%,#001a4d,#003c8f,#0076b6,#00baba,#1ef9d2,#6c49ff,#001a4d 360deg);background-size:cover;border-radius:42% 58% 64% 36%/34% 62% 38% 66%;animation:morph 18s ease-in-out infinite alternate,rotate3d 40s linear infinite,bgGradientShift 90s linear infinite,bgRotate 120s linear infinite;opacity:.5;filter:brightness(1.07) saturate(1.2)}@keyframes morph{0%{border-radius:42% 58% 64% 36%/34% 62% 38% 66%}25%{border-radius:60% 40% 55% 45%/47% 53% 43% 57%}50%{border-radius:43% 57% 34% 66%/54% 36% 68% 46%}75%{border-radius:50% 50% 60% 40%/60% 40% 30% 70%}to{border-radius:42% 58% 64% 36%/34% 62% 38% 66%}}@keyframes rotate3d{0%{transform:rotateX(0) rotateY(0) rotate(0)}to{transform:rotateX(360deg) rotateY(180deg) rotate(360deg)}}@keyframes bg-filter{0%{filter:blur(200px) saturate(2) brightness(1.3) hue-rotate(0deg)}50%{filter:blur(200px) saturate(2.5) brightness(1.5) hue-rotate(180deg)}to{filter:blur(200px) saturate(2) brightness(1.3) hue-rotate(360deg)}}@keyframes bgGradientShift{0%{filter:blur(220px) saturate(1.2) brightness(1.05) hue-rotate(0deg)}50%{filter:blur(220px) saturate(1.5) brightness(1.12) hue-rotate(180deg)}to{filter:blur(220px) saturate(1.2) brightness(1.05) hue-rotate(360deg)}}@keyframes bgRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.blob-container{position:absolute;top:50%;left:50%;width:350px;height:350px;transform:translate(-50%,-50%) scale(1);perspective:1200px;filter:blur(1px);z-index:2;transition:transform 4s ease-in-out;will-change:transform}.blob{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(120deg,#ff3856eb,#c600ffeb,#ff46b4eb);border-radius:47% 53% 68% 32%/61% 34% 66% 39%;box-shadow:0 0 40px 10px #ff385647,0 0 120px 40px #ff46b42e,0 0 60px 15px #c600ff2e;transform-style:preserve-3d;animation:droplet-morph 12s cubic-bezier(.86,0,.07,1) infinite alternate,droplet-tilt 16s linear infinite alternate;opacity:.92;transition:border-radius 4s ease-in-out;will-change:border-radius}.blob:before,.blob:after{content:"";position:absolute;width:100%;height:100%;left:0;top:0;border-radius:inherit;background:linear-gradient(135deg,#ff008059,#ff8c0040);filter:blur(60px) brightness(1.2);opacity:.7;z-index:-1;animation:droplet-morph 14s cubic-bezier(.86,0,.07,1) infinite reverse,droplet-tilt 22s linear infinite}.blob:after{background:linear-gradient(120deg,#ff008033,#ff46b42e);filter:blur(120px) brightness(1.4);opacity:.5;animation-duration:20s,30s}@keyframes droplet-morph{0%{border-radius:47% 53% 68% 32%/61% 34% 66% 39%;transform:scaleZ(1) skewY(0)}20%{border-radius:60% 40% 55% 45%/47% 53% 43% 57%;transform:scale3d(1.04,.96,1) skewY(-2deg)}40%{border-radius:43% 57% 34% 66%/54% 36% 68% 46%;transform:scale3d(.98,1.05,1) skewY(3deg)}60%{border-radius:60% 40% 70% 30%/47% 63% 33% 57%;transform:scale3d(1.08,.95,1) skewY(-6deg)}80%{border-radius:50% 50% 60% 40%/60% 40% 30% 70%;transform:scale3d(.97,1.07,1) skewY(4deg)}to{border-radius:47% 53% 68% 32%/61% 34% 66% 39%;transform:scaleZ(1) skewY(0)}}@keyframes droplet-tilt{0%{transform:rotateX(0) rotateY(0) rotate(0)}35%{transform:rotateX(12deg) rotateY(16deg) rotate(2deg)}60%{transform:rotateX(-8deg) rotateY(10deg) rotate(-8deg)}to{transform:rotateX(0) rotateY(0) rotate(0)}}.landing-content{position:relative;z-index:10;text-align:center;color:#fff;top:50%;transform:translateY(-50%)}.landing-title{font-size:3rem;letter-spacing:.05em;text-shadow:0 0 20px rgba(255,255,255,.5);margin-bottom:1rem}.landing-subtitle{font-size:1.5rem;margin-bottom:2rem;opacity:.8}.landing-button{padding:1rem 2rem;font-size:1rem;color:#fff;background:linear-gradient(45deg,#00dbde,#fc00ff);border:none;border-radius:50px;cursor:pointer;box-shadow:0 0 20px #00dbde80,0 0 20px #fc00ff80;transition:transform .3s ease,box-shadow .3s ease}.landing-button:hover{transform:scale(1.05);box-shadow:0 0 30px #00dbdeb3,0 0 30px #fc00ffb3}