.gradient-tool{max-width:720px}.gradient-tool__preview{width:100%;height:200px;margin-bottom:var(--space-xl);background:linear-gradient(135deg,#f37021 0%,#1a1a2e 100%);border:1px solid #ffffff24;border-radius:16px;transition:background .2s}.gradient-tool__controls{margin-bottom:var(--space-xl)}.gradient-tool__row{align-items:flex-end;gap:var(--space-md);margin-bottom:var(--space-lg);flex-wrap:wrap;display:flex}.gradient-tool__field{min-width:120px}.gradient-tool__field--angle{flex:1}.gradient-tool__field--buttons{gap:.5rem;display:flex}.gradient-tool__slider{appearance:none;background:#ffffff24;border-radius:3px;outline:none;width:100%;height:6px;margin-top:.5rem}.gradient-tool__slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border:2px solid #0000004d;border-radius:50%;width:18px;height:18px}.gradient-tool__slider::-moz-range-thumb{cursor:pointer;background:#fff;border:2px solid #0000004d;border-radius:50%;width:18px;height:18px}.gradient-stops{flex-direction:column;gap:.75rem;display:flex}.gradient-stop{align-items:center;gap:.5rem;display:flex}.gradient-stop__picker{cursor:pointer;background:#ffffff0f;border:1px solid #ffffff24;border-radius:6px;flex-shrink:0;width:36px;height:36px;padding:2px}.gradient-stop__picker::-webkit-color-swatch-wrapper{padding:0}.gradient-stop__picker::-webkit-color-swatch{border:none;border-radius:4px}.gradient-stop__picker::-moz-color-swatch{border:none;border-radius:4px}.gradient-stop__hex{flex-shrink:0;width:100px}.gradient-stop__position{flex:1;align-items:center;gap:.5rem;display:flex}.gradient-stop__range{appearance:none;background:#ffffff24;border-radius:2px;outline:none;flex:1;height:4px}.gradient-stop__range::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border:2px solid #0000004d;border-radius:50%;width:14px;height:14px}.gradient-stop__range::-moz-range-thumb{cursor:pointer;background:#fff;border:2px solid #0000004d;border-radius:50%;width:14px;height:14px}.gradient-stop__percent{color:var(--color-text-muted);text-align:right;flex-shrink:0;width:32px;font-family:Neue Montreal,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem}.gradient-stop__remove{width:28px;height:28px;color:var(--color-text-muted);cursor:pointer;transition:background-color var(--transition-fast), color var(--transition-fast);background:0 0;border:1px solid #ffffff1a;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;font-size:1.25rem;line-height:1;display:flex}.gradient-stop__remove:hover{color:#f87171;background:#f8717126;border-color:#f871714d}.gradient-tool__output{margin-top:var(--space-xl)}.gradient-tool__downloads{margin-top:var(--space-lg)}.gradient-tool__download-buttons{gap:.5rem;margin-top:.5rem;display:flex}@media (width<=768px){.gradient-tool__row{flex-direction:column}.gradient-stop{flex-wrap:wrap}.gradient-stop__position{width:100%}}