:root{--color-primary: #5e17eb;--color-secondary: #22c2f1;--color-accent: #a3e6fa;--color-background: #f5f4f4;--color-border: #cccccc;--color-text: #333333;--color-white: #ffffff;--spacing-xs: 5px;--spacing-sm: 8px;--spacing-md: 10px;--spacing-lg: 12px;--spacing-xl: 20px;--spacing-xxl: 35px;--spacing-xxxl: 42px;--spacing-bottom: 50px;--note-size-sm: 30px;--note-size-md: 35px;--note-width-lg: 155px;--note-display-width: 50px;--note-display-height: 31px;--sequence-height: 280px;--logo-max-width: 250px;--logo-max-height: 170px;--font-family-primary: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;--font-size-sm: 12px;--font-size-md: 15px;--letter-spacing: 1px;--border-radius-sm: 1px;--border-radius-md: 3px;--border-radius-lg: 5px;--box-shadow-note: 0px 0px 0px 1px var(--color-border);--scale-icon-sm: 1.8;--scale-icon-lg: 2}.board{display:flex;flex-direction:column;gap:var(--spacing-lg);align-items:stretch;padding-bottom:var(--spacing-bottom);width:100%}.header{display:flex;flex-direction:column;width:100%;align-items:center;justify-content:center}.logo-image{margin-top:var(--spacing-md);height:var(--logo-max-height);width:var(--logo-max-width);max-height:var(--logo-max-height);max-width:var(--logo-max-width);object-fit:contain;display:flex;justify-content:center}.main-sequence{display:flex;flex-direction:row;gap:var(--spacing-xl)}.main-sequence-container{display:flex;gap:var(--spacing-xxl);justify-content:center}.main-sequence .notes{display:flex;flex-direction:column;position:relative;height:var(--sequence-height)}.main-sequence .notes:before{content:"";display:none;background-color:var(--color-accent);opacity:.8;position:absolute;top:0;right:0;bottom:0;left:0}.main-sequence .notes.highlighted:before{display:block}.main-sequence .compass{height:100%;display:flex;flex-direction:row;gap:var(--spacing-xs)}.back-sequence{display:flex;flex-direction:row;gap:var(--spacing-xl)}.back-sequence-container{display:flex;gap:var(--spacing-xxl);justify-content:center}.back-sequence .back-compass{display:flex;flex-direction:column;gap:var(--spacing-sm)}.note{display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .2s ease-in-out}.note .text{display:none;text-align:center;font-family:var(--font-family-primary);letter-spacing:var(--letter-spacing);-webkit-user-select:none;user-select:none}.note:hover .text{display:block}.main-sequence .note{width:var(--note-size-md);height:var(--note-size-md);background-color:var(--color-background);box-shadow:var(--box-shadow-note);border-radius:var(--border-radius-sm)}.main-sequence .note .text{font-size:var(--font-size-sm)}.main-sequence .note.active{background-color:var(--color-primary);color:var(--color-white);transform:scale(1.05)}.back-sequence .note{width:var(--note-width-lg);height:var(--note-size-sm);background-color:var(--color-border);border-radius:var(--border-radius-md)}.back-sequence .note .text{font-size:var(--font-size-md);color:var(--color-primary)}.back-sequence .note.active{background-color:var(--color-accent)}.back-sequence .note:hover{transform:scale(1.02)}.main-notes-display-container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.back-notes-display-container{display:flex;flex-direction:column;gap:var(--spacing-md)}.back-notes-display{width:var(--note-display-width);height:var(--note-display-height);background-color:var(--color-background);border-radius:var(--border-radius-lg);text-align:center;padding-top:var(--spacing-xs);color:var(--color-secondary);font-weight:500}.buttons-container{margin-top:var(--spacing-md);display:flex;gap:var(--spacing-xxxl);justify-content:center}.play-stop-container{margin-top:var(--spacing-md)}.play-stop-icon{transform:scale(var(--scale-icon-lg));cursor:pointer;transition:transform .2s ease-in-out}.play-stop-icon:hover{transform:scale(calc(var(--scale-icon-lg) * 1.1))}.reset-container{margin-top:var(--spacing-md)}.reset-icon{transform:scale(var(--scale-icon-sm));color:var(--color-primary);cursor:pointer;transition:all .2s ease-in-out}.reset-icon:hover{transform:scale(calc(var(--scale-icon-sm) * 1.1));opacity:.8}.sliders-container{margin-top:var(--spacing-md)}.synth-options{display:flex;flex-direction:column}.toggle-buttons{display:block}.select-established-sequence{width:100%;display:flex;justify-content:center}.radio-group{display:flex;flex-direction:row;gap:24px}.checked{color:var(--color-primary)}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;width:100%;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}