> ## Documentation Index
> Fetch the complete documentation index at: https://docs.comet.rpamis.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Comet

> Comet is an Agent Skill Harness that turns ideas into recoverable, evaluated workflows.

export const SetupDemoController = () => {
  useEffect(() => {
    const demos = Array.from(document.querySelectorAll("[data-setup-demo]"));
    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
    const versionTargets = Array.from(document.querySelectorAll("[data-docs-version]"));
    const versionPattern = /^v?\d+\.\d+\.\d+(?:-[0-9A-Za-z.-]+)?$/;
    let versionObserver = null;
    const syncDocsVersion = () => {
      const version = Array.from(document.querySelectorAll('button[aria-haspopup="menu"] > span')).map(element => element.textContent?.trim() || "").find(value => versionPattern.test(value));
      if (version == null) return false;
      const displayVersion = version.startsWith("v") ? version : `v${version}`;
      versionTargets.forEach(target => {
        target.textContent = displayVersion;
      });
      return true;
    };
    if (versionTargets.length > 0 && syncDocsVersion() === false && window.MutationObserver != null) {
      versionObserver = new MutationObserver(() => {
        if (syncDocsVersion()) versionObserver?.disconnect();
      });
      versionObserver.observe(document.body, {
        childList: true,
        subtree: true
      });
    }
    const cleanups = demos.map(demo => {
      const viewport = demo.querySelector("[data-setup-viewport]");
      const status = demo.querySelector("[data-setup-status]");
      const lines = Array.from(demo.querySelectorAll("[data-setup-line]"));
      const stages = Array.from(demo.querySelectorAll("[data-setup-stage-card]"));
      const timers = new Set();
      let observer = null;
      const clearTimers = () => {
        timers.forEach(timer => window.clearTimeout(timer));
        timers.clear();
      };
      const setStage = stageName => {
        if (status != null) {
          status.textContent = stageName === "ready" ? "/comet ready" : stageName === "init" ? "comet init" : "npm install";
        }
        stages.forEach(stage => {
          const isActive = stage.getAttribute("data-setup-stage-card") === stageName;
          stage.classList.toggle("is-active", isActive);
          stage.setAttribute("aria-current", isActive ? "step" : "false");
        });
      };
      const scrollToLatest = () => {
        if (viewport == null) return;
        window.requestAnimationFrame(() => {
          viewport.scrollTop = viewport.scrollHeight;
        });
      };
      const showAll = () => {
        lines.forEach(line => line.classList.add("is-visible"));
        setStage("ready");
        scrollToLatest();
      };
      const reset = () => {
        clearTimers();
        lines.forEach(line => line.classList.remove("is-visible"));
        if (viewport != null) viewport.scrollTop = 0;
        setStage("install");
      };
      const run = () => {
        reset();
        let elapsed = 280;
        lines.forEach(line => {
          const pause = Number(line.getAttribute("data-setup-pause") || "520");
          elapsed += pause;
          const timer = window.setTimeout(() => {
            const stageName = line.getAttribute("data-setup-stage");
            line.classList.add("is-visible");
            if (stageName != null) setStage(stageName);
            scrollToLatest();
            timers.delete(timer);
          }, elapsed);
          timers.add(timer);
        });
      };
      demo.setAttribute("data-setup-enhanced", "true");
      if (reducedMotion.matches || window.IntersectionObserver == null || lines.length === 0) {
        showAll();
        return () => clearTimers();
      }
      observer = new IntersectionObserver(([entry]) => {
        if (entry.isIntersecting === false) return;
        run();
        observer.disconnect();
      }, {
        threshold: 0.2,
        rootMargin: "0px 0px -8% 0px"
      });
      observer.observe(demo);
      return () => {
        clearTimers();
        if (observer != null) observer.disconnect();
      };
    });
    return () => {
      versionObserver?.disconnect();
      cleanups.forEach(cleanup => cleanup());
    };
  }, []);
  return null;
};

export const RevealController = () => {
  useEffect(() => {
    const root = document.querySelector(".comet-home");
    if (root == null) return;
    const elements = Array.from(root.querySelectorAll('[data-reveal="true"]'));
    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
    if (reducedMotion.matches || window.IntersectionObserver == null) {
      elements.forEach(element => {
        element.classList.add("is-visible");
        element.setAttribute("data-reveal-state", "visible");
      });
      return;
    }
    const observers = elements.map(element => {
      const delay = element.getAttribute("data-reveal-delay") || "0";
      const distance = element.getAttribute("data-reveal-distance") || "36";
      const threshold = Number(element.getAttribute("data-reveal-threshold") || "0.14");
      const rootMargin = element.getAttribute("data-reveal-root-margin") || "0px 0px -10% 0px";
      element.style.setProperty("--comet-reveal-delay", `${delay}ms`);
      element.style.setProperty("--comet-reveal-distance", `${distance}px`);
      element.setAttribute("data-reveal-state", "hidden");
      const observer = new IntersectionObserver(([entry]) => {
        if (entry.isIntersecting === false) return;
        element.classList.add("is-visible");
        element.setAttribute("data-reveal-state", "visible");
        observer.disconnect();
      }, {
        threshold,
        rootMargin
      });
      observer.observe(element);
      return observer;
    });
    return () => observers.forEach(observer => observer.disconnect());
  }, []);
  return null;
};

export const HeroEntranceController = () => {
  useEffect(() => {
    const element = document.querySelector(".comet-home__hero-entrance");
    if (element == null) return;
    const showImmediately = () => {
      element.classList.add("is-hero-visible");
      element.style.opacity = "1";
      element.style.transform = "none";
    };
    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
    if (reducedMotion.matches) {
      showImmediately();
      return;
    }
    if (element.getAttribute("data-hero-entrance-started") === "true") return;
    element.setAttribute("data-hero-entrance-started", "true");
    element.style.removeProperty("opacity");
    element.style.removeProperty("transform");
    window.requestAnimationFrame(() => {
      window.requestAnimationFrame(() => {
        element.classList.add("is-hero-visible");
      });
    });
  }, []);
  return null;
};

