:root{--color-bg: #1a1a1e;--color-surface: #252529;--color-surface-elevated: #2d2d32;--color-text: #e8eaed;--color-text-secondary: #9aa0a6;--color-text-tertiary: #5f6368;--color-accent: #8ab4f8;--color-accent-hover: #aecbfa;--color-accent-light: rgba(138, 180, 248, .12);--color-border: #3c4043;--color-drop-highlight: rgba(138, 180, 248, .2);--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 40px;--space-2xl: 64px;--font-family: "Google Sans", "Segoe UI", system-ui, -apple-system, sans-serif;--font-size-sm: .8125rem;--font-size-base: .9375rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--font-size-hero: 2.25rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--ease: cubic-bezier(.4, 0, .2, 1);--transition-fast: .15s var(--ease);--transition-normal: .25s var(--ease);--transition-slow: .4s var(--ease)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text);background:var(--color-bg);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}img{display:block;max-width:100%;height:auto}button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}a{color:inherit;text-decoration:none}header{padding:var(--space-md) var(--space-lg)}.header-inner{max-width:960px;margin:0 auto}.logo{display:inline-flex;align-items:center;gap:var(--space-sm);color:var(--color-text);transition:opacity var(--transition-fast)}.logo:hover{opacity:.7}.logo-icon{color:var(--color-accent)}.logo-text{font-size:var(--font-size-lg);font-weight:600;letter-spacing:-.01em}.logo-dot{color:var(--color-text-secondary);font-weight:400}main{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-lg)}.section-inner{max-width:640px;width:100%;margin:0 auto}.section-inner--wide{max-width:720px}section{width:100%}section[hidden]{display:none!important}section.active .section-inner{animation:fadeUp .35s var(--ease) both}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.hero-text{text-align:center;margin-bottom:var(--space-xl)}.hero-text h1{font-size:var(--font-size-hero);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--color-text);margin-bottom:var(--space-sm)}.subtitle{font-size:var(--font-size-lg);color:var(--color-text-secondary)}#dropzone{border:2px dashed var(--color-border);border-radius:var(--radius-xl);padding:var(--space-2xl) var(--space-lg);text-align:center;cursor:pointer;transition:border-color var(--transition-normal),background-color var(--transition-normal),box-shadow var(--transition-normal);background:var(--color-surface);outline:none}#dropzone:hover{border-color:var(--color-accent);background:var(--color-accent-light)}#dropzone:focus-visible{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-drop-highlight)}#dropzone.drag-over{border-color:var(--color-accent);border-style:solid;background:var(--color-drop-highlight);box-shadow:var(--shadow-md)}.dropzone-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.dropzone-icon{color:var(--color-text-tertiary);margin-bottom:var(--space-sm);transition:color var(--transition-normal)}#dropzone:hover .dropzone-icon,#dropzone.drag-over .dropzone-icon{color:var(--color-accent)}.dropzone-title{font-size:var(--font-size-lg);font-weight:500;color:var(--color-text)}.dropzone-subtitle{font-size:var(--font-size-base);color:var(--color-accent);font-weight:500}.dropzone-hint{font-size:var(--font-size-sm);color:var(--color-text-tertiary);margin-top:var(--space-xs)}.processing-card{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm);text-align:center}.processing-preview{max-height:200px;max-width:100%;border-radius:var(--radius-sm);object-fit:contain;margin:0 auto var(--space-lg);opacity:.6}.progress-wrapper{max-width:320px;margin:0 auto}.progress-track{height:4px;background:var(--color-border);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-sm)}.progress-fill{height:100%;background:var(--color-accent);border-radius:var(--radius-full);width:0%;transition:width .3s var(--ease)}.progress-fill.indeterminate{width:40%!important;animation:indeterminate 1.5s var(--ease) infinite}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}.progress-text{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.comparison-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-bottom:var(--space-md)}.comparison-panel{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-md);box-shadow:var(--shadow-sm);text-align:center;overflow:hidden}.comparison-panel img{max-height:280px;max-width:100%;border-radius:var(--radius-sm);object-fit:contain;margin:0 auto}.comparison-label{display:inline-block;font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--space-sm)}.checkerboard-bg{background-image:linear-gradient(45deg,#2a2a2e 25%,transparent 25%),linear-gradient(-45deg,#2a2a2e 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2a2a2e 75%),linear-gradient(-45deg,transparent 75%,#2a2a2e 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px;background-color:#353539}.result-dims{font-size:var(--font-size-sm);color:var(--color-text-tertiary);text-align:center;margin-bottom:var(--space-md)}.download-actions{display:flex;flex-direction:column;align-items:center;gap:var(--space-md)}.primary-btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);background:#6b9ef6;color:#1a1a1e;font-size:var(--font-size-base);font-weight:500;border-radius:var(--radius-full);border:none;cursor:pointer;transition:background var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);box-shadow:var(--shadow-sm)}.primary-btn:hover{background:var(--color-accent);color:#1a1a1e;box-shadow:var(--shadow-md);transform:translateY(-1px)}.primary-btn:active{transform:translateY(0)}.secondary-btn{padding:var(--space-sm) var(--space-lg);font-size:var(--font-size-base);font-weight:500;color:var(--color-accent);border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface);transition:background var(--transition-fast),border-color var(--transition-fast)}.secondary-btn:hover{background:var(--color-accent-light);border-color:var(--color-accent)}.text-btn{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-radius:var(--radius-full);transition:color var(--transition-fast),background var(--transition-fast)}.text-btn:hover{color:var(--color-accent);background:var(--color-accent-light)}.toast-error{position:fixed;bottom:var(--space-lg);left:50%;transform:translate(-50%) translateY(20px);background:#d93025;color:#fff;padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;box-shadow:var(--shadow-lg);opacity:0;transition:opacity var(--transition-normal),transform var(--transition-normal);z-index:100;max-width:90vw;text-align:center}.toast-error.visible{opacity:1;transform:translate(-50%) translateY(0)}.seo-content{border-top:1px solid var(--color-border);background:var(--color-surface)}.seo-inner{max-width:720px;margin:0 auto;padding:var(--space-2xl) var(--space-lg)}.seo-section{margin-bottom:var(--space-2xl)}.seo-section:last-child{margin-bottom:0}.seo-section h2{font-size:var(--font-size-xl);font-weight:600;letter-spacing:-.01em;color:var(--color-text);margin-bottom:var(--space-md)}.seo-section h3{font-size:var(--font-size-base);font-weight:600;color:var(--color-text);margin-bottom:var(--space-xs)}.seo-section p{color:var(--color-text-secondary);line-height:1.7}.seo-steps{list-style:none;counter-reset:steps}.seo-steps li{counter-increment:steps;position:relative;padding-left:var(--space-xl);margin-bottom:var(--space-md);color:var(--color-text-secondary);line-height:1.7}.seo-steps li:before{content:counter(steps);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:var(--radius-full);background:#6b9ef6;color:#1a1a1e;font-size:var(--font-size-sm);font-weight:600;display:flex;align-items:center;justify-content:center}.seo-steps li strong{color:var(--color-text)}.seo-features{list-style:none}.seo-features li{padding:var(--space-sm) 0;color:var(--color-text-secondary);line-height:1.7}.seo-features li strong{color:var(--color-text)}.seo-faq{display:flex;flex-direction:column;gap:var(--space-md)}.faq-item{background:var(--color-bg);border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg)}.faq-item dt{font-weight:600;color:var(--color-text);margin-bottom:var(--space-xs)}.faq-item dd{color:var(--color-text-secondary);line-height:1.7;margin:0}footer{padding:var(--space-lg);text-align:center;border-top:1px solid var(--color-border)}.footer-inner{max-width:960px;margin:0 auto}.footer-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-xs);margin-bottom:var(--space-md);font-size:var(--font-size-sm)}.footer-tools-label{color:var(--color-text-tertiary);margin-right:var(--space-xs)}.footer-tools a{color:var(--color-accent);text-decoration:none}.footer-tools a:hover{color:var(--color-accent-hover);text-decoration:underline}.footer-tools-sep{color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.privacy-note{display:inline-flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-sm);color:var(--color-text-tertiary);margin-bottom:var(--space-sm)}.privacy-note svg{flex-shrink:0}.footer-copy{font-size:var(--font-size-sm);color:var(--color-text-tertiary)}@media(max-width:640px){.hero-text h1{font-size:var(--font-size-2xl)}.subtitle{font-size:var(--font-size-base)}#dropzone{padding:var(--space-xl) var(--space-md)}.comparison-wrapper{grid-template-columns:1fr}.comparison-panel img{max-height:200px}.processing-preview{max-height:160px}main{padding:var(--space-md);align-items:flex-start;padding-top:var(--space-lg)}.section-inner--wide{max-width:100%}.seo-inner{padding:var(--space-xl) var(--space-md)}.seo-section h2{font-size:var(--font-size-lg)}}