: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}.glass-panel{background:#ffffff0d;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff1a}.glass-panel-strong{background:#ffffff14;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.15);border-radius:20px;box-shadow:0 12px 40px #0006,inset 0 1px #ffffff26}.glass-panel-subtle{background:#ffffff08;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:0 4px 24px #0003,inset 0 1px #ffffff14}.glass-nav{background:#ffffff0f;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 4px 20px #00000026}.glass-toolbar{background:#ffffff12;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 8px 32px #00000040,inset 0 1px #ffffff1f;transition:all .3s cubic-bezier(.4,0,.2,1)}.glass-toolbar:hover{background:#ffffff17;border-color:#ffffff26;box-shadow:0 12px 40px #0000004d,inset 0 1px #ffffff26}.glass-button{background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:12px;transition:all .2s ease}.glass-button:hover{background:#ffffff26;border-color:#ffffff4d;transform:translateY(-1px)}.glass-button:active{transform:translateY(0);background:#ffffff14}.glass-violet{background:#d946ef1a;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(217,70,239,.2);border-radius:16px;box-shadow:0 8px 32px #d946ef26,inset 0 1px #ffffff1a}.glass-violet:hover{background:#d946ef26;border-color:#d946ef4d;box-shadow:0 12px 40px #d946ef33,inset 0 1px #ffffff26}.glass-blue{background:linear-gradient(135deg,#60a5fa1a,#d946ef0d);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border:1px solid rgba(96,165,250,.2);border-radius:16px;box-shadow:0 8px 32px #60a5fa26,inset 0 1px #ffffff1a}.glass-blue:hover{background:linear-gradient(135deg,#60a5fa26,#d946ef14);border-color:#60a5fa66;box-shadow:0 12px 40px #60a5fa40,inset 0 1px #ffffff26}.glass-card{background:#ffffff0a;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:20px;box-shadow:0 8px 32px #0003,inset 0 1px #ffffff1a;transition:all .3s cubic-bezier(.4,0,.2,1)}.glass-card:hover{background:#ffffff0f;border-color:#ffffff26;transform:translateY(-4px);box-shadow:0 16px 48px #0000004d,inset 0 1px #ffffff26}.glass-input{background:#ffffff0d;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.1);border-radius:12px;transition:all .2s ease}.glass-input:focus-within{background:#ffffff14;border-color:#ff6b3566;box-shadow:0 0 0 2px #ff6b351a,0 4px 20px #00000026}.bg-theme-1{background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460,#533483,#ff6b35)}.bg-theme-2{background:linear-gradient(135deg,#0c0c0c,#1a1a1a,#2d2d2d,#404040,#1a1a1a);background-size:400% 400%;animation:gradientShift 20s ease infinite}.bg-theme-3{background:linear-gradient(135deg,#1a0033,#306,#4d0099,#60c,#7f00ff);background-size:400% 400%;animation:gradientShift 18s ease infinite}.bg-theme-4{background:linear-gradient(135deg,#012,#036,#05a,#07d,#09f);background-size:400% 400%;animation:gradientShift 16s ease infinite}.bg-theme-5{background:linear-gradient(135deg,#0a0a0a,#1a0a1a,#2a1a2a,#3a2a3a,#4a3a4a);background-size:400% 400%;animation:gradientShift 22s ease infinite}.bg-theme-6{background:linear-gradient(135deg,#001a00,#030,#004d00,#060,green);background-size:400% 400%;animation:gradientShift 19s ease infinite}.bg-theme-7{background:linear-gradient(135deg,#1a1a00,#330,#4d4d00,#660,olive);background-size:400% 400%;animation:gradientShift 17s ease infinite}.bg-theme-8{background:linear-gradient(135deg,#1a0000,#300,#4d0000,#600,maroon);background-size:400% 400%;animation:gradientShift 21s ease infinite}.bg-theme-9{background:linear-gradient(135deg,#0f1419,#1a2332,#253248,#2d4a6b,#35628e,#3d7ab1);background-size:400% 400%;animation:gradientShift 14s ease infinite}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.bg-neutral-dark{background-color:#0f1720;background:radial-gradient(1200px 900px at 18% 8%,#4866946b,#48669400 62%),radial-gradient(1000px 760px at 88% 92%,#c4667c57,#c4667c00 58%),linear-gradient(120deg,#48669424,#c4667c1f),linear-gradient(135deg,#0f1720,#0b1117);background-attachment:fixed,fixed,fixed;background-repeat:no-repeat,no-repeat,no-repeat}.bg-neutral-light{background:radial-gradient(1200px 800px at 10% 0%,rgba(180,198,230,.25),transparent 60%),radial-gradient(900px 700px at 100% 100%,rgba(238,196,210,.22),transparent 55%),linear-gradient(180deg,#fafbfc,#f4f6f8)}.floating-orbs{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.orb,.floating-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:1}.orb-1{width:120px;height:120px;background:radial-gradient(circle,rgba(255,255,255,.15) 0%,rgba(255,255,255,.05) 50%,transparent 100%);top:10%;left:15%;animation:float-drift-1 25s ease-in-out infinite;animation-delay:0s}.orb-2{width:80px;height:80px;background:radial-gradient(circle,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 50%,transparent 100%);top:60%;right:20%;animation:float-drift-2 30s ease-in-out infinite;animation-delay:-5s}.orb-3{width:100px;height:100px;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,rgba(255,255,255,.03) 50%,transparent 100%);bottom:20%;left:25%;animation:float-drift-3 35s ease-in-out infinite;animation-delay:-10s}.orb-4{width:60px;height:60px;background:radial-gradient(circle,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 50%,transparent 100%);top:30%;right:40%;animation:float-drift-4 28s ease-in-out infinite;animation-delay:-15s}.orb-5{width:90px;height:90px;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,rgba(255,255,255,.03) 50%,transparent 100%);bottom:40%;right:15%;animation:float-drift-5 32s ease-in-out infinite;animation-delay:-20s}.orb-6{width:70px;height:70px;background:radial-gradient(circle,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 50%,transparent 100%);top:80%;left:60%;animation:float-drift-6 26s ease-in-out infinite;animation-delay:-2.5s}.gradient-text{background:linear-gradient(to right,#60a5fa,#d946ef,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;font-weight:700}.gradient-text-soft{background:linear-gradient(90deg,#fffffffa,#d2e2ffe6 45%,#ffe0f0e6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;font-weight:700}.gradient-text-hero{background:linear-gradient(to right,#60a5fa,#d946ef,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;font-weight:700;font-size:2.5rem;line-height:1.2}.gradient-text-section{background:linear-gradient(to right,#60a5fa,#d946ef,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;font-weight:600;font-size:1.75rem;line-height:1.3}@keyframes float-drift-1{0%{transform:translate(0) rotate(0) scale(1);opacity:.6}15%{transform:translate(30px,-20px) rotate(45deg) scale(1.1);opacity:.8}35%{transform:translate(-15px,-40px) rotate(90deg) scale(.9);opacity:.5}50%{transform:translate(25px,-10px) rotate(180deg) scale(1.2);opacity:.7}70%{transform:translate(-30px,15px) rotate(270deg) scale(.8);opacity:.9}85%{transform:translate(10px,-25px) rotate(315deg) scale(1.05);opacity:.6}to{transform:translate(0) rotate(360deg) scale(1);opacity:.6}}@keyframes float-drift-2{0%{transform:translate(0) rotate(0) scale(1);opacity:.5}20%{transform:translate(-25px,30px) rotate(60deg) scale(1.15);opacity:.7}40%{transform:translate(35px,-15px) rotate(120deg) scale(.85);opacity:.9}60%{transform:translate(-20px,25px) rotate(200deg) scale(1.1);opacity:.4}80%{transform:translate(15px,-35px) rotate(280deg) scale(.95);opacity:.8}to{transform:translate(0) rotate(360deg) scale(1);opacity:.5}}@keyframes float-drift-3{0%{transform:translate(0) rotate(0) scale(1);opacity:.7}25%{transform:translate(40px,20px) rotate(75deg) scale(.9);opacity:.5}45%{transform:translate(-30px,-25px) rotate(150deg) scale(1.2);opacity:.8}65%{transform:translate(20px,35px) rotate(225deg) scale(.8);opacity:.6}85%{transform:translate(-35px,-10px) rotate(300deg) scale(1.1);opacity:.9}to{transform:translate(0) rotate(360deg) scale(1);opacity:.7}}@keyframes float-drift-4{0%{transform:translate(0) rotate(0) scale(1);opacity:.4}18%{transform:translate(-20px,-30px) rotate(50deg) scale(1.3);opacity:.7}38%{transform:translate(25px,15px) rotate(110deg) scale(.7);opacity:.9}58%{transform:translate(-35px,20px) rotate(190deg) scale(1.1);opacity:.3}78%{transform:translate(30px,-25px) rotate(260deg) scale(.9);opacity:.8}to{transform:translate(0) rotate(360deg) scale(1);opacity:.4}}@keyframes float-drift-5{0%{transform:translate(0) rotate(0) scale(1);opacity:.6}22%{transform:translate(35px,-20px) rotate(65deg) scale(.85);opacity:.4}42%{transform:translate(-25px,30px) rotate(130deg) scale(1.25);opacity:.8}62%{transform:translate(15px,-35px) rotate(210deg) scale(.9);opacity:.7}82%{transform:translate(-30px,10px) rotate(290deg) scale(1.05);opacity:.5}to{transform:translate(0) rotate(360deg) scale(1);opacity:.6}}@keyframes float-drift-6{0%{transform:translate(0) rotate(0) scale(1);opacity:.8}16%{transform:translate(-15px,25px) rotate(40deg) scale(1.1);opacity:.6}36%{transform:translate(30px,-15px) rotate(100deg) scale(.8);opacity:.9}56%{transform:translate(-25px,-30px) rotate(170deg) scale(1.2);opacity:.4}76%{transform:translate(20px,25px) rotate(250deg) scale(.95);opacity:.7}96%{transform:translate(-10px,-20px) rotate(320deg) scale(1.05);opacity:.8}to{transform:translate(0) rotate(360deg) scale(1);opacity:.8}}