@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}html,body,#root{height:100%;width:100%;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}input,textarea,[contenteditable=true]{user-select:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text}:root{--gb-lightest: #9BBC0F;--gb-light: #8BAC0F;--gb-dark: #306230;--gb-darkest: #0F380F;--gb-bg: #0F380F;--gb-text: #9BBC0F;--gb-border: #8BAC0F;--gb-highlight: #9BBC0F}body{margin:0;padding:0;font-family:"Press Start 2P",cursive;background-color:var(--gb-bg);color:var(--gb-text);line-height:1.5;image-rendering:pixelated}*{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.2;text-transform:uppercase;letter-spacing:1px;text-shadow:2px 2px 0 var(--gb-darkest)}h1{font-size:1.5rem}h2{font-size:1.3rem}h3{font-size:1.1rem}h4,h5,h6{font-size:1rem}p{margin-top:0;line-height:1.5;font-size:.8rem;margin-bottom:1rem}a{color:var(--gb-lightest);text-decoration:none;position:relative;padding:0 2px}a:hover{color:var(--gb-light);text-decoration:none;background-color:var(--gb-dark)}a:active{color:var(--gb-darkest);background-color:var(--gb-lightest)}input,select,textarea{font-family:inherit;font-size:.8rem;padding:.5rem;border:4px solid var(--gb-light);background-color:var(--gb-darkest);color:var(--gb-lightest);width:100%;margin-bottom:1rem}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gb-lightest);box-shadow:0 0 0 2px var(--gb-dark)}button{font-family:"Press Start 2P",cursive;background-color:var(--gb-dark);color:var(--gb-lightest);border:4px solid var(--gb-light);padding:.5rem 1rem;cursor:pointer;text-transform:uppercase;font-size:.8rem;letter-spacing:1px;transition:all .1s ease}button:hover{background-color:var(--gb-light);color:var(--gb-darkest)}button:active{transform:translateY(2px)}button:disabled{opacity:.5;cursor:not-allowed}.text-center{text-align:center}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.mt-5{margin-top:2rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}.mb-5{margin-bottom:2rem}.pixel-border{border:4px solid var(--gb-light);box-shadow:4px 4px 0 var(--gb-darkest)}.pixel-container{background-color:var(--gb-dark);border:4px solid var(--gb-light);padding:1rem;margin-bottom:1rem}.screen-container{background-color:var(--gb-darkest);border:8px solid var(--gb-dark);border-radius:0;padding:1rem;position:relative;overflow:hidden}.screen-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,rgba(155,188,15,.03),rgba(155,188,15,.03) 1px,transparent 1px,transparent 2px);pointer-events:none}.scanline{position:relative}.scanline:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,transparent 50%,rgba(15,56,15,.1) 50%);background-size:100% 4px;pointer-events:none;z-index:10}.song-manager{width:100%}.song-manager .controls{display:flex;gap:.5rem;margin-bottom:1rem}.song-manager .error-message{background-color:#f003;border:2px solid var(--gb-dark);color:var(--gb-lightest);padding:.5rem;margin-bottom:1rem;font-size:.8rem}.memory-usage{margin-bottom:1.5rem}.memory-bar{height:20px;background-color:var(--gb-darkest);border:2px solid var(--gb-light);position:relative;margin-bottom:.5rem}.memory-bar-used{height:100%;background-color:var(--gb-light);transition:width .3s ease}.memory-stats{display:flex;justify-content:space-between;font-size:.7rem}.song-list{width:100%;overflow-x:auto;max-width:100vw}.song-list table{width:100%;border-collapse:collapse;font-size:.7rem}.song-list th,.song-list td{padding:.5rem;text-align:left;border:2px solid var(--gb-dark)}.song-list th{background-color:var(--gb-dark);color:var(--gb-lightest);text-transform:uppercase}.song-list tr{background-color:var(--gb-darkest);cursor:pointer;transition:background-color .1s ease}.song-list tr:hover{background-color:#8bac0f1a}.song-list tr.selected{background-color:#8bac0f33;border-left:4px solid var(--gb-light)}.song-list td button{margin-right:.25rem;padding:.25rem .5rem;font-size:.6rem}@media (max-width: 768px){.memory-stats{flex-direction:column;gap:.25rem}.song-list th,.song-list td{padding:.25rem;font-size:.6rem}.song-list td button{padding:.15rem .3rem;font-size:.5rem}}#rom-title{margin-top:0;margin-bottom:0;font-size:1.5rem;text-transform:uppercase;letter-spacing:1px;text-shadow:2px 2px 0 var(--gb-darkest);color:var(--gb-lightest);width:100%;text-align:center}.rom-info-container{max-width:100%;width:100%;box-sizing:border-box}h2{margin-top:0;margin-bottom:1rem;font-size:1rem;text-transform:uppercase;letter-spacing:1px;text-shadow:2px 2px 0 var(--gb-darkest);color:var(--gb-lightest)}h3{margin-top:0;margin-bottom:.75rem;font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:var(--gb-lightest)}.button-container{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem;align-items:center;justify-content:center}@media (min-width: 768px){.button-container{flex-direction:row;gap:1rem}}.error-message{padding:.75rem;background-color:var(--gb-dark);color:var(--gb-lightest);border:4px dashed var(--gb-light);margin-bottom:1.5rem;margin-left:auto;margin-right:auto;max-width:600px;font-size:.7rem;text-transform:uppercase;letter-spacing:1px}.rom-info{background-color:var(--gb-darkest);padding:.75rem;border:4px solid var(--gb-light);position:relative;overflow:hidden;margin-left:auto;margin-right:auto;max-width:600px}.rom-info-header{display:flex;justify-content:space-between;align-items:center;text-align:center}.rom-info-table{margin-top:.75rem}.gfx-toggle-svg-icon{width:20px;height:20px}.rom-info:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,rgba(155,188,15,.03),rgba(155,188,15,.03) 1px,transparent 1px,transparent 2px);pointer-events:none;z-index:1}table{width:100%;border-collapse:separate;border-spacing:0;position:relative;z-index:2}td,th{padding:.5rem 0;border-bottom:2px solid var(--gb-light);font-size:.7rem;color:var(--gb-lightest)}th{font-weight:700;width:50%;text-transform:uppercase;letter-spacing:1px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.controls{margin-bottom:1rem;display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.memory-usage{margin-bottom:1rem}.memory-bar{height:20px;background-color:var(--gb-light);border:1px solid var(--gb-darkest);margin-bottom:.5rem;position:relative}.memory-bar-used{height:100%;background-color:var(--gb-dark)}.memory-stats{display:flex;justify-content:space-between;font-size:.8rem}.song-list{margin-top:1rem}.song-list table{width:100%;border-collapse:collapse}.song-list th,.song-list td{padding:.5rem;text-align:left;border-bottom:1px solid var(--gb-light)}.song-list tr.selected{background-color:var(--gb-dark)}.error-message{color:red;background-color:#fee;padding:.5rem;margin-bottom:1rem;border:1px solid #ff0000;border-radius:4px}.sample-waveform-container{width:100%}.sample-waveform{display:block;width:100%}.sample-waveform.clickable{cursor:pointer}.sample-waveform:not(.clickable){cursor:crosshair}.app-theme-selector{display:inline-block;position:relative}.theme-icon-button{background-color:var(--gb-dark);border:3px solid var(--gb-light);padding:.25rem;cursor:pointer;box-shadow:2px 2px 0 var(--gb-darkest);display:flex;align-items:center;justify-content:center;transition:all .1s ease}.theme-icon-button:hover{background-color:var(--gb-light)}.theme-icon-button:active{transform:translateY(2px);box-shadow:0 0 0 var(--gb-darkest)}.theme-icon{fill:var(--gb-lightest);width:20px;height:20px}.theme-icon-button:hover .theme-icon{fill:var(--gb-darkest)}.theme-dropdown{position:absolute;top:calc(100% + 5px);right:0;background-color:var(--gb-dark);border:3px solid var(--gb-light);box-shadow:4px 4px 0 var(--gb-darkest);z-index:100;min-width:180px}.theme-list{list-style:none;padding:0;margin:0}.theme-item{padding:.5rem;cursor:pointer;display:flex;align-items:center;border-bottom:2px solid var(--gb-light);transition:background-color .1s ease}.theme-item:last-child{border-bottom:none}.theme-item:hover{background-color:var(--gb-light)}.theme-item:hover .theme-name{color:var(--gb-darkest)}.theme-item.active{background-color:var(--gb-darkest)}.theme-preview{display:flex;margin-right:.5rem}.theme-preview span{width:8px;height:16px}.theme-name{font-family:"Press Start 2P",cursive;font-size:.6rem;color:var(--gb-lightest);text-transform:uppercase}@media (max-width: 768px){.theme-icon-button{padding:.2rem;border-width:2px}.theme-icon{width:16px;height:16px}.theme-dropdown{min-width:150px}}.navbar{background-color:var(--gb-dark);color:var(--gb-lightest);width:100%;border-bottom:4px solid var(--gb-light);position:relative;z-index:10}.navbar-container{display:flex;align-items:center;padding:.75rem;max-width:800px;margin:0 auto;position:relative}@media (max-width: 768px){.navbar-container{padding:.75rem .5rem}}.navbar-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}.navbar-logo h1{margin:0;font-size:1rem;text-transform:uppercase;letter-spacing:1px;text-shadow:2px 2px 0 var(--gb-darkest);color:var(--gb-lightest)}.menu-toggle{display:block;background:var(--gb-darkest);border:2px solid var(--gb-light);color:var(--gb-lightest);cursor:pointer;padding:.5rem;z-index:20;border-radius:4px;box-shadow:0 2px 4px #0000004d;height:26px}.menu-icon{display:block;width:24px;height:3px;background-color:var(--gb-lightest);position:relative;transition:background-color .2s}.menu-icon:before,.menu-icon:after{display:block;content:"";position:absolute;width:24px;height:3px;background-color:var(--gb-lightest);transition:transform .2s}.menu-icon:before{top:-7px}.menu-icon:after{top:7px}.menu-toggle[aria-expanded=true] .menu-icon{background-color:transparent}.menu-toggle[aria-expanded=true] .menu-icon:before{transform:rotate(45deg) translate(5px,5px)}.menu-toggle[aria-expanded=true] .menu-icon:after{transform:rotate(-45deg) translate(5px,-5px)}.navbar-menu{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background-color:var(--gb-dark);padding:0;margin:0;list-style:none;z-index:10;transform:translateY(-100%);opacity:0;visibility:hidden;transition:transform .2s,opacity .2s,visibility .2s;border-bottom:4px solid var(--gb-light)}.navbar-menu.open{transform:translateY(0);opacity:1;visibility:visible}.navbar-item{width:100%;text-align:center;border-top:2px solid var(--gb-light)}.navbar-link{display:block;padding:.75rem;color:var(--gb-lightest);text-decoration:none;transition:background-color .2s;font-size:.7rem;text-transform:uppercase;letter-spacing:1px}.navbar-link:hover,.navbar-link.active{background-color:var(--gb-light);color:var(--gb-darkest)}@media (min-width: 768px){.navbar-logo h1{font-size:1.2rem}.menu-toggle{display:none}.navbar-menu{position:static;flex-direction:row;transform:none;opacity:1;visibility:visible;background-color:transparent;border-bottom:none;margin-left:2rem}.navbar-actions{margin-left:2rem}.navbar-item{width:auto;border-top:none;border-left:2px solid var(--gb-light)}.navbar-item:first-child{border-left:none}.navbar-link{padding:.5rem .75rem;font-size:.6rem}}.scroll-to-top-button{position:fixed;top:16px;left:16px;width:40px;height:40px;border-radius:4px;background-color:var(--gb-dark);opacity:.85;color:var(--gb-lightest);border:3px solid var(--gb-light);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:9;box-shadow:2px 2px 0 var(--gb-darkest);transition:all .2s ease;padding:0}.scroll-to-top-button:hover{background-color:var(--gb-light);color:var(--gb-darkest);opacity:1}.scroll-to-top-button:active{transform:translateY(2px);box-shadow:0 0 0 var(--gb-darkest)}.scroll-to-top-icon{width:24px;height:24px}@media (min-width: 768px){.scroll-to-top-button{width:48px;height:48px}.scroll-to-top-icon{width:32px;height:32px}}.custom-slider{display:flex;align-items:center;gap:.75rem;width:100%;margin-bottom:.5rem}.custom-slider label{min-width:120px;font-weight:500}.slider-container{position:relative;flex:1;height:12px;max-width:360px}.slider-input{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;z-index:2;cursor:pointer;margin:0;padding:0}.slider-input::-webkit-slider-runnable-track{width:100%;height:8px;background-color:var(--gb-light);border-radius:4px;border:1px solid var(--gb-dark)}.slider-input::-moz-range-track{width:100%;height:8px;background-color:var(--gb-light);border-radius:4px;border:1px solid var(--gb-dark)}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background-color:var(--gb-dark);border:2px solid var(--gb-darkest);margin-top:-6px;cursor:pointer;transition:background-color .2s,transform .1s}.slider-input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background-color:var(--gb-dark);border:2px solid var(--gb-darkest);cursor:pointer;transition:background-color .2s,transform .1s}.slider-input:active::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--gb-light)}.slider-input:active::-moz-range-thumb{transform:scale(1.1);background-color:var(--gb-darkest)}.slider-input:disabled{opacity:.6;cursor:not-allowed}.slider-input:disabled::-webkit-slider-thumb{background-color:var(--gb-light);cursor:not-allowed}.slider-input:disabled::-moz-range-thumb{background-color:var(--gb-light);cursor:not-allowed}.slider-input.red::-webkit-slider-thumb{background-color:#f55;border-color:#c00}.slider-input.green::-webkit-slider-thumb{background-color:#5f5;border-color:#0c0}.slider-input.blue::-webkit-slider-thumb{background-color:#55f;border-color:#00c}.slider-input.red::-moz-range-thumb{background-color:#f55;border-color:#c00}.slider-input.green::-moz-range-thumb{background-color:#5f5;border-color:#0c0}.slider-input.blue::-moz-range-thumb{background-color:#55f;border-color:#00c}.slider-value{min-width:50px;text-align:center;font-weight:500}.slider-track{position:absolute;height:8px;background-color:var(--gb-dark);border-radius:4px;top:2px;left:0;z-index:1;pointer-events:none}@media (max-width: 768px){.custom-slider{flex-direction:column;align-items:flex-start;gap:.5rem}.custom-slider label{min-width:auto;margin-bottom:.25rem}.slider-container{width:100%;max-width:100%;height:24px;flex:none}.slider-input::-webkit-slider-thumb{width:24px;height:24px;margin-top:-8px}.slider-input::-moz-range-thumb{width:24px;height:24px}.slider-input::-webkit-slider-runnable-track{height:10px}.slider-input::-moz-range-track{height:10px}.slider-track{height:10px}.slider-value{align-self:flex-end}}.custom-checkbox{display:flex;align-items:center;gap:.75rem;width:100%;margin-bottom:.5rem}.custom-checkbox label{min-width:120px;font-weight:500;cursor:pointer}.checkbox-container{position:relative;display:flex;align-items:center}.checkbox-input{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0}.checkbox-visual{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;background-color:var(--gb-light);border:2px solid var(--gb-dark);cursor:pointer;transition:all .2s ease}.checkbox-visual.checked{background-color:var(--gb-dark);border-color:var(--gb-darkest)}.checkbox-checkmark{width:16px;height:16px;fill:var(--gb-lightest)}.checkbox-input:not(:disabled)~.checkbox-visual:hover{border-color:var(--gb-darkest);transform:scale(1.05)}.checkbox-input:focus~.checkbox-visual{box-shadow:0 0 0 2px #0003}.checkbox-visual.disabled{opacity:.6;cursor:not-allowed;background-color:var(--gb-light);border-color:var(--gb-dark)}.checkbox-visual.red.checked{background-color:#f55;border-color:#c00}.checkbox-visual.green.checked{background-color:#5f5;border-color:#0c0}.checkbox-visual.blue.checked{background-color:#55f;border-color:#00c}@media (max-width: 768px){.custom-checkbox{flex-direction:column;align-items:flex-start;gap:.5rem}.custom-checkbox label{min-width:auto;margin-bottom:.25rem}.checkbox-visual{width:28px;height:28px}.checkbox-checkmark{width:20px;height:20px}}.sample-editor{display:flex;flex-direction:column;gap:1rem;padding:1rem;background-color:var(--gb-bg);border-radius:4px;margin-top:1rem}.sample-controls{display:flex;flex-direction:column;gap:.5rem}.control-group{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.sample-waveform-selection{display:flex;flex-direction:column;gap:.5rem;border:2px dashed var(--gb-light);border-radius:4px;background-color:#0003;margin-top:1.5rem;margin-bottom:1.5rem;padding:1rem}.selection-info{display:flex;flex-direction:column;gap:.5rem}.selection-info p{margin:0;font-size:.9rem}.selection-buttons{display:flex;gap:.5rem}.sample-editor-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1rem}.sample-actions{display:flex;gap:.5rem;justify-content:flex-end}.sample-editor-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:2rem;text-align:center}.sample-editor-empty p{margin:0;font-size:1.1rem;color:var(--gb-dark)}.sample-editor-header{margin-bottom:1rem;border-bottom:1px solid var(--gb-light);padding-bottom:.5rem}.sample-editor-header h3{margin:0 0 .5rem;font-size:1.2rem;color:var(--gb-dark)}.sample-editor-instructions{margin:0;font-size:.9rem;color:var(--gb-medium);line-height:1.4}.temp-sample-actions{display:flex;gap:1rem;justify-content:center;width:100%}.discard-button{background-color:var(--gb-medium);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;cursor:pointer;transition:background-color .2s}.discard-button:hover{background-color:var(--gb-dark)}.save-button{background-color:#4caf50;color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;cursor:pointer;transition:background-color .2s;font-weight:700}.save-button:hover{background-color:#388e3c}.preview-button{background-color:#2196f3;color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;cursor:pointer;transition:background-color .2s}.preview-button:hover{background-color:#0d8bf2}.sample-size-info{margin-top:.5rem;padding:.4rem .5rem;background-color:#0000000d;border-radius:4px;font-size:.85rem;display:inline-block}.sample-size-info p{margin:0}.sample-size-warning{color:#d32f2f;font-weight:700}.sample-size-hint{font-style:italic;color:var(--gb-medium)}.sample-recorder{display:flex;flex-direction:column;gap:.5rem}.record-button{background-color:var(--gb-dark);color:#fff;border:2px solid var(--gb-dark);border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;position:relative;align-self:center}.record-button:before{content:"";position:absolute;width:24px;height:24px;background-color:#ff3b30;border-radius:50%;transition:all .2s ease}.record-button.recording:before{background-color:#ff3b30;animation:pulse 1s infinite}.record-button:disabled{opacity:.5;cursor:not-allowed}.recording-error{color:#ff3b30;font-size:.8rem;text-align:center;margin-bottom:.5rem}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.8}to{transform:scale(1);opacity:1}}@media (max-width: 768px){.control-group{flex-direction:column;align-items:flex-start}.sample-editor-actions{flex-direction:column;gap:1rem}.sample-actions{justify-content:space-between}.sample-size-info{font-size:.75rem;padding:.3rem .4rem;margin-top:.3rem}.temp-sample-actions{flex-direction:column;gap:.5rem}.save-button,.discard-button,.preview-button{width:100%}.selection-buttons{flex-wrap:wrap;justify-content:flex-start}}.bank-name-selector{position:relative;width:100%;max-width:300px}.bank-indicator{background-color:var(--gb-dark);padding:.25rem .5rem;border-radius:3px;margin-right:.5rem;font-weight:700;white-space:nowrap}.bank-option{padding:.5rem;cursor:pointer;display:flex;align-items:center}.bank-option:hover{background-color:var(--gb-dark)}.bank-option.selected{background-color:var(--gb-dark);font-weight:700}.bank-number{background-color:var(--gb-dark);padding:.25rem .5rem;border-radius:3px;font-weight:700;white-space:nowrap}.kit-name{margin-left:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-editor{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:1200px;margin:0 auto}.kit-editor-empty{padding:2rem;text-align:center;color:var(--gb-dark)}.controls{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.error-message{background-color:#f003;border:2px solid var(--gb-dark);color:var(--gb-lightest);padding:.5rem;margin-bottom:1rem;font-size:.8rem}.bank-kit-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.preferences-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:.25rem;background-color:var(--gb-darkest);color:var(--gb-lightest);border:3px solid var(--gb-light);cursor:pointer;font-size:1.2rem;box-shadow:2px 2px 0 var(--gb-darkest);transition:all .1s ease}.preferences-icon.active{background-color:var(--gb-dark)}.preferences-icon:hover{background-color:var(--gb-light);color:var(--gb-darkest)}.preferences-icon:active{transform:translateY(2px);box-shadow:0 0 0 var(--gb-darkest)}.preferences-container{margin-top:.5rem;display:flex;flex-direction:column;gap:.5rem}.preferences-panel{display:flex;flex-direction:column;gap:.5rem;padding:.5rem;border:1px solid var(--gb-light);border-radius:4px;background-color:var(--gb-darkest)}.sample-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:.5rem;margin-bottom:1rem}.sample-pad{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background-color:var(--gb-darkest);color:var(--gb-lightest);border:2px solid var(--gb-light);cursor:pointer;font-size:.8rem;transition:all .1s ease;position:relative}.sample-pad.selected{background-color:var(--gb-light);color:var(--gb-darkest);border-color:var(--gb-lightest)}.sample-pad.empty{opacity:.5;cursor:default}.sample-pad:hover:not(.empty){background-color:var(--gb-dark)}.sample-pad:active:not(.empty){transform:scale(.95)}.sample-pad .remove-button{position:absolute;top:-8px;right:-8px;width:16px;height:16px;background-color:var(--gb-dark);color:var(--gb-lightest);border:1px solid var(--gb-light);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;cursor:pointer;z-index:1}.sample-pad .remove-button:hover{background-color:var(--gb-darkest)}.kit-info{margin-top:1rem}.kit-name{display:flex;gap:.5rem;margin-bottom:.5rem}.memory-bar{height:20px;background-color:var(--gb-darkest);border:1px solid var(--gb-light);margin-bottom:.5rem}.memory-bar-used{height:100%;background-color:var(--gb-light)}.sample-editor{margin-top:1rem;border:2px solid var(--gb-light);border-radius:4px;padding:1rem;background-color:var(--gb-darkest)}.sample-controls{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}.control-group{display:flex;align-items:center;gap:.5rem;min-width:150px}.sample-waveform{margin-bottom:1rem;width:100%}.sample-waveform canvas{width:100%;height:auto}.sample-actions{display:flex;flex-wrap:wrap;gap:.5rem}@media (max-width: 768px){.controls{flex-direction:column;align-items:stretch}.controls button{width:100%}.bank-kit-header{flex-direction:column;align-items:flex-start;gap:.5rem}.bank-kit-header .preferences-icon{align-self:flex-end;margin-top:-2rem}.sample-grid{grid-template-columns:repeat(4,1fr)}.sample-pad{width:100%;height:0;padding-bottom:100%;position:relative}.sample-pad span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sample-controls{flex-direction:column;align-items:stretch}.control-group{width:100%;justify-content:space-between}.control-group label{min-width:80px}.sample-actions{flex-direction:column}.sample-actions button{width:100%}}@media (max-width: 480px){.sample-grid{grid-template-columns:repeat(3,1fr)}}.color-selector{display:flex;flex-direction:column;gap:.5rem;padding:.5rem;background-color:var(--gb-dark);border:4px solid var(--gb-light)}.color-selector-label{font-size:.8rem;color:var(--gb-lightest);margin-bottom:.25rem}.color-buttons{display:flex;gap:.5rem}.color-button{width:2rem;height:2rem;border:2px solid var(--gb-light);cursor:pointer;transition:all .2s}.color-0{background-color:#fff}.color-1{background-color:#d3d3d3}.color-3{background-color:#000}.selected-left{border:2px solid blue;box-shadow:0 0 0 2px #00f}.selected-right{border:2px solid red;box-shadow:0 0 0 2px red}@media (max-width: 768px){.color-selector{flex-direction:row;align-items:center;flex-wrap:wrap}.color-selector-label{margin-right:.5rem;margin-bottom:0}.color-button{width:1.5rem;height:1.5rem}}.dropdown-selector{position:relative;width:100%;max-width:300px}.selector-header{display:flex;align-items:center;border:1px solid var(--gb-light);background-color:var(--gb-darkest);color:var(--gb-lightest);padding:.5rem;cursor:pointer;border-radius:4px}.selector-header.disabled{opacity:.6;cursor:not-allowed}.index-indicator{background-color:var(--gb-dark);padding:.25rem .5rem;border-radius:3px;margin-right:.5rem;font-weight:700;white-space:nowrap}.name-input{flex:1;background:transparent;border:none;color:var(--gb-lightest);outline:none;width:100%;font-size:1rem;line-height:normal;padding:0;margin:0;display:flex;align-items:center}.name-display{flex:1;color:var(--gb-lightest);font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-arrow{margin-left:.5rem}.dropdown-menu{position:absolute;top:100%;left:0;width:100%;background-color:var(--gb-darkest);border:1px solid var(--gb-light);border-radius:4px;margin-top:.25rem;max-height:200px;overflow-y:auto;z-index:10}.option-item{padding:.5rem;cursor:pointer;display:flex;align-items:center}.option-item:hover{background-color:var(--gb-dark)}.option-item.selected{background-color:var(--gb-dark);font-weight:700}.option-index{background-color:var(--gb-dark);padding:.25rem .5rem;border-radius:3px;font-weight:700;white-space:nowrap}.option-name{margin-left:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.font-editor{display:flex;flex-direction:column;gap:1rem}.font-editor-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.font-selector{width:200px}.gfx-toggle{display:flex;align-items:center}.gfx-toggle-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:.25rem;background-color:var(--gb-darkest);color:var(--gb-lightest);border:3px solid var(--gb-light);cursor:pointer;font-size:1.2rem;box-shadow:2px 2px 0 var(--gb-darkest);transition:all .1s ease}.gfx-toggle-icon.active{background-color:var(--gb-dark)}.gfx-toggle-icon:hover{background-color:var(--gb-light);color:var(--gb-darkest)}.gfx-toggle-icon:active{transform:translateY(2px);box-shadow:0 0 0 var(--gb-darkest)}.gfx-toggle-icon:focus{outline:2px solid var(--gb-light);outline-offset:2px}.font-editor-main{display:flex;gap:1rem;flex-wrap:wrap}.font-editor-tile{display:flex;flex-direction:column;gap:1rem;flex:1;min-width:240px}.tile-controls{display:flex;gap:.5rem;justify-content:center}.font-editor-map{flex:2;min-width:300px;min-height:200px}.font-editor-empty{padding:2rem;text-align:center;color:var(--gb-dark)}@media (max-width: 768px){.font-editor-controls{flex-direction:column;align-items:flex-start;gap:.5rem}.font-selector{width:100%}.gfx-toggle{align-self:flex-end;margin-top:-2.5rem}.font-editor-main{flex-direction:column}.font-editor-tile,.font-editor-map{width:100%}.tile-controls{gap:1rem;margin:1rem 0}.tile-controls button{min-width:44px;min-height:44px;font-size:1.2rem}}@media (max-width: 480px){.font-editor-map{overflow-x:auto;padding-bottom:1rem}}.color-picker{display:flex;flex-direction:column;gap:1rem;padding:1rem;background-color:var(--gb-light);border-radius:.5rem;box-shadow:0 2px 4px #0000001a;width:100%;max-width:300px}.color-picker-preview{display:flex;align-items:center;justify-content:center;height:80px;border-radius:.25rem;border:2px solid var(--gb-dark);position:relative;overflow:hidden}.color-picker-hex{display:flex;flex-direction:column;align-items:center;gap:.5rem;background-color:#00000080;color:#fff;padding:.5rem;border-radius:.25rem}.color-picker-hex input[type=color]{width:40px;height:40px;border:none;border-radius:50%;cursor:pointer;background:none;padding:0}.color-picker-sliders{display:flex;flex-direction:column;gap:.75rem}.color-picker-slider{display:flex;align-items:center;gap:.5rem}.color-picker-slider label{font-weight:700;width:20px}.color-picker-slider input[type=range]{flex:1;height:8px;border-radius:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--gb-darkest)}.color-picker-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer}.color-picker-slider input[type=range].red-slider::-webkit-slider-thumb{background-color:#f55}.color-picker-slider input[type=range].green-slider::-webkit-slider-thumb{background-color:#5f5}.color-picker-slider input[type=range].blue-slider::-webkit-slider-thumb{background-color:#55f}.color-picker-slider input[type=number]{width:50px;text-align:center;border:1px solid var(--gb-dark);border-radius:.25rem;padding:.25rem;background-color:var(--gb-lightest)}.color-picker-info{font-size:.875rem;color:var(--gb-darkest);text-align:center;background-color:var(--gb-lightest);padding:.5rem;border-radius:.25rem;border:1px solid var(--gb-dark)}@media (max-width: 768px){.color-picker{max-width:100%;padding:1.25rem}.color-picker-preview{height:100px}.color-picker-hex input[type=color]{width:50px;height:50px}.color-picker-slider{flex-wrap:wrap;margin-bottom:.5rem}.color-picker-slider label{width:30px;font-size:1.1rem}.color-picker-slider input[type=range]{min-width:100px;height:20px;margin:.5rem 0}.color-picker-slider input[type=range]::-webkit-slider-thumb{width:24px;height:24px}.color-picker-slider input[type=number]{width:60px;height:40px;font-size:1rem;padding:.5rem}.color-picker-info{font-size:1rem;padding:.75rem}}@media (max-width: 480px){.color-picker{padding:1rem}.color-picker-preview{height:80px}.color-picker-slider{flex-direction:column;align-items:flex-start}.color-picker-slider input[type=range]{width:100%}}.swatch-pair{display:flex;flex-direction:column;gap:.5rem;padding:.5rem;border-radius:.25rem;background-color:var(--gb-light);width:100%}.swatch-pair-label{font-size:.875rem;font-weight:700;color:var(--gb-darkest);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.swatch-pair-colors{display:flex;gap:.5rem;width:100%;justify-content:space-between}.swatch{flex:1;height:40px;border:none;border-radius:.25rem;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000001a;min-width:0}.swatch:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0003}.swatch.selected{outline:3px solid var(--gb-darkest);outline-offset:2px;transform:translateY(-2px);box-shadow:0 4px 8px #0003}@media (max-width: 768px){.swatch-pair{padding:.25rem}.swatch{height:30px}}.swatch-panel{display:flex;flex-direction:column;gap:1rem;padding:1rem;background-color:var(--gb-light);border-radius:.5rem;box-shadow:0 2px 4px #0000001a;width:100%;max-width:100%;overflow:hidden}.swatch-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.swatch-panel-header h3{margin:0;font-size:1.25rem;color:var(--gb-darkest)}.swatch-panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;width:100%}@media (min-width: 768px){.swatch-panel-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}@media (min-width: 1024px){.swatch-panel-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}.palette-editor{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:1200px;margin:0 auto}.palette-editor-controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;padding:1rem;border:4px solid var(--gb-light);box-shadow:0 2px 4px #0000001a}.palette-selector{flex:1;min-width:200px}.color-space-selector{display:flex;align-items:center;min-width:200px;max-width:300px}.palette-editor-main{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center}.palette-editor-color-picker{flex:1;min-width:250px;max-width:300px;display:flex;justify-content:center}.palette-editor-swatch-panel{flex:2;min-width:300px;display:flex;justify-content:center}.palette-editor-preview{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center}.preview-section{flex:1;min-width:300px;max-width:500px}.preview-section h3{margin-top:0;margin-bottom:.5rem;color:var(--gb-darkest);font-size:1.25rem}.preview-image{width:100%;height:280px;background-color:var(--gb-light);border-radius:.5rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.preview-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:1rem;text-align:center;color:var(--gb-dark)}.preview-note{font-size:.875rem;opacity:.7;margin-top:.5rem}.palette-editor-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;color:var(--gb-dark)}@media (max-width: 768px){.palette-editor-controls{flex-direction:column;align-items:stretch}.palette-selector{width:100%;min-width:100%;margin-bottom:.5rem}.color-space-selector{width:100%;max-width:100%}.palette-editor-main{flex-direction:column;align-items:center}.palette-editor-color-picker,.palette-editor-swatch-panel{width:100%;max-width:100%}.palette-editor-color-picker input[type=range]{height:24px;margin:.5rem 0}.palette-editor-color-picker input[type=number]{width:60px;height:40px;font-size:1rem}.palette-editor-swatch-panel button{min-height:44px;min-width:44px;margin:.25rem}.palette-editor-preview{flex-direction:column}.preview-section{width:100%;max-width:100%;margin-bottom:1.5rem}.preview-image{height:200px}}@media (max-width: 480px){.palette-editor-controls{padding:.75rem}.preview-image{height:150px}}