.riff-DropdownTrigger{display:flex;align-items:center;gap:var(--riff-spacing-1);padding:var(--riff-spacing-0) var(--riff-spacing-2);border-radius:var(--riff-border-radius);border:var(--riff-border-width) solid transparent;color:var(--riff-color-text-secondary);font-size:var(--riff-font-size-xs);font-weight:var(--riff-font-weight-bold);letter-spacing:var(--riff-tracking-normal);transition:all var(--riff-transition-normal);background-color:transparent;height:var(--riff-toolbar-button-size);cursor:pointer}.riff-DropdownTrigger:focus{outline:none}.riff-DropdownTrigger:hover{background-color:var(--riff-color-hover-bg);border-color:var(--riff-color-border)}.riff-DropdownTrigger__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.riff-DropdownTrigger__chevron{transition:transform var(--riff-transition-normal)}.riff-DropdownTrigger__chevron--open{transform:rotate(180deg)}.riff-DropdownTrigger--open{background-color:var(--riff-color-button-bg);border-color:var(--riff-color-primary)}.riff-DropdownOverlay-backdrop{position:fixed;inset:0;z-index:var(--riff-z-dropdown);background-color:transparent}.riff-DropdownOverlay{position:fixed;z-index:var(--riff-z-dropdown);border-radius:var(--riff-border-radius-lg);box-shadow:var(--riff-shadow-xl);border:var(--riff-border-width) solid var(--riff-color-border);overflow:hidden;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:var(--riff-color-bg-panel)}.riff-DropdownOverlay ::-webkit-scrollbar{width:6px}.riff-DropdownOverlay ::-webkit-scrollbar-track{background:transparent}.riff-DropdownOverlay ::-webkit-scrollbar-thumb{background-color:var(--riff-color-border);border-radius:3px}.riff-DropdownOverlay ::-webkit-scrollbar-thumb:hover{background-color:var(--riff-color-muted)}.riff-DropdownItem{width:100%;text-align:left;padding:var(--riff-spacing-2) var(--riff-spacing-3);border-radius:var(--riff-border-radius-md);font-size:var(--riff-font-size-sm);font-weight:var(--riff-font-weight-medium);cursor:pointer;transition:background-color var(--riff-transition-normal);background-color:transparent;color:var(--riff-color-text-secondary);border:none}.riff-DropdownItem--selected,.riff-DropdownItem:hover{background-color:var(--riff-color-border)}.riff-DropdownHeader{padding:var(--riff-spacing-2) var(--riff-spacing-4);border-bottom:var(--riff-border-width) solid var(--riff-color-border);background-color:var(--riff-color-hover-bg);display:flex;align-items:center;gap:var(--riff-spacing-2);color:var(--riff-color-text-secondary)}.riff-DropdownHeader__title{font-weight:var(--riff-font-weight-semibold);font-size:var(--riff-font-size-sm);padding:0;margin:0;color:var(--riff-color-text)}.riff-DropdownContent{overflow-y:auto;padding:var(--riff-spacing-2)}.riff-ClefOverlay{width:320px}.riff-ClefOverlay__grid{padding:var(--riff-spacing-2);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--riff-spacing-2)}.riff-ClefOverlay__option{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--riff-spacing-2);border-radius:var(--riff-border-radius-md);transition:all var(--riff-transition-normal);border:var(--riff-border-width) solid transparent;background-color:transparent;cursor:pointer}.riff-ClefOverlay__option--selected,.riff-ClefOverlay__option:hover{background-color:var(--riff-color-hover-bg)}.riff-ClefOverlay__option--selected{border-color:var(--riff-color-primary)}.riff-ClefOverlay__preview{margin-bottom:var(--riff-spacing-1);height:80px;display:flex;align-items:center;justify-content:center;width:100%;position:relative}.riff-ClefOverlay__label{font-size:var(--riff-font-size-xs);font-weight:var(--riff-font-weight-medium)}.riff-KeySignatureOverlay{position:fixed;inset:0;background-color:var(--riff-color-backdrop-light);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:var(--riff-z-dropdown);display:flex;align-items:center;justify-content:center;padding:var(--riff-spacing-4)}.riff-KeySignatureOverlay__panel{border-radius:var(--riff-border-radius-xl);box-shadow:var(--riff-shadow-2xl);width:100%;max-width:36rem;overflow:hidden}.riff-KeySignatureOverlay__header{padding:var(--riff-spacing-4);border-bottom:var(--riff-border-width) solid var(--riff-color-border);display:flex;align-items:center;justify-content:space-between}.riff-KeySignatureOverlay__title-group{display:flex;align-items:center;gap:var(--riff-spacing-2)}.riff-KeySignatureOverlay__title{font-weight:var(--riff-font-weight-bold);font-size:var(--riff-font-size-lg)}.riff-KeySignatureOverlay__close-btn{padding:var(--riff-spacing-1);border-radius:var(--riff-border-radius-full);transition:background-color var(--riff-transition-normal);background:transparent;border:none;cursor:pointer}.riff-KeySignatureOverlay__close-btn:hover{background-color:var(--riff-color-hover-bg)}.riff-KeySignatureOverlay__content{padding:var(--riff-spacing-4);max-height:70vh;overflow-y:auto}.riff-KeySignatureOverlay__footer{padding:var(--riff-spacing-3);border-top:var(--riff-border-width) solid var(--riff-color-border);text-align:center;font-size:var(--riff-font-size-xs)}.riff-ModeToggle{display:flex;border-radius:var(--riff-border-radius-lg);padding:var(--riff-spacing-1);margin-bottom:var(--riff-spacing-4)}.riff-ModeToggle__btn{flex:1 1;padding:var(--riff-spacing-2) var(--riff-spacing-4);font-size:var(--riff-font-size-sm);font-weight:var(--riff-font-weight-medium);border-radius:var(--riff-border-radius-md);transition:all var(--riff-transition-normal);border:none;cursor:pointer;background:transparent}.riff-ModeToggle__btn--active{background-color:var(--riff-color-primary);color:#ffffff}.riff-KeySection{margin-bottom:var(--riff-spacing-4)}.riff-KeySection__title{font-size:var(--riff-font-size-xs);font-weight:var(--riff-font-weight-semibold);text-transform:uppercase;letter-spacing:var(--riff-tracking-wide);margin-bottom:var(--riff-spacing-2);padding:0 var(--riff-spacing-1)}.riff-KeySection__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--riff-spacing-2)}@media (min-width:768px){.riff-KeySection__grid{grid-template-columns:repeat(4,1fr)}}.riff-KeyOption{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--riff-spacing-2);border-radius:var(--riff-border-radius-md);transition:all var(--riff-transition-normal);border:var(--riff-border-width) solid transparent;background-color:transparent;cursor:pointer}.riff-KeyOption--selected,.riff-KeyOption:hover{background-color:var(--riff-color-hover-bg)}.riff-KeyOption--selected{border-color:var(--riff-color-primary)}.riff-KeyOption__preview{height:64px;display:flex;align-items:center;justify-content:center;width:100%}.riff-KeyOption__label{font-size:var(--riff-font-size-xs);font-weight:var(--riff-font-weight-medium);text-align:center}.riff-KeySignatureOverlay__divider{border:none;border-top:var(--riff-border-width) solid var(--riff-color-border);margin:var(--riff-spacing-3) 0}.riff-KeySignatureOverlay__kbd{padding:var(--riff-spacing-1) var(--riff-spacing-1);border-radius:var(--riff-border-radius);border:var(--riff-border-width) solid var(--riff-color-border)}.riff-TimeSignatureOverlay__grid{padding:var(--riff-spacing-2);display:grid;grid-template-columns:repeat(2,1fr);gap:var(--riff-spacing-2)}.riff-TimeSignatureOverlay__option{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--riff-spacing-2);border-radius:var(--riff-border-radius-md);transition:all var(--riff-transition-normal);border:var(--riff-border-width) solid transparent;background-color:transparent;cursor:pointer}.riff-TimeSignatureOverlay__option:hover{background-color:var(--riff-color-hover-bg)}.riff-TimeSignatureOverlay__option--selected{background-color:var(--riff-color-hover-bg);border-color:var(--riff-color-primary)}.riff-TimeSignatureOverlay__preview{margin-bottom:var(--riff-spacing-1);height:64px;display:flex;align-items:center;justify-content:center;width:100%}.riff-TimeSignatureOverlay__label{font-size:var(--riff-font-size-xs);font-weight:var(--riff-font-weight-medium)}.riff-ScoreCanvas{overflow-x:auto;position:relative;outline:none;z-index:10;padding-left:var(--riff-spacing-8)}.riff-ScoreCanvas::-webkit-scrollbar{height:8px}.riff-ScoreCanvas::-webkit-scrollbar-track{background:transparent}.riff-ScoreCanvas::-webkit-scrollbar-thumb{background-color:rgba(51,65,85,.5);border-radius:var(--riff-border-radius-full)}.riff-ScoreCanvas:hover::-webkit-scrollbar-thumb{background-color:rgba(71,85,105,.5)}.riff-ScoreCanvas__svg{margin-left:0;overflow:visible}.chord-group--ghost{opacity:.5}.riff-ScoreEditor__title-wrapper{position:relative;z-index:20}.riff-ScoreTitleField,.riff-ScoreTitleField__input{box-sizing:border-box;font-family:inherit;font-weight:var(--riff-font-weight-bold);padding:var(--riff-spacing-0) var(--riff-spacing-1);border-radius:var(--riff-border-radius);color:var(--riff-color-text);border:var(--riff-border-width) solid transparent;background-color:transparent;transition:background-color var(--riff-transition-normal);margin:1rem 1.6rem 0;height:2.25rem;letter-spacing:0;font-feature-settings:"kern";font-kerning:normal;vertical-align:top}.riff-ScoreTitleField{display:inline-block;cursor:pointer}.riff-ScoreTitleField:hover{background-color:var(--riff-color-hover-bg)}.riff-ScoreTitleField__input{outline:none;border-color:var(--riff-color-border);max-width:100%}.riff-ShortcutsOverlay-backdrop{position:fixed;inset:0;z-index:var(--riff-z-dropdown);display:flex;align-items:center;justify-content:center;padding:var(--riff-spacing-4);background-color:var(--riff-color-backdrop-light);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.riff-ShortcutsOverlay{background-color:var(--riff-color-bg-panel);border-radius:var(--riff-border-radius-xl);box-shadow:var(--riff-shadow-2xl);width:100%;max-width:var(--riff-modal-max-width-xl);overflow:hidden;max-height:90vh;display:flex;flex-direction:column}.riff-ShortcutsOverlay__header{padding:var(--riff-spacing-4);border-bottom:var(--riff-border-width) solid var(--riff-color-border);display:flex;align-items:center;justify-content:space-between;background-color:var(--riff-color-bg)}.riff-ShortcutsOverlay__title-group{display:flex;align-items:center;gap:var(--riff-spacing-2);color:var(--riff-color-primary)}.riff-ShortcutsOverlay__title{font-weight:var(--riff-font-weight-bold);font-size:var(--riff-font-size-lg);color:var(--riff-color-text)}.riff-ShortcutsOverlay__close-btn{padding:var(--riff-spacing-1);border-radius:var(--riff-border-radius-full);color:var(--riff-color-text-secondary);background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color var(--riff-transition-normal)}.riff-ShortcutsOverlay__close-btn:hover{background-color:var(--riff-color-border)}.riff-ShortcutsOverlay__content{padding:var(--riff-spacing-6);overflow-y:auto;flex:1 1}.riff-ShortcutsOverlay__content::-webkit-scrollbar{width:8px}.riff-ShortcutsOverlay__content::-webkit-scrollbar-track{background:transparent}.riff-ShortcutsOverlay__content::-webkit-scrollbar-thumb{background-color:var(--riff-color-border);border-radius:4px}.riff-ShortcutsOverlay__content::-webkit-scrollbar-thumb:hover{background-color:var(--riff-color-muted)}.riff-WelcomeSection{margin-bottom:var(--riff-spacing-8);padding:var(--riff-spacing-4);border-radius:var(--riff-border-radius-lg);border:1px solid rgba(var(--riff-color-primary-rgb),.3);background-color:rgba(var(--riff-color-primary-rgb),.05)}.riff-WelcomeSection__title{font-weight:var(--riff-font-weight-bold);margin-bottom:var(--riff-spacing-2);color:var(--riff-color-primary)}.riff-WelcomeSection__text{font-size:var(--riff-font-size-sm);margin-bottom:var(--riff-spacing-4);color:var(--riff-color-text)}.riff-WelcomeSection__grid{display:grid;grid-template-columns:1fr;gap:var(--riff-spacing-4);font-size:var(--riff-font-size-sm)}@media (min-width:768px){.riff-WelcomeSection__grid{grid-template-columns:1fr 1fr}}.riff-WelcomeSection__subtitle{font-weight:var(--riff-font-weight-bold);margin-bottom:var(--riff-spacing-1);color:var(--riff-color-text)}.riff-WelcomeSection__list{list-style-type:disc;list-style-position:inside;color:var(--riff-color-muted)}.riff-WelcomeSection__list li{margin-bottom:var(--riff-spacing-1)}.riff-ShortcutsGrid{display:grid;grid-template-columns:1fr;gap:var(--riff-spacing-8)}@media (min-width:768px){.riff-ShortcutsGrid{grid-template-columns:1fr 1fr}}.riff-ShortcutGroup{margin-bottom:var(--riff-spacing-6)}.riff-ShortcutGroup__header{font-size:var(--riff-font-size-sm);font-weight:var(--riff-font-weight-bold);text-transform:uppercase;letter-spacing:var(--riff-tracking-wider);margin-bottom:var(--riff-spacing-3);border-bottom:var(--riff-border-width) solid var(--riff-color-border);padding-bottom:var(--riff-spacing-1);color:var(--riff-color-text-secondary)}.riff-ShortcutGroup__list{display:grid;grid-template-columns:1fr;gap:var(--riff-spacing-2)}.riff-ShortcutItem{display:flex;align-items:center;justify-content:space-between;font-size:var(--riff-font-size-sm);color:var(--riff-color-text)}.riff-ShortcutItem__keys{display:flex;gap:var(--riff-spacing-1)}.riff-Kbd{display:inline-block;padding:var(--riff-spacing-1) var(--riff-spacing-2);border-radius:var(--riff-border-radius);font-size:var(--riff-font-size-xs);min-width:var(--riff-icon-size-lg);text-align:center;background-color:var(--riff-color-bg-panel);border:var(--riff-border-width) solid var(--riff-color-border);color:var(--riff-color-text-secondary)}.riff-WelcomeSection__list .riff-Kbd{color:var(--riff-color-primary);padding:0 .25rem}.riff-ShortcutsOverlay__footer{padding:var(--riff-spacing-4);border-top:var(--riff-border-width) solid var(--riff-color-border);text-align:center;font-size:var(--riff-font-size-xs);color:var(--riff-color-text-secondary);background-color:var(--riff-color-bg)}.riff-ShortcutsOverlay__footer-kbd{padding:var(--riff-spacing-1) var(--riff-spacing-1);border-radius:var(--riff-border-radius);border:var(--riff-border-width) solid var(--riff-color-border);color:var(--riff-color-text);background-color:var(--riff-color-bg-panel)}.riff-ScoreEditor{padding:0;display:flex;flex-direction:column}.riff-ScoreEditor__content{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;box-sizing:border-box}.riff-ConfirmDialog-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:var(--riff-z-modal);display:flex;align-items:center;justify-content:center;background-color:var(--riff-color-backdrop)}.riff-ConfirmDialog{background-color:var(--riff-color-bg);border-radius:var(--riff-border-radius-lg);box-shadow:var(--riff-shadow-xl);padding:var(--riff-spacing-6);max-width:var(--riff-modal-max-width-md);width:100%;margin:var(--riff-spacing-0) var(--riff-spacing-4);position:relative;max-height:90vh;overflow-y:auto}.riff-ConfirmDialog__title{font-size:var(--riff-font-size-lg);font-weight:var(--riff-font-weight-semibold);margin-bottom:var(--riff-spacing-2);color:var(--riff-color-text)}.riff-ConfirmDialog__message{margin-bottom:var(--riff-spacing-6);color:var(--riff-color-text-secondary)}.riff-ConfirmDialog__actions{display:flex;justify-content:flex-end;gap:var(--riff-spacing-3)}.riff-ConfirmDialog__button{padding:var(--riff-spacing-2) var(--riff-spacing-4);border-radius:var(--riff-border-radius);font-weight:var(--riff-font-weight-medium);transition:opacity var(--riff-transition-normal);cursor:pointer;border:none}.riff-ConfirmDialog__button:hover{opacity:.8}.riff-ConfirmDialog__button--primary{background-color:var(--riff-color-primary);color:var(--riff-color-active-text)}.riff-ConfirmDialog__button--danger{background-color:var(--riff-color-danger);color:var(--riff-color-active-text)}.riff-ConfirmDialog__button--secondary{background-color:transparent;color:var(--riff-color-text);border:var(--riff-border-width) solid var(--riff-color-border)}