.favicon-generator{*{transition-duration:.15s;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;padding:0}input[type=color]::-webkit-color-swatch-wrapper{padding:4px}input[type=color]::-webkit-color-swatch{border:none;border-radius:.5rem}input[type=color]::-moz-color-swatch{border:none;border-radius:.5rem}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(90deg,#3b82f6 0,#3b82f6 0,#e5e7eb 0,#e5e7eb);border-radius:3px;height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#3b82f6;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);cursor:pointer;height:20px;width:20px}input[type=range]::-moz-range-thumb{background:#3b82f6;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);cursor:pointer;height:20px;width:20px}input[type=range]::-webkit-slider-thumb:hover{background:#2563eb;transform:scale(1.1)}input[type=range]::-moz-range-thumb:hover{background:#2563eb;transform:scale(1.1)}.dark input[type=range]{background:linear-gradient(90deg,#3b82f6 0,#3b82f6 0,#4b5563 0,#4b5563)}.font-mono{font-family:Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace}button{transition-duration:.15s;transition-duration:.2s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}button:not(:disabled):hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}button:not(:disabled):active{--tw-scale-x:0.98;--tw-scale-y:0.98;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}button:disabled{cursor:not-allowed;opacity:.5}canvas{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}#html-code{line-height:1.6;white-space:pre-wrap;word-break:break-word}input:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px}input:focus:is(.dark *),select:focus:is(.dark *){--tw-ring-offset-color:#1f2937}label:has(input[type=file]){transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}label:has(input[type=file]){transition-duration:.2s}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}#preview-section{animation:fadeIn .3s ease-in-out}@media (max-width:1024px){.favicon-generator .grid{grid-template-columns:repeat(1,minmax(0,1fr))}}@media (max-width:640px){.favicon-generator .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.favicon-generator .px-6{padding-left:1rem;padding-right:1rem}}@media print{.favicon-generator{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}button{display:none}#preview-section{display:block}}@media (prefers-contrast:high){.favicon-generator{border-width:2px;--tw-border-opacity:1;border-color:rgb(17 24 39/var(--tw-border-opacity,1))}.favicon-generator:is(.dark *){--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}button{border-width:2px}}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-property:none}button:hover{transform:none}}button.loading{cursor:wait;opacity:.75;position:relative}@media (pointer:coarse){button{min-height:44px;min-width:44px}}.favicon-generator .grid>div{transition:transform .2s}.favicon-generator .grid>div:hover{transform:scale(1.05)}.sticky{position:sticky}}.favicon-generator button:focus-visible,.favicon-generator input:focus-visible,.favicon-generator select:focus-visible{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px}.favicon-generator button:focus-visible:is(.dark *),.favicon-generator input:focus-visible:is(.dark *),.favicon-generator select:focus-visible:is(.dark *){--tw-ring-offset-color:#1f2937}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}