diff --git a/NOTICE.md b/NOTICE.md index 0bc6320..b529cb8 100644 --- a/NOTICE.md +++ b/NOTICE.md @@ -13,3 +13,9 @@ not affiliated with or endorsed by the Blender Foundation. Model Context Protocol and MCP are used descriptively. This project is an independent open-source connector. + +The project overview site includes the Outfit font, distributed under the SIL +Open Font License 1.1. Its license is included at `site/assets/OFL-Outfit.txt`. +The site's icon sprite is generated from Lucide icons under the ISC license; +the associated license is included at `site/assets/LICENSE-Lucide.txt`. +ViperMesh artwork is branding, not a Blender screenshot or a benchmark artifact. diff --git a/site/asset-preview.png b/site/asset-preview.png deleted file mode 100644 index 27d8093..0000000 Binary files a/site/asset-preview.png and /dev/null differ diff --git a/site/assets/LICENSE-Lucide.txt b/site/assets/LICENSE-Lucide.txt new file mode 100644 index 0000000..325e8ff --- /dev/null +++ b/site/assets/LICENSE-Lucide.txt @@ -0,0 +1,15 @@ +ISC License + +Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022. + +Permission to use, copy, modify, and/or distribute this software for any +purpose with or without fee is hereby granted, provided that the above +copyright notice and this permission notice appear in all copies. + +THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES +WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF +MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR +ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES +WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN +ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF +OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. diff --git a/site/assets/OFL-Outfit.txt b/site/assets/OFL-Outfit.txt new file mode 100644 index 0000000..723cd44 --- /dev/null +++ b/site/assets/OFL-Outfit.txt @@ -0,0 +1,93 @@ +Copyright 2021 The Outfit Project Authors (https://github.com/Outfitio/Outfit-Fonts) + +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://scripts.sil.org/OFL + + +----------------------------------------------------------- +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. diff --git a/site/assets/brand-mark.png b/site/assets/brand-mark.png new file mode 100644 index 0000000..6ee7a13 Binary files /dev/null and b/site/assets/brand-mark.png differ diff --git a/site/assets/icons.svg b/site/assets/icons.svg new file mode 100644 index 0000000..59432fb --- /dev/null +++ b/site/assets/icons.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/site/assets/outfit-variable.ttf b/site/assets/outfit-variable.ttf new file mode 100644 index 0000000..466d624 Binary files /dev/null and b/site/assets/outfit-variable.ttf differ diff --git a/site/assets/viper-wrap.png b/site/assets/viper-wrap.png new file mode 100644 index 0000000..51ccdce Binary files /dev/null and b/site/assets/viper-wrap.png differ diff --git a/site/index.html b/site/index.html index 77cde62..79496e6 100644 --- a/site/index.html +++ b/site/index.html @@ -1,43 +1,120 @@ - + + + ViperMesh for Blender | Open-source Blender MCP - + - - - + + + + + - - + + + + - -
ViperMesh / Blender
+
-
- A stylized spacecraft asset -
-

Open source / MIT licensed / Local

ViperMesh
for Blender

Give your agent
the tools to work in 3D.

Connect an MCP-compatible agent to Blender. Inspect your scene, make structured edits and check the result through one persistent session.

+
+
+

Open-source Blender MCP

+

Your scene. Your agent.
ViperMesh for Blender.

+

A direct connection between your AI agent and Blender.
Structured edits, scene inspection and room for custom work.

+ +

MIT licensedRuns locallyNo ViperMesh account

+
+
+
+ +
+
Example MCP sessionstdio loopback
+
    +
  1. 01bootstrap_vipermesh_sessionConnect
  2. +
  3. 02call_blender_tool("get_scene_info")Inspect
  4. +
  5. 03run_blender_scene_stageBuild & review
  6. +
+
+ +
+
One persistent session. Your Blender scene stays the workspace.
+
-

An agent connection for your existing workspace

Structured operations

Assembly, transforms, materials, cameras, lighting, rendering, UVs, retopology, rigging and export. Discover relevant tools as the task develops.

