.embed-generator-section{padding:80px 20px}.embed-generator-container{max-width:1180px;margin:0 auto}.embed-heading{text-align:center;max-width:760px;margin:0 auto 36px}.embed-badge{color:#2563eb;background:#2563eb1a;border:1px solid #e2e8f0;border-radius:999px;justify-content:center;align-items:center;margin-bottom:12px;padding:8px 14px;font-size:14px;font-weight:800;display:inline-flex}.embed-heading h2{color:#0f172a;letter-spacing:-.04em;margin:0;font-size:clamp(30px,4vw,48px)}.embed-heading p{color:#64748b;margin:14px 0 0;font-size:17px;line-height:1.7}.embed-generator-card{grid-template-columns:380px 1fr;align-items:start;gap:24px;margin-bottom:24px;display:grid}.embed-controls,.embed-preview-panel,.embed-code-card{background:#fff;border:1px solid #e2e8f0;border-radius:26px;box-shadow:0 18px 50px #0f172a14}.embed-controls{gap:16px;padding:22px;display:grid}.control-group{gap:8px;display:grid}.control-group label{color:#0f172a;font-size:14px;font-weight:800}.control-group input,.control-group select{color:#0f172a;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;outline:none;width:100%;height:46px;padding:0 13px;font-family:inherit;font-size:15px}.control-group input:focus,.control-group select:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb1f}.control-group input[type=color]{cursor:pointer;padding:5px}.toggle-row{gap:12px;margin-top:4px;display:grid}.toggle-control{color:#0f172a;cursor:pointer;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;align-items:center;gap:10px;padding:12px;font-weight:800;display:flex}.toggle-control input[type=checkbox]{accent-color:#2563eb;width:18px;height:18px}.embed-preview-panel{min-width:0;padding:22px}.preview-top{justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.preview-top h3,.code-card-header h3{color:#0f172a;margin:0;font-size:24px}.preview-top p,.code-card-header p{color:#64748b;margin:6px 0 0}.preview-open-button{color:#fff;cursor:pointer;white-space:nowrap;background:#2563eb;border:0;border-radius:18px;padding:13px 18px;font-family:inherit;font-weight:900}.iframe-preview-wrap{background-color:#f1f5f9;background-image:linear-gradient(45deg,#e2e8f0 25%,#0000 25%),linear-gradient(-45deg,#e2e8f0 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e2e8f0 75%),linear-gradient(-45deg,#0000 75%,#e2e8f0 75%);background-position:0 0,0 11px,11px -11px,-11px 0;background-size:22px 22px;border:1px dashed #cbd5e1;border-radius:20px;width:100%;padding:18px;overflow:auto}#embedLivePreview{background:#fff;border:0;max-width:100%;display:block;box-shadow:0 18px 45px #0f172a29}.embed-code-card{padding:22px}.code-card-header{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px;display:flex}.copy-actions{flex-wrap:wrap;gap:10px;display:flex}.copy-actions button{color:#fff;cursor:pointer;background:#111827;border:0;border-radius:999px;padding:11px 14px;font-family:inherit;font-weight:800}.code-tabs{flex-wrap:wrap;gap:8px;margin-bottom:12px;display:flex}.code-tab{color:#64748b;cursor:pointer;background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;padding:9px 14px;font-family:inherit;font-weight:800}.code-tab.active{color:#fff;background:#2563eb;border-color:#2563eb}#embedCodeOutput{resize:vertical;color:#e5e7eb;background:#0f172a;border:1px solid #e2e8f0;border-radius:18px;width:100%;min-height:150px;padding:16px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:14px;line-height:1.6}@media (width<=920px){.embed-generator-card{grid-template-columns:1fr}.code-card-header,.preview-top{flex-direction:column;align-items:flex-start}}@media (width<=640px){.embed-generator-section{padding:54px 14px}.embed-controls,.embed-preview-panel,.embed-code-card{border-radius:20px;padding:16px}.iframe-preview-wrap{padding:12px}.preview-open-button,.copy-actions button,.copy-actions{width:100%}}html.dark .embed-badge{color:#60a5fa;background:#60a5fa1a;border-color:#222}html.dark .embed-heading h2{color:#f8fafc}html.dark .embed-heading p{color:#94a3b8}html.dark .embed-controls,html.dark .embed-preview-panel,html.dark .embed-code-card{background:#111;border-color:#222;box-shadow:0 18px 50px #00000080}html.dark .control-group label{color:#f8fafc}html.dark .control-group input,html.dark .control-group select{color:#f8fafc;background:#000;border-color:#333}html.dark .control-group input:focus,html.dark .control-group select:focus{border-color:#60a5fa;box-shadow:0 0 0 4px #60a5fa1f}html.dark .toggle-control{color:#f8fafc;background:#000;border-color:#333}html.dark .toggle-control input[type=checkbox]{accent-color:#60a5fa}html.dark .preview-top h3,html.dark .code-card-header h3{color:#f8fafc}html.dark .preview-top p,html.dark .code-card-header p{color:#94a3b8}html.dark .iframe-preview-wrap{background-color:#000;background-image:none;border-color:#333}html.dark #embedLivePreview{background:#111;box-shadow:0 8px 32px #000c}html.dark .copy-actions button{color:#000;background:#f8fafc}html.dark .code-tab{color:#94a3b8;background:#000;border-color:#333}html.dark .code-tab.active{color:#000;background:#60a5fa;border-color:#60a5fa}html.dark #embedCodeOutput{color:#e5e7eb;background:#000;border-color:#333}.seo-section[data-astro-cid-lcdefpme]{border-top:1px solid var(--border)}.seo-content[data-astro-cid-lcdefpme] h3[data-astro-cid-lcdefpme]{letter-spacing:-.03em;color:var(--text);margin:28px 0 10px;font-size:22px}.seo-content[data-astro-cid-lcdefpme] p[data-astro-cid-lcdefpme]{color:var(--muted);margin:0 0 16px;font-size:17px;line-height:1.8}.seo-list[data-astro-cid-lcdefpme]{color:var(--muted);margin:0 0 16px;padding-left:22px;font-size:17px;line-height:2}.seo-list[data-astro-cid-lcdefpme] strong[data-astro-cid-lcdefpme],.seo-content[data-astro-cid-lcdefpme] strong[data-astro-cid-lcdefpme]{color:var(--text)}.hero-pages[data-astro-cid-lcdefpme]{flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px;font-size:14px;display:flex}.hero-pages[data-astro-cid-lcdefpme] a[data-astro-cid-lcdefpme]{color:var(--muted);text-underline-offset:3px;text-decoration:underline}.hero-pages[data-astro-cid-lcdefpme] a[data-astro-cid-lcdefpme]:hover{color:var(--primary)}.hero-pages[data-astro-cid-lcdefpme] span[data-astro-cid-lcdefpme]{color:var(--border)}
