.header{background:var(--primary);color:var(--secondary);padding:calc(var(--grid-size) * 3) calc(var(--grid-size) * 4);border-bottom:4px solid var(--accent);position:sticky;top:0;z-index:100;box-shadow:0 4px 20px var(--shadow)}.header-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.logo{font-family:JetBrains Mono,monospace;font-size:28px;font-weight:800;letter-spacing:-1px}.logo-accent{color:var(--accent)}.tagline{font-size:13px;font-family:JetBrains Mono,monospace;opacity:.7;text-transform:uppercase;letter-spacing:2px}.container{max-width:1200px;margin:0 auto;padding:calc(var(--grid-size) * 5) calc(var(--grid-size) * 3);display:grid;grid-template-columns:1fr;gap:calc(var(--grid-size) * 3)}.ad-zone{min-height:90px;background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,51,102,.03) 10px,rgba(255,51,102,.03) 20px);border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;font-family:JetBrains Mono,monospace;font-size:11px;color:#999;text-transform:uppercase;letter-spacing:1px;border-radius:4px}.upload-box{background:var(--secondary);border:4px solid var(--primary);border-radius:12px;padding:calc(var(--grid-size) * 8);text-align:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.upload-box:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,51,102,.1),transparent);transition:left .5s}.upload-box:hover:before{left:100%}.upload-box.dragover{border-color:var(--accent);background:#ff33660d;transform:scale(1.02)}.upload-icon{font-size:64px;margin-bottom:calc(var(--grid-size) * 2);display:block}.upload-text{font-family:JetBrains Mono,monospace;font-size:18px;font-weight:600;margin-bottom:calc(var(--grid-size))}.upload-hint{font-size:14px;color:#666}.upload-formats{margin-top:calc(var(--grid-size) * 2);font-family:JetBrains Mono,monospace;font-size:12px;color:#999;text-transform:uppercase;letter-spacing:1px}.preview-panel{background:var(--secondary);border:4px solid var(--primary);border-radius:12px;padding:calc(var(--grid-size) * 4);display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--grid-size) * 3)}.preview-box{position:relative}.preview-label{font-family:JetBrains Mono,monospace;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:calc(var(--grid-size) * 2);padding:calc(var(--grid-size)) calc(var(--grid-size) * 2);background:var(--primary);color:var(--secondary);display:inline-block}.preview-label.after{background:var(--accent)}.preview-image-container{background:repeating-linear-gradient(0deg,transparent,transparent 7px,rgba(0,0,0,.03) 7px,rgba(0,0,0,.03) 8px),repeating-linear-gradient(90deg,transparent,transparent 7px,rgba(0,0,0,.03) 7px,rgba(0,0,0,.03) 8px);border:2px solid var(--border);border-radius:8px;min-height:300px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.preview-image{max-width:100%;max-height:400px;object-fit:contain}.preview-info{margin-top:calc(var(--grid-size) * 2);font-family:JetBrains Mono,monospace;font-size:13px;line-height:1.8}.info-row{display:flex;justify-content:space-between;padding:calc(var(--grid-size)) 0;border-bottom:1px solid var(--border)}.info-label{font-weight:600;color:#666}.info-value{font-weight:600}.controls{background:var(--secondary);border:4px solid var(--primary);border-radius:12px;padding:calc(var(--grid-size) * 4)}.control-group{margin-bottom:calc(var(--grid-size) * 4)}.control-label{font-family:JetBrains Mono,monospace;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:calc(var(--grid-size) * 2);display:block}.slider-container{position:relative}.slider{width:100%;height:8px;background:var(--border);outline:none;-webkit-appearance:none;border:2px solid var(--primary);cursor:pointer;border-radius:4px}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;background:var(--accent);border:3px solid var(--primary);cursor:pointer;transition:transform .2s;border-radius:12px}.slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.slider::-moz-range-thumb{width:24px;height:24px;background:var(--accent);border:3px solid var(--primary);cursor:pointer;border-radius:12px}.slider-value{font-family:JetBrains Mono,monospace;font-size:20px;font-weight:800;margin-top:calc(var(--grid-size));color:var(--accent)}.format-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--grid-size) * 2)}.format-button{padding:calc(var(--grid-size) * 2);background:var(--secondary);border:3px solid var(--primary);border-radius:8px;font-family:JetBrains Mono,monospace;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:1px}.format-button:hover{background:var(--primary);color:var(--secondary)}.format-button.active{background:var(--accent);color:var(--secondary);border-color:var(--accent)}.format-hint{font-family:JetBrains Mono,monospace;font-size:11px;margin-bottom:calc(var(--grid-size) * 2);color:#666}.png-warning{background:#fff9e6;border:2px solid #ffc107;border-radius:8px;padding:calc(var(--grid-size) * 2);margin-bottom:calc(var(--grid-size) * 2);font-family:JetBrains Mono,monospace;font-size:12px;line-height:1.6}.result-panel{background:var(--primary);border:4px solid var(--primary);border-radius:12px;padding:calc(var(--grid-size) * 4);color:var(--secondary);text-align:center}.savings-display{font-family:JetBrains Mono,monospace;font-size:48px;font-weight:800;margin:calc(var(--grid-size) * 3) 0;color:var(--success);text-shadow:0 0 20px rgba(0,255,136,.3)}.savings-label{font-size:16px;text-transform:uppercase;letter-spacing:2px;opacity:.7}.download-button{background:var(--accent);color:var(--secondary);border:none;border-radius:8px;padding:calc(var(--grid-size) * 2) calc(var(--grid-size) * 6);font-family:JetBrains Mono,monospace;font-size:16px;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:2px;margin-top:calc(var(--grid-size) * 3);transition:all .3s;box-shadow:0 4px 20px #ff33664d}.download-button:hover{transform:translateY(-2px);box-shadow:0 6px 30px #f366}.download-button:active{transform:translateY(0)}.reset-button{background:transparent;color:var(--secondary);border:2px solid var(--secondary);border-radius:8px;padding:calc(var(--grid-size)) calc(var(--grid-size) * 3);font-family:JetBrains Mono,monospace;font-size:12px;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:1px;margin-top:calc(var(--grid-size) * 2);transition:all .2s}.reset-button:hover{background:var(--secondary);color:var(--primary)}.footer{background:var(--primary);color:var(--secondary);padding:calc(var(--grid-size) * 6) calc(var(--grid-size) * 4);margin-top:calc(var(--grid-size) * 8);border-top:4px solid var(--accent)}.footer-content{max-width:1200px;margin:0 auto;text-align:center}.footer-text{font-size:14px;opacity:.7;line-height:1.8}@media(max-width:768px){.preview-panel,.format-buttons{grid-template-columns:1fr}.header-content{flex-direction:column;gap:calc(var(--grid-size) * 2);text-align:center}.savings-display{font-size:36px}}:root{--primary: #0a0a0a;--secondary: #ffffff;--accent: #ff3366;--success: #00ff88;--border: #e0e0e0;--bg-light: #fafafa;--shadow: rgba(0, 0, 0, .08);--grid-size: 8px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:IBM Plex Sans,-apple-system,sans-serif;background:var(--bg-light);color:var(--primary);line-height:1.6;overflow-x:hidden}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.loading{animation:pulse 1.5s ease-in-out infinite;font-family:JetBrains Mono,monospace;font-size:14px;color:#666}.seo-section{margin-top:80px;padding:60px 20px;background:#fff;border-top:2px solid #e0e0e0}.seo-container{max-width:1000px;margin:0 auto;text-align:center}.seo-section h1{font-size:32px;margin-bottom:20px;color:var(--accent)}.seo-intro{font-size:16px;color:#555;margin-bottom:50px;line-height:1.8}.seo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}.seo-card{background:#fafafa;padding:30px;border:2px solid #eee;border-radius:8px;transition:all .2s ease}.seo-card:hover{transform:translateY(-5px);border-color:#f36}.seo-card h2{font-size:18px;margin-bottom:15px}.seo-card p{font-size:14px;color:#666;line-height:1.7}