Inspect, then improve

Check support, orientation and clearances. Review visual results and repair specific problems. Diagnostic checks support judgment; they cannot certify every scene.

Room for custom work

Keep Python execution for unusual geometry and uncovered operations. Batch known actions and keep decision points where new observations matter.

-

One session. One local connection.

Your MCP clientViperMesh serverBlender addon

The client launches the Node server once. The server keeps a serialized connection to the addon. No ViperMesh cloud account or Docker is needed for the local connector.

-

From download to first edit

Connect your agent.

Use the Blender version currently tested in the repository and a Node runtime that meets the package requirements. Keep Blender open with the local bridge running.

Client-specific setup and troubleshooting ↗
  1. Install the addon

    Download the versioned addon .py or .zip from the latest release. In Blender, install it from disk, enable it, and start the local bridge in the ViperMesh sidebar.

  2. Build the MCP server

    git clone https://github.com/Ker102/vipermesh-blender.git
    +    
    +

    Less boilerplate. More scene work.

    Tools for the work
    between idea and result.

    Use structured operations for familiar tasks.
    Keep Python for the ones that need it.

    +
    +

    Build and arrange

    Assembly, transforms, materials, cameras and lighting. Discover the tools your task needs, then operate on named objects.

    Geometry   /   Materials   /   Scene
    +

    Inspect and refine

    Check support, orientation and clearances. Review render images and repair specific problems before accepting the result.

    Spatial checks   /   Visual review
    +

    Keep custom work open

    Retain Python execution for unusual geometry and uncovered operations. Batch known actions; pause when a decision needs new evidence.

    Python fallback   /   Bounded batches
    +
    +

    Also includes

    • UV preparation
    • Retopology
    • Rigging
    • Weight tools
    • Animation operations
    • Export checks
    Explore the tool surface
    +
    +
    +
    +

    A small bridge. A persistent connection.

    Keep your agent
    close to your scene.

    +
    +
    Your MCP clientStarts one Node server
    + +
    ViperMesh serverOne serialized connection
    + +
    Blender addonLocal bridge on 127.0.0.1
    +
    +

    No hosted ViperMesh service is required. Docker is optional, not part of the standard local setup.

    +
    +
    +
    +

    From download to first edit

    Make the connection.

    Install the addon, point your MCP client at the server, and keep Blender open while your agent works.

    Tested target: Blender 5.2
    Node.js 20 or newer · stdio-compatible MCP client

    Client-specific setup
    +
      +
    1. 01

      Install the Blender addon

      Download the versioned .py or .zip from the latest release. Install it from disk in Blender, enable it, then start the local bridge in the ViperMesh sidebar.

    2. +
    3. 02

      Build the MCP server

      +
      Terminal
      +
      git clone https://github.com/Ker102/vipermesh-blender.git
       cd vipermesh-blender
       npm install
      -npm run build
    4. Add it to your MCP client

      Configure the client to launch node with the absolute path to dist/public-portable-blender-mcp.js. Start one server per session, not one per tool call.

      {
      +npm run build
      +
    5. +
    6. 03

      Configure your MCP client

      Launch node with the absolute path to the built server. This JSON is a common configuration pattern; your client's syntax may differ.

      +
      MCP configuration
      +
      {
         "mcpServers": {
           "vipermesh-blender": {
             "command": "node",
             "args": ["/absolute/path/to/vipermesh-blender/dist/public-portable-blender-mcp.js"]
           }
         }
      -}

      JSON configuration above is a common pattern; your client's syntax may differ.

    7. Inspect before editing

      Ask your agent to call bootstrap_vipermesh_session, inspect the existing scene, then discover tools for your task. The repository includes a portable agent skill with adaptable operating guidance.

    -

    What to expect

    Is it a 3D generation model?

    The connector lets an agent operate Blender. It does not bundle a hosted text-to-3D model or promise production-ready assets. You can use local assets and your own Blender workflows.

    Is it faster than UI automation?

    Structured tools are designed to avoid repetitive navigation and generated Blender code. Performance depends on the model and task; we are preparing reproducible comparisons and make no universal speed or cost claim here.

    Does it judge the final scene automatically?

    Tools provide diagnostics and image-file checks. The agent still needs to inspect visual output and judge it against your request. A passing report can miss mesh-level collisions or an artistic mismatch.

    What can an agent access?

    This is a trusted local connector. Python fallback can execute arbitrary code inside Blender. Keep the bridge on loopback, connect trusted clients and review destructive actions. Read the repository security guidance before use.

    How does this relate to ViperMesh Studio?

    The public connector is usable independently. ViperMesh Studio is a broader AI workspace in development for artists and game creators, connecting generation, inspection and specialist workflows.

    Join the Studio waitlist ↗
    -

    Start with your scene.

    Try one useful edit. Inspect the result. Tell us where the connection helps and where it falls short.

    Share feedback ↗
    +}
    +
  3. +
  4. 04

    Start with an inspection

    Call bootstrap_vipermesh_session, inspect the scene, then discover the capabilities needed for your task. Keep the server running for the whole session, not one process per call.

    Install the portable agent skill
  5. +
