.scale-chord-selector{gap:var(--spacing-xl);flex-direction:column;display:flex}.scale-type-dropdown{width:100%;position:relative}.scale-type-trigger{-webkit-user-select:none;user-select:none;width:100%}.scale-type-trigger:hover{border-color:var(--accent-primary);box-shadow:0 0 0 2px rgba(var(--accent-primary-rgb),.1)}.selected-scale-type{flex:1}.scale-type-grid{top:calc(100% + var(--spacing-sm));z-index:var(--z-dropdown);padding:var(--spacing-xl)var(--spacing-lg)var(--spacing-lg)var(--spacing-lg);box-sizing:border-box;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;width:320px;max-height:calc(100vh - 420px);display:grid;position:absolute;left:50%;overflow:hidden auto;transform:translate(-50%)}@media (min-width:700px){.scale-type-grid{grid-template-columns:repeat(2,1fr);width:520px;max-width:520px;left:50%;right:auto;transform:translate(-50%)}}@media (min-width:1100px){.scale-type-grid{grid-template-columns:repeat(3,1fr);width:750px;max-width:750px;left:50%;right:auto;transform:translate(-50%)}}.scale-category{background:var(--bg-tertiary);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);border:1px solid var(--border-color);min-width:0;overflow:visible}.scale-buttons{flex-wrap:wrap;gap:8px;display:flex;overflow:visible}.scale-button{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color);cursor:pointer;white-space:nowrap;text-align:center;text-overflow:ellipsis;border-radius:8px;flex-shrink:0;min-width:60px;max-width:140px;padding:8px 12px;font-size:.85rem;font-weight:500;transition:all .2s;overflow:hidden}.scale-button:hover{background:var(--bg-primary);border-color:var(--accent-primary);box-shadow:0 2px 8px rgba(var(--accent-primary-rgb),.2);transform:translateY(-1px)}.scale-button.selected{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;box-shadow:0 2px 8px rgba(var(--accent-primary-rgb),.3);font-weight:600}.scale-button.selected:hover{background:var(--accent-secondary);border-color:var(--accent-secondary);transform:translateY(-1px)}.selection-controls{flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:24px;display:flex}.chord-selection-title{color:var(--text-primary);text-align:center;margin-bottom:20px;font-size:1.5rem;font-weight:600}.mode-selector{margin-bottom:8px}.mode-buttons{grid-template-columns:1fr 1fr;gap:12px;display:grid}.mode-button{border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;border-radius:8px;padding:12px 16px;font-size:.9rem;font-weight:600;transition:all .2s}.mode-button:hover{background:var(--bg-primary);border-color:var(--accent-primary);box-shadow:0 2px 8px rgba(var(--accent-primary-rgb),.2);transform:translateY(-1px)}.mode-button.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;box-shadow:0 2px 8px rgba(var(--accent-primary-rgb),.3)}.mode-button.active:hover{background:var(--accent-secondary);border-color:var(--accent-secondary);transform:translateY(-1px)}.note-selector h3,.chord-type-selector h3,.scale-type-selector h3{color:var(--text-primary);margin-bottom:16px;font-size:1.2rem;font-weight:600}.note-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.note-button{border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;min-height:var(--control-lg);border-radius:6px;justify-content:center;align-items:center;padding:10px 8px;font-size:.9rem;font-weight:600;transition:all .15s;display:flex}.note-button:hover{background:var(--bg-primary);border-color:var(--accent-primary);box-shadow:0 2px 8px rgba(var(--accent-primary-rgb),.2);transform:translateY(-1px)}.note-button.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;box-shadow:0 2px 8px rgba(var(--accent-primary-rgb),.3);font-weight:600}.note-button.active:hover{background:var(--accent-secondary);border-color:var(--accent-secondary);transform:translateY(-1px)}.chord-type-selector,.scale-type-selector{flex-direction:column;gap:20px;display:flex}.type-categories{flex-direction:column;gap:16px;display:flex}.type-category h4{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border-color);margin-bottom:8px;padding-bottom:8px;font-size:.85rem;font-weight:600}.category-header{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:8px 0;transition:all .2s;display:flex}.category-header:hover{background:var(--bg-primary);border-radius:6px;margin:0 -12px;padding:8px 12px}.category-header h4{border:none;flex:1;margin:0;padding:0}.expand-arrow{color:var(--text-secondary);margin-left:8px;font-size:.8rem;font-weight:700;transition:transform .3s}.expand-arrow.expanded{transform:rotate(180deg)}.expand-arrow:hover{color:var(--accent-primary)}.type-grid{grid-template-columns:repeat(2,1fr);gap:6px;display:grid}.type-button{border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;min-height:var(--control-md);white-space:nowrap;text-align:center;text-overflow:ellipsis;border-radius:6px;padding:8px 12px;font-size:.85rem;font-weight:500;transition:all .15s;overflow:hidden}.type-button:hover{background:var(--bg-primary);border-color:var(--accent-primary);box-shadow:0 2px 8px rgba(var(--accent-primary-rgb),.2);transform:translateY(-1px)}.type-button.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;box-shadow:0 2px 8px rgba(var(--accent-primary-rgb),.3);font-weight:600}.type-button.active:hover{background:var(--accent-secondary);border-color:var(--accent-secondary);transform:translateY(-1px)}.current-selection{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;margin-top:8px;padding:20px}.current-selection h3{color:var(--text-primary);text-align:center;margin-bottom:12px;font-size:1.1rem;font-weight:600}.selection-display{text-align:center}.selection-item{color:var(--text-secondary);font-style:italic}.selection-item div:first-child{color:var(--text-primary);margin-bottom:4px;font-size:1.4rem;font-weight:700}.selection-item div:last-child{color:var(--text-secondary);font-size:.9rem}@media (max-width:768px){.selection-controls{flex-direction:column;align-items:flex-start;gap:16px}.toggle-and-root-row{width:100%}.toggle-and-root-row .root-selection{min-width:0}.scale-type-grid{grid-template-columns:1fr;width:min(90vw,350px);min-width:300px;max-height:calc(100vh - 450px);left:50%;overflow-x:hidden;transform:translate(-50%)}.type-grid{grid-template-columns:1fr;gap:8px}.type-button{min-height:var(--control-lg);padding:10px 12px;font-size:.8rem}.mode-buttons{gap:8px}.mode-button{padding:10px 12px;font-size:.85rem}}