@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/Manrope-VF.woff2) format("woff2")}:root{--bg-color: #f0efea;--bg-color-darker: #e4e3de;--text-color: #4a4845;--knob-color: #faf9f6;--knob-color-secondary: #f3f2ed;--knob-border: rgba(80, 70, 60, .1);--knob-shine: rgba(255, 254, 252, .7);--knob-shadow: rgba(60, 50, 40, .15);--accent-color: #dddcd7;--accent-color-orange: #ff9500;--accent-color-blue: #110237;--button-color: #110237;--button-color-secondary: #080031ee;--button-hover: #221247;--button-active: #110237;--select-bg: #f7f6f2;--select-border: rgba(80, 70, 60, .1);--border-color: #d4d3ce;--text-inverse: #fffefa;--card-bg: rgba(255, 255, 255, .6);--card-border: rgba(80, 70, 60, .12);--lfo-color-1: #4a7c9b;--lfo-color-2: #c4a35a;--lfo-color-3: #888888;--lfo-color-4: #e07020;--space-xxs: .125rem;--space-xs: .25rem;--space-sm: .5rem;--space-md: .75rem;--space-lg: 1rem;--space-xl: 1.5rem;--knob-box-shadow: 0 0 0 2px var(--knob-color-secondary), 0 0 0 4px rgba(180, 175, 165, .4), 0 4px 8px rgba(60, 50, 40, .12), 0 8px 16px rgba(60, 50, 40, .08), 0 2px 4px rgba(60, 50, 40, .15);--knob-gradient: radial-gradient(ellipse 80% 50% at 50% 15%, rgba(255, 254, 252, .9) 0%, rgba(255, 254, 252, .3) 25%, transparent 60%), radial-gradient(ellipse 100% 100% at 50% 100%, rgba(60, 50, 40, .08) 0%, transparent 50%), var(--knob-color);--top-bar-bg: rgba(240, 239, 234, .95);--play-button-shadow: inset 0 -.0625rem .25rem rgba(0, 0, 0, .02), 0 .125rem .25rem rgba(0, 0, 0, .15), -.125rem -.125rem .1875rem rgba(255, 255, 255, .15)}:root.dark-theme,html.dark-theme,body.dark-theme{--bg-color: #1a1a1a;--bg-color-darker: #111;--text-color: #b0b0b0;--knob-color: #2a2a2a;--knob-color-secondary: #333;--knob-border: rgba(255, 255, 255, .1);--knob-shine: rgba(255, 255, 255, .1);--knob-shadow: rgba(0, 0, 0, .4);--accent-color: #aaa;--accent-color-orange: #aaa;--accent-color-blue: #aaa;--button-color: #888;--button-color-secondary: #666;--button-hover: #999;--button-active: #777;--select-bg: #2a2a2a;--select-border: rgba(255, 255, 255, .1);--border-color: #444;--text-inverse: #1a1a1a;--card-bg: rgba(40, 40, 40, .6);--card-border: rgba(255, 255, 255, .08);--lfo-color-1: #4a7c9b;--lfo-color-2: #c4a35a;--lfo-color-3: #888888;--lfo-color-4: #e07020;--knob-box-shadow: 0 0 0 2px var(--knob-color-secondary), 0 0 0 4px rgba(0, 0, 0, .3), 0 4px 8px rgba(0, 0, 0, .25), 0 8px 16px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .3);--knob-gradient: radial-gradient(ellipse 80% 50% at 50% 15%, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 30%, transparent 50%), radial-gradient(ellipse 100% 100% at 50% 100%, rgba(0, 0, 0, .12) 0%, transparent 50%), var(--knob-color);--top-bar-bg: rgba(26, 26, 26, .95);--play-button-shadow: 0 .125rem .25rem rgba(0, 0, 0, .5)}*,*:before,*:after{box-sizing:border-box}.no-transitions,.no-transitions *,.no-transitions *:before,.no-transitions *:after{transition:none!important}[x-cloak]{display:none!important}button:focus{outline:none}html,body{font-size:min(1.25rem,5vw);overscroll-behavior:none;margin:0;padding:0;font-family:Manrope,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-color);color:var(--text-color);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{padding:2rem 0 0}.top-bar{position:fixed;top:0;left:0;right:0;display:flex;flex-direction:column;border-bottom:1px solid var(--knob-border);background:var(--top-bar-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:100}.top-bar-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xs) var(--space-lg)}.app-title{font-size:1rem;font-weight:200;margin:0;letter-spacing:1px;text-transform:uppercase;color:var(--text-color);opacity:.8;cursor:pointer;transition:opacity .2s}.app-title:hover{opacity:1}.title-menu-wrapper{position:relative}.title-dropdown{position:absolute;top:100%;left:0;margin-top:.5rem;background:var(--knob-color);border:1px solid var(--knob-border);border-radius:.5rem;box-shadow:0 4px 12px #00000026;overflow:hidden;min-width:100px;z-index:1000}.options-menu-wrapper{position:relative}.options-dropdown{position:absolute;top:100%;right:0;margin-top:.5rem;background:var(--knob-color);border:1px solid var(--knob-border);border-radius:.5rem;box-shadow:0 4px 12px #00000026;overflow:hidden;min-width:120px;z-index:1000}.dropdown-item{display:block;width:100%;padding:var(--space-md) var(--space-lg);background:transparent;border:none;text-align:left;cursor:pointer;font-size:.9rem;color:var(--text-color);text-decoration:none;transition:background .2s;border-bottom:1px solid var(--knob-border)}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background:var(--bg-color-darker)}.view-container{max-width:44rem;margin:0 auto;padding:var(--space-md)}.info-view{max-width:40rem}.view-content{padding:var(--space-lg)}.view-title{font-size:1.25rem;font-weight:600;margin:0 0 var(--space-lg) 0;color:var(--text-color);text-align:center}.info-text{text-align:left;line-height:1.6}.info-text p{margin:var(--space-sm) 0}.info-text h3{font-size:1rem;font-weight:600;margin:var(--space-xl) 0 var(--space-sm) 0;color:var(--button-color)}.info-text ul{margin:var(--space-sm) 0;padding-left:var(--space-xl)}.info-text li{margin:var(--space-xs) 0}.info-text a{color:var(--button-color);text-decoration:none}.info-text a:hover{text-decoration:underline}.back-button{display:block;margin:var(--space-xl) auto 6rem;padding:var(--space-md) var(--space-xl);background-color:var(--button-color);color:#fff;border:none;border-radius:.5rem;font-size:.9rem;cursor:pointer;transition:background .2s}.back-button:hover{background-color:var(--button-hover)}.header-controls{display:flex;align-items:center;gap:var(--space-sm)}.header-button{background:transparent;border:none;padding:var(--space-xs);cursor:pointer;color:var(--text-color);display:flex;align-items:center;justify-content:center;transition:opacity .2s}.header-button:hover{opacity:.7}.header-button.active{color:var(--lfo-color-1)}.header-button svg{width:20px;height:20px}.connection-footer{position:fixed;bottom:0;left:0;right:0;background:var(--top-bar-bg);border-top:1px solid var(--knob-border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:99;padding:var(--space-sm) var(--space-lg)}.connection-footer-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);max-width:20rem;margin:0 auto}.status{font-size:.9rem;background:#fff;padding:.5rem 1rem;border-radius:.25rem;box-shadow:0 .125rem .25rem #0000001a}.connection-buttons{display:flex;gap:var(--space-lg);justify-content:center}.connect-btn{background-color:var(--button-color);color:#fff;border:none;padding:var(--space-md) var(--space-lg);font-size:.9rem;border-radius:.5rem;cursor:pointer;transition:background .2s}.connect-btn:hover{background-color:var(--button-hover)}.lfo-grid-container{max-width:44rem;margin:0 auto}.transport-bar{display:flex;align-items:center;justify-content:center;gap:var(--space-xl);padding:var(--space-xs);margin-bottom:var(--space-xs);background:var(--card-bg);border:1px solid var(--card-border)}.start-stop-button{color:var(--text-color);border:none;border-radius:50%;cursor:pointer;transition:all .2s ease;width:3rem;height:3rem;box-shadow:var(--play-button-shadow);position:relative;--background-color: var(--knob-color);background:linear-gradient(to bottom right,var(--background-color),var(--knob-color-secondary));padding:0;display:grid;align-items:center;justify-content:center}.start-stop-button.active{--background-color: var(--knob-color-secondary);box-shadow:inset 0 .0625rem .1875rem #0000004d}.start-stop-button svg{grid-row-start:1;grid-column-start:1;width:1.25rem;height:1.25rem;fill:var(--text-color);transition:all .2s ease}.start-stop-button.active .play-icon{opacity:0}.start-stop-button:not(.active) .stop-icon{opacity:0}.bpm-control,.midi-channel-control{display:flex;align-items:center;gap:var(--space-xs)}.bpm-control{gap:0}.bpm-control .bpm-btn{border-radius:0}.bpm-control .bpm-btn:first-child{border-radius:4px 0 0 4px}.bpm-control .bpm-btn:nth-child(3){border-radius:0 4px 4px 0;border-left:none}.bpm-input,.channel-input{width:2.5rem;background-color:var(--knob-color);border:1px solid var(--knob-border);border-radius:0;text-align:center;font-size:.85rem;padding:.3rem .25rem;color:var(--text-color);border-left:none}.channel-input{width:3rem;border-radius:4px;border-left:1px solid var(--knob-border)}.bpm-input:focus,.channel-input:focus{outline:none;border-color:var(--button-color)}.bpm-label,.channel-label{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-color);opacity:.7}.bpm-label{cursor:pointer;user-select:none;-webkit-user-select:none;transition:opacity .15s,color .15s;padding:.25rem .5rem;margin:-.25rem -.5rem -.25rem 0;border-radius:4px}.bpm-label:hover{opacity:1;color:var(--lfo-color-1)}.bpm-label:active{transform:scale(.95)}.bpm-label.tap-pulse{animation:tapPulse .3s cubic-bezier(.34,1.56,.64,1)}@keyframes tapPulse{0%{transform:scale(1);text-shadow:0 0 0 transparent}30%{transform:scale(1.3);text-shadow:0 0 12px var(--lfo-color-1),0 0 24px var(--lfo-color-1);color:var(--lfo-color-1);opacity:1}to{transform:scale(1);text-shadow:0 0 0 transparent}}.bpm-btn{padding:.3rem .4rem;border:1px solid var(--knob-border);border-radius:4px;background:var(--knob-color);color:var(--text-color);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .15s;min-width:1.75rem}.bpm-btn:hover{background:var(--button-hover);color:var(--bg-color)}.bpm-btn:active{background:var(--button-color);color:var(--text-inverse)}.sync-toggle{padding:var(--space-xs) var(--space-sm);border:1px solid var(--knob-border);border-radius:.25rem;background:var(--knob-color);color:var(--text-color);font-size:.65rem;font-weight:600;cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.5px}.sync-toggle.active{background:var(--lfo-color-1);border-color:var(--lfo-color-1);color:#fff}.bpm-input:disabled{opacity:.5;cursor:not-allowed}.lfo-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}@media(max-width:480px){.lfo-cards-grid{gap:var(--space-xs)}}@media(max-height:480px){.lfo-cards-grid{grid-template-columns:repeat(4,1fr);gap:var(--space-xs)}}.lfo-card{background:var(--card-bg);border:1px solid var(--card-border);padding:var(--space-sm) var(--space-xs);display:flex;flex-direction:column;gap:var(--space-xs);transition:opacity .2s;min-width:0;overflow:hidden}.lfo-card.lfo-disabled{opacity:.5}.lfo-card-header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-xs)}.lfo-number{font-size:1.2rem;font-weight:600;color:#fff;width:1.5rem;height:1.5rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%}.lfo-card:nth-of-type(1){--lfo-accent: var(--lfo-color-1)}.lfo-card:nth-of-type(2){--lfo-accent: var(--lfo-color-2)}.lfo-card:nth-of-type(3){--lfo-accent: var(--lfo-color-3)}.lfo-card:nth-of-type(4){--lfo-accent: var(--lfo-color-4)}.lfo-card .lfo-number{background:var(--lfo-accent)}.lfo-card .lfo-toggle.active{background:var(--lfo-accent);border-color:var(--lfo-accent)}.lfo-card .knob:before{background-color:var(--lfo-accent)}.lfo-card .knob-indicator{background:linear-gradient(to bottom,var(--lfo-accent) 85%,transparent 85%)}.lfo-card .rate-button-small.active,.lfo-card .rate-button-small:hover{background-color:var(--lfo-accent);border-color:var(--lfo-accent)}.lfo-toggle{padding:var(--space-xs) var(--space-sm);border:1px solid var(--knob-border);border-radius:.25rem;background:var(--knob-color);color:var(--text-color);font-size:.7rem;font-weight:600;cursor:pointer;transition:all .15s}.lfo-toggle.active{background:var(--button-color);border-color:var(--button-color);color:var(--text-inverse)}.lfo-waveform-container{--canvas-height: 3.5rem;display:flex;align-items:stretch;gap:0;height:var(--canvas-height)}.shape-select{background:var(--knob-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2350514f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right .3rem center/.5rem .5rem;border:1px solid var(--knob-border);border-radius:.25rem;padding:.25rem 1rem .25rem 0;font-size:.65rem;color:var(--text-color);cursor:pointer;appearance:none;-webkit-appearance:none;flex:1;text-align:center}.shape-select:focus{outline:none}.lfo-mini-canvas{flex:1;min-width:0;height:100%;border:1px solid var(--knob-border);border-radius:.25rem;cursor:pointer;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.lfo-controls-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-xs);justify-items:center}@media(max-width:480px){.lfo-controls-grid{grid-template-columns:repeat(2,1fr);grid-template-areas:"rate pwm" "phs amt"}}@media(max-height:480px){.lfo-controls-grid{grid-template-columns:repeat(2,1fr);grid-template-areas:"rate pwm" "phs amt"}}.lfo-control{display:flex;flex-direction:column;align-items:center;gap:.15rem;width:100%}@media(max-width:480px){.rate-control{grid-area:rate}}@media(max-height:480px){.rate-control{grid-area:rate}}.control-label{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-color);opacity:.7}.control-value{font-size:.65rem;font-weight:500;color:var(--text-color);min-width:3ch;text-align:center;font-variant-numeric:tabular-nums}.knob{background:var(--knob-gradient);border-radius:50%;position:relative;border:1px solid var(--knob-border);box-shadow:var(--knob-box-shadow);touch-action:none;cursor:pointer}.knob-small{width:2.25rem;height:2.25rem}.knob:before{content:"";position:absolute;top:50%;left:50%;width:15%;height:15%;background-color:var(--accent-color);border-radius:50%;transform:translate(-50%,-50%);z-index:3;box-shadow:inset .0625rem .0625rem .125rem #0003}.knob-indicator{position:absolute;background:linear-gradient(to bottom,var(--accent-color) 85%,transparent 85%);transform-origin:bottom center;z-index:2;left:50%}.indicator-small{width:.15rem;height:50%}.rate-buttons-row{display:flex;gap:1px;width:100%}.rate-button-small{flex:1;border:1px solid var(--knob-border);border-radius:.15rem;padding:.25rem .1rem;margin:.15rem;cursor:pointer;background-color:var(--knob-color);color:var(--text-color);transition:all .15s ease;font-size:.6rem;text-align:center;font-weight:500;min-width:0;position:relative}.rate-button-small:before{content:"";position:absolute;inset:-.25rem -.15rem}.rate-button-small:hover{background-color:var(--button-hover);color:var(--bg-color)}.rate-button-small.active{background-color:var(--button-color);border-color:var(--button-color);color:var(--text-inverse);font-weight:700}.rate-button-small.rate-label{flex:1.5;font-size:.55rem}.rate-button-small.rate-label:not(.active){opacity:.6}