amorphous-cli 0.1.12 → 0.1.13

package/README.md

@@ -5,3 +5,5 @@ Make whatever you want, yourself, with your own agent, or with others. And whate
 ```bash
 npx amorphous-cli@latest setup
 ```
+
+Create a purpose-built starter with `amorphous-cli create --template list|board|landing` (or omit the flag for a blank page). Collaborators can run `amorphous-cli recommend --note "…"` to send local source to the owner for review. The owner can publish a recommendation live or decline it in the abstract.

package/lib/agent-contract.mjs

@@ -53,12 +53,16 @@ export function syncProjectContract(cwd) {
   return 'refreshed'
 }
 
-export function writeStarter(cwd) {
+export function writeStarter(cwd, template = 'blank') {
   const assets = join(skillRoot, 'assets')
+  const templates = JSON.parse(readFileSync(join(dirname(skillRoot), '../templates.json'), 'utf8'))
+  const selected = templates[template]
+  if (!selected) throw new Error(`Unknown template “${template}”. Choose blank, list, board, or landing.`)
+  const starterFiles = { 'index.html': selected.html, 'styles.css': selected.css, 'app.js': selected.js }
   for (const name of ['index.html', 'styles.css', 'app.js']) {
     const dest = join(cwd, name)
     if (!existsSync(dest)) {
-      writeFileSync(dest, readFileSync(join(assets, name)))
+      writeFileSync(dest, starterFiles[name] ?? readFileSync(join(assets, name)))
     }
   }
   for (const name of ['data.ndjson', 'private.ndjson']) {

package/lib/agent-contract.test.mjs

@@ -31,7 +31,18 @@ test('setup copies the skill, and an edited contract is left alone', () => {
   const project = mkdtempSync(join(tmpdir(), 'amorphous-page-'))
   assert.equal(syncProjectContract(project), 'wrote')
   writeStarter(project)
-  assert.match(readFileSync(join(project, 'index.html'), 'utf8'), /id="who"/)
+  assert.match(readFileSync(join(project, 'index.html'), 'utf8'), /Make this abstract your own/)
+  assert.equal(readFileSync(join(project, 'styles.css'), 'utf8').length > 0, true)
+  const board = mkdtempSync(join(tmpdir(), 'amorphous-board-'))
+  writeStarter(board, 'board')
+  assert.match(readFileSync(join(board, 'index.html'), 'utf8'), /Project board/)
+  assert.match(readFileSync(join(board, 'app.js'), 'utf8'), /board-card/)
+  for (const [template, expected] of [['list', 'SHARED LIST'], ['landing', 'A CLEAR, HUMAN INTRODUCTION']]) {
+    const dir = mkdtempSync(join(tmpdir(), `amorphous-${template}-`))
+    writeStarter(dir, template)
+    assert.match(readFileSync(join(dir, 'index.html'), 'utf8'), new RegExp(expected))
+  }
+  assert.throws(() => writeStarter(project, 'unknown'), /Unknown template/)
   assert.match(readFileSync(join(project, 'AGENTS.md'), 'utf8'), new RegExp(`amorphous-contract: ${CONTRACT_VERSION}`))
 
   const edited = readFileSync(join(project, 'AGENTS.md'), 'utf8') + '\nEdited.\n'

package/lib/commands.mjs

@@ -215,7 +215,8 @@ They tell you when to push, preview, publish, or invite.`)
 async function cmdCreate(cwd, rest) {
   const { flags } = parseFlags(rest)
   if (flags.help) return printHelp('create')
-  const data = await apiFetch('/api/abstracts', { method: 'POST' })
+  const template = typeof flags.template === 'string' ? flags.template : 'blank'
+  const data = await apiFetch('/api/abstracts', { method: 'POST', body: JSON.stringify({ template }) })
   const id = data.id
   writeMeta(cwd, id)
   const name = typeof flags.name === 'string' ? flags.name.trim() : ''
@@ -233,7 +234,7 @@ async function cmdCreate(cwd, rest) {
       body: JSON.stringify({ collection_id: folder.id }),
     })
   }
-  writeStarter(cwd)
+  writeStarter(cwd, template)
   syncProjectContract(cwd)
   if (jsonMode(flags)) printJson({ id, name: name || 'Untitled' })
   else {
@@ -469,6 +470,18 @@ async function cmdPublish(cwd, rest) {
   else console.log(live ? 'It’s live.' : 'Published.')
 }
 
+async function cmdRecommend(cwd, rest) {
+  const { flags } = parseFlags(rest)
+  if (flags.help) return printHelp('recommend')
+  const id = requireMeta(cwd)
+  const { html, css, js } = readProjectFiles(cwd)
+  const result = await apiFetch(`/api/abstracts/${id}/recommendations`, {
+    method: 'POST', body: JSON.stringify({ html, css, js, note: typeof flags.note === 'string' ? flags.note : '' }),
+  })
+  if (jsonMode(flags)) printJson(result)
+  else console.log('Recommendation sent to the abstract owner.')
+}
+
 async function cmdLive(cwd, rest) {
   const { flags, positional } = parseFlags(rest)
   if (flags.help) return printHelp('live')
@@ -520,7 +533,6 @@ async function cmdList(rest) {
   if (folder) params.set('collection', String(folder))
   if (flags.tag) params.set('tag', String(flags.tag))
   if (flags.search) params.set('search', String(flags.search))
-  if (flags.space) params.set('space', String(flags.space))
   for (const key of ['starred', 'archived', 'owned', 'member', 'open', 'closed']) {
     if (flags[key]) params.set(key, 'true')
   }
@@ -703,58 +715,6 @@ async function cmdFolderMove(rest) {
   console.log('Moved folder.')
 }
 
-async function cmdFolderInvite(rest) {
-  const { flags, positional } = parseFlags(rest)
-  const token = positional[0]
-  const email = flags.email || positional[1]
-  if (!token || !email) throw new Error('Pass a folder and --email <email>.')
-  const folder = await resolveFolder(token)
-  await apiFetch(`/api/organise/collections/${folder.id}/invite`, {
-    method: 'POST',
-    body: JSON.stringify({ email }),
-  })
-  console.log('Added.')
-}
-
-async function cmdFolderRemove(rest) {
-  const { flags, positional } = parseFlags(rest)
-  const token = positional[0]
-  const who = flags.email || positional[1]
-  if (!token || !who) throw new Error('Pass a folder and an email or id.')
-  const folder = await resolveFolder(token)
-  const body = /@/.test(who) ? { email: who } : { userId: who }
-  await apiFetch(`/api/organise/collections/${folder.id}/revoke`, {
-    method: 'POST',
-    body: JSON.stringify(body),
-  })
-  console.log('Removed.')
-}
-
-async function cmdFolderPeople(rest) {
-  const { flags, positional } = parseFlags(rest)
-  const token = positional[0]
-  if (!token) throw new Error('Pass a folder.')
-  const folder = await resolveFolder(token)
-  const share = await apiFetch(`/api/organise/collections/${folder.id}`)
-  const people = (share.people || []).map((m) => ({
-    id: m.user_id,
-    name: m.name,
-    access: accessLabel(m.role),
-    role: m.role,
-  }))
-  if (jsonMode(flags)) {
-    printJson({ folder: folder.path, people })
-    return
-  }
-  if (!people.length) {
-    console.log('No people yet.')
-    return
-  }
-  for (const p of people) {
-    console.log(`${p.name} · ${p.access} · ${p.id}`)
-  }
-}
-
 async function cmdFolder(rest) {
   const { flags } = parseFlags(rest)
   if (flags.help || !rest[0]) return printHelp('folder')
@@ -762,33 +722,7 @@ async function cmdFolder(rest) {
   if (sub === 'new') return cmdFolderNew(tail)
   if (sub === 'list') return cmdFolderList(tail)
   if (sub === 'move') return cmdFolderMove(tail)
-  if (sub === 'invite') return cmdFolderInvite(tail)
-  if (sub === 'remove') return cmdFolderRemove(tail)
-  if (sub === 'people') return cmdFolderPeople(tail)
-  throw new Error('folder needs new, list, move, invite, remove, or people.')
-}
-
-async function cmdSpaceNew(rest) {
-  const { flags } = parseFlags(rest)
-  const name = flags.name || rest.find((a) => !a.startsWith('--'))
-  if (!name) throw new Error('Use folder new instead.')
-  const data = await apiFetch('/api/spaces', {
-    method: 'POST',
-    body: JSON.stringify({ name }),
-  })
-  console.log(data.id, data.name)
-}
-
-async function cmdSpaceMember(rest) {
-  const { flags, positional } = parseFlags(rest)
-  const spaceId = flags.space || positional[0]
-  const email = flags.email || positional[1]
-  if (!spaceId || !email) throw new Error('Use folder invite instead.')
-  await apiFetch(`/api/spaces/${spaceId}/members`, {
-    method: 'POST',
-    body: JSON.stringify({ email, role: flags.role || 'member' }),
-  })
-  console.log('Added.')
+  throw new Error('folder needs new, list, or move.')
 }
 
 export async function runCommand(argv, cwd = process.cwd()) {
@@ -827,6 +761,8 @@ export async function runCommand(argv, cwd = process.cwd()) {
       return cmdServe(cwd, rest)
     case 'publish':
       return cmdPublish(cwd, rest)
+    case 'recommend':
+      return cmdRecommend(cwd, rest)
     case 'live':
       return cmdLive(cwd, rest)
     case 'visibility':
@@ -853,10 +789,6 @@ export async function runCommand(argv, cwd = process.cwd()) {
       return cmdFolder(rest)
     case 'rename':
       return cmdRename(cwd, rest)
-    case 'space':
-      if (rest[0] === 'new') return cmdSpaceNew(rest.slice(1))
-      if (rest[0] === 'member') return cmdSpaceMember(rest.slice(1))
-      throw new Error('Use folder instead.')
     default:
       throw new Error(`Unknown command “${raw}”. Run amorphous-cli --help.`)
   }

package/lib/help.mjs

@@ -11,6 +11,7 @@ export const ROOT_HELP = `Amorphous
   pull                          Pull draft and records to this folder
   push                          Push local files
   publish [--live]              Publish a version; --live is Go live
+  recommend [--note <text>]     Send this draft to the owner for review
   live [abstract]               Make a version live
   visibility anyone|members     Anyone can view / Members only
   invite <email>                Email an invite and print the link
@@ -25,9 +26,6 @@ export const ROOT_HELP = `Amorphous
   folder new                    New folder
   folder list                   Folders
   folder move                   Move folder
-  folder invite                 Invite to a folder
-  folder remove                 Remove from a folder
-  folder people                 People on a folder
   rename --name                 Rename
 
 Run amorphous-cli <command> --help for flags. Pass --json where you need machine output.
@@ -54,7 +52,7 @@ Start the local MCP server on stdio.`,
 List abstracts. Default view is all (All Abstracts).
 --folder filters to a folder. --tag filters to a tag.`,
 
-  create: `create [--name <name>] [--folder <name>] [--json]
+  create: `create [--name <name>] [--folder <name>] [--template blank|list|board|landing] [--json]
 
 New abstract. Writes .amorphous.json in this directory.`,
 
@@ -84,6 +82,10 @@ Push local index.html, styles.css, and app.js.
 
 Publish a new version. --live also makes it the live version (Go live).`,
 
+  recommend: `recommend [--note <text>] [--json]
+
+Send this folder's HTML, CSS, and JavaScript to the owner as a proposal. It does not change the live version.`,
+
   live: `live [abstract] [--version <id>]
 
 Make this the live version. Uses the latest published version if you omit --version.`,
@@ -140,16 +142,12 @@ Unstar.`,
 
 Suggest folder from the name. Default is a suggestion only. --apply uses it.`,
 
-  folder: `folder <new|list|move|invite|remove|people> …
+  folder: `folder <new|list|move> …
 
   folder new --name <name> [--parent <id>]
   folder list [--json]
   folder move <folder> --parent <id|none>
-  folder invite <folder> --email <email>
-  folder remove <folder> <email|id>
-  folder people <folder> [--json]
-
-New folder, or move a folder. folder invite adds someone who already has an account. It does not send an email.`,
+New folder, or move a folder. Folders organize your library and do not grant access.`,
 
   rename: `rename [abstract] --name <name>
 

package/mcp.mjs

@@ -117,6 +117,17 @@ await serveStdio(() => {
     async ({ live }) => call(live ? ['publish', '--live', '--json'] : ['publish', '--json']),
   )
 
+  server.registerTool(
+    'recommend',
+    {
+      title: 'Recommend a version to the owner',
+      description: 'Submit the local HTML, CSS, and JavaScript as a proposal. It stays out of the live version until the owner publishes it.',
+      inputSchema: z.object({ note: z.string().max(1000).optional().describe('Context for the owner') }),
+      annotations: { readOnlyHint: false, destructiveHint: false, openWorldHint: true },
+    },
+    async ({ note }) => call(note ? ['recommend', '--note', note] : ['recommend']),
+  )
+
   server.registerTool(
     'invite',
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amorphous-cli",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "mcpName": "io.github.amorphous-one/amorphous",
   "description": "Make whatever you want, yourself, with your own agent, or with others.",
   "type": "module",
@@ -15,6 +15,7 @@
     "lib",
     "hooks",
     "skill",
+    "templates.json",
     "README.md"
   ],
   "engines": {

package/skill/amorphous/SKILL.md

@@ -43,7 +43,7 @@ They tell you when to push, preview, publish, or invite. Do those when they ask.
 Install the CLI once with `npm install -g amorphous-cli@latest`, then call it as `amorphous-cli <command>`. If a command prints `Run: npm install -g amorphous-cli@latest && amorphous-cli setup`, run that line, then repeat the command.
 
 1. If you are not signed in, run `amorphous-cli login`. Show the person the link it prints and ask them to finish in the browser. Do not ask for an email or a code.
-2. `amorphous-cli create --name "..."` in a folder, or `amorphous-cli pull` when `.amorphous.json` is already there.
+2. `amorphous-cli create --name "..." [--template blank|list|board|landing]` in a folder, or `amorphous-cli pull` when `.amorphous.json` is already there. The list, board, and landing starters are working examples, not just mockups.
 3. Edit the files to match what they asked for. `me` and `names` are how the abstract knows who is here.
 4. Prefer `amorphous-cli serve` while you edit. Open that URL and leave it running. It reloads when the files change, and it is the easiest way to check the work. Records on that page start in this folder. Switch the page to prod to read and write the abstract's records. You can push and preview without it.
 
@@ -52,6 +52,7 @@ When they ask:
 - `amorphous-cli push` sends the source. `amorphous-cli push --data` also sends the records in this folder.
 - `amorphous-cli preview` and open that URL.
 - `amorphous-cli publish --live`
+- Collaborators who should propose source for the owner to review can use `amorphous-cli recommend --note "..."`. It does not change the live abstract; the owner reviews and chooses Publish live or Decline.
 - `amorphous-cli invite <email> use` or `edit` or `view`. It emails them a link and prints that link. They open it and sign in with that email.
 - `amorphous-cli notify` emails members that the published version changed. It does not publish. Do that only when they ask.
 

package/templates.json

@@ -0,0 +1,30 @@
+{
+  "blank": {
+    "label": "Blank",
+    "description": "A clean starting point",
+    "html": "<main>\n  <h1>Untitled</h1>\n  <p>Make this abstract your own.</p>\n</main>",
+    "css": "body { margin: 0; font: 16px/1.5 system-ui, sans-serif; color: #18181b; background: #fafafa; }\nmain { max-width: 720px; margin: 12vh auto; padding: 24px; }\nh1 { letter-spacing: -0.04em; }",
+    "js": ""
+  },
+  "list": {
+    "label": "List",
+    "description": "A shared checklist everyone can update",
+    "html": "<main class=\"shell\">\n  <header><p class=\"eyebrow\">SHARED LIST</p><h1>Things to do</h1><p class=\"muted\">Add an item or check one off. Everyone sees the same list.</p></header>\n  <form id=\"add-form\"><input id=\"new-item\" aria-label=\"New item\" placeholder=\"Add something…\" maxlength=\"180\" required><button>Add</button></form>\n  <p id=\"empty\" class=\"muted\">Your list is empty.</p><ul id=\"items\"></ul>\n</main>",
+    "css": "* { box-sizing: border-box; } body { margin: 0; background: #f5f4f0; color: #20201e; font: 16px/1.5 system-ui, sans-serif; } .shell { max-width: 680px; margin: 8vh auto; padding: 32px; background: #fff; border: 1px solid #e8e6e0; border-radius: 18px; } .eyebrow { color: #77746c; font-size: 11px; font-weight: 700; letter-spacing: .14em; } h1 { margin: 4px 0; font-size: clamp(32px, 8vw, 52px); letter-spacing: -.055em; } .muted { color: #77746c; } form { display: flex; gap: 8px; margin: 28px 0 18px; } input { min-width: 0; flex: 1; padding: 12px 14px; border: 1px solid #d8d5cd; border-radius: 9px; font: inherit; } button { padding: 10px 18px; border: 0; border-radius: 9px; background: #242421; color: white; font: inherit; cursor: pointer; } ul { display: grid; gap: 8px; padding: 0; list-style: none; } li { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #eeece7; border-radius: 9px; } li.done span { color: #929087; text-decoration: line-through; } li span { flex: 1; overflow-wrap: anywhere; } li button { padding: 5px 8px; color: #66635d; background: transparent; }",
+    "js": "const form = document.querySelector('#add-form')\nconst input = document.querySelector('#new-item')\nconst list = document.querySelector('#items')\nconst empty = document.querySelector('#empty')\n\nfunction render(rows) {\n  list.replaceChildren()\n  empty.hidden = rows.length > 0\n  for (const row of rows.filter(item => item.kind === 'list-item')) {\n    const li = document.createElement('li')\n    if (row.done) li.classList.add('done')\n    const check = document.createElement('input')\n    check.type = 'checkbox'\n    check.checked = Boolean(row.done)\n    check.setAttribute('aria-label', `Mark ${row.text} complete`)\n    check.addEventListener('change', async () => {\n      await amorphous.data.replace(row.id, { ...row, done: check.checked })\n      render(await amorphous.data.find())\n    })\n    const text = document.createElement('span')\n    text.textContent = row.text\n    const remove = document.createElement('button')\n    remove.type = 'button'\n    remove.textContent = 'Remove'\n    remove.addEventListener('click', async () => {\n      // The bridge intentionally has no delete method; mark removed items instead.\n      await amorphous.data.replace(row.id, { ...row, removed: true })\n      render(await amorphous.data.find())\n    })\n    if (row.removed) continue\n    li.append(check, text, remove)\n    list.append(li)\n  }\n}\n\nform.addEventListener('submit', async event => {\n  event.preventDefault()\n  const text = input.value.trim()\n  if (!text) return\n  await amorphous.data.insert({ kind: 'list-item', text, done: false })\n  input.value = ''\n  render(await amorphous.data.find())\n})\n\nrender(await amorphous.data.find())"
+  },
+  "board": {
+    "label": "Board",
+    "description": "A small kanban board with shared cards",
+    "html": "<main class=\"shell\">\n  <header><p class=\"eyebrow\">TEAM BOARD</p><h1>Project board</h1><p class=\"muted\">Move cards across the columns as work progresses.</p></header>\n  <form id=\"add-form\"><input id=\"new-card\" aria-label=\"New card\" placeholder=\"Add a card…\" maxlength=\"180\" required><button>Add card</button></form>\n  <section id=\"columns\" class=\"columns\"></section>\n</main>",
+    "css": "* { box-sizing: border-box; } body { margin: 0; background: #f4f5f7; color: #20242b; font: 15px/1.5 system-ui, sans-serif; } .shell { max-width: 1120px; margin: 7vh auto; padding: 28px; } .eyebrow { color: #727985; font-size: 11px; font-weight: 700; letter-spacing: .14em; } h1 { margin: 4px 0; font-size: clamp(32px, 7vw, 48px); letter-spacing: -.05em; } .muted { color: #727985; } form { display: flex; gap: 8px; max-width: 580px; margin: 24px 0; } input { min-width: 0; flex: 1; padding: 11px 13px; border: 1px solid #d7dbe2; border-radius: 8px; font: inherit; } button { padding: 9px 14px; border: 0; border-radius: 8px; background: #29313d; color: #fff; font: inherit; cursor: pointer; } .columns { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; } .column { min-height: 190px; padding: 12px; border: 1px solid #e0e3e9; border-radius: 12px; background: #e9ecf1; } .column h2 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; } .card { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 11px; border: 1px solid #e2e4e9; border-radius: 9px; background: white; } .card span { flex: 1; overflow-wrap: anywhere; } .card select { max-width: 105px; padding: 5px; border: 1px solid #d7dbe2; border-radius: 6px; background: white; font: inherit; font-size: 12px; } @media (max-width: 760px) { .columns { grid-template-columns: repeat(3, minmax(250px, 1fr)); } }",
+    "js": "const stages = ['To do', 'In progress', 'Done']\nconst form = document.querySelector('#add-form')\nconst input = document.querySelector('#new-card')\nconst columns = document.querySelector('#columns')\n\nasync function render() {\n  const rows = (await amorphous.data.find()).filter(row => row.kind === 'board-card')\n  columns.replaceChildren()\n  for (const stage of stages) {\n    const column = document.createElement('section')\n    column.className = 'column'\n    const heading = document.createElement('h2')\n    heading.textContent = `${stage} · ${rows.filter(row => (row.stage || stages[0]) === stage).length}`\n    column.append(heading)\n    for (const row of rows.filter(item => (item.stage || stages[0]) === stage)) {\n      const card = document.createElement('article')\n      card.className = 'card'\n      const text = document.createElement('span')\n      text.textContent = row.text\n      const select = document.createElement('select')\n      select.setAttribute('aria-label', `Move ${row.text}`)\n      for (const optionText of stages) {\n        const option = document.createElement('option')\n        option.value = optionText\n        option.textContent = optionText\n        option.selected = optionText === (row.stage || stages[0])\n        select.append(option)\n      }\n      select.addEventListener('change', async () => {\n        await amorphous.data.replace(row.id, { ...row, stage: select.value })\n        await render()\n      })\n      card.append(text, select)\n      column.append(card)\n    }\n    columns.append(column)\n  }\n}\n\nform.addEventListener('submit', async event => {\n  event.preventDefault()\n  const text = input.value.trim()\n  if (!text) return\n  await amorphous.data.insert({ kind: 'board-card', text, stage: stages[0] })\n  input.value = ''\n  await render()\n})\n\nrender()"
+  },
+  "landing": {
+    "label": "Landing page",
+    "description": "A polished one-page introduction for an idea or project",
+    "html": "<main>\n  <nav><a class=\"brand\" href=\"#top\">Your project</a><a href=\"#about\">About</a><a class=\"nav-cta\" href=\"#contact\">Get in touch</a></nav>\n  <section id=\"top\" class=\"hero\"><p class=\"eyebrow\">A CLEAR, HUMAN INTRODUCTION</p><h1>Make your next good idea easier to find.</h1><p class=\"lead\">Describe what you are building, who it helps, and why it matters. Replace this copy with your own.</p><a class=\"cta\" href=\"#contact\">Start a conversation <span>↗</span></a><div class=\"orb\" aria-hidden=\"true\"></div></section>\n  <section id=\"about\" class=\"about\"><p class=\"eyebrow\">WHAT IT IS</p><h2>A simple page for a specific purpose.</h2><div class=\"cards\"><article><b>01</b><h3>Who it is for</h3><p>Name the people you want to reach.</p></article><article><b>02</b><h3>What it does</h3><p>Explain the useful thing you make possible.</p></article><article><b>03</b><h3>Why now</h3><p>Give visitors a reason to care today.</p></article></div></section>\n  <footer id=\"contact\"><div><p class=\"eyebrow\">NEXT STEP</p><h2>Have a question?</h2><p>Replace this with your preferred contact link.</p></div><a class=\"cta\" href=\"mailto:hello@example.com\">Say hello <span>↗</span></a></footer>\n</main>",
+    "css": "* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: #f8f7f4; color: #20211f; font: 16px/1.55 system-ui, sans-serif; } main { max-width: 1180px; margin: auto; padding: 0 28px; } nav { display: flex; align-items: center; gap: 26px; min-height: 76px; border-bottom: 1px solid #e5e3dc; } nav a { color: inherit; text-decoration: none; font-size: 14px; } nav .brand { margin-right: auto; font-weight: 700; } .nav-cta { padding: 9px 13px; border: 1px solid #d6d3ca; border-radius: 99px; } .hero { position: relative; min-height: 570px; padding: 110px 0 95px; overflow: hidden; } .eyebrow { color: #77786d; font-size: 11px; font-weight: 700; letter-spacing: .15em; } h1 { position: relative; z-index: 1; max-width: 760px; margin: 18px 0; font-size: clamp(48px, 9vw, 88px); line-height: .98; letter-spacing: -.07em; } .lead { position: relative; z-index: 1; max-width: 490px; color: #696a62; font-size: 18px; } .cta { position: relative; z-index: 1; display: inline-flex; gap: 22px; align-items: center; margin-top: 22px; padding: 13px 17px; border-radius: 99px; background: #242622; color: white; text-decoration: none; font-size: 14px; } .orb { position: absolute; right: 4%; bottom: 4%; width: 270px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e9c7a6, #c89f7e 48%, #756c61 75%); filter: saturate(.7); opacity: .72; } .about { padding: 65px 0 95px; border-top: 1px solid #e5e3dc; } h2 { max-width: 600px; font-size: clamp(32px, 5vw, 48px); line-height: 1.05; letter-spacing: -.055em; } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 42px; } .cards article { padding: 22px; border: 1px solid #e5e3dc; border-radius: 12px; background: #fffefa; } .cards b { color: #9d795c; font-size: 12px; } h3 { margin: 18px 0 4px; } .cards p, footer p:not(.eyebrow) { color: #696a62; } footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 34px 0 55px; border-top: 1px solid #e5e3dc; } footer h2 { margin: 6px 0; } @media (max-width: 650px) { main { padding: 0 18px; } nav { gap: 14px; } .hero { min-height: 520px; padding-top: 84px; } .orb { right: -40px; width: 210px; } .cards { grid-template-columns: 1fr; } footer { align-items: flex-start; flex-direction: column; } }",
+    "js": "// This starter is a static landing page. Replace the copy, links, and sections in index.html.\n"
+  }
+}