.notation-toggle{background:var(--gradient-notation-bg);border-radius:var(--border-radius-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;transition:var(--transition-smooth);-webkit-user-select:none;user-select:none;box-shadow:var(--shadow-notation);border:1px solid #667eea4d;align-items:center;gap:0;padding:0;display:inline-flex;position:relative;overflow:hidden}.notation-toggle:before{content:"";background:var(--gradient-purple);border-radius:var(--border-radius-lg);width:50%;height:100%;transition:var(--transition-smooth);z-index:1;position:absolute;top:0;left:0;box-shadow:0 3px 8px #667eea66,inset 0 1px #ffffff4d}.notation-toggle:hover{background:var(--gradient-notation-bg-hover);transform:var(--transform-hover-scale);box-shadow:var(--shadow-notation-hover);border-color:#667eea80}.notation-toggle:active{transform:var(--transform-active-scale)}.notation-toggle-button{padding:var(--spacing-md)var(--spacing-lg);border-radius:var(--border-radius-lg);color:#fffc;transition:var(--transition-smooth);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);z-index:2;text-shadow:0 1px 2px #0003;flex:1;justify-content:center;align-items:center;display:flex;position:relative}.notation-toggle[data-active=flat]:before{transform:translate(0)}.notation-toggle[data-active=sharp]:before{transform:translate(100%)}.notation-toggle-button.active{color:#fff;font-weight:var(--font-weight-semibold);text-shadow:0 2px 4px #0000004d;transform:scale(1.05)}.notation-toggle[data-active=flat]:before,.notation-toggle[data-active=sharp]:before{transition:var(--transition-bounce)}.notation-toggle-button.active{animation:.3s ease-out activeSlide}@keyframes activeSlide{0%{opacity:.8;transform:scale(.9)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@media (prefers-color-scheme:light){.notation-toggle{background:linear-gradient(145deg,#667eea14,#764ba214);border:1px solid #667eea33;box-shadow:0 4px 12px #667eea26,inset 0 1px #fff9}.notation-toggle:before{background:var(--gradient-purple);box-shadow:0 3px 8px #667eea4d,inset 0 1px #fff6}.notation-toggle:hover{background:var(--gradient-notation-bg);border-color:#667eea66;box-shadow:0 6px 16px #667eea40,inset 0 1px #ffffffb3}.notation-toggle-button{color:#667eeacc;text-shadow:0 1px 2px #ffffff4d}.notation-toggle-button.active{color:#fff;font-weight:var(--font-weight-semibold);text-shadow:0 2px 4px #0006}}