.tool-page,.tool-guide{max-width:960px;margin-left:auto;margin-right:auto}.tool-page{padding-top:40px;padding-bottom:32px}@media (min-width: 1024px){.tool-page{padding-top:56px}}.tool-hero{display:flex;flex-direction:column;align-items:center;text-align:center}.tool-hero__cover{width:100%;max-width:420px;height:auto;margin-bottom:24px}.tool-hero__title{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity));font-size:26px;font-weight:700;line-height:1.25;margin-bottom:12px}@media (min-width: 768px){.tool-hero__title{font-size:34px}}.tool-hero__desc{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity));max-width:680px;font-size:15px;line-height:1.65}.tool-hero__badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-top:18px}.tool-hero__badges li{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity));display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500}.tool-hero__badges i{--tw-text-opacity: 1;color:rgb(95 190 36 / var(--tw-text-opacity));font-size:18px}.tool-card{border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));margin-top:32px;padding:20px;border-radius:16px;box-shadow:0 1px 2px #0f172a0a,0 8px 24px #0f172a0a}@media (min-width: 768px){.tool-card{padding:28px}}.tool-card .resolution-selector{margin-bottom:16px}.tool-card .alert-container:empty,.tool-card .files-container:empty{margin:0}.tool-guide{margin-top:72px;margin-bottom:96px}.tool-guide__title{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity));font-size:22px;font-weight:600;margin-bottom:20px}.tool-guide__title:not(:first-child){margin-top:56px}.tool-steps{display:grid;grid-template-columns:1fr;gap:16px}@media (min-width: 768px){.tool-steps{grid-template-columns:repeat(3,1fr)}}.tool-steps__item{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity));padding:20px;border-radius:14px}.tool-steps__number{--tw-bg-opacity: 1;background-color:rgb(6 152 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-bottom:12px;border-radius:999px;font-size:14px;font-weight:600}.tool-steps__item h3{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity));font-size:16px;font-weight:600;margin-bottom:6px}.tool-steps__item p{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity));font-size:14px;line-height:1.6}.tool-faq{display:flex;flex-direction:column;gap:10px}.tool-faq details{border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));padding:0 18px;border-radius:12px}.tool-faq summary{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity));display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;font-size:15px;font-weight:600;list-style:none;cursor:pointer}.tool-faq summary::-webkit-details-marker{display:none}.tool-faq summary:after{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity));content:"+";font-size:20px;font-weight:400;line-height:1}.tool-faq details[open] summary:after{content:"−"}.tool-faq details p{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity));padding-bottom:16px;font-size:14px;line-height:1.65}.tool-more{display:grid;grid-template-columns:1fr;gap:16px;margin-top:56px}@media (min-width: 768px){.tool-more{grid-template-columns:repeat(3,1fr)}}.tool-more__card{border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity));display:grid;grid-template-columns:1fr auto;-moz-column-gap:12px;column-gap:12px;padding:18px 20px;border-radius:14px;transition:border-color .15s ease,background-color .15s ease}.tool-more__card:hover{--tw-border-opacity: 1;border-color:rgb(131 228 255 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(237 251 255 / var(--tw-bg-opacity))}.tool-more__label{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity));grid-column:1;font-size:13px}.tool-more__name{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity));grid-column:1;font-size:16px;font-weight:600}.tool-more__card i{--tw-text-opacity: 1;color:rgb(6 152 255 / var(--tw-text-opacity));grid-column:2;grid-row:1 / span 2;align-self:center;font-size:20px}.alert-container{margin:1rem 0}.preview-img{width:48px;height:48px;-o-object-fit:contain;object-fit:contain;margin-right:1rem}.download-btn.downloaded:after{content:"✓";margin-left:6px}.custom-alert{background-color:#fff;border-radius:4px;padding:16px 20px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;animation:slideDown .3s ease}.custom-alert .message{color:#333;font-size:14px}.custom-alert.success{background-color:#f6fff6;color:#fff;border-left:4px solid #4caf50}.custom-alert.error{background-color:#ffefef;color:#fff;border-left:4px solid #ff5252}.custom-alert .close-btn{background:none;border:none;color:#999;cursor:pointer;padding:0 4px;font-size:18px;margin-left:10px}.custom-alert .close-btn:hover{color:#333}.uploader{cursor:pointer;border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity));padding:2rem;text-align:center;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.uploader:hover{--tw-bg-opacity: 1;background-color:rgb(237 251 255 / var(--tw-bg-opacity))}.uploader.dragover{border-color:#2196f3;background-color:#e3f2fd}.uploader-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.upload-icon{width:64px;height:64px;opacity:.5}.small{font-size:.8rem;color:#666}.files-container{margin-top:2rem;display:grid;gap:1rem}.file-card{background-color:#fff;border-radius:12px;padding:1.25rem;display:flex;align-items:center;gap:1.5rem;border:1px solid #eee}.file-info{flex-grow:1}.file-name{font-weight:500;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.file-size{color:#999;font-size:.85rem;font-weight:400}.progress-bar{height:4px;background-color:#eee;border-radius:2px;overflow:hidden;width:200px}.progress{height:100%;width:0px;--tw-bg-opacity: 1;background-color:rgb(6 152 255 / var(--tw-bg-opacity));transition:width .3s ease,background-color .3s ease}.progress.completed{--tw-bg-opacity: 1;background-color:rgb(95 190 36 / var(--tw-bg-opacity))}.size-select:focus{border-color:#2196f3;outline:none}.tool-options{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px;margin-bottom:8px}.tool-options--bottom{margin-top:16px;margin-bottom:0}.tool-option,.tool-check{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity));display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500}.tool-check input{width:16px;height:16px;accent-color:#0698ff}.tool-option .size-select{margin-left:0}.tool-input{width:160px}.tool-input:disabled,.tool-check input:disabled+span{opacity:.5}.tool-hint{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity));text-align:center;font-size:13px;margin-bottom:16px}.file-name .name{word-break:break-all}.tool-hero__formats{display:flex;align-items:center;gap:18px;margin-bottom:28px}.tool-format{display:inline-flex;align-items:center;justify-content:center;min-width:96px;height:112px;padding:0 16px;border-radius:14px 34px 14px 14px;color:#fff;font-size:26px;font-weight:700;letter-spacing:.02em}.tool-format--from{--tw-bg-opacity: 1;background-color:rgb(6 152 255 / var(--tw-bg-opacity))}.tool-format--to{--tw-bg-opacity: 1;background-color:rgb(95 190 36 / var(--tw-bg-opacity))}.tool-hero__arrow{--tw-text-opacity: 1;color:rgb(95 190 36 / var(--tw-text-opacity))}@media (max-width: 640px){.tool-format{min-width:76px;height:88px;font-size:20px}}.code-tool{display:grid;grid-template-columns:1fr;gap:16px}@media (min-width: 768px){.code-tool{grid-template-columns:1fr 1fr}}.code-tool__head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.code-tool__head label{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity));flex:1;font-size:14px;font-weight:600}.code-box{border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity));width:100%;padding:12px;border-radius:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.55;resize:vertical}.code-box:focus{--tw-border-opacity: 1;border-color:rgb(72 210 255 / var(--tw-border-opacity));outline:none}.code-results{display:flex;flex-direction:column;gap:14px;margin-top:16px}.code-result__head{display:flex;align-items:center;gap:10px;margin-bottom:6px}.code-result__label{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity));flex:1;font-size:14px;font-weight:600}.code-result__size{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity));font-size:12px}.code-preview{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity));display:flex;align-items:center;gap:14px;margin-top:16px;font-size:13px}.code-preview img{width:64px;height:64px;-o-object-fit:contain;object-fit:contain;padding:6px;border-radius:8px;background:repeating-conic-gradient(#f1f5f9,#f1f5f9 25%,#fff 0%,#fff 50%) 50% / 12px 12px}.file-actions{display:flex;align-items:center;gap:8px}.saving-badge{--tw-bg-opacity: 1;background-color:rgb(226 248 207 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(55 116 23 / var(--tw-text-opacity));padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600}.saving-badge.is-zero{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}@media (max-width: 640px){.file-card{flex-wrap:wrap}}.tool-hub__title:first-of-type{margin-top:40px}.tool-hub{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:40px}@media (min-width: 768px){.tool-hub{grid-template-columns:1fr 1fr}}.tool-hub__card{border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));display:grid;align-content:start;grid-template-columns:1fr auto;-moz-column-gap:12px;column-gap:12px;row-gap:4px;padding:20px;border-radius:14px;transition:border-color .15s ease,background-color .15s ease}.tool-hub__card:hover{--tw-border-opacity: 1;border-color:rgb(131 228 255 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(237 251 255 / var(--tw-bg-opacity))}.tool-hub__name{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity));grid-column:1;font-size:17px;font-weight:600}.tool-hub__desc{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity));grid-column:1;font-size:14px;line-height:1.55}.tool-hub__card i{--tw-text-opacity: 1;color:rgb(6 152 255 / var(--tw-text-opacity));grid-column:2;grid-row:1 / span 2;align-self:center;font-size:20px}.paste-box{display:flex;flex-direction:column;gap:8px;margin-top:16px}.paste-box label{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity));font-size:14px;font-weight:600}.paste-box .tool-btn-light{align-self:flex-start}.color-editor{display:grid;grid-template-columns:1fr;gap:24px}@media (min-width: 900px){.color-editor{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}.color-preview{border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity));display:flex;align-items:center;justify-content:center;aspect-ratio:1 / 1;padding:32px;border-radius:14px;background:repeating-conic-gradient(#f1f5f9,#f1f5f9 25%,#fff 0%,#fff 50%) 50% / 20px 20px}.color-preview[data-bg=dark]{background:repeating-conic-gradient(#1f2937,#1f2937 25%,#111827 0%,#111827 50%) 50% / 20px 20px}.color-preview img{max-width:100%;max-height:100%;width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.color-preview__bg{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity));display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px}.color-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}.color-actions__single{display:inline-flex;align-items:center;gap:6px}.palette{display:flex;flex-direction:column;gap:8px;max-height:380px;overflow-y:auto;padding-right:4px}.palette-row{border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity));display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px}.palette-row.is-changed{--tw-border-opacity: 1;border-color:rgb(131 228 255 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(237 251 255 / var(--tw-bg-opacity))}.palette-swatch{flex:none;width:28px;height:28px;border-radius:6px;border:1px solid rgba(0,0,0,.12)}.palette-swatch.is-current{background-image:linear-gradient(135deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%)!important}.palette-arrow{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity));flex:none}.palette-picker{flex:none;width:40px;padding:2px;border:1px solid #ccc;border-radius:6px;background:#fff;cursor:pointer}.palette-hex{width:110px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.palette-count{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity));flex:1;font-size:12px;text-align:right}.color-output{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}.tool-range{width:110px;accent-color:#0698ff}.tool-range:disabled{opacity:.5}.tool-range__value{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity));min-width:34px;font-size:13px}.favicon-result{margin-top:24px}.browser-tab{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity));display:inline-flex;align-items:center;gap:8px;min-width:220px;padding:10px 14px;border-radius:10px 10px 0 0;font-size:13px}.browser-tab img{width:16px;height:16px}.browser-tab__close{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity));margin-left:auto}.favicon-sizes{border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity));display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px;padding:20px;border-radius:0 12px 12px;background:repeating-conic-gradient(#f1f5f9,#f1f5f9 25%,#fff 0%,#fff 50%) 50% / 16px 16px}.favicon-tile{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0}.favicon-tile__image{display:flex;align-items:flex-end;min-height:128px}.favicon-tile figcaption{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity));font-size:12px;font-weight:500}.favicon-columns{display:grid;grid-template-columns:1fr;gap:24px;margin-top:24px}@media (min-width: 900px){.favicon-columns{grid-template-columns:1fr 1fr}}.favicon-files{display:flex;flex-direction:column;gap:6px}.favicon-files li{border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity));display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13px}.favicon-file__name{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity));font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.favicon-file__meta{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity));flex:1}.bulk-download-btn,.tool-convert-btn,.download-btn,.tool-btn-light,.delete-all-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;margin:0;padding:0 16px;border:1px solid transparent;border-radius:8px;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.bulk-download-btn i,.download-btn i{margin:0!important;font-size:18px}.bulk-download-btn,.tool-convert-btn,.download-btn{--tw-bg-opacity: 1;background-color:rgb(6 152 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.bulk-download-btn:hover:not(:disabled),.tool-convert-btn:hover:not(:disabled),.download-btn:hover:not(:disabled){--tw-bg-opacity: 1;background-color:rgb(0 132 255 / var(--tw-bg-opacity))}.download-btn.downloaded{--tw-bg-opacity: 1;background-color:rgb(95 190 36 / var(--tw-bg-opacity))}.tool-btn-light{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity))}.tool-btn-light:hover:not(:disabled){--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.delete-all-btn{--tw-border-opacity: 1;border-color:rgb(254 202 202 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.delete-all-btn:hover{--tw-border-opacity: 1;border-color:rgb(252 165 165 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity))}.bulk-download-btn:disabled,.tool-convert-btn:disabled,.download-btn:disabled,.tool-btn-light:disabled{opacity:.5;cursor:not-allowed}.size-select,.tool-input,.tool-color{border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));height:40px;margin:0;border-radius:8px;font-size:14px}.size-select{padding:0 32px 0 12px}.tool-input{padding:0 12px}.tool-color{width:48px;padding:3px;cursor:pointer}.palette-row .tool-btn-light,.favicon-files .tool-btn-light,.code-result .tool-btn-light{height:32px;padding:0 12px;font-size:13px}.palette-row .palette-picker,.palette-row .palette-hex{height:32px;border-radius:6px}.tool-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}.tool-actions__summary{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity));font-size:14px;font-weight:500}.tool-actions__buttons{display:flex;gap:8px;margin-left:auto}.palette-head{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity));display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:14px;font-weight:600}.palette-head .tool-btn-light{height:32px;padding:0 12px;font-size:13px}.color-preview__bg{flex-wrap:wrap}.color-preview__another{margin-left:auto!important}.tool-page .hidden{display:none!important}