Bring the landing site into the repo as site/

Vite 8 vanilla page for omarchycn.zacharyzhang.com: kami palette on a 12-col Swiss grid, self-hosted Fusion Pixel zh_hans (OFL shipped), GSAP ScrollSmoother/ScrollTrigger with reduced-motion opt-out, reicon icons, ISO download plus one-click convert command copy, real installer screenshot. shots.mjs is the rendered-state harness; deploy is npx wrangler deploy from site/ (custom domain + workers.dev). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019hLK3wsDuKVAC37GgDqg6H
2026-08-27 20:07:43 -04:00
parent f72a48f747
commit f9c9b3c364
14 changed files with 2044 additions and 0 deletions
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+shots/
+TASKS.md
+.wrangler/
@@ -0,0 +1,117 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OmarchyCN · 为中国重铸的 Omarchy</title>
+    <meta name="description" content="OmarchyCN：华丽、现代、观点鲜明的 Arch + Hyprland 桌面，中国版。下载 ISO 全新安装，或一条命令把原版 Omarchy 转换为 OmarchyCN。" />
+    <link rel="icon" href="/favicon.svg" />
+    <link rel="preload" href="/fonts/fusion-pixel-12px-proportional-zh_hans.otf.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="/fonts/fusion-pixel-12px-monospaced-zh_hans.otf.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="stylesheet" href="/src/style.css" />
+  </head>
+  <body>
+    <div id="smooth-wrapper">
+      <div id="smooth-content">
+        <div class="wrap">
+          <header class="band topbar">
+            <p class="brand" style="grid-column: 1 / 7">OMARCHY CN</p>
+            <nav class="topnav" style="grid-column: 7 / 13" aria-label="站点">
+              <a href="https://git.zacharyzhang.com/ZacharyZhang-NY/omarchycn/src/branch/quattro/manual/zh-cn/01-install.md">手册</a>
+              <a href="https://git.zacharyzhang.com/ZacharyZhang-NY/omarchycn/releases">发布</a>
+              <a href="https://git.zacharyzhang.com/ZacharyZhang-NY/omarchycn">源码</a>
+            </nav>
+          </header>
+
+          <main>
+            <section class="band hero" aria-labelledby="hero-title">
+              <p class="eyebrow" style="grid-column: 1 / 13">OMARCHY CN · 4.0.0.alpha-cn.6</p>
+              <h1 id="hero-title" style="grid-column: 1 / 12">
+                <span class="line">华丽、现代、观点鲜明</span><span class="line">的 Linux。中国版。</span>
+              </h1>
+              <p class="lede" style="grid-column: 1 / 9">
+                基于 Arch + Hyprland 的 Omarchy 下游发行版：中文体验、国内软件源与 AI 工具链，开箱即用。
+              </p>
+
+              <div class="actions" style="grid-column: 1 / 13">
+                <a
+                  class="btn"
+                  href="https://git.zacharyzhang.com/ZacharyZhang-NY/omarchycn/releases/download/4.0.0.alpha-cn.6/omarchy-2026.08.27-x86_64-local.iso"
+                >
+                  <span class="i" data-icon="Download" aria-hidden="true"></span>下载 ISO<span class="btn-meta">5.9 GB</span>
+                </a>
+                <div class="convert">
+                  <p class="cmd-label" id="cmd-label">已有原版 Omarchy？一键转换：</p>
+                  <div class="cmd" aria-labelledby="cmd-label">
+                    <code id="cmd-text">curl -fsSL https://git.zacharyzhang.com/ZacharyZhang-NY/omarchycn/raw/branch/quattro/bin/omarchy-cn-convert | bash</code>
+                    <button class="copy" id="copy-btn" type="button" aria-label="复制转换命令">
+                      <span class="i" data-icon="Copy" aria-hidden="true"></span><span class="copy-text">复制</span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <p class="meta mono" style="grid-column: 1 / 13">
+                上游基线 basecamp/omarchy quattro · sha256 4c1cc4a2…60bcca · 转换可随时 omarchy cn revert 还原
+              </p>
+            </section>
+
+            <section class="band shotband" aria-label="安装器截图">
+              <figure class="shot" style="grid-column: 1 / 13">
+                <img src="/shot.png" width="1280" height="800" alt="OmarchyCN 安装器欢迎屏：像素风 OMARCHY CN 字标，按回车开始安装" loading="lazy" />
+                <figcaption class="mono">UEFI 安装器 · 全程中文 · 无人值守可选</figcaption>
+              </figure>
+            </section>
+
+            <section class="band feats" aria-label="特性">
+              <article class="feat" style="grid-column: 1 / 4">
+                <p class="num mono">01</p>
+                <h2>开箱中文</h2>
+                <p>安装器、菜单、键位说明、Fcitx5 + Rime 输入法与 CJK 字体，全程 zh_CN。</p>
+              </article>
+              <article class="feat" style="grid-column: 4 / 7">
+                <p class="num mono">02</p>
+                <h2>国内软件源</h2>
+                <p>上游 [omarchy] 仓库自建镜像每 6 小时同步，Cloudflare 原源兜底。</p>
+              </article>
+              <article class="feat" style="grid-column: 7 / 10">
+                <p class="num mono">03</p>
+                <h2>AI 全家桶</h2>
+                <p>DeepSeek、Kimi、GLM、MiniMax 与本地 Ollama；Claude Code 到 DSH 一键就位。</p>
+              </article>
+              <article class="feat" style="grid-column: 10 / 13">
+                <p class="num mono">04</p>
+                <h2>随时回退</h2>
+                <p>转换前状态全程记录，omarchy cn revert 一条命令还原为原版。</p>
+              </article>
+            </section>
+
+            <section class="band verify" aria-labelledby="verify-title">
+              <h2 id="verify-title" style="grid-column: 1 / 4">校验</h2>
+              <dl class="mono" style="grid-column: 4 / 13">
+                <div><dt>sha256</dt><dd>4c1cc4a2726a28c6f2e548234be13381556bc2e9da9b7426d02c821bbd60bcca</dd></div>
+                <div><dt>签名子钥</dt><dd>PGP 211B9B82E17CFB67</dd></div>
+                <div>
+                  <dt>清单</dt>
+                  <dd><a href="https://git.zacharyzhang.com/ZacharyZhang-NY/omarchycn/releases/download/4.0.0.alpha-cn.6/SHA256SUMS.txt">SHA256SUMS.txt</a> · <a href="https://git.zacharyzhang.com/ZacharyZhang-NY/omarchycn/releases/download/4.0.0.alpha-cn.6/SHA256SUMS.txt.asc">SHA256SUMS.txt.asc</a></dd>
+                </div>
+              </dl>
+            </section>
+          </main>
+
+          <footer class="band foot">
+            <p style="grid-column: 1 / 8">
+              OmarchyCN 是独立社区发行版，与 Basecamp、37signals 及 Omarchy 官方无隶属关系。代码沿用上游 MIT 许可证。
+            </p>
+          </footer>
+
+          <div class="guides" aria-hidden="true">
+            <div class="cols"></div>
+            <div class="rows"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
@@ -0,0 +1,19 @@
+{
+  "name": "omarchycn-site",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "puppeteer-core": "^25.9.0",
+    "vite": "^8.2.2"
+  },
+  "dependencies": {
+    "gsap": "^3.15.0",
+    "reicon": "^1.2.1"
+  }
+}
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="#1B365D"/><path fill-rule="evenodd" d="M8 8h16v16H8Zm4 4v8h8v-8Z" fill="#f5f4ed"/></svg>
@@ -0,0 +1,96 @@
+Fusion Pixel Font
+https://github.com/TakWolf/fusion-pixel-font
+
+Copyright (c) 2022, TakWolf (https://takwolf.com).
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
@@ -0,0 +1,70 @@
+// Rendered-state verification: full-page shots at key widths + interaction states
+import puppeteer from "puppeteer-core";
+import { mkdirSync } from "node:fs";
+
+const CHROME = process.env.CHROME;
+const BASE = process.env.BASE ?? "http://localhost:4173";
+if (!CHROME) throw new Error("CHROME env (chrome.exe path) is required");
+
+mkdirSync("shots", { recursive: true });
+const browser = await puppeteer.launch({ executablePath: CHROME, headless: "new" });
+
+const page = await browser.newPage();
+// Layout passes: reduced motion = static truth of the full page
+await page.emulateMediaFeatures([{ name: "prefers-reduced-motion", value: "reduce" }]);
+for (const w of [1440, 1280, 960, 375]) {
+  await page.setViewport({ width: w, height: 900 });
+  await page.goto(BASE, { waitUntil: "networkidle0" });
+  await page.evaluate(() => document.fonts.ready);
+  await new Promise((r) => setTimeout(r, 1400));
+  await page.screenshot({ path: `shots/w${w}.png`, fullPage: true });
+  console.log(`shot w${w}`);
+}
+
+// Motion pass: real scroll, reveals must land every section at opacity 1
+await page.emulateMediaFeatures([{ name: "prefers-reduced-motion", value: "no-preference" }]);
+await page.setViewport({ width: 1440, height: 900 });
+await page.goto(BASE, { waitUntil: "networkidle0" });
+await new Promise((r) => setTimeout(r, 1200));
+await page.evaluate(async () => {
+  for (let y = 0; y <= document.body.scrollHeight; y += 300) {
+    window.scrollTo(0, y);
+    await new Promise((r) => setTimeout(r, 60));
+  }
+});
+await new Promise((r) => setTimeout(r, 1200));
+const opacities = await page.evaluate(() =>
+  [".shot", ".feat", ".verify h2", ".foot p"].map(
+    (s) => `${s}=${getComputedStyle(document.querySelector(s)).opacity}`,
+  ),
+);
+console.log("post-scroll opacities:", opacities.join(" "));
+await page.screenshot({ path: "shots/motion-bottom.png" });
+
+await page.setViewport({ width: 1440, height: 900 });
+await page.goto(BASE, { waitUntil: "networkidle0" });
+await new Promise((r) => setTimeout(r, 1400));
+
+await page.keyboard.press("g");
+await new Promise((r) => setTimeout(r, 300));
+await page.screenshot({ path: "shots/grid-overlay.png", fullPage: false });
+console.log("shot grid-overlay");
+await page.keyboard.press("g");
+
+const ctx = browser.defaultBrowserContext();
+await ctx.overridePermissions(BASE, ["clipboard-read", "clipboard-write", "clipboard-sanitized-write"]).catch(() => {});
+await page.hover(".cmd");
+await new Promise((r) => setTimeout(r, 200));
+await page.screenshot({ path: "shots/cmd-hover.png" });
+await page.click("#copy-btn");
+await new Promise((r) => setTimeout(r, 400));
+const state = await page.evaluate(() => ({
+  label: document.querySelector(".copy-text").textContent,
+  clip: navigator.clipboard.readText ? undefined : "n/a",
+}));
+const clip = await page.evaluate(() => navigator.clipboard.readText().catch(() => "READ-FAIL"));
+console.log("copy label:", state.label, "| clipboard:", clip.slice(0, 60) + "…");
+await page.screenshot({ path: "shots/cmd-copied.png" });
+
+await browser.close();
+console.log("SHOTS-DONE");
@@ -0,0 +1,95 @@
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { ScrollSmoother } from "gsap/ScrollSmoother";
+import { Download, Copy, Check } from "reicon";
+
+const ICONS = { Download, Copy, Check };
+const ICON_OPTS = { size: 18, strokeWidth: 1.5 };
+
+for (const el of document.querySelectorAll(".i[data-icon]")) {
+  const icon = ICONS[el.dataset.icon];
+  if (!icon) throw new Error(`unknown icon: ${el.dataset.icon}`);
+  el.replaceChildren(icon(ICON_OPTS));
+}
+
+/* Copy the convert command */
+const copyBtn = document.getElementById("copy-btn");
+const copyText = copyBtn.querySelector(".copy-text");
+const copyIcon = copyBtn.querySelector(".i");
+copyText.setAttribute("aria-live", "polite");
+let copyTimer;
+let copySeq = 0;
+
+copyBtn.addEventListener("click", async () => {
+  const cmd = document.getElementById("cmd-text").textContent.trim();
+  const seq = ++copySeq;
+  let ok = true;
+  try {
+    await navigator.clipboard.writeText(cmd);
+  } catch (err) {
+    console.error("clipboard write failed", err);
+    ok = false;
+  }
+  // Only the latest click may touch the feedback state
+  if (seq !== copySeq) return;
+  clearTimeout(copyTimer);
+  copyBtn.classList.remove("done", "fail");
+  copyBtn.classList.add(ok ? "done" : "fail");
+  copyIcon.replaceChildren(ok ? Check(ICON_OPTS) : Copy(ICON_OPTS));
+  copyText.textContent = ok ? "已复制" : "复制失败";
+  copyTimer = setTimeout(() => {
+    copyBtn.classList.remove("done", "fail");
+    copyIcon.replaceChildren(Copy(ICON_OPTS));
+    copyText.textContent = "复制";
+  }, 2000);
+});
+
+/* Grid overlay: G key */
+document.addEventListener("keydown", (e) => {
+  if (e.key !== "g" && e.key !== "G") return;
+  if (e.metaKey || e.ctrlKey || e.altKey) return;
+  if (/^(input|textarea|select)$/i.test(e.target.tagName)) return;
+  document.body.classList.toggle("grid-on");
+});
+
+/* Motion: smooth scrolling + reveals, skipped under reduced motion */
+if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+  gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
+
+  ScrollSmoother.create({
+    wrapper: "#smooth-wrapper",
+    content: "#smooth-content",
+    smooth: 1,
+  });
+
+  const enter = [".hero .eyebrow", ".hero h1 .line", ".hero .lede", ".hero .actions", ".hero .meta"];
+  gsap.set(enter, { y: 24, autoAlpha: 0 });
+  document.fonts.ready.then(() => {
+    gsap.to(enter, {
+      y: 0,
+      autoAlpha: 1,
+      duration: 0.7,
+      ease: "power2.out",
+      stagger: 0.09,
+    });
+  });
+
+  // Document-tail elements never reach the 85% line, so they fire on entry
+  const reveals = [
+    [".shot", "top 85%"],
+    [".feat", "top 85%"],
+    [".verify > *", "top 92%"],
+    [".foot > *", "top bottom"],
+  ];
+  for (const [sel, start] of reveals) {
+    for (const el of gsap.utils.toArray(sel)) {
+      gsap.from(el, {
+        y: 24,
+        autoAlpha: 0,
+        duration: 0.6,
+        ease: "power2.out",
+        scrollTrigger: { trigger: el, start },
+      });
+    }
+  }
+}
@@ -0,0 +1,419 @@
+/* OmarchyCN landing — kami palette on a Müller-Brockmann grid, Fusion Pixel type */
+
+@font-face {
+  font-family: "Fusion Pixel";
+  src: url("/fonts/fusion-pixel-12px-proportional-zh_hans.otf.woff2") format("woff2");
+  font-weight: 400;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Fusion Pixel Mono";
+  src: url("/fonts/fusion-pixel-12px-monospaced-zh_hans.otf.woff2") format("woff2");
+  font-weight: 400;
+  font-display: swap;
+}
+
+:root {
+  --cols: 12;
+  --bl: 8px;
+  --lh: 24px;
+  --gutter: 24px;
+  --margin: 72px;
+  --pad: 24px;
+  --maxw: 1296px;
+
+  --paper: #f5f4ed;
+  --ivory: #faf9f5;
+  --sand: #e8e6dc;
+  --ink: #141413;
+  --ink-2: #3d3d3a;
+  --stone: #6b6a64;
+  --brand: #1b365d;
+  --brand-light: #2d5a8a;
+  --tint: #eef2f7;
+  --line: #d8d5c8;
+  --shot-bg: #141318;
+  --err: #8a2d2d;
+
+  --pixel: "Fusion Pixel", "Noto Sans SC", system-ui, sans-serif;
+  --pixel-mono: "Fusion Pixel Mono", ui-monospace, monospace;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--pixel);
+  font-size: 12px;
+  line-height: var(--lh);
+  -webkit-font-smoothing: none;
+  text-rendering: geometricPrecision;
+}
+
+.mono {
+  font-family: var(--pixel-mono);
+}
+
+a {
+  color: var(--ink);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
+  transition: color 150ms ease-out;
+}
+a:hover {
+  color: var(--brand);
+}
+:is(a, button):focus-visible {
+  outline: 2px solid var(--brand);
+  outline-offset: 2px;
+}
+
+/* Grid frame */
+.wrap {
+  position: relative;
+  max-width: var(--maxw);
+  margin: 0 auto;
+  padding: var(--pad) var(--margin) 96px;
+}
+.band {
+  display: grid;
+  grid-template-columns: repeat(var(--cols), 1fr);
+  column-gap: var(--gutter);
+  row-gap: var(--lh);
+  align-items: start;
+}
+
+/* Topbar */
+.topbar {
+  align-items: center;
+}
+.brand {
+  font-size: 12px;
+  letter-spacing: 2px;
+}
+.topnav {
+  display: flex;
+  justify-content: flex-end;
+  gap: 24px;
+}
+.topnav a {
+  color: var(--stone);
+  text-decoration: none;
+}
+.topnav a:hover {
+  color: var(--brand);
+  text-decoration: underline;
+}
+
+/* Hero */
+.hero {
+  margin-top: 144px;
+}
+.eyebrow {
+  font-family: var(--pixel-mono);
+  color: var(--brand);
+  letter-spacing: 1px;
+}
+h1 {
+  font-size: 60px;
+  line-height: 72px;
+  font-weight: 400;
+  word-break: keep-all;
+}
+h1 .line {
+  display: block;
+}
+.lede {
+  font-size: 24px;
+  line-height: 40px;
+  color: var(--ink-2);
+  margin-top: 8px;
+}
+
+.actions {
+  margin-top: 24px;
+  display: grid;
+  grid-template-columns: repeat(var(--cols), 1fr);
+  column-gap: var(--gutter);
+  row-gap: var(--lh);
+  align-items: end;
+}
+.btn {
+  grid-column: 1 / 4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 48px;
+  padding: 0 24px;
+  background: var(--brand);
+  color: var(--ivory);
+  border-radius: 8px;
+  text-decoration: none;
+  transition: background-color 150ms ease-out;
+}
+.btn:hover {
+  background: var(--brand-light);
+  color: var(--ivory);
+}
+.btn .i {
+  color: var(--ivory);
+}
+.btn-meta {
+  color: var(--sand);
+}
+
+.convert {
+  grid-column: 4 / 11;
+}
+.cmd-label {
+  color: var(--stone);
+  margin-bottom: 8px;
+}
+.cmd {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  background: var(--ivory);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 12px 16px;
+}
+.cmd code {
+  font-family: var(--pixel-mono);
+  font-size: 12px;
+  line-height: 24px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  flex: 1;
+}
+.copy {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-family: var(--pixel-mono);
+  color: var(--stone);
+  cursor: pointer;
+  padding: 0 4px;
+  height: 24px;
+  border-radius: 4px;
+  transition: color 150ms ease-out, background-color 150ms ease-out;
+}
+.copy::after {
+  content: "";
+  position: absolute;
+  inset: -8px;
+}
+.cmd:hover .copy,
+.copy:hover,
+.copy:focus-visible {
+  color: var(--brand);
+}
+.copy:hover {
+  background: var(--tint);
+}
+.copy.done {
+  color: var(--brand);
+}
+.copy.fail {
+  color: var(--err);
+}
+
+.meta {
+  color: var(--stone);
+  margin-top: 8px;
+}
+
+/* Screenshot */
+.shotband {
+  margin-top: 96px;
+}
+.shot {
+  background: var(--shot-bg);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 24px;
+}
+.shot img {
+  display: block;
+  width: 100%;
+  height: auto;
+  outline: 1px solid rgba(255, 255, 255, 0.1);
+  outline-offset: -1px;
+}
+.shot figcaption {
+  color: var(--sand);
+  margin-top: 16px;
+}
+
+/* Features */
+.feats {
+  margin-top: 144px;
+}
+.num {
+  color: var(--brand);
+}
+.feat h2 {
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 400;
+  margin: 16px 0 8px;
+}
+.feat p:last-child {
+  color: var(--stone);
+}
+
+/* Verify */
+.verify {
+  margin-top: 144px;
+  padding-top: 24px;
+  border-top: 1px solid var(--line);
+}
+.verify h2 {
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 400;
+}
+.verify dl > div {
+  display: grid;
+  grid-template-columns: 96px 1fr;
+  gap: 24px;
+  margin-bottom: 8px;
+}
+.verify dt {
+  color: var(--stone);
+}
+.verify dd {
+  word-break: break-all;
+}
+
+/* Footer */
+.foot {
+  margin-top: 144px;
+  padding-top: 24px;
+  border-top: 1px solid var(--line);
+  color: var(--stone);
+}
+.foot a {
+  color: var(--stone);
+}
+
+/* Icons */
+.i {
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+}
+
+/* Grid overlay (toggle: G or footer button) */
+.guides {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0;
+}
+body.grid-on .guides {
+  opacity: 1;
+}
+.guides .cols {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--margin);
+  right: var(--margin);
+  display: grid;
+  grid-template-columns: repeat(var(--cols), 1fr);
+  column-gap: var(--gutter);
+}
+.guides .cols::before {
+  content: "";
+  grid-column: 1 / -1;
+  background: repeating-linear-gradient(
+    to right,
+    rgba(27, 54, 93, 0.1) 0,
+    rgba(27, 54, 93, 0.1) calc((100% - 11 * var(--gutter)) / 12),
+    transparent 0,
+    transparent calc((100% - 11 * var(--gutter)) / 12 + var(--gutter))
+  );
+}
+.guides .rows {
+  position: absolute;
+  left: var(--margin);
+  right: var(--margin);
+  top: var(--pad);
+  bottom: 0;
+  background-image: repeating-linear-gradient(
+    to bottom,
+    rgba(27, 54, 93, 0.22) 0 1px,
+    transparent 1px var(--lh)
+  );
+}
+
+/* Responsive */
+@media (max-width: 960px) {
+  :root {
+    --margin: 24px;
+  }
+  h1 {
+    font-size: 36px;
+    line-height: 48px;
+  }
+  h1 .line {
+    display: inline;
+  }
+  .lede {
+    font-size: 12px;
+    line-height: 24px;
+  }
+  .hero {
+    margin-top: 96px;
+  }
+  .band > * {
+    grid-column: 1 / -1 !important;
+  }
+  .feat {
+    grid-column: span 6 !important;
+  }
+  .btn {
+    grid-column: 1 / 7;
+  }
+  .convert {
+    grid-column: 1 / -1;
+  }
+  .topbar .brand {
+    grid-column: 1 / 5 !important;
+  }
+  .topbar .topnav {
+    grid-column: 5 / 13 !important;
+  }
+}
+@media (max-width: 640px) {
+  .feat {
+    grid-column: 1 / -1 !important;
+  }
+  .btn {
+    grid-column: 1 / -1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
@@ -0,0 +1,14 @@
+{
+  "name": "omarchycn-site",
+  "compatibility_date": "2026-08-27",
+  "assets": {
+    "directory": "./dist"
+  },
+  "workers_dev": true,
+  "routes": [
+    {
+      "pattern": "omarchycn.zacharyzhang.com",
+      "custom_domain": true
+    }
+  ]
+}
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="#1B365D"/><path fill-rule="evenodd" d="M8 8h16v16H8Zm4 4v8h8v-8Z" fill="#f5f4ed"/></svg>`