+
+
+

Clear scope. Fewer surprises.

Know what you're connecting.

+
Is this a 3D generation model?

The connector lets an agent operate Blender. It does not bundle a hosted text-to-3D model or promise production-ready assets. Use your own assets and Blender workflows.

+
Is it faster than UI automation?

Structured tools avoid repetitive UI navigation and generated code for covered operations. Performance still depends on the model and task. No universal speed or cost claim is made here.

+
Does it automatically judge the final scene?

Tools provide diagnostics and image-file checks. The agent still needs to inspect the visual output against your request. Bounds-based reports can miss mesh collisions or an artistic mismatch.

+
What can an agent access?

This is a trusted local connector, not a sandbox. Python fallback can execute arbitrary code inside Blender. Keep the bridge on loopback, use trusted clients, and review destructive actions.

Read the security guidance
+
Where does ViperMesh Studio fit?

The public connector works independently. Studio is a broader artist-controlled AI workspace in development, bringing generation, asset inspection and specialist workflows together.

Join the Studio waitlist
+
+
+

Build it with us

Start with your scene.

Try a useful edit. Inspect the result.
Tell us what works and what needs a better tool.

Share feedback
+
- - + + + diff --git a/site/site.js b/site/site.js index 97291e4..2c84e1d 100644 --- a/site/site.js +++ b/site/site.js @@ -1,10 +1,19 @@ for (const button of document.querySelectorAll("[data-copy]")) { + let resetTimer button.addEventListener("click", async () => { const code = document.getElementById(button.dataset.copy) const status = button.nextElementSibling + if (!code || !status) return + clearTimeout(resetTimer) + button.setAttribute("aria-label", button.title) try { await navigator.clipboard.writeText(code.textContent) status.textContent = "Copied" + button.setAttribute("aria-label", "Copied to clipboard") + resetTimer = setTimeout(() => { + status.textContent = "" + button.setAttribute("aria-label", button.title) + }, 2500) } catch { status.textContent = "Select the commands above to copy." } diff --git a/site/styles.css b/site/styles.css index 703eb1a..790ddac 100644 --- a/site/styles.css +++ b/site/styles.css @@ -1,54 +1,200 @@ -:root { color-scheme: light; --ink:#172924; --muted:#52655d; --accent:#0a765a; } -* { box-sizing:border-box; } -html { scroll-behavior:smooth; } -body { margin:0; color:var(--ink); background:white; font:16px/1.6 Arial,Helvetica,sans-serif; letter-spacing:0; } -a { color:inherit; text-decoration:none; } a:hover { text-decoration:underline; text-underline-offset:5px; } -:focus-visible { outline:3px solid #e58b46; outline-offset:4px; } -.wrap { max-width:1208px; padding:0 36px; margin:auto; } -header { max-width:1280px; margin:auto; min-height:80px; padding:20px 36px; display:flex; justify-content:space-between; align-items:center; gap:20px; } -.brand { font-size:22px; font-weight:700; } .brand span { font-weight:400; color:var(--muted); } -nav, footer > div { display:flex; gap:24px; font-size:14px; } -.hero { position:relative; overflow:hidden; isolation:isolate; min-height:580px; background:#14231e; color:white; } -.hero > img { position:absolute; height:100%; width:100%; object-fit:contain; object-position:85% center; opacity:.9; } -.shade { position:absolute; inset:0; background:linear-gradient(90deg,#14231e 0%,rgba(20,35,30,.95) 27%,rgba(20,35,30,.55) 52%,rgba(20,35,30,0) 80%); } -.hero-content { position:relative; max-width:1208px; margin:auto; padding:52px 36px 60px; } -.eyebrow { font-size:12px; text-transform:uppercase; font-weight:700; color:var(--accent); margin:0 0 24px; } -.hero .eyebrow { color:#c4dacb; } -h1 { font-size:58px; line-height:1.05; margin:0 0 22px; } -.lead { font-size:30px; line-height:1.2; margin:0 0 20px; } -.hero-content > p:not(.eyebrow):not(.lead) { max-width:420px; color:#d9e5de; font-size:15px; } -.actions { display:flex; align-items:center; gap:24px; margin-top:30px; font-size:14px; } -.primary { padding:12px 20px; background:#d7f0e2; color:#163a2b; border-radius:4px; font-weight:700; } -.overview { padding-top:40px; padding-bottom:64px; } -.columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; } -.columns > div { border-top:1px solid #cbdace; padding-top:20px; } -h2 { font-size:25px; line-height:1.2; margin:0 0 16px; } .columns h2 { font-size:20px; } -p { margin:0 0 16px; } .columns p, .setup p, .scope p { font-size:14px; color:var(--muted); } -.connection { background:#edf5f0; padding:44px 0; } -.flow { display:flex; align-items:center; gap:24px; font-size:23px; margin-bottom:24px; font-weight:700; } -.flow b { color:var(--accent); font-weight:400; } -.connection p:last-child { max-width:780px; color:var(--muted); font-size:14px; } -.setup { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0,1.2fr); gap:80px; padding-top:64px; padding-bottom:64px; scroll-margin-top:24px; } -.setup > div > h2 { font-size:36px; } .setup a { color:var(--accent); font-size:14px; text-decoration:underline; } -ol { margin:0; padding-left:24px; } li { padding:0 0 24px 8px; } li::marker { color:var(--accent); font-weight:700; } +@font-face { font-family:Outfit; src:url("assets/outfit-variable.ttf") format("truetype"); font-weight:100 900; font-style:normal; font-display:swap; } +:root { color-scheme:light; --paper:#fbfcfa; --ink:#15302d; --muted:#62736c; --accent:#087d67; --line:#dbe5de; } +* { box-sizing:border-box; letter-spacing:0; } +html { scroll-behavior:smooth; scroll-padding-top:92px; } +body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 Outfit,system-ui,sans-serif; } +a { color:inherit; text-decoration:none; } +a:hover { color:var(--accent); } +:focus-visible { outline:2px solid var(--accent); outline-offset:5px; } +.icon { width:19px; height:19px; flex:0 0 19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } +.wrap { width:min(100% - 80px,1160px); margin-inline:auto; } +.site-header { height:84px; display:flex; align-items:center; justify-content:space-between; gap:20px; position:relative; z-index:5; border-bottom:1px solid #dbe5de80; } +.brand { display:inline-flex; align-items:center; gap:11px; font-size:21px; font-weight:650; line-height:1.15; } +.brand img { object-fit:contain; } +.brand small { display:block; font-size:11px; color:var(--muted); font-weight:450; margin-top:3px; } +nav { display:flex; align-items:center; gap:28px; font-size:14px; } +.repo-link { display:inline-flex; align-items:center; gap:8px; border-left:1px solid var(--line); padding-left:26px; } +.repo-link .icon:last-child { width:14px; height:14px; flex-basis:14px; } +.hero { position:relative; isolation:isolate; overflow-x:clip; overflow-y:visible; padding:36px 24px 36px; } +.hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(#087d6709 1px,transparent 1px),linear-gradient(90deg,#087d6709 1px,transparent 1px); background-size:48px 48px; background-position:center top; mask-image:linear-gradient(transparent,#000 20%,#000 76%,transparent); } +.hero-copy { position:relative; z-index:4; max-width:900px; margin:auto; text-align:center; } +.eyebrow { margin:0 0 18px; color:var(--accent); font-size:11px; font-weight:600; text-transform:uppercase; } +h1 { font-size:64px; line-height:1.08; font-weight:550; margin:0; text-wrap:balance; } +h1 span { color:var(--accent); } +.hero-description { max-width:580px; font-size:18px; line-height:1.65; color:var(--muted); margin:22px auto 0; text-wrap:pretty; } +.actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:24px; } +.button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:46px; padding:11px 22px; border:1px solid transparent; border-radius:6px; font-size:14px; font-weight:550; transition:background-color 160ms ease,border-color 160ms ease; } +.primary { background:var(--accent); color:#fff; } +.primary:hover { background:#076552; color:#fff; } +.secondary { border-color:var(--line); background:#fff; } +.secondary:hover { border-color:#8ab9a9; background:#f5faf6; } +.hero-facts { margin:16px 0 0; font-size:11px; color:var(--muted); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; } +.hero-facts i { width:3px; height:3px; border-radius:50%; background:#91aa9b; } +.session-figure { position:relative; width:min(100%,940px); margin:64px auto 0; } +.session-composition { position:relative; isolation:isolate; height:178px; padding:0 80px; } +.session-panel { position:relative; z-index:2; background:#fff; border:1px solid #d6e4dd; border-radius:8px; box-shadow:0 16px 44px #164b3420,0 3px 10px #164b3408; transform:rotate(-2deg); } +.session-title { height:42px; display:flex; align-items:center; gap:9px; padding:0 20px 0 78px; border-bottom:1px solid #e7eeea; font-size:11px; color:var(--muted); } +.session-title > .icon { color:var(--accent); width:15px; height:15px; flex-basis:15px; } +.session-title small { margin-left:auto; color:var(--muted); font-size:10px; } +.session-title small span { margin:0 6px; color:#b3c5ba; } +.session-commands { list-style:none; margin:0; padding:12px 20px 12px 78px; } +.session-commands li { display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:34px; } +.step { font:10px/1.5 ui-monospace,Consolas,monospace; color:var(--muted); } +code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; } +.session-commands code { font-size:11px; color:#254239; overflow-wrap:anywhere; } +.code-detail { color:var(--muted); } +.command-purpose { color:var(--accent); font-size:10px; } +.viper { position:absolute; width:150%; aspect-ratio:4232/2362; left:-24%; bottom:-163px; pointer-events:none; user-select:none; } +.viper img { display:block; width:100%; height:100%; object-fit:contain; } +.viper-back { z-index:1; } +.viper-front { z-index:3; mask-image:linear-gradient(90deg,#000 0 26%,transparent 26% 80%,#000 80% 100%); } +.session-figure figcaption { position:relative; z-index:4; width:fit-content; max-width:100%; margin:60px auto 0; padding:3px 8px; font-size:11px; background:var(--paper); color:var(--muted); text-align:center; } +.overview { padding-top:36px; padding-bottom:76px; } +.section-heading h2 { font-size:38px; line-height:1.16; font-weight:550; margin:0; text-wrap:balance; } +.section-heading > p:last-child:not(.eyebrow) { color:var(--muted); font-size:15px; margin:16px 0 0; } +.capabilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px; margin-top:42px; } +.capabilities article { border-top:1px solid var(--line); padding-top:24px; } +.capabilities article > .icon { color:var(--accent); width:23px; height:23px; } +h3 { font-weight:550; font-size:20px; line-height:1.3; margin:15px 0 12px; } +p { margin:0; } +.capabilities p { font-size:14px; color:var(--muted); margin-bottom:18px; line-height:1.75; } +.capabilities article > span { font-size:11px; color:var(--muted); } +.tool-index { display:flex; align-items:start; gap:22px; border-top:1px solid var(--line); margin-top:34px; padding-top:24px; font-size:12px; } +.tool-index > p { white-space:nowrap; color:var(--muted); } +.tool-index ul { display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0; gap:8px 20px; flex:1; } +.tool-index a { display:inline-flex; align-items:center; gap:5px; color:var(--accent); white-space:nowrap; } +.tool-index .icon { width:15px; height:15px; flex-basis:15px; } +.connection { background:#eef4f0; padding:62px 0 50px; border-block:1px solid #dce7df; } +.connection-flow { display:grid; grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr); align-items:center; gap:20px; margin-top:34px; } +.connection-flow > div { display:grid; grid-template-columns:26px minmax(0,1fr); gap:8px 12px; align-items:center; } +.connection-flow > div > .icon { color:var(--accent); } +.connection-flow strong { font-size:19px; font-weight:550; } +.connection-flow > div > span { grid-column:2; font-size:12px; color:var(--muted); } +.flow-arrow { color:#91ae9e; } +.connection-note { border-top:1px solid #d1dfd5; padding-top:24px; margin-top:30px; color:var(--muted); font-size:13px; } +.setup { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:90px; padding-block:76px 48px; } .setup > * { min-width:0; } -h3 { font-size:18px; line-height:1.3; margin:0 0 12px; } -pre { background:#f2f5f3; padding:18px; border-left:3px solid #82b79a; overflow:auto; font-size:12px; line-height:1.8; } -code { overflow-wrap:anywhere; font-family:Consolas,monospace; } pre code { overflow-wrap:normal; } -button { background:transparent; border:1px solid #a3baab; border-radius:4px; color:var(--accent); padding:8px 12px; cursor:pointer; font:600 12px Arial,sans-serif; } -.copy-status { font-size:12px; margin-left:12px; } -.scope { padding-top:24px; padding-bottom:60px; } -details { border-top:1px solid #d4dfd7; padding:20px 0; } summary { cursor:pointer; font-size:18px; font-weight:600; } details p { margin:16px 0 0; max-width:850px; } details a { color:var(--accent); } -.closing { padding:52px 0; background:#173a2d; color:white; } .closing h2 { font-size:32px; } .closing p { color:#c9dbd1; max-width:650px; font-size:15px; } .closing a { text-decoration:underline; color:#d8f0e4; } -footer { padding-top:28px !important; padding-bottom:28px !important; display:flex; gap:24px; justify-content:space-between; font-size:12px; } footer p { margin:0; font-weight:700; } footer span { color:var(--muted); font-weight:400; } footer > div { font-size:12px; flex-wrap:wrap; } -.skip { position:absolute; top:-100px; left:20px; z-index:10; background:white; padding:12px; } .skip:focus { top:12px; } -@media (min-width:1600px) { .hero > img { object-position:68% center; } } -@media (max-width:800px) { - header { padding:20px; min-height:68px; } .brand { font-size:18px; } nav { font-size:12px; gap:16px; } - .hero { min-height:550px; } .hero > img { object-fit:cover; object-position:65% center; opacity:.5; } .shade { background:rgba(15,32,25,.65); } - .hero-content { padding:44px 24px 56px; } h1 { font-size:42px; } .lead { font-size:27px; } - .wrap { padding-left:24px; padding-right:24px; } .columns, .setup { grid-template-columns:minmax(0,1fr); gap:28px; } - .overview { padding-top:32px; padding-bottom:40px; } .flow { flex-wrap:wrap; gap:12px; font-size:16px; } - .setup { padding-top:44px; padding-bottom:24px; } .actions { gap:18px; font-size:12px; } footer { flex-direction:column; } +.setup-intro h2 { font-size:38px; line-height:1.18; font-weight:550; margin:0 0 20px; } +.setup-intro p:not(.eyebrow) { color:var(--muted); font-size:15px; margin-bottom:22px; } +.setup-intro .requirements { font-size:12px !important; padding-top:20px; border-top:1px solid var(--line); } +.text-link { color:var(--accent); display:inline-flex; align-items:center; gap:7px; font-size:13px; } +.text-link .icon { width:16px; height:16px; flex-basis:16px; } +.setup-steps { list-style:none; margin:0; padding:0; } +.setup-steps > li { padding-bottom:30px; } +.setup-step-title { display:flex; gap:14px; align-items:center; margin-bottom:14px; } +.setup-step-title > span { color:var(--muted); font-size:12px; font-family:ui-monospace,Consolas,monospace; } +.setup-step-title h3 { margin:0; font-size:18px; } +.setup-steps p { color:var(--muted); font-size:14px; line-height:1.75; margin-bottom:14px; } +.setup-steps p > a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; } +.setup-steps p > code { color:#315847; font-size:12px; } +.code-block { background:#f3f6f3; border:1px solid #dee7df; border-radius:6px; overflow:hidden; } +.code-toolbar { position:relative; display:flex; align-items:center; gap:10px; border-bottom:1px solid #dfe8e0; padding:5px 8px 5px 16px; color:#62736c; font-size:11px; } +.code-toolbar > button { margin-left:auto; width:32px; height:32px; display:grid; place-items:center; background:transparent; border:0; border-radius:4px; color:#4e7966; cursor:pointer; } +.code-toolbar > button:hover { background:#e6efe8; } +.code-toolbar .icon { width:16px; height:16px; } +.copy-status { position:absolute; left:16px; right:50px; font-size:11px; } +.code-toolbar:has(.copy-status:not(:empty)) > span:first-child { visibility:hidden; } +.copy-status:empty { display:none; } +pre { margin:0; padding:16px; overflow:auto; font-size:11px; line-height:1.9; } +pre code { white-space:pre; overflow-wrap:normal; } +.scope { padding-block:28px 76px; } +.scope .section-heading { margin-bottom:30px; } +details { border-top:1px solid var(--line); padding:20px 0; } +details:last-child { border-bottom:1px solid var(--line); } +summary { cursor:pointer; font-size:18px; font-weight:500; list-style:none; position:relative; padding-right:32px; } +summary::-webkit-details-marker { display:none; } +summary::after { content:"+"; position:absolute; right:0; top:0; font:22px/1.2 Outfit,sans-serif; color:#779987; } +details[open] summary::after { content:"−"; } +details p { color:var(--muted); font-size:14px; max-width:860px; margin:14px 0 0; line-height:1.8; } +details .text-link { margin-top:12px; } +.closing { background:#e4efe8; border-block:1px solid #d2e2d7; padding:52px 0; } +.closing > .wrap { display:flex; justify-content:space-between; gap:30px; align-items:center; } +.closing h2 { font-size:38px; line-height:1.15; font-weight:550; margin:0 0 14px; } +.closing p:not(.eyebrow) { font-size:15px; color:var(--muted); } +footer { display:flex; align-items:center; justify-content:space-between; gap:28px; padding-block:30px; } +.footer-brand { font-size:16px; } +.footer-brand small { font-size:10px; } +footer > p { color:var(--muted); font-size:11px; } +footer nav { font-size:12px; gap:20px; } +footer nav > a:last-child { display:inline-flex; align-items:center; gap:4px; } +footer nav .icon { width:14px; height:14px; flex-basis:14px; } +.skip { position:fixed; top:-100px; left:20px; z-index:10; padding:12px; background:#fff; border:1px solid var(--line); } +.skip:focus { top:10px; } +@media (max-width:900px) { + .wrap { width:calc(100% - 48px); } + .hero { padding-top:42px; } + h1 { font-size:48px; } + .hero-description { font-size:16px; } + .session-composition { padding-inline:40px; } + .session-commands code { font-size:10px; } + .viper { width:140%; left:-20%; bottom:-100px; } + .capabilities { gap:28px; } + .capabilities h3 { font-size:18px; } + .tool-index { flex-wrap:wrap; } + .tool-index > ul { flex-basis:calc(100% - 100px); } + .connection-flow { gap:12px; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr); } + .connection-flow strong { font-size:16px; } + .setup { gap:40px; } + footer { flex-wrap:wrap; } } -@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } } +@media (max-width:600px) { + .wrap { width:calc(100% - 40px); } + .site-header { height:74px; } + .brand { font-size:18px; gap:8px; } + .brand img { width:29px; height:29px; } + .site-header nav { gap:16px; font-size:13px; } + .site-header nav > a:first-child { display:none; } + .repo-link { padding-left:0; border:0; } + .repo-link > span, .repo-link > .icon:last-child { display:none; } + .hero { padding:34px 20px 32px; } + .eyebrow { margin-bottom:16px; font-size:10px; } + h1 { font-size:32px; line-height:1.13; } + .hero-description { margin-top:18px; font-size:15px; line-height:1.65; } + .desktop-break { display:none; } + .actions { gap:9px; margin-top:22px; } + .button { font-size:13px; gap:8px; padding:10px 15px; } + .hero-facts { font-size:10px; gap:7px; } + .session-figure { margin-top:85px; } + .session-composition { padding:0; height:188px; } + .session-panel { transform:rotate(-1.5deg); } + .session-title { padding:0 12px; font-size:10px; } + .session-title small { display:none; } + .session-commands { padding:11px 13px; } + .session-commands li { min-height:38px; grid-template-columns:18px minmax(0,1fr); gap:7px; } + .command-purpose { display:none; } + .session-commands code { font-size:10px; } + .code-detail { display:block; font-size:9px; margin-top:2px; } + .viper { width:150%; left:-25%; bottom:90px; } + .viper-front { mask-image:linear-gradient(90deg,#000 0 18%,transparent 18% 77%,#000 77% 100%); } + .session-figure figcaption { margin-top:18px; font-size:10px; } + .overview { padding-block:40px; } + .section-heading h2, .setup-intro h2, .closing h2 { font-size:29px; } + .capabilities, .setup { grid-template-columns:minmax(0,1fr); } + .capabilities { margin-top:28px; gap:26px; } + .capabilities article { padding-top:20px; } + .tool-index { gap:12px; margin-top:28px; } + .tool-index ul { flex-basis:100%; gap:8px 16px; } + .connection { padding:40px 0; } + .connection-flow { grid-template-columns:minmax(0,1fr); gap:14px; margin-top:26px; } + .connection-flow > .flow-arrow { margin-left:4px; transform:rotate(90deg); width:17px; height:17px; } + .connection-flow strong { font-size:19px; } + .setup { padding-block:44px 20px; gap:30px; } + .scope { padding-block:20px 44px; } + summary { font-size:16px; } + .closing { padding:40px 0; } + .closing > .wrap { align-items:start; flex-direction:column; gap:22px; } + footer { flex-direction:column; align-items:start; gap:18px; padding-block:28px; } + footer nav { gap:18px; flex-wrap:wrap; } +} +@media (max-width:360px) { h1 { font-size:26px; } .hero { padding-inline:16px; } .wrap { width:calc(100% - 32px); } .button { padding-inline:12px; } .session-figure { margin-top:70px; } } +@media (min-width:901px) and (max-height:800px) { + .hero { padding-top:18px; padding-bottom:20px; } + h1 { font-size:48px; } + .hero-description { font-size:16px; margin-top:16px; } + .actions { margin-top:20px; } + .session-figure { width:min(100%,800px); margin-top:28px; } + .session-composition { padding-inline:100px; } + .viper { width:120%; left:-10%; bottom:-85px; } + .session-figure figcaption { margin-top:18px; } +} +@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none !important; } }