.page-hero[data-astro-cid-wh6plpxl]{background:linear-gradient(135deg,#0a0a0a,#064e3b 60%,#16a34a);padding:56px 24px 48px;color:#fff;position:relative;overflow:hidden}.page-hero[data-astro-cid-wh6plpxl]:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(22,163,74,.3),transparent 60%);pointer-events:none}.hero-inner[data-astro-cid-wh6plpxl]{max-width:1100px;margin:0 auto;position:relative;z-index:1}.hero-badge[data-astro-cid-wh6plpxl]{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:#ffffff1f;border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:20px;backdrop-filter:blur(8px)}.hero-dot[data-astro-cid-wh6plpxl]{width:8px;height:8px;background:#4ade80;border-radius:50%;box-shadow:0 0 12px #4ade80;animation:pulse 1.8s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}.page-hero[data-astro-cid-wh6plpxl] h1[data-astro-cid-wh6plpxl]{font-size:40px;font-weight:800;margin-bottom:12px;line-height:1.15}.page-hero[data-astro-cid-wh6plpxl] p[data-astro-cid-wh6plpxl]{font-size:17px;color:#ffffffd9;max-width:640px;line-height:1.55}.page-body[data-astro-cid-wh6plpxl]{background:#fafafa;padding:40px 24px 80px}.inner[data-astro-cid-wh6plpxl]{max-width:1100px;margin:0 auto}.intro-box[data-astro-cid-wh6plpxl]{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:32px;margin-bottom:40px}.intro-box[data-astro-cid-wh6plpxl] h2[data-astro-cid-wh6plpxl]{font-size:20px;font-weight:800;color:#0a0a0a;margin-bottom:20px}.steps[data-astro-cid-wh6plpxl]{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.step[data-astro-cid-wh6plpxl]{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#f0fdf4;border-radius:10px;border:1px solid #dcfce7}.step-num[data-astro-cid-wh6plpxl]{width:32px;height:32px;background:#16a34a;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.step[data-astro-cid-wh6plpxl] p[data-astro-cid-wh6plpxl]{font-size:14px;color:#374151;line-height:1.4}.format-block[data-astro-cid-wh6plpxl]{background:#fff;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;margin-bottom:32px;transition:border-color .2s}.format-block[data-astro-cid-wh6plpxl]:hover{border-color:#bbf7d0}.format-header[data-astro-cid-wh6plpxl]{padding:28px 28px 20px}.format-header[data-astro-cid-wh6plpxl] h2[data-astro-cid-wh6plpxl]{font-size:22px;font-weight:800;color:#0a0a0a;margin-bottom:6px}.format-desc[data-astro-cid-wh6plpxl]{font-size:14.5px;color:#6b7280;line-height:1.5;margin-bottom:8px}.format-size[data-astro-cid-wh6plpxl]{display:inline-block;font-size:11px;font-weight:600;color:#15803d;background:#dcfce7;padding:4px 10px;border-radius:6px}.format-preview[data-astro-cid-wh6plpxl]{padding:24px 28px;border-bottom:1px solid #f3f4f6}.preview-label[data-astro-cid-wh6plpxl]{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#9ca3af;margin-bottom:14px;display:flex;align-items:center;gap:8px}.preview-label[data-astro-cid-wh6plpxl]:before{content:"";width:6px;height:6px;background:#16a34a;border-radius:50%;box-shadow:0 0 6px #16a34a}.preview-container[data-astro-cid-wh6plpxl]{background:repeating-conic-gradient(#f8fafc 0% 25%,#fff 0% 50%) 50% / 16px 16px;border:1px solid #e5e7eb;border-radius:12px;padding:0;overflow:hidden;min-height:140px}.preview-iframe[data-astro-cid-wh6plpxl]{width:100%;height:280px;border:none;display:block;background:#fff;border-radius:12px}.format-code[data-astro-cid-wh6plpxl]{position:relative}.code-header[data-astro-cid-wh6plpxl]{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:#1e293b;border-bottom:1px solid #334155}.code-label[data-astro-cid-wh6plpxl]{font-size:12px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px}.copy-btn[data-astro-cid-wh6plpxl]{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:#334155;border:1px solid #475569;border-radius:8px;color:#e2e8f0;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.copy-btn[data-astro-cid-wh6plpxl]:hover{background:#475569;border-color:#64748b}.copy-btn[data-astro-cid-wh6plpxl].copied{background:#065f46;border-color:#10b981;color:#6ee7b7}.code-block[data-astro-cid-wh6plpxl]{background:#0f172a;padding:20px 28px;margin:0;overflow-x:auto;max-height:300px;overflow-y:auto}.code-block[data-astro-cid-wh6plpxl] code[data-astro-cid-wh6plpxl]{font-family:JetBrains Mono,Fira Code,monospace;font-size:12px;line-height:1.6;color:#e2e8f0;white-space:pre-wrap;word-break:break-all}.seo-section[data-astro-cid-wh6plpxl]{margin-top:48px;padding:36px 32px;background:#fff;border:1px solid #e5e7eb;border-radius:16px}.seo-section[data-astro-cid-wh6plpxl] h2[data-astro-cid-wh6plpxl]{font-size:22px;font-weight:800;color:#0a0a0a;margin-bottom:12px}.seo-section[data-astro-cid-wh6plpxl] p[data-astro-cid-wh6plpxl]{font-size:15px;color:#4b5563;line-height:1.7;margin-bottom:8px}.seo-section[data-astro-cid-wh6plpxl] a[data-astro-cid-wh6plpxl]{color:#16a34a;text-decoration:none;font-weight:600}.seo-section[data-astro-cid-wh6plpxl] a[data-astro-cid-wh6plpxl]:hover{text-decoration:underline}@media(max-width:900px){.page-hero[data-astro-cid-wh6plpxl]{padding:44px 20px 36px}.page-hero[data-astro-cid-wh6plpxl] h1[data-astro-cid-wh6plpxl]{font-size:30px}.page-hero[data-astro-cid-wh6plpxl] p[data-astro-cid-wh6plpxl]{font-size:15px}.page-body[data-astro-cid-wh6plpxl]{padding:32px 20px 60px}.format-header[data-astro-cid-wh6plpxl]{padding:20px 20px 16px}.format-preview[data-astro-cid-wh6plpxl]{padding:20px}.code-header[data-astro-cid-wh6plpxl]{padding:12px 20px}.code-block[data-astro-cid-wh6plpxl]{padding:16px 20px}}@media(max-width:560px){.page-hero[data-astro-cid-wh6plpxl]{padding:32px 16px 28px}.page-hero[data-astro-cid-wh6plpxl] h1[data-astro-cid-wh6plpxl]{font-size:24px}.page-hero[data-astro-cid-wh6plpxl] p[data-astro-cid-wh6plpxl]{font-size:14px}.page-body[data-astro-cid-wh6plpxl]{padding:24px 14px 48px}.intro-box[data-astro-cid-wh6plpxl]{padding:20px}.format-header[data-astro-cid-wh6plpxl]{padding:16px 16px 12px}.format-preview[data-astro-cid-wh6plpxl]{padding:16px}.code-header[data-astro-cid-wh6plpxl]{padding:10px 16px}.code-block[data-astro-cid-wh6plpxl]{padding:14px 16px}}