export const CapabilityDitherController = () => {
  useEffect(() => {
    const ditherMatrix = [0, 48, 12, 60, 3, 51, 15, 63, 32, 16, 44, 28, 35, 19, 47, 31, 8, 56, 4, 52, 11, 59, 7, 55, 40, 24, 36, 20, 43, 27, 39, 23, 2, 50, 14, 62, 1, 49, 13, 61, 34, 18, 46, 30, 33, 17, 45, 29, 10, 58, 6, 54, 9, 57, 5, 53, 42, 26, 38, 22, 41, 25, 37, 21];
    const parseHexColor = value => {
      const normalized = value.replace("#", "");
      return [Number.parseInt(normalized.slice(0, 2), 16), Number.parseInt(normalized.slice(2, 4), 16), Number.parseInt(normalized.slice(4, 6), 16)];
    };
    const shadeChannel = (channel, amount) => {
      if (amount < 0) return Math.round(channel * (1 + amount));
      return Math.round(channel + (255 - channel) * amount);
    };
    const root = document.querySelector(".comet-home");
    if (root == null) return;
    const definitions = [[".comet-home__capability-visual--skill", "#dd7959"], [".comet-home__capability-visual--eval", "#e9e1d4"], [".comet-home__capability-visual--any", "#70a0cf"]];
    const createdCanvases = [];
    const canvases = definitions.map(([selector, color]) => {
      const container = root.querySelector(selector);
      if (container == null) return null;
      const existing = container.querySelector(".comet-home__capability-dither");
      if (existing != null) return existing;
      const canvas = document.createElement("canvas");
      canvas.className = "comet-home__capability-dither";
      canvas.dataset.ditherColor = color;
      canvas.setAttribute("aria-hidden", "true");
      container.prepend(canvas);
      createdCanvases.push(canvas);
      return canvas;
    }).filter(Boolean);
    if (canvases.length === 0) return;
    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
    const shadeLevels = [-0.1, -0.025, 0.045, 0.13];
    const surfaces = canvases.map((canvas, index) => {
      const context = canvas.getContext("2d", {
        alpha: false
      });
      const baseColor = parseHexColor(canvas.dataset.ditherColor || "#808080");
      let width = 0;
      let height = 0;
      let image = null;
      const resize = () => {
        const bounds = canvas.getBoundingClientRect();
        const nextWidth = Math.max(48, Math.ceil(bounds.width / 3));
        const nextHeight = Math.max(48, Math.ceil(bounds.height / 3));
        if (nextWidth === width && nextHeight === height) return;
        width = nextWidth;
        height = nextHeight;
        canvas.width = width;
        canvas.height = height;
        image = context.createImageData(width, height);
      };
      const draw = time => {
        resize();
        if (image == null) return;
        const pixels = image.data;
        const phase = index * 1.75;
        const elapsed = time * 0.00016;
        const aspect = width / height;
        for (let y = 0; y < height; y += 1) {
          for (let x = 0; x < width; x += 1) {
            const normalizedX = (x / width - 0.5) * aspect;
            const normalizedY = y / height - 0.5;
            const primary = Math.sin(normalizedX * 5.2 + normalizedY * 2.1 + elapsed + phase);
            const secondary = Math.sin(normalizedY * 7.1 - normalizedX * 1.7 - elapsed * 0.72 + phase);
            const detail = Math.cos((normalizedX + normalizedY) * 9.4 + elapsed * 0.43 - phase);
            const field = 0.5 + primary * 0.13 + secondary * 0.1 + detail * 0.055;
            const threshold = (ditherMatrix[y % 8 * 8 + x % 8] - 31.5) / 64;
            const level = Math.max(0, Math.min(3, Math.floor((field + threshold * 0.32) * 4)));
            const shade = shadeLevels[level];
            const offset = (y * width + x) * 4;
            pixels[offset] = shadeChannel(baseColor[0], shade);
            pixels[offset + 1] = shadeChannel(baseColor[1], shade);
            pixels[offset + 2] = shadeChannel(baseColor[2], shade);
            pixels[offset + 3] = 255;
          }
        }
        context.putImageData(image, 0, 0);
      };
      return {
        canvas,
        draw,
        resize
      };
    });
    let frame = null;
    let isVisible = true;
    let lastFrame = 0;
    const stop = () => {
      if (frame == null) return;
      window.cancelAnimationFrame(frame);
      frame = null;
    };
    const render = time => {
      frame = null;
      if (reducedMotion.matches || isVisible === false || document.visibilityState === "hidden") {
        return;
      }
      if (time - lastFrame >= 42) {
        surfaces.forEach(surface => surface.draw(time));
        lastFrame = time;
      }
      frame = window.requestAnimationFrame(render);
    };
    const start = () => {
      if (frame != null || reducedMotion.matches || isVisible === false || document.visibilityState === "hidden") {
        return;
      }
      frame = window.requestAnimationFrame(render);
    };
    const resizeObserver = window.ResizeObserver == null ? null : new ResizeObserver(() => {
      surfaces.forEach(surface => surface.resize());
      surfaces.forEach((surface, index) => surface.draw(reducedMotion.matches ? 0 : performance.now() + index));
    });
    surfaces.forEach(surface => {
      surface.resize();
      surface.draw(0);
      resizeObserver?.observe(surface.canvas);
    });
    const section = root.querySelector(".comet-home__capabilities");
    const visibilityObserver = section == null || window.IntersectionObserver == null ? null : new IntersectionObserver(([entry]) => {
      isVisible = entry.isIntersecting;
      if (isVisible) start(); else stop();
    }, {
      rootMargin: "160px 0px",
      threshold: 0
    });
    visibilityObserver?.observe(section);
    const handleMotionPreference = () => {
      stop();
      surfaces.forEach(surface => surface.draw(0));
      start();
    };
    const handleVisibility = () => {
      if (document.visibilityState === "hidden") stop(); else start();
    };
    reducedMotion.addEventListener("change", handleMotionPreference);
    document.addEventListener("visibilitychange", handleVisibility);
    start();
    return () => {
      stop();
      resizeObserver?.disconnect();
      visibilityObserver?.disconnect();
      reducedMotion.removeEventListener("change", handleMotionPreference);
      document.removeEventListener("visibilitychange", handleVisibility);
      createdCanvases.forEach(canvas => canvas.remove());
    };
  }, []);
  return null;
};

export const CopyController = () => {
  useEffect(() => {
    const buttons = Array.from(document.querySelectorAll("[data-copy-value]"));
    const timers = new Map();
    const copy = async event => {
      const button = event.currentTarget;
      const value = button.getAttribute("data-copy-value");
      const label = button.getAttribute("data-copy-label") || "复制";
      if (value == null || navigator.clipboard == null) return;
      try {
        await navigator.clipboard.writeText(value);
      } catch {
        return;
      }
      const existingTimer = timers.get(button);
      if (existingTimer != null) window.clearTimeout(existingTimer);
      button.classList.add("is-copied");
      button.setAttribute("aria-label", "已复制");
      button.setAttribute("title", "已复制");
      const timer = window.setTimeout(() => {
        button.classList.remove("is-copied");
        button.setAttribute("aria-label", label);
        button.setAttribute("title", label);
        timers.delete(button);
      }, 1800);
      timers.set(button, timer);
    };
    buttons.forEach(button => button.addEventListener("click", copy));
    return () => {
      buttons.forEach(button => button.removeEventListener("click", copy));
      timers.forEach(timer => window.clearTimeout(timer));
    };
  }, []);
  return null;
};

