/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@import "https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Press+Start+2P&display=swap";@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-duration:initial}}}:root{--bg:#0f172a;--fg:#e6eef8;--white-key:#fff;--black-key:#111827;--accent:#7c3aed}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.z-50{z-index:50}.z-\[100\]{z-index:100}.container{width:100%}.block{display:block}.flex{display:flex}.grid{display:grid}.h-full{height:100%}.h-screen{height:100vh}.min-h-screen{min-height:100vh}.w-full{width:100%}.w-screen{width:100vw}.max-w-\[800px\]{max-width:800px}.max-w-full{max-width:100%}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.resize{resize:both}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:3.40282e+38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.text-center{text-align:center}.text-right{text-align:right}.text-\[10px\]{font-size:10px}.text-\[200px\]{font-size:200px}.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.duration-300{--tw-duration:.3s;transition-duration:.3s}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}body{background-color:var(--bg);color:var(--fg);font-family:Poppins,sans-serif}h1{font-family:Press Start\ 2P,cursive}.keyboard{-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;position:relative}.key{border:1px solid var(--white-key-border);box-sizing:border-box;justify-content:center;align-items:flex-end;font-size:.75rem;display:flex}.key.white{background:var(--white-key);color:var(--black-key);width:30px;height:320px}.key.black,.key.white{border-bottom-right-radius:8px;border-bottom-left-radius:8px}.key.black{background:var(--black-key);color:#fff;z-index:20;width:18px;height:200px;position:absolute}@keyframes blink{50%{opacity:.5}}.key.highlight-melody{background:var(--note-color);color:var(--fg);animation:blink 1s linear infinite}.key.highlight-pressed{box-shadow:0 0 15px var(--accent);background:var(--accent)!important}.key-label-white{color:var(--accent);opacity:.8;margin-bottom:4px;font-size:14px;font-weight:800}.key-label-black{color:#fff;opacity:.8;pointer-events:none;font-size:11px;font-weight:800;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.canvas-wrap{background:#021024;height:440px;margin-top:1rem;position:relative}.controls-grid>div{background-color:#1f2937;border-radius:.5rem;margin:.5rem;padding:1rem}.controls-grid{padding:1rem}.controls-grid label svg{margin-right:.5rem}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}