.percentage-svg{max-width:100%;height:auto;border-radius:8px;overflow:visible}.svg-percentage-container{align-items:center;gap:2rem;padding:1rem;height:100%}.controls,.svg-percentage-container{display:flex;flex-direction:column;width:100%}.controls{gap:1.5rem;max-width:400px}.control-group{display:flex;flex-direction:column;gap:.5rem;padding:1rem;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb}.control-label{display:flex;align-items:center;gap:.5rem;font-weight:500;color:#374151;margin-bottom:.5rem}.color-indicator{width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.1)}.percent-display{font-weight:700;color:#1f2937;min-width:3rem;text-align:right}.slider{width:100%;height:6px;border-radius:3px;background:#e5e7eb;outline:none;-webkit-appearance:none;appearance:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#3b82f6;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:all .2s ease}.slider::-webkit-slider-thumb:hover{background:#2563eb;transform:scale(1.1)}.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#3b82f6;cursor:pointer;border:none;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:all .2s ease}.slider::-moz-range-thumb:hover{background:#2563eb;transform:scale(1.1)}.opacity-control{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}.opacity-control span{font-size:.875rem;color:#6b7280;min-width:60px}.opacity-control input[type=range]{flex:1;height:4px;background:linear-gradient(90deg,#e5e7eb 0,#3b82f6);border-radius:2px;outline:none;-webkit-appearance:none;appearance:none}.opacity-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#3b82f6;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:all .2s ease}.opacity-control input[type=range]::-webkit-slider-thumb:hover{background:#2563eb;transform:scale(1.1)}.opacity-value{font-size:.75rem;color:#6b7280;font-weight:500;min-width:2rem;text-align:center}@media (max-width:768px){.svg-percentage-container{padding:.5rem;gap:1.5rem}.controls{max-width:100%}.percentage-svg{width:100%;height:auto}}