@mevdragon/vidfarm-devcli 0.16.0 → 0.18.0

package/dist/src/reskin/help-page.js

@@ -0,0 +1,356 @@
+// /reskin/help — the vidfarm Help center, MIGRATED to real production content.
+//
+// This mirrors the live renderer src/help-page.ts → renderHelpPage: it accepts
+// the SAME input object that route builds (`Parameters<typeof renderHelpPage>[0]`
+// — `{ account, expand }`) so wiring the route is just "call this instead of the
+// legacy renderer". The accordion is the REAL support surface: the four live
+// sections (video tutorials, report a bug, contact the team, billing/cancel)
+// with their REAL destinations — the same YouTube embed, the two Tally forms,
+// the support email, and the Stripe billing portal the live page ships. The
+// `?expand=id,id` deep-link is honored both server-side (native <details open>)
+// and client-side (URL stays in sync on toggle). Design stays farmville (shared
+// rk-* primitives + a page-scoped CSS block); only the data + links became real.
+//
+// A default input keeps the existing zero-arg route call compiling; the route
+// can pass real `{ account, expand }` whenever it's wired.
+import { reskinDocument, rkEscape } from "./document.js";
+const SEARCH_ICON = `<svg class="rk-help-search-ic" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>`;
+// The ONLY deep-linkable accordion ids — mirrors HELP_SECTION_IDS in
+// src/help-page.ts. `?expand=` values are filtered against this allowlist.
+const HELP_SECTION_IDS = ["video_tutorials", "report_bug", "contact_team", "cancel_subscription"];
+/** Parse `?expand=id,id` exactly like the live renderer: split, trim, keep only
+ *  known section ids. */
+function parseExpanded(expand) {
+    const allowed = new Set(HELP_SECTION_IDS);
+    if (!expand)
+        return new Set();
+    return new Set(expand
+        .split(",")
+        .map((value) => value.trim())
+        .filter((value) => allowed.has(value)));
+}
+// The four REAL support sections, with the SAME destinations the live help page
+// ships: the YouTube tutorial embed, the two Tally forms, the support email, and
+// the Stripe billing/cancellation portal.
+const SECTIONS = [
+    {
+        id: "video_tutorials",
+        cat: "Tutorials",
+        catPill: "rk-pill-green",
+        title: "Video tutorials",
+        body: `<div class="rk-help-video">
+      <iframe
+        src="https://www.youtube.com/embed/BG2vuCDzehc"
+        title="Video tutorials"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen
+        loading="lazy"
+        referrerpolicy="strict-origin-when-cross-origin"></iframe>
+    </div>`
+    },
+    {
+        id: "report_bug",
+        cat: "Support",
+        catPill: "rk-pill-red",
+        title: "Report a bug",
+        body: `<iframe
+      class="rk-help-formframe"
+      src="https://tally.so/embed/NpdkNj?alignLeft=1&amp;hideTitle=1&amp;transparentBackground=1"
+      title="Report a bug"
+      loading="lazy"></iframe>`
+    },
+    {
+        id: "contact_team",
+        cat: "Support",
+        catPill: "rk-pill-sky",
+        title: "Ask a question / contact the team",
+        body: `<iframe
+      class="rk-help-formframe"
+      src="https://tally.so/embed/javNVa?alignLeft=1&amp;hideTitle=1&amp;transparentBackground=1"
+      title="Ask a question / contact the team"
+      loading="lazy"></iframe>`
+    },
+    {
+        id: "cancel_subscription",
+        cat: "Billing",
+        catPill: "rk-pill-gold",
+        title: "Cancel subscription & refunds",
+        body: `<div class="rk-help-copy">
+      <p>You can cancel your subscription at any time with a simple self-serve billing portal.</p>
+      <p>For refunds, we offer <strong>90-day refunds</strong>. Email <a href="mailto:operator@zoom-gtm.com">operator@zoom-gtm.com</a> and mention the original email address you used in Stripe so we can find your subscription quickly.</p>
+      <p><a class="rk-help-inline-cta" href="https://billing.stripe.com/p/login/fZecQubkxcwOgDuaEE" target="_blank" rel="noopener noreferrer">Open the cancellation portal <span class="rk-arrow">↗</span></a></p>
+    </div>`
+    }
+];
+// Browse-by-topic quick nav — every card deep-links straight to a REAL section.
+const TOPICS = [
+    { expand: "video_tutorials", title: "Video tutorials", blurb: "A quick tour from your first fork to your first published post.", action: "Watch" },
+    { expand: "report_bug", title: "Report a bug", blurb: "Something broken? Send us the details in about 30 seconds.", action: "Report" },
+    { expand: "contact_team", title: "Ask the team", blurb: "Questions about your workflow? Reach a real human, fast.", action: "Contact" },
+    { expand: "cancel_subscription", title: "Billing & cancellation", blurb: "Refunds, invoices, or cancel any time — no email required.", action: "Manage" }
+];
+// Real quick actions. Two deep-link into the accordion; the billing portal is
+// the live external Stripe portal.
+const SUPPORT_LINKS = [
+    { title: "Watch the tutorials", blurb: "A short tour from fork to published post.", cta: "Play video", href: "?expand=video_tutorials#rk-help-faq" },
+    { title: "Report a bug", blurb: "Something broken? Send us the details in 30 seconds.", cta: "Report it", href: "?expand=report_bug#rk-help-faq" },
+    { title: "Billing portal", blurb: "Update payment, download invoices, or cancel.", cta: "Manage billing", href: "https://billing.stripe.com/p/login/fZecQubkxcwOgDuaEE", external: true }
+];
+// Popular chips — every one deep-links a REAL section.
+const POPULAR = [
+    { label: "Video tutorials", expand: "video_tutorials" },
+    { label: "Report a bug", expand: "report_bug" },
+    { label: "Contact the team", expand: "contact_team" },
+    { label: "Cancel or refund", expand: "cancel_subscription" }
+];
+function renderTopicCard(t) {
+    return `<a class="rk-card rk-card-hover rk-help-topic" href="?expand=${rkEscape(t.expand)}#rk-help-faq">
+    <h3>${rkEscape(t.title)}</h3>
+    <p class="rk-muted rk-help-topic-blurb">${rkEscape(t.blurb)}</p>
+    <span class="rk-help-topic-foot">${rkEscape(t.action)} <span class="rk-arrow">→</span></span>
+  </a>`;
+}
+function renderSection(s, open) {
+    const search = `${s.title} ${s.cat}`.toLowerCase();
+    return `<details class="rk-help-faq-item" data-expand-id="${rkEscape(s.id)}" data-search="${rkEscape(search)}"${open ? " open" : ""}>
+    <summary class="rk-help-faq-summary">
+      <span class="rk-help-faq-q">
+        <span class="rk-pill ${s.catPill} rk-help-faq-cat">${rkEscape(s.cat)}</span>
+        <span class="rk-help-faq-qt">${rkEscape(s.title)}</span>
+      </span>
+      <span class="rk-help-faq-toggle" aria-hidden="true"></span>
+    </summary>
+    <div class="rk-help-faq-body">${s.body}</div>
+  </details>`;
+}
+function renderSupportLink(s) {
+    const attrs = s.external ? ` target="_blank" rel="noopener noreferrer"` : "";
+    return `<a class="rk-item rk-help-support" href="${rkEscape(s.href)}"${attrs}>
+    <div class="rk-item-main">
+      <div class="rk-item-title">${rkEscape(s.title)}</div>
+      <div class="rk-help-support-sub rk-muted">${rkEscape(s.blurb)}</div>
+    </div>
+    <span class="rk-btn rk-btn-ghost rk-btn-sm">${rkEscape(s.cta)} <span class="rk-arrow">${s.external ? "↗" : "→"}</span></span>
+  </a>`;
+}
+export function renderReskinHelp(input = { account: { isLoggedIn: false }, expand: null }) {
+    const expanded = parseExpanded(input.expand);
+    const hero = `
+  <div class="rk-hero-band rk-help-band">
+    <div class="rk-hero-art rk-help-art"></div>
+    <div class="rk-hero rk-help-hero">
+      <h1 class="rk-help-title">How can we help?</h1>
+      <p class="rk-help-lede">Guides and answers for making short-form video with vidfarm — from your first fork to your first published post.</p>
+      <form class="rk-help-search" role="search" onsubmit="return false">
+        ${SEARCH_ICON}
+        <input class="rk-help-search-input" type="search" placeholder="Search help — “render”, “bug”, “cancel”…" aria-label="Search help topics" data-help-search />
+        <button class="rk-btn rk-btn-gold rk-help-search-btn" type="submit">Search</button>
+      </form>
+      <div class="rk-help-popular">
+        <span class="rk-help-popular-label">Popular:</span>
+        ${POPULAR.map((p) => `<a class="rk-help-chip" href="?expand=${rkEscape(p.expand)}#rk-help-faq">${rkEscape(p.label)}</a>`).join("")}
+      </div>
+    </div>
+  </div>`;
+    const topics = `
+  <section class="rk-help-topics" aria-label="Browse by topic">
+    <div class="rk-grid rk-help-topic-grid">
+      ${TOPICS.map(renderTopicCard).join("")}
+    </div>
+  </section>`;
+    const faq = `
+  <section class="rk-help-faq" id="rk-help-faq" aria-labelledby="rk-help-faq-title">
+    <div class="rk-page-head rk-help-faq-head">
+      <span class="rk-eyebrow">Help topics</span>
+      <h2 class="rk-h1 rk-help-faq-h" id="rk-help-faq-title">Guides & support</h2>
+      <p class="rk-sub">Watch a tutorial, report a bug, reach the team, or manage billing. Still stuck? We're one message away.</p>
+    </div>
+    <div class="rk-help-faq-list" data-help-list>
+      ${SECTIONS.map((s) => renderSection(s, expanded.has(s.id))).join("")}
+    </div>
+    <p class="rk-muted rk-help-empty" data-help-empty hidden>No help topics match your search.</p>
+  </section>`;
+    const contact = `
+  <section class="rk-help-contact" aria-label="Contact support">
+    <div class="rk-card rk-help-cta-card">
+      <div class="rk-help-cta-copy">
+        <span class="rk-eyebrow rk-help-cta-eyebrow">Still need help?</span>
+        <h2>Talk to a human</h2>
+        <p class="rk-help-cta-sub">Real people, quick replies. Tell us what you're building and we'll help you ship it.</p>
+      </div>
+      <div class="rk-help-cta-actions">
+        <a class="rk-btn rk-btn-gold rk-btn-lg" href="mailto:operator@zoom-gtm.com">Contact the team <span class="rk-arrow">→</span></a>
+        <span class="rk-pill rk-pill-green">Typically replies in a few hours</span>
+      </div>
+    </div>
+    <div class="rk-list rk-help-support-list">
+      ${SUPPORT_LINKS.map(renderSupportLink).join("")}
+    </div>
+  </section>`;
+    const body = `
+${hero}
+<main class="rk-container rk-help-main">
+  ${topics}
+  ${faq}
+  ${contact}
+</main>`;
+    const pageCss = `
+/* ── hero band ── */
+.rk-help-band{padding-bottom:110px}
+.rk-help-art{background:
+  radial-gradient(52% 42% at 82% 14%,rgba(255,241,204,.95),transparent 62%),
+  radial-gradient(46% 40% at 12% 92%,rgba(255,245,228,.55),transparent 60%),
+  linear-gradient(180deg,#3f9fe0 0%,#6cc0f5 52%,#a9dbfb 100%)}
+.rk-help-hero{max-width:780px;margin:0 auto;display:grid;justify-items:center;gap:18px;padding-bottom:36px}
+.rk-help-badge{background:rgba(255,255,255,.9);backdrop-filter:blur(6px)}
+.rk-help-title{font-size:clamp(2.4rem,6vw,3.6rem);letter-spacing:-.035em;color:#fff;text-shadow:0 2px 18px rgba(20,54,90,.28)}
+.rk-help-lede{font-size:var(--rk-text-lg);color:#f3fbff;max-width:560px;line-height:1.55;text-shadow:0 1px 10px rgba(20,54,90,.25)}
+/* search */
+.rk-help-search{position:relative;display:flex;align-items:center;width:min(560px,100%);
+  background:#fff;border-radius:var(--rk-r-full);box-shadow:var(--rk-shadow-lg);padding:7px 7px 7px 18px;margin-top:6px}
+.rk-help-search-ic{color:var(--rk-n-400);flex:none}
+.rk-help-search-input{flex:1;border:0;outline:none;font-family:var(--rk-font-body);font-size:15px;
+  color:var(--rk-ink);background:transparent;padding:11px 12px}
+.rk-help-search-input::placeholder{color:var(--rk-n-400)}
+.rk-help-search-btn{flex:none;padding:11px 20px}
+.rk-help-popular{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:2px}
+.rk-help-popular-label{font-size:13px;font-weight:600;color:#eaf6ff}
+.rk-help-chip{display:inline-flex;align-items:center;padding:6px 13px;border-radius:var(--rk-r-full);
+  font-size:13px;font-weight:600;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
+  backdrop-filter:blur(6px);transition:background var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease)}
+.rk-help-chip:hover{background:rgba(255,255,255,.28);transform:translateY(-1px)}
+
+/* ── main column ── */
+.rk-help-main{position:relative;z-index:2;padding-bottom:96px}
+
+/* ── topic cards (pulled up onto the hero seam) ── */
+.rk-help-topics{margin-top:-72px}
+.rk-help-topic-grid{grid-template-columns:repeat(4,1fr)}
+@media(max-width:1080px){.rk-help-topic-grid{grid-template-columns:repeat(2,1fr)}}
+@media(max-width:460px){.rk-help-topic-grid{grid-template-columns:1fr}}
+.rk-help-topic{display:grid;gap:10px;align-content:start;padding:24px;text-align:left}
+.rk-help-topic h3{font-size:var(--rk-text-lg);font-weight:800;font-family:var(--rk-font-display);color:var(--rk-ink)}
+.rk-help-topic-blurb{font-size:13.5px;line-height:1.5}
+.rk-help-topic-foot{display:inline-flex;align-items:center;gap:6px;margin-top:6px;
+  font-size:13px;font-weight:700;color:var(--rk-gold-700)}
+.rk-help-topic:hover .rk-help-topic-foot .rk-arrow{transform:translateX(3px)}
+.rk-help-topic-foot .rk-arrow{transition:transform var(--rk-dur) var(--rk-ease)}
+
+/* ── accordion (real support sections) ── */
+.rk-help-faq{margin-top:72px}
+.rk-help-faq-head{justify-items:center;text-align:center;margin-bottom:28px;gap:10px}
+.rk-help-faq-h{font-size:var(--rk-text-3xl)}
+.rk-help-faq-list{display:grid;gap:14px;max-width:820px;margin:0 auto}
+.rk-help-faq-item{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);
+  box-shadow:var(--rk-shadow-card);overflow:hidden;transition:box-shadow var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-help-faq-item[open]{border-color:var(--rk-gold-tint2);box-shadow:var(--rk-shadow-lg)}
+.rk-help-faq-item[hidden]{display:none}
+.rk-help-faq-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
+  padding:20px 22px;cursor:pointer;list-style:none;user-select:none}
+.rk-help-faq-summary::-webkit-details-marker{display:none}
+.rk-help-faq-q{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
+.rk-help-faq-cat{flex:none}
+.rk-help-faq-qt{font-family:var(--rk-font-display);font-weight:700;font-size:var(--rk-text-lg);color:var(--rk-ink);letter-spacing:-.01em}
+.rk-help-faq-toggle{position:relative;flex:none;width:30px;height:30px;border-radius:var(--rk-r-full);
+  background:var(--rk-n-100);transition:background var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease)}
+.rk-help-faq-toggle::before,.rk-help-faq-toggle::after{content:"";position:absolute;top:50%;left:50%;
+  width:12px;height:2px;border-radius:2px;background:var(--rk-n-600);transform:translate(-50%,-50%);transition:opacity var(--rk-dur) var(--rk-ease)}
+.rk-help-faq-toggle::after{transform:translate(-50%,-50%) rotate(90deg)}
+.rk-help-faq-item[open] .rk-help-faq-toggle{background:var(--rk-gold-tint2);transform:rotate(180deg)}
+.rk-help-faq-item[open] .rk-help-faq-toggle::after{opacity:0}
+.rk-help-faq-item[open] .rk-help-faq-toggle::before{background:var(--rk-gold-700)}
+.rk-help-faq-summary:hover .rk-help-faq-toggle{background:var(--rk-n-200)}
+.rk-help-faq-body{display:grid;gap:12px;padding:0 22px 22px;color:var(--rk-text);line-height:1.65;font-size:14.5px}
+.rk-help-faq-body p{margin:0}
+.rk-help-faq-body strong{color:var(--rk-n-800);font-weight:600}
+.rk-help-faq-body a{color:var(--rk-gold-700);font-weight:600;text-decoration:underline;text-underline-offset:2px}
+.rk-help-inline-cta{display:inline-flex;align-items:center;gap:6px;text-decoration:none!important}
+.rk-help-inline-cta .rk-arrow{transition:transform var(--rk-dur) var(--rk-ease)}
+.rk-help-inline-cta:hover .rk-arrow{transform:translateX(3px)}
+.rk-help-copy{display:grid;gap:12px;max-width:680px}
+/* embedded iframes (real tutorial + Tally forms) */
+.rk-help-video{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--rk-r-xl);background:#151a23}
+.rk-help-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
+.rk-help-formframe{display:block;width:100%;min-height:680px;border:0;border-radius:var(--rk-r-xl);background:rgba(255,255,255,.72)}
+@media(max-width:560px){.rk-help-formframe{min-height:75svh}}
+.rk-help-empty{text-align:center;max-width:820px;margin:18px auto 0}
+
+/* ── contact ── */
+.rk-help-contact{margin-top:72px;display:grid;gap:20px}
+.rk-help-cta-card{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
+  background:linear-gradient(135deg,#fffaf0 0%,#fff 60%);border-color:var(--rk-gold-tint2)}
+.rk-help-cta-copy{display:grid;gap:8px;max-width:460px}
+.rk-help-cta-card h2{font-size:var(--rk-text-3xl)}
+.rk-help-cta-eyebrow{color:var(--rk-gold-700)}
+.rk-help-cta-sub{color:var(--rk-text-muted);font-size:var(--rk-text-base);line-height:1.55}
+.rk-help-cta-actions{display:grid;gap:12px;justify-items:start}
+.rk-help-support-list{grid-template-columns:repeat(3,1fr);display:grid;gap:14px}
+@media(max-width:860px){.rk-help-support-list{grid-template-columns:1fr}}
+.rk-help-support{gap:16px;padding:18px}
+.rk-help-support-sub{font-size:13px;margin-top:2px;white-space:normal}
+@media(max-width:560px){.rk-help-support{flex-wrap:wrap}}
+`;
+    const script = `
+(function(){
+  var items=Array.prototype.slice.call(document.querySelectorAll('.rk-help-faq-item[data-expand-id]'));
+  var allowed={}; items.forEach(function(d){if(d.dataset.expandId)allowed[d.dataset.expandId]=1;});
+
+  function readExpandedFromUrl(){
+    var params=new URLSearchParams(window.location.search);
+    var set={};
+    (params.get('expand')||'').split(',').map(function(v){return v.trim();})
+      .forEach(function(v){if(allowed[v])set[v]=1;});
+    return set;
+  }
+  function writeExpandedToUrl(){
+    var open=items.filter(function(d){return d.open&&d.dataset.expandId;})
+      .map(function(d){return d.dataset.expandId;});
+    var url=new URL(window.location.href);
+    if(open.length){url.searchParams.set('expand',open.join(','));}
+    else{url.searchParams.delete('expand');}
+    if(window.history.replaceState){
+      window.history.replaceState(null,'',url.pathname+url.search+url.hash);
+    }
+  }
+
+  // Union of server-rendered [open] and any ?expand= in the URL, so both the
+  // static server render and client-side deep links open the right sections.
+  var initial=readExpandedFromUrl();
+  items.forEach(function(d){
+    d.open=d.open||Boolean(d.dataset.expandId&&initial[d.dataset.expandId]);
+    d.addEventListener('toggle',writeExpandedToUrl);
+  });
+
+  var firstOpen=items.filter(function(d){return d.open;})[0];
+  if(firstOpen){
+    requestAnimationFrame(function(){
+      firstOpen.scrollIntoView({block:'center',behavior:'smooth'});
+    });
+  }
+
+  // Search filters the visible support sections.
+  var search=document.querySelector('[data-help-search]');
+  var empty=document.querySelector('[data-help-empty]');
+  if(search){
+    search.addEventListener('input',function(){
+      var q=(search.value||'').trim().toLowerCase();
+      var shown=0;
+      items.forEach(function(d){
+        var hit=!q||(d.dataset.search||'').indexOf(q)!==-1;
+        d.hidden=!hit;
+        if(hit)shown++;
+      });
+      if(empty)empty.hidden=shown!==0;
+    });
+  }
+})();`;
+    return reskinDocument({
+        title: "vidfarm reskin — Help",
+        description: "Reskinned vidfarm help center — tutorials, bug reports, contact, and billing.",
+        activeSlug: "help",
+        pageCss,
+        body,
+        script
+    });
+}
+//# sourceMappingURL=help-page.js.map

