.html-to-image-tool{grid-template-columns:1fr 1fr;align-items:start;gap:20px;display:grid}.html-to-image-tool__templates{flex-wrap:wrap;gap:8px;display:flex}.html-to-image-tool__textarea{border-radius:var(--radius-md);border:1px solid var(--color-border);background-color:var(--color-bg-soft);resize:vertical;width:100%;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.5}.html-to-image-tool__result{border-radius:var(--radius-md);border:1px solid var(--color-border);background-color:var(--color-bg-soft);flex-direction:column;gap:12px;padding:16px;display:flex}.html-to-image-tool__result img{border-radius:var(--radius-sm);max-width:100%}.html-to-image-tool__preview-panel{border-radius:var(--radius-lg);border:1px solid var(--color-border);background-color:var(--color-surface);box-shadow:var(--shadow-sm);flex-direction:column;gap:16px;min-height:300px;padding:24px;display:flex;position:sticky;top:20px}.html-to-image-tool__preview-label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-subtle);font-size:12px;font-weight:700}.html-to-image-tool__preview{justify-content:flex-start;align-items:flex-start;display:flex;overflow:auto}@media (max-width:860px){.html-to-image-tool{grid-template-columns:1fr}.html-to-image-tool__preview-panel{position:static}}