:root{color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;background-color:#0a0a0a;font-family:Inter,Avenir,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:24px}body{margin:0;padding:0}.main-container{color:#fff;background:#2a2a2a;flex-direction:column;width:100vw;min-height:100vh;padding-top:0;display:flex}.app-header{background:#1a1a1a;border-bottom:2px solid #ffffff4d;width:100%;padding:1rem 2rem}.header-content{justify-content:space-between;align-items:center;gap:1.5rem;width:100%;display:flex}.app-title{color:#fff;flex-shrink:0;margin:0;font-size:1.25rem;font-weight:600}.app-title-attribution{color:#fff9;font-size:.875rem;font-weight:400;text-decoration:none;transition:color .2s}.app-title-attribution:hover{color:#ffffffe6;text-decoration:underline}.header-controls{flex-shrink:0;align-items:center;gap:1.5rem;display:flex}.midi-channel-top{align-items:center;gap:.5rem;display:flex}.midi-channel-label{text-transform:uppercase;letter-spacing:.1em;color:#fff9;font-size:.75rem;font-weight:500}.midi-channel-input{color:#fff;text-align:center;appearance:textfield;background:#1a1a1a;border:1px solid #ffffff4d;border-radius:.375rem;outline:none;width:4rem;height:100%;padding:.375rem .75rem .375rem .5rem;font-size:.875rem}.midi-channel-input:focus{border-color:#ffffff80}.midi-channel-input::-webkit-inner-spin-button{opacity:1;cursor:pointer;background:#ffffff1a;border-left:1px solid #fff3;width:.875rem;height:1rem}.midi-channel-input::-webkit-outer-spin-button{opacity:1;cursor:pointer;background:#ffffff1a;border-left:1px solid #fff3;width:.875rem;height:1rem}.midi-channel-input::-webkit-inner-spin-button{background-color:#0000;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 4 L4 0 L8 4 Z' fill='rgba(255,255,255,0.9)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 0 L4 4 L8 0 Z' fill='rgba(255,255,255,0.9)'/%3E%3C/svg%3E");background-position:50% .125rem,50% .625rem;background-repeat:no-repeat;background-size:.5rem .5rem,.5rem .5rem}.midi-channel-input::-webkit-outer-spin-button{background-color:#0000;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 0 L4 4 L8 0 Z' fill='rgba(255,255,255,0.9)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 4 L4 0 L8 4 Z' fill='rgba(255,255,255,0.9)'/%3E%3C/svg%3E");background-position:50% .125rem,50% .625rem;background-repeat:no-repeat;background-size:.5rem .5rem,.5rem .5rem}.midi-channel-input::-webkit-inner-spin-button:hover{opacity:1;background-color:#ffffff26}.midi-channel-input::-webkit-outer-spin-button:hover{opacity:1;background-color:#ffffff26}.edit-controls{background:#1a1a1a;border-bottom:2px solid #ffffff4d;justify-content:space-between;align-items:center;gap:1.5rem;width:100%;padding:.75rem 2rem;display:flex}.zoom-control{align-items:center;gap:.75rem;display:flex}.zoom-label{text-transform:uppercase;letter-spacing:.1em;color:#fff9;font-size:.75rem;font-weight:500}.zoom-slider{appearance:none;background:#fff3;border-radius:2px;outline:none;width:120px;height:4px}.zoom-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fffc;border-radius:50%;width:14px;height:14px;transition:all .2s}.zoom-slider::-webkit-slider-thumb:hover{background:#fff;transform:scale(1.1)}.zoom-slider::-moz-range-thumb{cursor:pointer;background:#fffc;border:none;border-radius:50%;width:14px;height:14px;transition:all .2s}.zoom-slider::-moz-range-thumb:hover{background:#fff;transform:scale(1.1)}.zoom-value{color:#fffc;text-align:right;min-width:3rem;font-size:.75rem;font-weight:500}.edit-button{color:#fffc;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;background:#1a1a1a;border:2px solid #ffffff4d;border-radius:.375rem;padding:.5rem 1.5rem;font-size:.875rem;font-weight:600;transition:all .2s}.edit-button:hover{color:#fff;background:#2a2a2a;border-color:#ffffff80}.edit-button-active{color:#fff;background:#2a2a2a;border-color:#ffffffe6;box-shadow:0 0 0 2px #fff3}.edit-button-active:hover{border-color:#fff;box-shadow:0 0 0 2px #ffffff4d}.status-indicator-wrapper{position:relative}.status-indicator-top{color:#fffc;cursor:pointer;background:0 0;border:none;border-radius:.5rem;align-items:center;gap:.5rem;padding:.5rem;font-size:.875rem;font-weight:500;transition:background-color .2s;display:flex}.status-indicator-top:hover{background:#ffffff1a}.midi-dropdown{background:#1a1a1a;border:1px solid #ffffff4d;border-radius:.5rem;min-width:200px;position:absolute;top:calc(100% + .5rem);right:0;overflow:hidden}.midi-dropdown-header{text-transform:uppercase;letter-spacing:.1em;color:#fff9;border-bottom:1px solid #ffffff1a;padding:.75rem 1rem;font-size:.75rem;font-weight:600}.midi-dropdown-item{text-align:left;color:#fffc;cursor:pointer;background:0 0;border:none;width:100%;padding:.75rem 1rem;font-size:.875rem;transition:background-color .2s;display:block}.midi-dropdown-item:hover{background:#ffffff1a}.midi-dropdown-item-active{background:#ffffff26}.midi-dropdown-item-active:hover{background:#fff3}.midi-dropdown-item-disabled{color:#fff6;cursor:not-allowed}.midi-dropdown-item-disabled:hover{background:0 0}.status-dot{border-radius:50%;width:.625rem;height:.625rem}.status-dot-connected{background-color:#34d399}.status-dot-pulse{background-color:#ef4444;animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.content-wrapper{width:100%;max-width:80rem;margin:0 auto;padding:2rem 1rem}.content{flex-direction:column;gap:2rem;display:flex}.main-title{letter-spacing:-.025em;text-align:center;font-size:1.5rem;font-weight:600}@media (min-width:640px){.main-title{font-size:1.875rem}}.midi-controls{flex-direction:column;gap:1rem;display:flex}.control-field{flex-direction:column;gap:.5rem;display:flex}.field-label{text-transform:uppercase;letter-spacing:.16em;color:#fff9;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:500;display:flex}.field-label-count{color:#fff6;font-size:.625rem}.select-input-full{color:#fff;background:#1a1a1a;border:1px solid #ffffff4d;border-radius:.5rem;outline:none;width:100%;padding:.5rem .75rem;font-size:.875rem}.select-input-full:focus{border-color:#ffffff80}.number-input{color:#fff;background:#1a1a1a;border:1px solid #ffffff4d;border-radius:.5rem;outline:none;width:100%;padding:.5rem .75rem;font-size:.875rem}.number-input:focus{border-color:#ffffff80}.error-message{color:#fecdd3;background:#ef44441a;border:1px solid #ef444480;border-radius:.5rem;padding:.75rem 1rem;font-size:.75rem}.permission-denied-message{text-align:center;max-width:500px;margin:0 auto;padding:2rem}.permission-denied-title{margin-bottom:1rem;font-size:1.25rem;font-weight:600}.permission-denied-text{margin-bottom:1.5rem;font-size:.875rem;line-height:1.5}.refresh-button{color:#fffc;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;background:#1a1a1a;border:2px solid #ffffff4d;border-radius:.375rem;padding:.75rem 1.5rem;font-size:.875rem;font-weight:600;transition:all .2s}.refresh-button:hover{color:#fff;background:#2a2a2a;border-color:#ffffff80}.error-banner{color:#fecdd3;background:linear-gradient(90deg,#ef44441a,#0000,#ef44441a);border:1px solid #ef444466;border-radius:1rem;padding:1.25rem 1.5rem;font-size:.875rem}.error-title{margin-bottom:.25rem;font-weight:600}.error-text{color:#fecdd3e6;font-size:.75rem}.preset-grid{gap:calc(1rem*var(--zoom-level,1.5));--zoom-level:1.5;grid-template-columns:repeat(var(--grid-columns,4),1fr);display:grid}.preset-button{border:calc(2px*var(--zoom-level,1.5))solid var(--preset-border-color);border-radius:calc(.5rem*var(--zoom-level,1.5));padding:calc(1rem*var(--zoom-level,1.5));text-align:left;cursor:pointer;background:#1a1a1a;transition:border-color .2s,filter .2s;position:relative}.preset-button:hover{border-color:var(--preset-border-color,#ffffff80);filter:brightness(1.1)}.preset-button[data-border-color]:hover{filter:brightness(1.2)}.preset-button-active{border-color:var(--preset-border-color);filter:brightness(1.1);background:#2a2a2a}.preset-button-active[data-border-color]{filter:brightness(1.2)}.preset-button-active:hover{filter:brightness(1.3)}.preset-button:disabled{opacity:.4;cursor:not-allowed}.preset-button:disabled:hover{border-color:#ffffff4d}.preset-button-draggable{cursor:move}.preset-button-draggable .preset-name{cursor:text;-webkit-user-select:text;user-select:text;pointer-events:auto}.preset-active-indicator{background-color:var(--preset-border-color);z-index:3;border-radius:50%;width:.5rem;height:.5rem;animation:2s ease-in-out infinite pulse-indicator;position:absolute;top:.5rem;right:.5rem;box-shadow:0 0 0 2px #0000004d}@keyframes pulse-indicator{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}.preset-color-picker{z-index:2;gap:.5rem;display:flex;position:absolute;bottom:.5rem;right:.5rem}.color-dot{cursor:pointer;border:2px solid #fff3;border-radius:50%;width:1.125rem;height:1.125rem;padding:0;transition:all .2s;box-shadow:0 0 #fff0}.color-dot:hover{border-color:#ffffff80;transform:scale(1.15);box-shadow:0 0 0 2px #ffffff26}.color-dot-active{border-color:#fffc;transform:scale(1.1);box-shadow:0 0 0 2px #ffffff4d}.preset-content{height:100%;padding:calc(.75rem*var(--zoom-level,1.5));justify-content:center;align-items:center;gap:calc(.5rem*var(--zoom-level,1.5));min-height:calc(4rem*var(--zoom-level,1.5));flex-direction:column;display:flex}.preset-name-container,.preset-id-container{justify-content:center;align-items:center;width:100%;display:flex}.preset-id{font-size:calc(.6875rem*var(--zoom-level,1.5));color:var(--preset-border-color);transition:color .2s}.preset-button-active .preset-id{color:#fff}.preset-name{font-size:calc(.875rem*var(--zoom-level,1.5));letter-spacing:.025em;color:var(--preset-border-color);cursor:pointer;-webkit-user-select:none;user-select:none;width:100%;padding:calc(.25rem*var(--zoom-level,1.5))calc(.5rem*var(--zoom-level,1.5));min-height:calc(1.5rem*var(--zoom-level,1.5));box-sizing:border-box;text-align:center;pointer-events:none;margin:0;font-weight:600;transition:color .2s}.preset-button-active .preset-name{color:#fff}.preset-name-input{width:100%;font-size:calc(.875rem*var(--zoom-level,1.5));letter-spacing:.025em;color:var(--preset-border-color);border-radius:calc(.25rem*var(--zoom-level,1.5));padding:calc(.25rem*var(--zoom-level,1.5))calc(.5rem*var(--zoom-level,1.5));min-height:calc(1.5rem*var(--zoom-level,1.5));box-sizing:border-box;text-align:center;background:#ffffff0d;border:1px solid #ffffff4d;outline:none;margin:0;font-weight:600;transition:all .2s}.preset-button-active .preset-name-input{color:#fff}.preset-name-input:hover{background:#ffffff14;border-color:#fff6}.preset-name-input:focus{background:#ffffff1a;border-color:#fff9;box-shadow:0 0 0 2px #ffffff1a}.preset-footer{color:#ffffff73;justify-content:space-between;align-items:center;margin-top:.75rem;font-size:.625rem;display:flex}.preset-send{align-items:center;gap:.25rem;display:inline-flex}.preset-send-dot{background-color:#34d399cc;border-radius:50%;width:.375rem;height:.375rem}.preset-button:active .preset-send-dot{background-color:#6ee7b7}.warning-text{color:#fde68ae6;text-align:center;font-size:.6875rem}.loading-container{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1rem;width:100%;min-height:100vh;display:flex}.loading-spinner{border:3px solid #fff3;border-top-color:#fffc;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:#ffffffb3;margin:0;font-size:.875rem}