package/dist/src/reskin/index-page.js

@@ -0,0 +1,62 @@
+// /reskin index — a gallery of every page in the migration, with status.
+import { reskinDocument } from "./document.js";
+import { RESKIN_PAGES } from "./theme.js";
+export function renderReskinIndex() {
+    const done = RESKIN_PAGES.filter((p) => p.done).length;
+    const cards = RESKIN_PAGES.map((p) => {
+        const status = p.done
+            ? `<span class="rk-pill rk-pill-green">✓ Ported</span>`
+            : `<span class="rk-pill">In progress</span>`;
+        const href = `/${p.slug}`;
+        return `<a class="rk-card rk-card-hover rk-idx-card" href="${href}">
+      <div class="rk-spread">
+        <span class="rk-tile rk-tile-lg rk-tile-gold rk-idx-mark">${p.label.charAt(0)}</span>
+        ${status}
+      </div>
+      <div>
+        <h3 class="rk-idx-title">${p.label}</h3>
+        <p class="rk-muted rk-idx-blurb">${p.blurb}</p>
+      </div>
+      <div class="rk-idx-foot rk-muted">
+        <span>reskins <code>${p.live}</code></span>
+        <span class="rk-idx-go">Open <span class="rk-arrow">→</span></span>
+      </div>
+    </a>`;
+    }).join("");
+    const body = `
+<section class="rk-hero-band">
+  <div class="rk-hero-art"></div>
+  <div class="rk-hero">
+    <span class="rk-badge">Design-system migration</span>
+    <h1 class="rk-idx-hero-h1">Reskinning vidfarm,<br>one page at a time</h1>
+    <p class="rk-idx-hero-sub">A safe sandbox at <code>/reskin/*</code> where each old page is
+    rebuilt in the warm, sunny design system — with fully isolated CSS, so nothing touches the live app.</p>
+    <div class="rk-idx-progress">${done} of ${RESKIN_PAGES.length} pages ported</div>
+  </div>
+</section>
+<main class="rk-container rk-page">
+  <div class="rk-grid rk-grid-3 rk-idx-grid">${cards}</div>
+</main>`;
+    const pageCss = `
+.rk-idx-hero-h1{font-size:clamp(2.4rem,5vw,3.6rem);color:#fff;letter-spacing:-.03em;text-shadow:0 2px 24px rgba(0,0,0,.12);margin-top:18px}
+.rk-hero .rk-badge{background:rgba(255,255,255,.9)}
+.rk-idx-hero-sub{max-width:620px;margin:18px auto 0;font-size:var(--rk-text-lg);color:rgba(255,255,255,.95)}
+.rk-idx-hero-sub code{background:rgba(255,255,255,.22);color:#fff}
+.rk-idx-progress{display:inline-block;margin-top:22px;padding:8px 16px;border-radius:var(--rk-r-full);background:rgba(255,255,255,.9);color:var(--rk-ink);font-weight:600;font-size:14px}
+.rk-idx-grid{margin-top:-56px;position:relative;z-index:2}
+.rk-idx-card{display:grid;gap:16px;text-decoration:none}
+.rk-idx-title{margin-bottom:4px}
+.rk-idx-blurb{font-size:14px}
+.rk-idx-foot{display:flex;align-items:center;justify-content:space-between;font-size:13px;padding-top:14px;border-top:1px solid var(--rk-border)}
+.rk-idx-go{font-weight:600;color:var(--rk-ink)}
+.rk-idx-mark{font-family:var(--rk-font-display);font-weight:800;font-size:22px;color:var(--rk-ink)}
+`;
+    return reskinDocument({
+        title: "vidfarm reskin — page gallery",
+        description: "The /reskin/* design-system migration surface for vidfarm.",
+        activeSlug: null,
+        pageCss,
+        body
+    });
+}
+//# sourceMappingURL=index-page.js.map