@import"https://fonts.googleapis.com/css2?family=Doto:wght@600&display=swap";@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap";@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap";.keyboard-container{position:relative;flex:1;height:150px;border-radius:10px 10px 0 0;padding:0;background:#1a1a1a;border:1px solid rgba(255,255,255,.08);border-bottom:none;overflow:visible;z-index:1}.piano-key{position:absolute;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:none;transform:none!important;animation:none!important;will-change:auto}.white{background:linear-gradient(180deg,#fff,#f5f5f5 25%,#eee 45%,#e8e8e8 85%,#ddd);width:36px;height:150px;border:1px solid #333;border-radius:0;z-index:2;box-shadow:-1px 0 1px #0003,inset 0 -1px 1px #0003,inset 1px 0 2px #ffffff4d,inset 0 10px 10px -8px #00000080,0 8px 6px -4px #00000080;transition:none;transform:none!important;animation:none!important;will-change:auto}.white:active,.white.active{background:linear-gradient(180deg,#ffecec,#ffd4d4 25%,#ffc0c0 45%,#ffb8b8 85%,#ffaeae);box-shadow:-1px 0 2px #0003,inset 0 -1px 2px #0000001a,inset 0 2px 4px #ff44444d;transition:none;transform:none!important;animation:none!important;will-change:auto}.black{background:linear-gradient(180deg,#333,#262626 85%,#1a1a1a);width:22px;height:95px;border-radius:0 0 2px 2px;z-index:3;border:1px solid #111;box-shadow:inset -1px 0 1px #ffffff0d,inset 1px 0 1px #ffffff0d,0 2px 4px #00000080,inset 0 -1px 2px #00000080,inset 0 10px 10px -8px #000000b3,0 8px 6px -4px #000000b3;transition:none}.black:active,.black.active{background:linear-gradient(180deg,#4d1f1f,#3d1919 85%,#2e1414);box-shadow:inset -1px 0 2px #f443,inset 1px 0 2px #f443,0 1px 2px #00000080,inset 0 -1px 2px #ff44444d;transition:none}.white:not(:last-child){border-right:1px solid rgba(0,0,0,.1)}.white:nth-child(12n+1){left:calc(0 * 36px + var(--octave-offset, 0px))}.white:nth-child(12n+3){left:calc(1 * 36px + var(--octave-offset, 0px))}.white:nth-child(12n+5){left:calc(2 * 36px + var(--octave-offset, 0px))}.white:nth-child(12n+6){left:calc(3 * 36px + var(--octave-offset, 0px))}.white:nth-child(12n+8){left:calc(4 * 36px + var(--octave-offset, 0px))}.white:nth-child(12n+10){left:calc(5 * 36px + var(--octave-offset, 0px))}.white:nth-child(12n+12){left:calc(6 * 36px + var(--octave-offset, 0px))}.black:nth-child(12n+2){left:calc(.85 * 36px + var(--octave-offset, 0px))}.black:nth-child(12n+4){left:calc(1.85 * 36px + var(--octave-offset, 0px))}.black:nth-child(12n+7){left:calc(3.85 * 36px + var(--octave-offset, 0px))}.black:nth-child(12n+9){left:calc(4.85 * 36px + var(--octave-offset, 0px))}.black:nth-child(12n+11){left:calc(5.85 * 36px + var(--octave-offset, 0px))}.piano-key:nth-child(n+1):nth-child(-n+12){--octave-offset: 0px}.piano-key:nth-child(n+13):nth-child(-n+24){--octave-offset: 252px}.piano-key:nth-child(n+25):nth-child(-n+36){--octave-offset: 504px}.piano-key:nth-child(n+37):nth-child(-n+48){--octave-offset: 756px}.piano-key[data-note=C5]{left:1008px;z-index:1}.piano-key[data-note=C5] .key-label{display:flex}.key-label{display:none;font-size:8px;font-family:monospace;color:#666;font-weight:700;margin-bottom:8px}.white:nth-child(12n+1) .key-label{display:flex}.loading{color:#fff;font-size:16px;text-align:center;padding:20px}.midi-controls{display:flex;align-items:center;gap:24px;padding:12px 20px;background:#161616;border-radius:10px 10px 0 0;border-bottom:1px solid rgba(255,255,255,.06);min-height:64px}.midi-input-section{display:flex;gap:10px;align-items:center;flex-shrink:0}.effects-controls{display:flex;gap:16px;align-items:flex-start;flex-shrink:0}.effects-controls.master-cluster{margin-left:auto}.midi-select{background:#1a1a1a;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:6px 10px;font-size:12px;font-family:inherit;cursor:pointer;min-width:160px;height:32px;transition:border-color .15s ease,background-color .15s ease}.midi-select:hover{border-color:#ff444480;background:#1f1f1f}.midi-select:focus{outline:none;border-color:#f44}.piano-container{display:flex;flex-direction:column;width:100%;padding:0;background:#0f0f0f;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;position:relative}.modulation-panel{width:100%;margin:0;display:flex;gap:12px;align-items:stretch;justify-content:flex-start;padding:16px 20px;background:#141414;border-bottom:1px solid rgba(255,255,255,.06)}.filter-section,.envelope-section,.lfo-section,.mod-env-section{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 16px;background:#1a1a1a;border-radius:8px;border:1px solid rgba(255,255,255,.06);min-width:140px;flex:0 0 auto}.filter-section h4,.envelope-section h4,.lfo-section h4,.mod-env-section h4{color:#fff9;margin:0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;font-family:var(--font-primary);padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08);width:100%;text-align:center}.filter-section h4:after,.envelope-section h4:after{display:none}.knob-row{display:flex;flex-wrap:nowrap;gap:10px;justify-content:center;align-items:flex-start}.knob-container{display:flex;flex-direction:column;align-items:center;gap:6px;transform-origin:center center}.knob-label{color:#ffffff8c;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:1px;font-family:var(--font-primary)}.knob-value{display:none}.keyboard-section{position:relative;display:flex;align-items:stretch;gap:0;width:100%;padding:16px 20px 0;background:#141414}.wheels-container{display:flex;gap:12px;padding:10px 12px 0;align-items:flex-start;background:#1a1a1a;border:1px solid rgba(255,255,255,.06);border-bottom:none;border-radius:10px 0 0;border-right:none}.wheel-container{display:flex;flex-direction:column;align-items:center;gap:4px}.wheel-label{color:#aaa;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.wheel{width:24px;height:100px;background:#111;border-radius:12px;position:relative;cursor:pointer;box-shadow:inset 0 2px 4px #00000080,0 1px #ffffff0d;border:1px solid #333;overflow:hidden}.wheel:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,rgba(0,0,0,.2),transparent 20% 80%,rgba(0,0,0,.2));pointer-events:none}.wheel-indicator{position:absolute;left:2px;right:2px;height:4px;background:var(--wheel-color);border-radius:2px;box-shadow:0 0 5px var(--wheel-color);transform:translateY(calc((1 - var(--wheel-value)) * 100% - 2px));transition:transform .1s ease-out}.wheel-value{color:var(--wheel-color);font-size:10px;font-family:Monaco,monospace;background:#111111e6;padding:2px 6px;border-radius:3px;border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 3px #00000080;min-width:24px;text-align:center;text-shadow:none}.effects-controls .knob-container{min-width:56px}.preset-display{width:220px;margin-left:auto;position:relative;padding:8px 12px;display:flex;align-items:center;justify-content:center;background:#0a0a0a;border:1px solid rgba(255,255,255,.06);border-radius:8px;box-shadow:inset 0 2px 8px #00000080}.LCD{height:auto;width:100%;max-height:100%;display:block}.LCD text{text-shadow:0 0 5px rgba(255,68,68,.5)}.preset-info{display:flex;flex-direction:column;gap:4px;font-family:HD44780,monospace;color:#2fa4f6;text-shadow:0 0 25px #3fb4f6,0 0 5px #3fb4f6}.preset-name{font-size:16px;letter-spacing:1px;text-transform:uppercase;text-align:center}.preset-number{font-size:16px;text-align:center;letter-spacing:1px}.slider-container{display:flex;flex-direction:column;align-items:center;gap:4px}.slider-label{color:#aaa;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.slider{width:24px;height:100px;background:#111;border-radius:12px;position:relative;cursor:pointer;box-shadow:inset 0 2px 4px #00000080,0 1px #ffffff0d;border:1px solid #333;overflow:hidden}.slider-track{position:absolute;top:2px;bottom:2px;left:50%;width:2px;background:#ffffff1a;transform:translate(-50%)}.slider-thumb{position:absolute;left:2px;right:2px;height:4px;background:var(--slider-color, #ff4444);border-radius:2px;box-shadow:0 0 5px var(--slider-color, #ff4444);transform:translateY(calc((1 - var(--slider-value, 0)) * 67px + 2px))}.slider-value{color:var(--slider-color, #ff4444);font-size:10px;font-family:Monaco,monospace;background:#111111e6;padding:2px 6px;border-radius:3px;border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 3px #00000080;min-width:24px;text-align:center;text-shadow:none}.arp-controls{display:flex;align-items:center;gap:10px;padding:0 10px}.arp-toggle-group{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.arp-toggle,.arp-hold{display:flex;align-items:center;gap:6px}.arp-header,.arp-hold span{font-size:10px;color:#f44;order:-1;min-width:30px}.toggle-switch{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:30px;height:16px;background:#161616;border:1px solid #333;border-radius:10px;position:relative;cursor:pointer;transition:background-color .2s}.toggle-switch:before{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#333;top:1px;left:1px;transition:transform .2s,background-color .2s}.toggle-switch:checked{background:#161616;border-color:#f44}.toggle-switch:checked:before{transform:translate(14px);background:#f44}.toggle-switch:hover:before{background:#f44}.arp-rates,.arp-directions{display:flex;gap:4px}.radio-label{display:flex;align-items:center;gap:2px;cursor:pointer}.radio-label span{font-size:10px;color:#f44}.radio-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border:1px solid #333;border-radius:50%;background:#161616;cursor:pointer;position:relative}.radio-input:checked:after{content:"";position:absolute;width:6px;height:6px;top:50%;left:50%;transform:translate(-50%,-50%);background:#f44;border-radius:50%;box-shadow:0 0 5px #f44}.arp-octave,.arp-bpm{display:flex;flex-direction:column;align-items:center}.soundfont-preview{width:100%;color:#fff;padding:0}.soundfont-title{color:#fff;margin:0 0 20px;font-size:24px;font-weight:600;letter-spacing:-.01em}.metadata-section{margin-bottom:20px;width:100%;background:#ffffff08;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:24px;border:1px solid rgba(255,255,255,.08)}.metadata-section h2{color:#fff;margin:0 0 20px;font-size:20px;font-weight:600;letter-spacing:-.01em}.metadata-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;color:#aaa;width:100%;font-size:14px;font-family:var(--font-mono)}.synth-panel{margin:24px 0;width:100%}.presets-section{width:100%}.presets-section h3{color:#fff;margin:0 0 16px;font-size:18px;font-weight:600;letter-spacing:-.01em}.presets-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;width:100%}.preset-column{background:#141414;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}.presets-header{display:grid;grid-template-columns:80px 1fr;padding:8px 12px;background:#ffffff08;color:#ffffff80;border-bottom:1px solid rgba(255,255,255,.06);font-size:10px;font-family:var(--font-mono);letter-spacing:1.2px;text-transform:uppercase;font-weight:600}.presets-list{width:100%}.preset-row{display:grid;grid-template-columns:80px 1fr;padding:6px 12px;cursor:pointer;transition:background-color .15s ease;border-bottom:1px solid rgba(255,255,255,.03);font-family:var(--font-mono);font-size:12px}.preset-row:last-child{border-bottom:none}.preset-row .col{color:#ffffffbf;padding:0}.preset-row:hover{background:#ffffff0a}.preset-row:hover .col{color:#fff}.preset-row.selected{background:#ff444414}.preset-row.selected .col{color:#f44}.col{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.name-col{margin-left:8px}.conversion-status{background:#1a1a1a99;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:1.5rem;margin:1rem 0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.status-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.status-header h3{margin:0;color:#fff;font-family:var(--font-primary);font-weight:500}.progress-bar{background:#ffffff1a;height:4px;border-radius:2px;overflow:hidden;margin:1rem 0;position:relative}.progress-fill{background:var(--accent-color);height:100%;border-radius:2px;transition:width .3s ease-out;position:relative}.progress-fill:after{content:"";position:absolute;top:0;right:0;height:100%;width:20px;background:linear-gradient(90deg,transparent,var(--accent-glow));filter:blur(2px)}.error-message{color:var(--accent-color);margin:.5rem 0 0;font-size:.9rem}.action-buttons-container{display:flex;gap:12px;margin-top:16px}.action-button{background:var(--accent-color);color:#fff;border:none;border-radius:4px;padding:.75rem 1.5rem;font-family:var(--font-primary);font-weight:500;cursor:pointer;transition:all .2s ease;flex:1}.action-button:hover{background:#f55;box-shadow:0 0 15px var(--accent-glow)}.action-button:disabled{background:#666;cursor:not-allowed;box-shadow:none}.action-button.download{background:#2a2a2a;border:1px solid var(--accent-color)}.action-button.download:hover{background:#3a3a3a;box-shadow:0 0 15px var(--accent-glow)}.retry-button{background:transparent;color:var(--accent-color);border:1px solid var(--accent-color);border-radius:4px;padding:.5rem 1rem;font-family:var(--font-primary);font-size:.9rem;cursor:pointer;transition:all .2s ease}.retry-button:hover{background:#ff44441a;box-shadow:0 0 10px var(--accent-glow)}.download{width:100%;max-width:100%;text-align:center;margin-bottom:1.5rem;background:var(--isla-card-background);padding:20px;border-radius:8px}.download-button{display:inline-block;padding:12px 24px;background:var(--isla-accent);color:var(--isla-white);text-decoration:none;border-radius:4px;font-weight:500;transition:background .3s ease;font-size:1.1rem}.action-button.browse{background:#2a2a2a;border:1px solid rgba(255,255,255,.2);color:#fff}.action-button.browse:hover{background:#3a3a3a;border-color:#fff6;box-shadow:0 0 15px #ffffff1a}.file-upload{width:100%;padding:0}.dropzone{border:2px dashed var(--isla-border-color);border-radius:8px;padding:40px;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--isla-background);margin-bottom:20px}.dropzone.active{border-color:var(--isla-accent);background:var(--isla-background-hover)}.dropzone p{margin:0;font-size:1.1em;color:var(--isla-text)}.error{color:var(--isla-error);padding:10px;margin:10px 0;border-radius:4px;background:var(--isla-error-background)}.metadata{background:var(--isla-card-background);padding:20px;border-radius:8px;margin:20px 0}.metadata h3{margin-top:0;color:var(--isla-heading)}.metadata h4{margin:20px 0 10px;color:var(--isla-heading)}.metadata p{margin:10px 0;color:var(--isla-text)}.metadata ul{list-style:none;padding:0;margin:0}.metadata li{padding:5px 0;color:var(--isla-text)}.download{text-align:center;margin:20px 0}.download-button{display:inline-block;padding:12px 24px;background:var(--isla-accent);color:var(--isla-white);text-decoration:none;border-radius:4px;font-weight:500;transition:background .3s ease}.download-button:hover{background:var(--isla-accent-hover)}:root{--accent-color: #ff4444;--accent-glow: rgba(255, 68, 68, .3);--bg: #0a0a0a;--bg-elevated: #141414;--border-subtle: rgba(255, 255, 255, .08);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .65);--text-muted: rgba(255, 255, 255, .45);--font-primary: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", monospace}body{margin:0;background:var(--bg);overflow-x:hidden;font-family:var(--font-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{min-height:100vh;background:var(--bg);color:var(--text-primary);padding:0;position:relative}header{padding:0 24px;max-width:1200px;margin:40px auto 32px;position:relative}h1{font-size:2.25rem;margin:0;font-weight:600;color:var(--text-primary);letter-spacing:-.02em;line-height:1.1}.subtitle{color:var(--text-muted);font-size:1rem;margin:8px 0 0;font-weight:400}main{width:100%;max-width:1200px;margin:0 auto;padding:0 24px 80px;display:flex;flex-direction:column;align-items:stretch;position:relative;z-index:1}:root{--isla-background: #000000;--isla-background-hover: rgba(255, 255, 255, .05);--isla-text: #ffffff;--isla-text-muted: rgba(255, 255, 255, .7);--isla-heading: #ffffff;--isla-accent: #ff0000;--isla-accent-hover: #cc0000;--isla-white: #ffffff;--isla-border-color: rgba(255, 255, 255, .2);--isla-card-background: rgba(255, 255, 255, .05);--isla-header-background: rgba(0, 0, 0, .8);--isla-footer-background: rgba(0, 0, 0, .9);--isla-error: #ff3333;--isla-error-background: rgba(255, 51, 51, .1);--isla-success: #00ff00;--isla-success-background: rgba(0, 255, 0, .1)}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--isla-background);color:var(--isla-text)}h1,h2,h3,h4,h5,h6{font-family:var(--isla-font-family);font-weight:700;line-height:1.2;margin-bottom:1rem}a{color:var(--isla-white);text-decoration:none;transition:color .2s ease}a:hover{color:var(--isla-accent)}.isla-button{display:inline-block;padding:12px 24px;background:transparent;border:2px solid var(--isla-white);color:var(--isla-white);font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .2s ease}.isla-button:hover,.isla-button--primary{background:var(--isla-white);color:var(--isla-black)}.isla-button--primary:hover{background:transparent;color:var(--isla-white)}.isla-input{background:transparent;border:2px solid var(--isla-white);color:var(--isla-white);padding:12px;width:100%;font-size:1rem;transition:border-color .2s ease}.isla-input:focus{outline:none;border-color:var(--isla-accent)}.isla-input::placeholder{color:#fff9}.isla-container{max-width:1440px;margin:0 auto;padding:0 15px}.isla-card{background:var(--isla-dark);padding:24px;border:1px solid rgba(255,255,255,.1)}.text-center{text-align:center}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.text-sm{font-size:.875rem}