:root{--color-primary:#2563eb;--color-primary-dark:#1d4ed8;--color-primary-light:#3b82f6;--color-secondary:#10b981;--color-secondary-dark:#046c4f;--color-secondary-hover:#035a42;--color-accent:#8b5cf6;--color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--color-white:#ffffff;--color-black:#000000;--color-background:var(--color-white);--color-surface:var(--color-gray-50);--color-text:var(--color-gray-900);--color-text-light:var(--color-gray-600);--color-border:var(--color-gray-200);--font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;--font-mono:'JetBrains Mono','SF Mono',Monaco,'Cascadia Code',monospace;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--weight-normal:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.75;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.1);--shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1);--shadow-xl:0 20px 25px -5px rgba(0, 0, 0, 0.1);--transition-fast:150ms ease;--transition-normal:250ms ease;--transition-slow:350ms ease;--container-sm:640px;--container-md:768px;--container-lg:1024px;--container-xl:1280px;--container-2xl:1536px}@media (prefers-color-scheme:dark){:root{--color-background:var(--color-gray-900);--color-surface:var(--color-gray-800);--color-text:var(--color-gray-50);--color-text-light:var(--color-gray-300);--color-border:var(--color-gray-700)}}*,::after,::before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text);background-color:var(--color-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-weight:var(--weight-semibold);line-height:var(--leading-tight);margin-bottom:var(--space-4)}h1{font-size:var(--text-5xl)}h2{font-size:var(--text-4xl)}h3{font-size:var(--text-3xl)}h4{font-size:var(--text-2xl)}h5{font-size:var(--text-xl)}h6{font-size:var(--text-lg)}p{margin-bottom:var(--space-4);color:var(--color-text-light)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-dark)}ol,ul{margin-left:var(--space-6);margin-bottom:var(--space-4)}li{margin-bottom:var(--space-2)}img{max-width:100%;height:auto;display:block}code{font-family:var(--font-mono);font-size:var(--text-sm);background-color:var(--color-surface);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}pre{background-color:var(--color-surface);padding:var(--space-4);border-radius:var(--radius-md);overflow-x:auto;margin-bottom:var(--space-4)}pre code{background-color:transparent;padding:0}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}.container{width:100%;max-width:var(--container-xl);margin:0 auto;padding:0 var(--space-4)}@media (min-width:768px){.container{padding:0 var(--space-6)}}.site-header{background-color:var(--color-background);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:50;backdrop-filter:blur(8px)}.header-content{display:flex;align-items:center;justify-content:space-between;height:4rem;padding:var(--space-2) 0}.logo{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--weight-bold);font-size:var(--text-xl);color:var(--color-text);contain:layout style}.logo-svg{width:2rem;height:2rem;color:var(--color-primary);contain:layout style}.main-nav{display:none;min-width:320px}@media (min-width:768px){.main-nav{display:flex;gap:var(--space-6)}}.nav-link{font-weight:var(--weight-medium);color:var(--color-text-light);position:relative;padding:var(--space-2) 0}.nav-link:hover{color:var(--color-text)}.nav-link.active{color:var(--color-primary)}.nav-link.active::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--color-primary);border-radius:var(--radius-full)}.mobile-menu-button{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:var(--radius-md);background:0 0;border:1px solid var(--color-border);color:var(--color-text-light);cursor:pointer}@media (min-width:768px){.mobile-menu-button{display:none}}.mobile-menu{position:fixed;top:4rem;left:0;right:0;background-color:var(--color-background);border-bottom:1px solid var(--color-border);padding:var(--space-4);display:none;z-index:60}@media (max-width:640px){.logo-text{display:inline-block;max-width:calc(100vw - 6rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-content{padding-left:var(--space-3);padding-right:var(--space-3)}}.mobile-menu.active{display:block}.mobile-nav{display:flex;flex-direction:column;gap:var(--space-4)}.site-footer{background-color:#1f2937;color:#d1d5db;border-top:1px solid #374151;padding:var(--space-12) 0 var(--space-8);margin-top:var(--space-16)}.footer-grid{display:grid;grid-template-columns:1fr;gap:var(--space-8)}@media (min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.footer-grid{grid-template-columns:repeat(4,1fr)}}.footer-section h3{font-size:var(--text-lg);color:#fff;margin-bottom:var(--space-4)}.footer-logo{display:flex;align-items:center;gap:var(--space-2);text-decoration:none;margin-bottom:var(--space-4)}.footer-logo .logo-svg{width:32px;height:32px}.footer-logo .logo-text{font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--color-text)}.footer-logo:hover .logo-text{color:var(--color-primary)}.footer-links{list-style:none;margin:0;padding:0}.footer-links li{margin-bottom:var(--space-2)}.footer-links a{color:#9ca3af;font-size:var(--text-sm)}.footer-links a:hover{color:#fff}.footer-bottom{margin-top:var(--space-8);padding-top:var(--space-8);border-top:1px solid #374151;display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center}@media (min-width:768px){.footer-bottom{flex-direction:row;justify-content:space-between}}.copyright{color:#9ca3af;font-size:var(--text-sm)}.legal-links{display:flex;gap:var(--space-4)}.legal-links a{font-size:var(--text-sm);color:#9ca3af}.main-content{padding:var(--space-8) 0}.page-header{text-align:center;margin-bottom:var(--space-12)}.page-header h1{margin-bottom:var(--space-4)}.page-description{max-width:48rem;margin:0 auto;font-size:var(--text-lg);color:var(--color-text-light)}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-6);margin-top:var(--space-8)}.guides-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6)}@media (min-width:768px){.guides-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.guides-grid{grid-template-columns:repeat(3,1fr)}}.content-section{margin-bottom:var(--space-12)}.section-header{margin-bottom:var(--space-6)}.section-header h2{margin-bottom:var(--space-2)}.section-description{color:var(--color-text-light);max-width:48rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4) var(--space-8);font-weight:var(--weight-bold);font-size:var(--text-base);line-height:var(--leading-tight);border-radius:var(--radius-lg);border:1px solid transparent;cursor:pointer;transition:all var(--transition-normal);text-decoration:none;user-select:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--color-primary);color:var(--color-white)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background-color:var(--color-secondary-dark);color:var(--color-white);border-color:transparent}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-hover);box-shadow:var(--shadow-md)}.btn-outline{background-color:var(--color-surface);border-color:var(--color-primary);color:var(--color-primary);font-weight:var(--weight-bold)}.btn-outline:hover:not(:disabled){background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-white);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-warning{background-color:#f59e0b;color:var(--color-white);border-color:#f59e0b}.btn-warning:hover:not(:disabled){background-color:#d97706;transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-success{background-color:var(--color-secondary);color:var(--color-white);border-color:var(--color-secondary)}.btn-success:hover:not(:disabled){background-color:#059669;transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--text-xs)}.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base)}.btn-full{width:100%}.tool-actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-6);padding-top:var(--space-6);border-top:2px solid #f0f2f5;justify-content:center;align-items:center}.tool-actions .btn{flex:1 1 auto;min-width:140px;box-sizing:border-box}@media (max-width:640px){.tool-actions{flex-direction:column;gap:var(--space-3)}.tool-actions .btn{width:100%;min-width:0;min-height:44px}.tool-actions .btn+.btn{margin-top:var(--space-3)}}.card{background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);transition:all var(--transition-normal);height:100%;display:flex;flex-direction:column}.card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.card-icon{width:3rem;height:3rem;background-color:var(--color-primary-light);color:var(--color-white);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-4)}.card-icon svg{width:1.5rem;height:1.5rem}.card-content{flex:1}.card h3{font-size:var(--text-lg);margin-bottom:var(--space-2)}.card p{font-size:var(--text-sm);color:var(--color-text-light);margin-bottom:var(--space-4)}.card-footer{margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--color-border)}.tool-card{position:relative;overflow:hidden}.tool-card-badge{position:absolute;top:var(--space-4);right:var(--space-4);background-color:var(--color-secondary);color:var(--color-white);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-medium)}.guide-card{border-left:3px solid var(--color-accent)}.guide-card .card-icon{background-color:var(--color-accent)}.form-group{margin-bottom:var(--space-6)}.form-label{display:block;font-weight:var(--weight-medium);margin-bottom:var(--space-2);color:var(--color-text)}.form-control{width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-text);background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast)}.form-control:focus{outline:0;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn:focus-visible,button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.form-control::placeholder{color:var(--color-gray-400)}textarea.form-control{min-height:120px;resize:vertical}select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}.file-input-container{position:relative}.file-input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.file-input-label{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4) var(--space-6);background-color:var(--color-surface);border:2px dashed var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);text-align:center}.file-input-label:hover{border-color:var(--color-primary);background-color:rgba(37,99,235,.05)}.file-input-label svg{width:1.5rem;height:1.5rem;color:var(--color-gray-400)}.file-input-label span{font-weight:var(--weight-medium);color:var(--color-text-light)}.checkbox-container,.radio-container{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);cursor:pointer}.checkbox-input,.radio-input{width:1rem;height:1rem;cursor:pointer}.checkbox-label,.radio-label{font-size:var(--text-sm);color:var(--color-text);cursor:pointer}.range-container{padding:var(--space-4) 0}.range-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2)}.range-value{font-weight:var(--weight-medium);color:var(--color-primary)}.range-slider{width:100%;height:6px;background-color:var(--color-gray-200);border-radius:var(--radius-full);outline:0;-webkit-appearance:none;appearance:none}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background-color:var(--color-primary);border-radius:var(--radius-full);cursor:pointer;border:2px solid var(--color-white);box-shadow:var(--shadow-sm)}.range-slider::-moz-range-thumb{width:20px;height:20px;background-color:var(--color-primary);border-radius:var(--radius-full);cursor:pointer;border:2px solid var(--color-white);box-shadow:var(--shadow-sm)}.alert{padding:var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-4);font-size:var(--text-sm)}.alert-info{background-color:rgba(37,99,235,.1);border-left:3px solid var(--color-primary);color:var(--color-primary-dark)}.alert-success{background-color:rgba(16,185,129,.1);border-left:3px solid var(--color-secondary);color:#059669}.alert-warning{background-color:rgba(245,158,11,.1);border-left:3px solid #f59e0b;color:#d97706}.alert-error{background-color:rgba(239,68,68,.1);border-left:3px solid #ef4444;color:#dc2626}.progress-bar{width:100%;height:6px;background-color:var(--color-gray-200);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-2)}.progress-fill{height:100%;background-color:var(--color-primary);border-radius:var(--radius-full);transition:width var(--transition-normal)}.progress-text{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-light)}.accordion{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.accordion-item{border-bottom:1px solid var(--color-border)}.accordion-item:last-child{border-bottom:none}.accordion-header{width:100%;padding:var(--space-4) var(--space-6);background:0 0;border:none;text-align:left;font-weight:var(--weight-medium);color:var(--color-text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background-color var(--transition-fast)}.accordion-header:hover{background-color:var(--color-surface)}.accordion-icon{transition:transform var(--transition-normal)}.accordion-header.active .accordion-icon{transform:rotate(180deg)}.accordion-content{padding:0 var(--space-6);max-height:0;overflow:hidden;transition:all var(--transition-normal)}.accordion-content.active{padding:var(--space-4) var(--space-6) var(--space-6);max-height:500px}@media (max-width:640px){body,html{max-width:100%;overflow-x:hidden}a,body,h1,h2,h3,h4,h5,h6,li,p{overflow-wrap:break-word;word-break:break-word}.card,.container,.guides-grid,.main-content,.panel,.panel-left,.panel-right,.preview-area,.tool-card,.tool-interface,.tools-grid{min-width:0}.card *,.panel *,.preview-area *,.tool-interface *{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}.panel-left,.panel-right,.results-sidebar,.tool-interface{min-width:0!important;width:100%!important;flex-basis:auto!important}.favicon-layout,.favicon-layout .results-sidebar,.favicon-layout .tool-interface,.favicon-layout>*{display:block!important;width:100%!important;min-width:0!important;flex:none!important}#preview-canvas,.result-preview canvas,.result-preview img{width:auto!important;max-width:100%!important;height:auto!important}[style*=min-width]{min-width:0!important;max-width:100%!important}.footer-grid,.guides-grid,.tools-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}.btn,.form-control,input[type=email],input[type=search],input[type=text],select,textarea{min-width:0!important;width:100%!important;box-sizing:border-box!important}table{width:100%;display:block;overflow-x:auto}.nav-link{white-space:normal}.tool-actions .btn{min-width:0!important}.compression-stats,.dimension-group,.dimension-input,.quality-control,.setting-row,.setting-select,.stat-item{min-width:0!important;width:100%!important}.setting-row{grid-template-columns:1fr!important}}.tabs{border-bottom:1px solid var(--color-border);margin-bottom:var(--space-6)}.tab-list{display:flex;gap:var(--space-2);overflow-x:auto}.tab-button{padding:var(--space-3) var(--space-4);background:0 0;border:none;font-weight:var(--weight-medium);color:var(--color-text-light);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:all var(--transition-fast)}.tab-button:hover{color:var(--color-text)}.tab-button.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.tab-panel{display:none}.tab-panel.active{display:block}@media(prefers-color-scheme:dark){.alert-warning{background-color:rgba(245,158,11,.2);color:#fbbf24}.alert-error{background-color:rgba(239,68,68,.2);color:#f87171}.alert-success{background-color:rgba(16,185,129,.2);color:#34d399}}