.blog-image-generator{.image-canvas{image-rendering:-webkit-optimize-contrast;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;image-rendering:pixelated}.preview-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.control-panel input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:3px;background:hsl(var(--muted));outline:none;transition:background .2s ease}.control-panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:hsl(var(--primary));cursor:pointer;-webkit-transition:transform .2s ease,box-shadow .2s ease;transition:transform .2s ease,box-shadow .2s ease}.control-panel input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 0 0 4px hsla(var(--primary),.2)}.control-panel input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:hsl(var(--primary));cursor:pointer;-moz-transition:transform .2s ease,box-shadow .2s ease;transition:transform .2s ease,box-shadow .2s ease}.control-panel input[type=range]::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 0 0 4px hsla(var(--primary),.2)}.control-panel input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid hsl(var(--border));border-radius:6px;cursor:pointer;transition:transform .2s ease,border-color .2s ease}.control-panel input[type=color]:hover{transform:scale(1.05);border-color:hsl(var(--primary))}.control-panel input[type=color]::-webkit-color-swatch-wrapper{padding:0}.control-panel input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.control-panel input[type=color]::-moz-color-swatch{border:none;border-radius:4px}}.canvas-container{position:relative;width:100%;aspect-ratio:1200/630;background:hsl(var(--muted));border-radius:8px;overflow:hidden}.canvas-container canvas{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.loading-spinner{display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid hsl(var(--muted));border-top-color:hsl(var(--primary));animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(1turn)}}.preview-card{transition:transform .2s ease,box-shadow .2s ease}.preview-card:hover{transform:translateY(-2px);box-shadow:0 10px 25px hsla(var(--foreground),.15)}.status-indicator{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem}.status-dot{width:8px;height:8px;border-radius:50%;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.status-dot.ready{background-color:hsl(var(--success))}.status-dot.generating{background-color:hsl(var(--warning))}.status-dot.error{background-color:hsl(var(--error))}@media (max-width:768px){.blog-image-generator{.control-panel{position:sticky;top:0;z-index:10;background:hsl(var(--background));border-bottom:1px solid hsl(var(--border));padding:1rem;margin:-1rem -1rem 1rem}.preview-grid{grid-template-columns:1fr}}}@media (prefers-contrast:high){.control-panel input[type=range]::-moz-range-thumb,.control-panel input[type=range]::-webkit-slider-thumb{border:2px solid hsl(var(--foreground))}.canvas-container{border:2px solid hsl(var(--border))}}@media (prefers-reduced-motion:reduce){.preview-card{transition:none}.preview-card:hover{transform:none}.loading-spinner{animation-duration:2s}.status-dot{animation:none}}@media print{.blog-image-generator .control-panel,.blog-image-generator .status-bar,.blog-image-generator .toolbar{display:none}.canvas-container{-moz-column-break-inside:avoid;break-inside:avoid;page-break-inside:avoid}}