.social-demo{--sd-bg: #F7F4F0;--sd-surface: #FFFFFF;--sd-surface-alt: #FAFAF9;--sd-border: #E5E0D8;--sd-text-main: #1C1917;--sd-text-muted: #78716C;--sd-accent: #D97706;--sd-success: #16A34A;width:100%;max-width:800px;margin:48px auto 0;font-family:var(--font-sans)}@media(prefers-color-scheme:dark){.social-demo{--sd-bg: #0D0B0A;--sd-surface: #1C1917;--sd-surface-alt: #262220;--sd-border: #292524;--sd-text-main: #FAFAF9;--sd-text-muted: #A8A29E;--sd-accent: #F59E0B}}.demo-stage{background:var(--sd-surface);border:1px solid var(--sd-border);border-radius:16px;padding:32px;position:relative;overflow:hidden;box-shadow:0 4px 24px #0000000a}.input-section{display:flex;gap:20px;margin-bottom:24px;align-items:center}@media(max-width:600px){.input-section{flex-direction:column}}.panel{flex:1;background:var(--sd-surface-alt);border:1px solid var(--sd-border);border-radius:12px;overflow:hidden;height:180px;display:flex;flex-direction:column}.panel-header{padding:10px 12px;border-bottom:1px solid var(--sd-border);background:#00000005}.panel-label{font-size:11px;font-weight:600;color:var(--sd-text-muted);text-transform:uppercase;letter-spacing:.05em}.template-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}.tp-skeleton{width:80px;height:100px;background:var(--sd-surface);border:1px dashed var(--sd-accent);border-radius:6px;padding:6px;display:flex;flex-direction:column;gap:4px;position:relative}.tp-skeleton code{font-family:var(--font-mono);font-size:6px;color:var(--sd-accent);opacity:.8}.tp-img{flex:1;background:#d977061a;border-radius:2px;display:flex;align-items:center;justify-content:center}.tp-content{display:flex;flex-direction:column;gap:2px}.tp-head{height:8px;background:#0000000d;border-radius:2px;display:flex;align-items:center;padding:0 2px}.tp-cta{height:6px;width:60%;background:#0000000d;border-radius:2px;display:flex;align-items:center;padding:0 2px}@media(prefers-color-scheme:dark){.tp-head,.tp-cta{background:#ffffff1a}}.data-panel{flex:1.5;display:flex;flex-direction:column}.config-panel{flex:.8}.config-list{padding:12px;display:flex;flex-direction:column;gap:8px}.config-item{display:flex;align-items:center;gap:8px;font-size:10px}.checkbox{width:14px;height:14px;border-radius:4px;border:1px solid var(--sd-border);display:flex;align-items:center;justify-content:center;font-size:10px;color:transparent}.checkbox.checked{background:var(--sd-success);border-color:var(--sd-success);color:#fff}.data-table{display:flex;flex-direction:column;height:100%;font-family:var(--font-mono)}.dt-head{display:flex;padding:8px 12px;border-bottom:1px solid var(--sd-border);background:#00000005}.dt-cell{flex:1;font-size:9px;color:var(--sd-text-muted);font-weight:600;text-transform:uppercase}.dt-cell.main{flex:2;color:var(--sd-text-main)}.dt-cell.theme-pill{display:flex;align-items:center}.data-rows{padding:0;display:flex;flex-direction:column}.data-row{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid var(--sd-border);font-size:10px;opacity:0;transform:translate(-10px);transition:all .3s ease-out;background:var(--sd-surface)}.data-row.visible{opacity:1;transform:translate(0)}.badge{padding:2px 6px;border-radius:4px;font-size:8px;font-weight:600;text-transform:uppercase;border:1px solid transparent}.badge.midnight{background:#1c1917;color:#fafaf9}.badge.amber{background:#fef3c7;color:#b45309;border-color:#fcd34d}.badge.electric{background:#e0f2fe;color:#0369a1;border-color:#bae6fd}@media(prefers-color-scheme:dark){.badge.midnight{background:#333;color:#fff}.badge.amber{background:#d977064d;color:#fcd34d;border-color:#d9770680}.badge.electric{background:#0284c74d;color:#7dd3fc;border-color:#0284c780}}.connector{display:flex;flex-direction:column;align-items:center;color:var(--sd-border)}.conn-line{width:1px;height:40px;background:currentColor}.conn-icon{font-size:16px;font-weight:300;margin:4px 0}@media(max-width:600px){.connector{transform:rotate(90deg);margin:-10px 0}}.action-bar{display:flex;justify-content:center;margin-bottom:24px}.render-btn{background:var(--sd-text-main);color:var(--sd-surface);border:none;padding:10px 20px;border-radius:99px;font-family:var(--font-sans);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s;box-shadow:0 4px 12px #0000001a}.render-btn:hover{transform:translateY(-1px)}.render-btn.processing{cursor:wait;opacity:.8;animation:pulse 1s infinite}.render-btn.done{background:var(--sd-success);pointer-events:none}@keyframes pulse{50%{opacity:.5}}.output-section{background:#00000005;border-radius:12px;padding:16px;min-height:200px}.grid-header{display:flex;justify-content:space-between;margin-bottom:12px}.gh-label{font-size:11px;font-weight:600;color:var(--sd-text-muted);text-transform:uppercase}.gh-count{font-size:11px;color:var(--sd-accent)}.variant-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:12px}.variant-card{aspect-ratio:4/5;background:var(--sd-surface);border:1px solid var(--sd-border);border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #00000014;display:flex;flex-direction:column;opacity:0;transform:scale(.9);transition:all .3s cubic-bezier(.17,.67,.16,.99);position:relative;min-height:120px}.variant-card{aspect-ratio:4/5;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #00000014;display:flex;flex-direction:column;opacity:0;transform:scale(.9);transition:all .3s cubic-bezier(.17,.67,.16,.99);border:1px solid rgba(0,0,0,.1);position:relative}.variant-card.visible{opacity:1;transform:scale(1)}.variant-card.story{aspect-ratio:9/16}.variant-card.midnight .vc-visual{background:radial-gradient(circle at top right,#333,#1c1917);border-bottom:1px solid #333}.variant-card.midnight .vis-circle{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#ea580c);position:absolute;top:10px;right:10px;box-shadow:0 4px 12px #f59e0b4d}.variant-card.midnight .vc-btn{background:#fff;color:#000}.variant-card.amber{background:#fffbeb;color:#78350f;border-color:#fde68a}.variant-card.amber .vc-visual{background:radial-gradient(circle at bottom left,#fde68a,#fffbeb);border-bottom:1px solid #FEF3C7}.variant-card.amber .vis-rect{width:100%;height:100%;background-image:radial-gradient(#F59E0B 1px,transparent 1px);background-size:8px 8px;opacity:.2}.variant-card.amber .vc-btn{background:#d97706;color:#fff}.variant-card.electric{background:#f0f9ff;color:#0c4a6e;border-color:#bae6fd}.variant-card.electric .vc-visual{background:linear-gradient(180deg,#e0f2fe,#f0f9ff);border-bottom:1px solid #E0F2FE}.variant-card.electric .vis-grid{position:absolute;inset:0;border:2px solid #38BDF8;margin:8px;border-radius:4px}.variant-card.electric .vc-btn{background:#0284c7;color:#fff}.vc-visual{flex:1;min-height:50%;position:relative;overflow:hidden}.vc-content{padding:12px;display:flex;flex-direction:column;gap:8px;z-index:1;background:inherit}.vc-head{font-family:var(--font-display);font-size:10px;font-weight:700;line-height:1.3}.vc-btn{align-self:flex-start;padding:4px 8px;border-radius:4px;font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.export-toast{position:absolute;bottom:24px;left:50%;transform:translate(-50%) translateY(20px);background:var(--sd-text-main);color:var(--sd-surface);padding:12px 16px;border-radius:12px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 30px #0003;opacity:0;pointer-events:none;transition:all .4s cubic-bezier(.17,.67,.16,.99)}.export-toast.visible{opacity:1;transform:translate(-50%) translateY(0);pointer-events:auto}.et-icon{color:var(--sd-success)}.et-info{flex:1;min-width:140px}.et-title{font-size:12px;font-weight:600}.et-sub{font-size:10px;opacity:.7}.et-btn{background:#fff3;border:none;color:inherit;font-size:11px;font-weight:500;padding:6px 12px;border-radius:6px;cursor:pointer}.et-btn:hover{background:#ffffff4d}.container:where(.astro-omdq4o4w){width:100%;max-width:1200px;margin-left:auto;margin-right:auto;padding-left:var(--space-4);padding-right:var(--space-4)}.container-narrow:where(.astro-omdq4o4w){max-width:800px}@media(min-width:768px){.container:where(.astro-omdq4o4w){padding-left:var(--space-6);padding-right:var(--space-6)}}.fade-in:where(.astro-omdq4o4w){opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}.fade-in:where(.astro-omdq4o4w).visible{opacity:1;transform:translateY(0)}.label-pill:where(.astro-omdq4o4w){display:inline-block;padding:4px 12px;border-radius:999px;background:#ffffff0d;border:1px solid var(--color-border);font-family:var(--font-mono);font-size:var(--text-label);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--color-text-muted);margin-bottom:var(--space-4)}.label-pill:where(.astro-omdq4o4w).highlight{border-color:var(--color-amber-500);color:var(--color-amber-400);background:#f59e0b1a}.btn-primary:where(.astro-omdq4o4w){display:inline-flex;align-items:center;justify-content:center;padding:var(--space-3) var(--space-6);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:500;color:var(--color-text-inverse);background:var(--color-amber-500);border-radius:var(--radius-md);text-decoration:none;transition:all .2s ease}.btn-primary:where(.astro-omdq4o4w):hover{background:var(--color-amber-400);transform:translateY(-1px);box-shadow:0 4px 20px #f59e0b4d}.btn-secondary:where(.astro-omdq4o4w){display:inline-flex;align-items:center;justify-content:center;padding:var(--space-3) var(--space-6);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:500;color:var(--color-text-primary);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);text-decoration:none;transition:all .2s ease}.btn-secondary:where(.astro-omdq4o4w):hover{border-color:var(--color-text-tertiary);background:#ffffff08}.hero:where(.astro-omdq4o4w){position:relative;padding:160px 0 100px;overflow:hidden}.hero-glow:where(.astro-omdq4o4w){position:absolute;top:-30%;left:50%;transform:translate(-50%);width:100%;max-width:1000px;height:800px;background:radial-gradient(ellipse at center,rgba(245,158,11,.08) 0%,rgba(245,158,11,.02) 40%,transparent 70%);pointer-events:none;z-index:0}.hero-content:where(.astro-omdq4o4w){position:relative;z-index:1;text-align:center;max-width:800px;margin:0 auto var(--space-12)}.hero-headline:where(.astro-omdq4o4w){font-family:var(--font-display);font-size:clamp(32px,6vw,56px);line-height:1.1;font-weight:600;letter-spacing:-.02em;color:var(--color-text-primary);margin-bottom:var(--space-6)}.hero-subheadline:where(.astro-omdq4o4w){font-size:var(--text-lg);line-height:1.6;color:var(--color-text-secondary);max-width:600px;margin:0 auto var(--space-8)}.hero-cta:where(.astro-omdq4o4w){display:flex;justify-content:center;gap:var(--space-4)}.section:where(.astro-omdq4o4w){padding:100px 0}.section-header:where(.astro-omdq4o4w){text-align:center;margin-bottom:var(--space-12)}.section-title:where(.astro-omdq4o4w){font-family:var(--font-display);font-size:36px;margin-bottom:16px;color:var(--color-text-primary)}.section-subtitle:where(.astro-omdq4o4w){font-size:var(--text-lg);color:var(--color-text-secondary)}.pain-grid:where(.astro-omdq4o4w){display:grid;grid-template-columns:1fr;gap:24px}@media(min-width:768px){.pain-grid:where(.astro-omdq4o4w){grid-template-columns:repeat(3,1fr)}}.pain-card:where(.astro-omdq4o4w){background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:12px;padding:32px;text-align:center}.pain-icon:where(.astro-omdq4o4w){font-size:32px;margin-bottom:16px}.pain-card:where(.astro-omdq4o4w) h3:where(.astro-omdq4o4w){font-size:18px;font-weight:600;color:var(--color-text-primary);margin-bottom:12px}.pain-card:where(.astro-omdq4o4w) p:where(.astro-omdq4o4w){font-size:14px;color:var(--color-text-secondary);line-height:1.5}.math-section:where(.astro-omdq4o4w){background:var(--color-bg-deep);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.math-block:where(.astro-omdq4o4w){display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;font-family:var(--font-display)}.math-row:where(.astro-omdq4o4w){display:flex;flex-direction:column;align-items:center}.math-num:where(.astro-omdq4o4w){font-size:48px;font-weight:600;color:var(--color-text-primary)}.math-num:where(.astro-omdq4o4w).highlight{color:var(--color-amber-500)}.math-label:where(.astro-omdq4o4w){font-size:14px;font-family:var(--font-sans);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.math-op:where(.astro-omdq4o4w){font-size:32px;color:var(--color-text-muted);margin:0 16px;padding-bottom:20px}.math-conclusion:where(.astro-omdq4o4w){text-align:center;margin-top:40px;font-size:20px;color:var(--color-text-primary)}.workflow-steps:where(.astro-omdq4o4w){display:flex;flex-direction:column;gap:40px;max-width:800px;margin:0 auto}.w-step:where(.astro-omdq4o4w){display:flex;gap:24px}.w-num:where(.astro-omdq4o4w){font-family:var(--font-mono);font-size:16px;color:var(--color-amber-500);font-weight:700;flex-shrink:0;margin-top:4px}.w-content:where(.astro-omdq4o4w) h3:where(.astro-omdq4o4w){font-size:20px;color:var(--color-text-primary);margin-bottom:8px}.w-content:where(.astro-omdq4o4w) p:where(.astro-omdq4o4w){font-size:16px;color:var(--color-text-secondary);line-height:1.6}.bento-grid:where(.astro-omdq4o4w){display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media(min-width:768px){.bento-grid:where(.astro-omdq4o4w){grid-template-columns:repeat(2,1fr)}.bento-card:where(.astro-omdq4o4w).large{grid-column:span 2}}.bento-card:where(.astro-omdq4o4w){background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:24px;padding:32px}.bento-card:where(.astro-omdq4o4w) h3:where(.astro-omdq4o4w){font-family:var(--font-display);font-size:24px;color:var(--color-text-primary);margin-bottom:12px}.bento-card:where(.astro-omdq4o4w) p:where(.astro-omdq4o4w){color:var(--color-text-secondary);font-size:15px;line-height:1.6}.quote-section:where(.astro-omdq4o4w){text-align:center;background:radial-gradient(circle at center,rgba(255,255,255,.03) 0%,transparent 60%)}blockquote:where(.astro-omdq4o4w){font-family:var(--font-display);font-size:28px;line-height:1.4;color:var(--color-text-primary);margin:0 0 24px}cite:where(.astro-omdq4o4w){font-style:normal;font-size:14px;color:var(--color-text-muted);font-family:var(--font-mono)}.cta-section:where(.astro-omdq4o4w){text-align:center;padding-top:100px;padding-bottom:160px}.cta-headline:where(.astro-omdq4o4w){font-family:var(--font-display);font-size:40px;line-height:1.1;margin-bottom:16px;color:var(--color-text-primary)}.cta-subheadline:where(.astro-omdq4o4w){font-size:18px;color:var(--color-text-secondary);margin-bottom:32px}.cta-glow:where(.astro-omdq4o4w){box-shadow:0 0 30px #f59e0b4d}