<div className="comet-home">
  <CopyController />

  <CapabilityDitherController />

  <HeroEntranceController />

  <RevealController />

  <SetupDemoController />

  <div className="comet-home__hero-entrance" style={{ opacity: 0, transform: "translateY(10px)" }}>
    <section className="comet-home__hero" aria-labelledby="comet-home-title">
      <div className="comet-home__trail" aria-hidden="true">
        <svg viewBox="0 0 820 820" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
          <path d="M-40 640 C 220 700, 520 540, 812 150" stroke="url(#cometTrail)" strokeWidth="1.5" strokeDasharray="1 9" strokeLinecap="round" />

          <circle cx="812" cy="150" r="4.5" fill="#0063F8" />

          <defs>
            <linearGradient id="cometTrail" x1="40" y1="640" x2="812" y2="150" gradientUnits="userSpaceOnUse">
              <stop stopColor="#0063F8" stopOpacity="0" />

              <stop offset="0.7" stopColor="#0063F8" stopOpacity="0.35" />

              <stop offset="1" stopColor="#0063F8" stopOpacity="0.85" />
            </linearGradient>
          </defs>
        </svg>
      </div>

      <div className="comet-home__lockup" translate="no">
        <img src="https://mintcdn.com/comet-bb5f5294/anG611vGlISWXx6u/logo/favicon.png?fit=max&auto=format&n=anG611vGlISWXx6u&q=85&s=5cc1f88cea1d61472b3594828f256c5a" alt="" className="comet-home__lockup-mark" width="34" height="34" data-path="logo/favicon.png" />

        <span>Comet</span>
      </div>

      <p className="comet-home__eyebrow" translate="no">
        <span className="comet-home__eyebrow-rule" aria-hidden="true" />

        Agent Skill Harness
      </p>

      <h1 id="comet-home-title">
        <span className="comet-home__title-primary">From idea to reliable delivery</span><br />

        <span className="comet-home__title-accent">
          All it takes is
          <span className="comet-home__title-command">/comet</span>
        </span>
      </h1>

      <p className="comet-home__lede">
        Comet Skill keeps agents on track through long-running work with recoverable state. Comet Eval tests Skills on real tasks and turns results into evidence for iteration. /comet-any composes existing Skills into reusable capabilities.
      </p>

      <div className="comet-home__actions" aria-label="Get started with Comet">
        <a className="comet-home__btn comet-home__btn--primary" href="/en/quickstart">
          Get started
          <span aria-hidden="true">→</span>
        </a>

        <a className="comet-home__btn comet-home__btn--ghost" href="/en/index">Read the docs</a>
      </div>

      <div className="comet-home__install-chip" translate="no">
        <span className="comet-home__install-chip-label">Get Comet</span>

        <button type="button" className="comet-home__copy-button" data-copy-value="npm install -g @rpamis/comet" data-copy-label="Copy install command" aria-label="Copy install command" title="Copy install command">
          <code>
            <span className="comet-home__chip-command">npm install</span>
            <span className="comet-home__chip-flag">-g</span>
            <span className="comet-home__chip-value">@rpamis/comet</span>
          </code>

          <span className="comet-home__copy-affordance" aria-hidden="true">
            <svg className="comet-home__copy-icon" viewBox="0 0 20 20">
              <rect x="6.5" y="6.5" width="9" height="9" rx="1.5" />

              <path d="M13.5 6.5V5A1.5 1.5 0 0 0 12 3.5H5A1.5 1.5 0 0 0 3.5 5v7A1.5 1.5 0 0 0 5 13.5h1.5" />
            </svg>

            <svg className="comet-home__copy-icon comet-home__copy-icon--success" viewBox="0 0 20 20">
              <path d="m4.5 10.5 3.25 3.25L15.5 6" />
            </svg>
          </span>
        </button>
      </div>
    </section>

    <div className="comet-home__hero-stage">
      <div className="comet-home__window comet-home__window--xl" role="group" aria-label="Comet Dashboard product interface">
        <div className="comet-home__bar">
          <span className="comet-home__dots" aria-hidden="true">
            <i />

            <i />

            <i />
          </span>

          <span className="comet-home__bar-title">
            <img src="https://mintcdn.com/comet-bb5f5294/anG611vGlISWXx6u/logo/favicon.png?fit=max&auto=format&n=anG611vGlISWXx6u&q=85&s=5cc1f88cea1d61472b3594828f256c5a" alt="" className="comet-home__bar-logo" width="16" height="16" data-path="logo/favicon.png" />

            <span className="comet-home__bar-name">Comet Dashboard</span>
            <span className="comet-home__bar-path">\~/projects/comet</span>
          </span>

          <span className="comet-home__bar-tool" aria-hidden="true">◐</span>
        </div>

        <div className="comet-home__screen">
          <img src="https://mintcdn.com/comet-bb5f5294/NLqKFpbM6BQ5m8iA/img/dashboard-light.png?fit=max&auto=format&n=NLqKFpbM6BQ5m8iA&q=85&s=2e3da5e7533705e2f7a6c943ff745b37" alt="Comet Dashboard showing active changes, Verify failures, incomplete task metrics, lifecycle phases, and task progress" width="2560" height="1177" loading="eager" fetchPriority="high" decoding="async" data-path="img/dashboard-light.png" />
        </div>
      </div>

      <div className="comet-home__float comet-home__float--pass" aria-hidden="true">
        <span className="comet-home__float-dot comet-home__float-dot--green" />

        <span className="comet-home__float-strong">Verify passed</span>
        <span className="comet-home__float-sep">·</span>
        <span>4 evidence items archived</span>
      </div>

      <div className="comet-home__float comet-home__float--resume" aria-hidden="true">
        <span className="comet-home__float-kbd" translate="no">/comet resume</span>
        <span className="comet-home__float-note">2 active changes · design phase</span>
      </div>
    </div>
  </div>

  <section className="comet-home__feature" aria-labelledby="comet-skill-title">
    <div className="comet-home__copy" data-reveal="true" data-reveal-distance="38">
      <p className="comet-home__label" translate="no">Comet Skill</p>
      <h2 id="comet-skill-title">Two modes, one set of phase guards</h2>

      <p className="comet-home__copy-lede">
        Call <code translate="no">/comet</code> in your AI coding tool. Comet enters Native or Classic mode from the project configuration and moves each change from idea to archive. Even after an interruption, context compression, or a device switch, you can continue from the same state.
      </p>

      <div className="comet-home__modes">
        <div className="comet-home__mode">
          <div className="comet-home__mode-head">
            <span className="comet-home__mode-tag" translate="no">Native</span>
            <h3>Strong models · Fully automated coding</h3>
          </div>

          <p>Designed for strong models such as Fable 5 and GPT 5.6 that can complete complex coding work autonomously. The model clarifies requirements with structured questions and drafts a target Spec for your confirmation. Comet guards clarification, the target Spec, and result verification while the model handles implementation.</p>
        </div>

        <div className="comet-home__mode">
          <div className="comet-home__mode-head">
            <span className="comet-home__mode-tag" translate="no">Classic</span>
            <h3>Classic Spec-driven · More HITL</h3>
          </div>

          <p>An Open → Design → Build → Verify → Archive workflow that connects OpenSpec and Superpowers. Design Docs and explicit confirmation points constrain each phase, making it suitable for larger changes that need a rigorous process and for models below the Fable tier.</p>
        </div>
      </div>

      <p className="comet-home__modes-foot">Both modes share the same phase guards: cross-phase writes are blocked, confirmation points cannot be skipped, and state remains recoverable.</p>

      <a className="comet-home__text-link" href="/en/quickstart">
        Explore the workflow
        <span aria-hidden="true">→</span>
      </a>
    </div>

    <div className="comet-home__window" data-reveal="true" data-reveal-delay="110" data-reveal-distance="42" role="group" aria-label="Comet session resuming an interrupted workflow">
      <div className="comet-home__bar">
        <span className="comet-home__dots" aria-hidden="true">
          <i />

          <i />

          <i />
        </span>

        <span className="comet-home__bar-title">
          <img src="https://mintcdn.com/comet-bb5f5294/anG611vGlISWXx6u/logo/favicon.png?fit=max&auto=format&n=anG611vGlISWXx6u&q=85&s=5cc1f88cea1d61472b3594828f256c5a" alt="" className="comet-home__bar-logo" width="16" height="16" data-path="logo/favicon.png" />

          <span className="comet-home__bar-name">Comet Skill · /comet</span>
          <span className="comet-home__bar-path">\~/projects/your-app</span>
        </span>

        <span className="comet-home__bar-tool" aria-hidden="true">◐</span>
      </div>

      <div className="comet-home__screen">
        <img src="https://mintcdn.com/comet-bb5f5294/KBFveG8M9gQs8AYV/img/comet-zero-resume.png?fit=max&auto=format&n=KBFveG8M9gQs8AYV&q=85&s=1aa375368a7fa413293f89df0213b7f5" alt="Comet detects two active changes in the design phase and asks which change to resume" width="2398" height="1565" loading="lazy" decoding="async" data-path="img/comet-zero-resume.png" />
      </div>
    </div>
  </section>

  <section className="comet-home__feature comet-home__feature--reverse" aria-labelledby="comet-eval-title">
    <div className="comet-home__copy" data-reveal="true" data-reveal-delay="110" data-reveal-distance="38">
      <p className="comet-home__label" translate="no">Comet Eval</p>
      <h2 id="comet-eval-title">Validate every Skill<br />with real tasks</h2>

      <p className="comet-home__copy-lede">
        Comet Eval uses a dual-agent evaluation architecture. The agent under test runs the Skill while a user-simulation agent responds at decision points.
        The <code translate="no">--resume</code> option continues the same session so multi-phase workflows can run end to end.
        Give any local Skill to <code translate="no">comet eval</code> to run real tasks in an isolated environment and produce browsable results, multidimensional scores, and failure attribution.
      </p>

      <ul className="comet-home__bullets">
        <li><strong>LangSmith / Langfuse integration</strong> — Send traces, datasets, and scores to LangSmith or Langfuse for cross-run observability, comparison, and review.</li>
        <li><strong>Production-ready evaluation</strong> — Run real tasks in isolated environments with multidimensional rubrics, Pass\@k / Pass^k, and failure attribution across Harness / Workflow / Task / Model layers.</li>
        <li><strong>Evidence-driven Skill iteration</strong> — Replace intuition with measurable evidence that informs whether a Skill should ship and how it should evolve.</li>
      </ul>

      <a className="comet-home__text-link" href="/en/eval/quickstart">
        Run your first evaluation
        <span aria-hidden="true">→</span>
      </a>
    </div>

    <div className="comet-home__window" data-reveal="true" data-reveal-distance="42" role="group" aria-label="Comet Eval report interface">
      <div className="comet-home__bar">
        <span className="comet-home__dots" aria-hidden="true">
          <i />

          <i />

          <i />
        </span>

        <span className="comet-home__bar-title">
          <img src="https://mintcdn.com/comet-bb5f5294/anG611vGlISWXx6u/logo/favicon.png?fit=max&auto=format&n=anG611vGlISWXx6u&q=85&s=5cc1f88cea1d61472b3594828f256c5a" alt="" className="comet-home__bar-logo" width="16" height="16" data-path="logo/favicon.png" />

          <span className="comet-home__bar-name">Comet Eval · Test Suite Results</span>
          <span className="comet-home__bar-path">comet-skill-eval / pass5</span>
        </span>

        <span className="comet-home__bar-tool" aria-hidden="true">◐</span>
      </div>

      <div className="comet-home__screen">
        <img src="https://mintcdn.com/comet-bb5f5294/BQ7yNyTYEsdoUsMj/img/langsmith-home.png?fit=max&auto=format&n=BQ7yNyTYEsdoUsMj&q=85&s=8bdccfba2f49e6327770c4b4b27f483f" alt="Comet Eval overview of experiments, datasets, and multidimensional scores" width="2549" height="1197" loading="lazy" decoding="async" data-path="img/langsmith-home.png" />
      </div>
    </div>
  </section>

  <section className="comet-home__feature" aria-labelledby="comet-any-title">
    <div className="comet-home__copy" data-reveal="true" data-reveal-distance="38">
      <p className="comet-home__label" translate="no">Skill Creator</p>
      <h2 id="comet-any-title">Turn how you work<br />into a reusable Skill</h2>

      <p className="comet-home__copy-lede">
        Use <code translate="no">/comet-any</code> to create, compose, or refine any Skill.
        Confirm the approach and Workflow Contract before evaluation, publishing, and distribution, turning one-off experience into a reusable capability.
      </p>

      <ul className="comet-home__bullets">
        <li><strong>Compose any Skill</strong> — Orchestrate existing Skills such as brainstorming, writing-plans, and TDD into a new workflow.</li>
        <li><strong>Workflow Contract</strong> — Agree on phases, confirmation points, and deliverables before implementation begins.</li>
        <li><strong>Evaluate and publish</strong> — Evaluate, package, and publish directly after creation, with every Skill revision remaining traceable.</li>
      </ul>

      <a className="comet-home__text-link" href="/en/skill-creator/getting-started">
        Create a Skill
        <span aria-hidden="true">→</span>
      </a>
    </div>

    <div className="comet-home__window comet-home__window--terminal" data-reveal="true" data-reveal-delay="110" data-reveal-distance="42" role="group" aria-label="Session creating a reusable Skill with /comet-any">
      <div className="comet-home__bar">
        <span className="comet-home__dots" aria-hidden="true">
          <i />

          <i />

          <i />
        </span>

        <span className="comet-home__bar-title">
          <img src="https://mintcdn.com/comet-bb5f5294/anG611vGlISWXx6u/logo/favicon.png?fit=max&auto=format&n=anG611vGlISWXx6u&q=85&s=5cc1f88cea1d61472b3594828f256c5a" alt="" className="comet-home__bar-logo" width="16" height="16" data-path="logo/favicon.png" />

          <span className="comet-home__bar-name">Comet · /comet-any</span>
          <span className="comet-home__bar-path">skill: repo-summarizer</span>
        </span>

        <span className="comet-home__bar-tool" aria-hidden="true">◐</span>
      </div>

      <div className="comet-home__screen comet-home__screen--term" translate="no">
        <div className="comet-home__term">
          <div className="comet-home__term-line"><span className="t-prompt">{"$"}</span> <span className="t-cmd">/comet-any</span> turn repo-summarizer into a reusable Skill</div>
          <div className="comet-home__term-line"><span className="t-dim">▸ brainstorming · define the Skill goal, inputs, and boundaries</span></div>
          <div className="comet-home__term-line"><span className="t-ok">✓ Plan confirmed</span>　<span className="t-dim">Workflow Contract generated</span></div>

          <div className="comet-home__term-gap" />

          <div className="comet-home__term-line"><span className="t-prompt">{"$"}</span> <span className="t-cmd">comet eval</span> <span className="t-flag">--skill</span> repo-summarizer <span className="t-flag">--rubric</span> quality,correctness</div>
          <div className="comet-home__term-line"><span className="t-ok">✓ pass</span> <span className="t-score">4 / 5</span>　<span className="t-dim">artifact\_quality 0.88 · average 0.84</span></div>

          <div className="comet-home__term-gap" />

          <div className="comet-home__term-line"><span className="t-prompt">{"$"}</span> <span className="t-cmd">comet publish</span> <span className="t-flag">--skill</span> repo-summarizer</div>
          <div className="comet-home__term-line"><span className="t-ok">✓ Published</span>　<span className="t-dim">v1.0.0 · reusable in any project</span></div>
        </div>
      </div>
    </div>
  </section>

  <section className="comet-home__blocks" aria-labelledby="comet-blocks-title">
    <div className="comet-home__blocks-head" data-reveal="true" data-reveal-distance="36">
      <p className="comet-home__label" translate="no">Why Comet</p>
      <h2 id="comet-blocks-title">Engineering scaffolding for reliable long-running work</h2>

      <p className="comet-home__blocks-sub">
        ReAct handles single-turn reasoning. Comet adds state management, phase guards, and result evaluation for the complete workflow,
        moving work reliably from idea to archive.
      </p>
    </div>

    <ul className="comet-home__blocks-grid" data-reveal="true" data-reveal-distance="30">
      <li className="comet-home__block">
        <span className="comet-home__block-no" translate="no">01</span>
        <h3>Phase guards</h3>
        <p>Phase boundaries, confirmation points, and verification requirements prevent critical steps from being skipped and block out-of-phase operations.</p>
      </li>

      <li className="comet-home__block">
        <span className="comet-home__block-no" translate="no">02</span>
        <h3>Recoverable state</h3>
        <p>Phases, decisions, evidence, and failures are stored in the project so work can continue after interruptions, compression, or device changes.</p>
      </li>

      <li className="comet-home__block">
        <span className="comet-home__block-no" translate="no">03</span>
        <h3>Intent routing</h3>
        <p><code translate="no">/comet</code> reads project configuration, active state, and current intent to enter the correct workflow and continue existing work.</p>
      </li>

      <li className="comet-home__block">
        <span className="comet-home__block-no" translate="no">04</span>
        <h3>Evaluation-driven</h3>
        <p>Real-task scores and failure attribution replace “it feels usable” with measurable progress.</p>
      </li>

      <li className="comet-home__block">
        <span className="comet-home__block-no" translate="no">05</span>
        <h3>Context compression</h3>
        <p>Goals, decisions, state, evidence, and next steps are stored in a structured form so the context needed to continue survives conversation compression.</p>
      </li>

      <li className="comet-home__block">
        <span className="comet-home__block-no" translate="no">06</span>
        <h3>Skill composition</h3>
        <p>Orchestrate existing Skills into new workflows and turn them into reusable capabilities that can be evaluated and published.</p>
      </li>
    </ul>
  </section>

  <section className="comet-home__platforms" data-reveal="true" data-reveal-threshold="0.1" data-reveal-distance="38" aria-labelledby="comet-platforms-title">
    <p className="comet-home__label" translate="no">33 platforms</p>
    <h2 id="comet-platforms-title">Run in the tools you already use</h2>

    <p className="comet-home__platforms-sub">
      Comet supports 33 AI coding platforms. The initialization wizard installs and configures Comet for each detected platform.
    </p>

    <div className="comet-home__platforms-marquee" aria-label="33 AI coding platforms supported by Comet" translate="no">
      <div className="comet-home__platforms-row">
        <div className="comet-home__platforms-track">
          <div className="comet-home__platforms-group">
            <span>Claude Code</span>
            <span>Codex</span>
            <span>Amazon Q Developer</span>
            <span>Windsurf</span>
            <span>GitHub Copilot</span>
            <span>Gemini CLI</span>
            <span>Qwen Code</span>
            <span>Qoder</span>
            <span>Kiro</span>
            <span>CodeBuddy Code</span>
            <span>Cursor</span>
          </div>

          <div className="comet-home__platforms-group" aria-hidden="true">
            <span>Claude Code</span>
            <span>Codex</span>
            <span>Amazon Q Developer</span>
            <span>Windsurf</span>
            <span>GitHub Copilot</span>
            <span>Gemini CLI</span>
            <span>Qwen Code</span>
            <span>Qoder</span>
            <span>Kiro</span>
            <span>CodeBuddy Code</span>
            <span>Cursor</span>
          </div>
        </div>
      </div>

      <div className="comet-home__platforms-row comet-home__platforms-row--reverse">
        <div className="comet-home__platforms-track">
          <div className="comet-home__platforms-group">
            <span>OpenCode</span>
            <span>Cline</span>
            <span>RooCode</span>
            <span>Continue</span>
            <span>Kilo Code</span>
            <span>Auggie</span>
            <span>Lingma</span>
            <span>Trae</span>
            <span>Trae CN</span>
            <span>ZCode</span>
            <span>MimoCode</span>
          </div>

          <div className="comet-home__platforms-group" aria-hidden="true">
            <span>OpenCode</span>
            <span>Cline</span>
            <span>RooCode</span>
            <span>Continue</span>
            <span>Kilo Code</span>
            <span>Auggie</span>
            <span>Lingma</span>
            <span>Trae</span>
            <span>Trae CN</span>
            <span>ZCode</span>
            <span>MimoCode</span>
          </div>
        </div>
      </div>

      <div className="comet-home__platforms-row comet-home__platforms-row--slow">
        <div className="comet-home__platforms-track">
          <div className="comet-home__platforms-group">
            <span>Kimi Code</span>
            <span>Junie</span>
            <span>CoStrict</span>
            <span>Crush</span>
            <span>Factory Droid</span>
            <span>iFlow</span>
            <span>Pi</span>
            <span>Antigravity</span>
            <span>Antigravity 2.0</span>
            <span>Bob Shell</span>
            <span>ForgeCode</span>
          </div>

          <div className="comet-home__platforms-group" aria-hidden="true">
            <span>Kimi Code</span>
            <span>Junie</span>
            <span>CoStrict</span>
            <span>Crush</span>
            <span>Factory Droid</span>
            <span>iFlow</span>
            <span>Pi</span>
            <span>Antigravity</span>
            <span>Antigravity 2.0</span>
            <span>Bob Shell</span>
            <span>ForgeCode</span>
          </div>
        </div>
      </div>
    </div>

    <a className="comet-home__text-link" href="/en/platforms">
      View all platforms
      <span aria-hidden="true">→</span>
    </a>
  </section>

  <section className="comet-home__setup" data-reveal="true" data-reveal-threshold="0.08" data-reveal-distance="38" data-setup-demo aria-labelledby="comet-setup-title">
    <div className="comet-home__setup-head">
      <p className="comet-home__label" translate="no">Live setup</p>
      <h2 id="comet-setup-title">From npm install to your first <span translate="no">/comet</span></h2>

      <p>
        Install Comet and initialize the current project.<br />
        Then call <code translate="no">/comet</code> in your existing AI coding tool to begin.
      </p>
    </div>

    <div className="comet-home__setup-layout">
      <div className="comet-home__window comet-home__window--terminal comet-home__setup-terminal" aria-label="Comet installation and initialization trace">
        <div className="comet-home__bar comet-home__setup-bar">
          <span className="comet-home__dots" aria-hidden="true">
            <i />

            <i />

            <i />
          </span>

          <span className="comet-home__bar-title" translate="no">
            <img src="https://mintcdn.com/comet-bb5f5294/anG611vGlISWXx6u/logo/favicon.png?fit=max&auto=format&n=anG611vGlISWXx6u&q=85&s=5cc1f88cea1d61472b3594828f256c5a" alt="" className="comet-home__bar-logo" width="16" height="16" data-path="logo/favicon.png" />

            <span className="comet-home__bar-name">Comet · setup</span>
            <span className="comet-home__bar-path" data-setup-status>npm install</span>
          </span>

          <span className="comet-home__bar-tool" aria-hidden="true">◐</span>
        </div>

        <div className="comet-home__setup-viewport" data-setup-viewport translate="no">
          <div className="comet-home__setup-line comet-home__setup-line--command" data-setup-line data-setup-stage="install" data-setup-pause="360">
            <span className="t-prompt">\$</span>
            <span><span className="t-cmd">npm install</span> <span className="t-flag">-g</span> <span className="t-value">@rpamis/comet</span></span>
          </div>

          <div className="comet-home__setup-line" data-setup-line data-setup-stage="install" data-setup-pause="920">
            <span className="t-ok">✓</span>
            <span>changed 212 packages in 14s</span>
          </div>

          <div className="comet-home__setup-line comet-home__setup-line--spacer" data-setup-line data-setup-stage="install" data-setup-pause="420" aria-hidden="true" />

          <div className="comet-home__setup-line comet-home__setup-line--command" data-setup-line data-setup-stage="init" data-setup-pause="520">
            <span className="t-prompt">\$</span>
            <span className="t-cmd">comet init</span>
          </div>

          <div className="comet-home__setup-line" data-setup-line data-setup-stage="init" data-setup-pause="780">
            <span className="t-dim">◆</span>
            <span>scope: project · language: en · workflow: native</span>
          </div>

          <div className="comet-home__setup-line" data-setup-line data-setup-stage="init" data-setup-pause="560">
            <span className="t-value">Comet</span>
            <span><span data-docs-version>latest</span> · You are on the latest version.</span>
          </div>

          <div className="comet-home__setup-line" data-setup-line data-setup-stage="init" data-setup-pause="620">
            <span className="t-dim">›</span>
            <span>Setting up Comet: ./my-project</span>
          </div>

          <div className="comet-home__setup-line" data-setup-line data-setup-stage="init" data-setup-pause="680">
            <span className="t-ok">✓</span>
            <span>Comet → Claude Code <span className="t-dim">(20 files)</span></span>
          </div>

          <div className="comet-home__setup-line" data-setup-line data-setup-stage="init" data-setup-pause="420">
            <span className="t-ok">✓</span>
            <span>Rules + phase guard hook installed</span>
          </div>

          <div className="comet-home__setup-line" data-setup-line data-setup-stage="init" data-setup-pause="460">
            <span className="t-ok">✓</span>
            <span>Comet → Cursor <span className="t-dim">(20 files)</span></span>
          </div>

          <div className="comet-home__setup-line" data-setup-line data-setup-stage="init" data-setup-pause="460">
            <span className="t-ok">✓</span>
            <span>Comet → Codex <span className="t-dim">(20 files)</span></span>
          </div>

          <div className="comet-home__setup-line" data-setup-line data-setup-stage="init" data-setup-pause="520">
            <span className="t-dim">…</span>
            <span>Other supported platforms configured</span>
          </div>

          <div className="comet-home__setup-line" data-setup-line data-setup-stage="ready" data-setup-pause="720">
            <span className="t-ok">✓</span>
            <span>Native workspace: <span className="t-value">docs/comet/</span></span>
          </div>

          <div className="comet-home__setup-line comet-home__setup-line--success" data-setup-line data-setup-stage="ready" data-setup-pause="680">
            <span className="t-ok">✓</span>
            <span>Comet setup complete! <span className="t-dim">(scope: project)</span></span>
          </div>

          <div className="comet-home__setup-line comet-home__setup-line--spacer" data-setup-line data-setup-stage="ready" data-setup-pause="380" aria-hidden="true" />

          <div className="comet-home__setup-line comet-home__setup-line--command" data-setup-line data-setup-stage="ready" data-setup-pause="520">
            <span className="t-prompt">\$</span>
            <span><span className="t-cmd">/comet</span> <span className="t-value">"your idea"</span></span>

            <span className="comet-home__setup-cursor" aria-hidden="true" />
          </div>
        </div>
      </div>

      <ol className="comet-home__setup-stages" aria-label="Comet setup stages">
        <li data-setup-stage-card="install" aria-current="step">
          <span className="comet-home__setup-step" translate="no">01</span>

          <div>
            <h3>Install the CLI</h3>
            <p>Install <code translate="no">@rpamis/comet</code> globally with npm so the Comet command is available in your terminal.</p>
          </div>
        </li>

        <li data-setup-stage-card="init" aria-current="false">
          <span className="comet-home__setup-step" translate="no">02</span>

          <div>
            <h3>Initialize the project</h3>
            <p>The wizard writes Skills, rules, and phase guards, then configures every detected platform.</p>
          </div>
        </li>

        <li data-setup-stage-card="ready" aria-current="false">
          <span className="comet-home__setup-step" translate="no">03</span>

          <div>
            <h3>Start working</h3>
            <p>After setup, call <code translate="no">/comet</code> directly in the AI coding tool you already use.</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section className="comet-home__handoff" data-reveal="true" data-reveal-threshold="0.18" data-reveal-distance="24" aria-labelledby="comet-handoff-title">
    <span className="comet-home__handoff-mark" aria-hidden="true" />

    <p className="comet-home__label" translate="no">Ready for work</p>
    <h2 id="comet-handoff-title">Ready to begin?</h2>

    <p className="comet-home__handoff-copy">
      Comet guards each phase, preserves state, and evaluates results.<br />
      Bring your next task and start from there.
    </p>
  </section>

  <section className="comet-home__capabilities" data-reveal="true" data-reveal-threshold="0.12" data-reveal-distance="38" aria-label="Comet product capabilities">
    <div className="comet-home__capability-grid">
      <div className="comet-home__capability-card" role="group" aria-labelledby="comet-capability-skill">
        <div className="comet-home__capability-visual comet-home__capability-visual--skill" aria-hidden="true">
          <div className="comet-home__capability-trail" />

          <div className="comet-home__mini-window comet-home__mini-window--dark">
            <div className="comet-home__mini-bar">
              <span className="comet-home__mini-bar-dots">
                <span />

                <span />

                <span />
              </span>

              <span className="comet-home__mini-bar-title" translate="no">Comet Skill</span>
            </div>

            <div className="comet-home__mini-terminal" translate="no">
              <p>
                <span className="t-prompt" aria-hidden="true">\$</span>

                <span className="comet-home__mini-line-copy">
                  <strong className="comet-home__mini-code">/comet</strong>
                  <span className="comet-home__mini-ui-text">“Add login rate limiting”</span>
                </span>
              </p>

              <p>
                <span className="t-score">◆</span>

                <span className="comet-home__mini-line-copy">
                  <span className="comet-home__mini-ui-text">Phase:</span>
                  <span className="comet-home__mini-code">DESIGN</span>
                </span>
              </p>

              <p>
                <span className="t-check">✓</span>

                <span className="comet-home__mini-line-copy">
                  <span className="comet-home__mini-code">checkpoint</span>
                  <span className="comet-home__mini-ui-text">saved</span>
                </span>
              </p>

              <p>
                <span className="t-value">→</span>
                <span className="comet-home__mini-ui-text">Resume after interruption</span>
              </p>
            </div>
          </div>
        </div>

        <h2 id="comet-capability-skill" translate="no">Comet Skill</h2>
        <p>Keep agents within phase boundaries, preserve state, and continue long-running work after interruptions.</p>
      </div>

      <div className="comet-home__capability-card" role="group" aria-labelledby="comet-capability-eval">
        <div className="comet-home__capability-visual comet-home__capability-visual--eval" aria-hidden="true">
          <div className="comet-home__mini-window comet-home__mini-window--eval">
            <div className="comet-home__mini-bar">
              <span className="comet-home__mini-bar-dots">
                <span />

                <span />

                <span />
              </span>

              <span className="comet-home__mini-bar-title" translate="no">Comet Eval</span>
            </div>

            <div className="comet-home__eval-panel" translate="no">
              <div className="comet-home__eval-query">repo-summarizer · run #24</div>
              <p><i /><strong>Agent under test</strong><span>Skill run complete</span></p>
              <p><i /><strong>User-simulation agent</strong><span>Decision points replayed</span></p>

              <div className="comet-home__eval-score">
                <span>pass <strong>4 / 5</strong></span>
                <span>quality <strong>0.88</strong></span>
              </div>

              <div className="comet-home__eval-evidence">Failure cause and evaluation evidence archived</div>
            </div>
          </div>
        </div>

        <h2 id="comet-capability-eval" translate="no">Comet Eval</h2>
        <p>Run real tasks with a dual-agent architecture and produce scores, evidence, and failure causes.</p>
      </div>

      <div className="comet-home__capability-card" role="group" aria-labelledby="comet-capability-any">
        <div className="comet-home__capability-visual comet-home__capability-visual--any" aria-hidden="true">
          <div className="comet-home__creator-panel">
            <div className="comet-home__creator-head">
              <img src="https://mintcdn.com/comet-bb5f5294/anG611vGlISWXx6u/logo/favicon.png?fit=max&auto=format&n=anG611vGlISWXx6u&q=85&s=5cc1f88cea1d61472b3594828f256c5a" alt="" width="18" height="18" data-path="logo/favicon.png" />

              <span translate="no">Skill Creator</span>
            </div>

            <div className="comet-home__creator-input" translate="no">
              <span className="comet-home__mini-code">/comet-any</span>
              <span className="comet-home__mini-ui-text">Create a publishing workflow</span>
            </div>

            <div className="comet-home__creator-flow" translate="no">
              <span>brainstorming</span>
              <b>→</b>
              <span>writing-plans</span>
              <b>→</b>
              <span>tdd</span>
            </div>

            <div className="comet-home__creator-result">
              <span className="comet-home__creator-result-copy">
                <span className="comet-home__creator-result-label" translate="no">Reusable Skill</span>
                <span className="comet-home__creator-result-name">Publishing workflow</span>
              </span>

              <span className="comet-home__creator-result-badge">Ready</span>
            </div>
          </div>
        </div>

        <h2 id="comet-capability-any" translate="no">Comet Any</h2>
        <p>Compose or refine existing Skills into reusable capabilities that can be evaluated and published.</p>
      </div>
    </div>
  </section>

  <div className="comet-home__footer" role="contentinfo">
    <div className="comet-home__footer-meta">
      <div className="comet-home__lockup comet-home__lockup--sm" translate="no">
        <img src="https://mintcdn.com/comet-bb5f5294/anG611vGlISWXx6u/logo/favicon.png?fit=max&auto=format&n=anG611vGlISWXx6u&q=85&s=5cc1f88cea1d61472b3594828f256c5a" alt="" className="comet-home__lockup-mark" width="22" height="22" data-path="logo/favicon.png" />

        <span>Comet</span>
      </div>

      <span className="comet-home__copyright" translate="no">Copyright © 2026, Comet.</span>
    </div>

    <div className="comet-home__footer-nav" role="navigation" aria-label="Product homepage footer navigation">
      <a href="/en/index">Docs</a>
      <a href="/en/changelog">Changelog</a>
      <a href="/en/tech-blog">Tech blog</a>

      <div className="comet-home__footer-socials" aria-label="Comet social media and contact links">
        <a className="comet-home__footer-social" href="https://github.com/rpamis/comet" aria-label="GitHub" title="GitHub">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 .7a11.5 11.5 0 0 0-3.64 22.41c.58.11.79-.25.79-.56v-2.22c-3.22.7-3.9-1.37-3.9-1.37-.52-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.71.08-.71 1.17.08 1.78 1.2 1.78 1.2 1.04 1.78 2.72 1.27 3.38.97.1-.75.4-1.27.74-1.56-2.57-.29-5.27-1.28-5.27-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.47.11-3.06 0 0 .97-.31 3.16 1.18a10.96 10.96 0 0 1 5.76 0c2.2-1.49 3.16-1.18 3.16-1.18.63 1.59.23 2.77.11 3.06.74.81 1.19 1.83 1.19 3.09 0 4.41-2.71 5.38-5.29 5.67.42.36.79 1.06.79 2.14v3.18c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .7Z" />
          </svg>
        </a>

        <a className="comet-home__footer-social" href="https://x.com/rpamis" aria-label="X" title="X" target="_blank" rel="noreferrer">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z" />
          </svg>
        </a>

        <a className="comet-home__footer-social" href="mailto:benyuanming@gmail.com" aria-label="Email" title="benyuanming@gmail.com">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5-8-5V6l8 5 8-5v2Z" />
          </svg>
        </a>

        <button type="button" className="comet-home__footer-social comet-home__footer-social--qr" aria-label="Show WeChat group QR code">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zm-2.906 3.803c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.27-.027-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z" />
          </svg>

          <span className="comet-home__footer-qr" role="tooltip">
            <img src="https://mintcdn.com/comet-bb5f5294/BQ7yNyTYEsdoUsMj/img/community-wechat.png?fit=max&auto=format&n=BQ7yNyTYEsdoUsMj&q=85&s=7c5354f20ac1707b4a7f43cfc1040821" alt="Comet WeChat group QR code" width="132" height="132" data-path="img/community-wechat.png" />

            <span>WeChat group</span>
          </span>
        </button>

        <button type="button" className="comet-home__footer-social comet-home__footer-social--qr" aria-label="Show Douyin group QR code">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" />
          </svg>

          <span className="comet-home__footer-qr" role="tooltip">
            <img src="https://mintcdn.com/comet-bb5f5294/BQ7yNyTYEsdoUsMj/img/community-douyin.png?fit=max&auto=format&n=BQ7yNyTYEsdoUsMj&q=85&s=d8ca25eaae04a6d6f87fa2e5f5471efc" alt="Comet Douyin group QR code" width="132" height="132" data-path="img/community-douyin.png" />

            <span>Douyin group</span>
          </span>
        </button>

        <button type="button" className="comet-home__footer-social comet-home__footer-social--qr" aria-label="Show QQ group QR code">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673" />
          </svg>

          <span className="comet-home__footer-qr" role="tooltip">
            <img src="https://mintcdn.com/comet-bb5f5294/BQ7yNyTYEsdoUsMj/img/community-qq.jpg?fit=max&auto=format&n=BQ7yNyTYEsdoUsMj&q=85&s=5e371071e749e5595daf8484cb19a0c1" alt="Comet QQ group QR code" width="132" height="132" data-path="img/community-qq.jpg" />

            <span>QQ group</span>
          </span>
        </button>

        <button type="button" className="comet-home__footer-social comet-home__footer-social--qr" aria-label="Show Sponsor QR code">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M20 6h-2.18A3 3 0 0 0 12 4.18 3 3 0 0 0 6.18 6H4a2 2 0 0 0-2 2v2h9V8h2v2h9V8a2 2 0 0 0-2-2ZM9 6a1 1 0 1 1 2 0H9Zm4 0a1 1 0 1 1 2 0h-2ZM2 12h9v10H4a2 2 0 0 1-2-2v-8Zm11 10V12h9v8a2 2 0 0 1-2 2h-7Z" />
          </svg>

          <span className="comet-home__footer-qr comet-home__footer-qr--sponsor" role="tooltip">
            <img src="https://mintcdn.com/comet-bb5f5294/BQ7yNyTYEsdoUsMj/img/sponsor.jpeg?fit=max&auto=format&n=BQ7yNyTYEsdoUsMj&q=85&s=e7bbbeb17c55b16f9b85f3506685e019" alt="Comet Sponsor QR code" width="140" height="198" data-path="img/sponsor.jpeg" />

            <span>Sponsor</span>
          </span>
        </button>
      </div>
    </div>
  </div>
</div>