diff --git a/artifacts/CHECKSUMS.sha256 b/artifacts/CHECKSUMS.sha256 index fb58f01..ff93676 100644 --- a/artifacts/CHECKSUMS.sha256 +++ b/artifacts/CHECKSUMS.sha256 @@ -24,17 +24,18 @@ e5f38de7b71097b9017788638f7972d9e45e6ea98022131290f4742eaca0e66d CONTRIBUTING.m e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855 docs/.nojekyll 436f4f88fe38c9371ada5091b152e180f1399668d29691cf3293f7f9899673b8 docs/ARCHITECTURE.md d452b9a068b7edf94b916e093755563701a0a9aed9fae914d857421377087e89 docs/assets/codsemble-concept-native-compiler.webp +cf7d318201e14d26e68756b4d7f3317437d493fed038e37d8ec53029e610f3c1 docs/assets/codsemble-flow-v2.webp beaae606bcf49d4c99490daec3cfafff54b5ceb41765a9bffb832bfb2136acd2 docs/assets/codsemble-prism-flow.webp f929dfc14de476c5ed1ce3c6e27f4cb9d7c9c45f7d3884c9b793174b74a1397c docs/BRAND.md f41132adc833328e17b1e304ef41c4a3f72401b674d997f56269b3481e7b45d6 docs/CONFIG_SAFETY.md 015308700a7ceb71a073b7e7a619d44ec3367db0a33a49b73aab4f3346c209ab docs/DEFINITION_OF_DONE.md -2e259a451763d030d30864a118c0c7e9302fb0d0413d21a0280244230d48e40c docs/index.html +12f477b541235324919616d9389c72326b418a9354c9ea0c075a808fc9eca8bd docs/index.html 7f585f942f10a18f836b53d822028f39a2d5b6bf91f16b1218ab73aeee140047 docs/MIGRATION_V0_2.md 7b1b0fae02c9f36405ab7ca0ac97b5bf69e71b23a23e9e7ab8af484170fdd8ee docs/PRIVACY.md 5a54e204e4c0e9357442784225835f2bf0c865fb174351d175b4167e990addf9 docs/PROJECT_CAPABILITY_COMPILER.md 5bbc7300b711e5e25085d3282e2e234f264baf96d189305e33e5fd9e7832d3de docs/ROLE_CATALOG.md -38447c010dda4a69fe2c5963dd205366797901eb6865e95abd1507f5f16aca9c docs/script.js -2f12582b7da4af3174bb8630900ce8f2e6ef01c5e5d999ab248d5e24031bc1df docs/styles.css +c027a40af66414303146cc7e2648af8f310e54329ba31c33e3dcd73c7b707a2a docs/script.js +960f67bc9119ddc81c2d71a7573dac95e802d9b8b168f73799315ca01a6852af docs/styles.css a992f4b3cb388bac1a5d43b9a31a13be80505778894211aa46761e64e4fe56af docs/THREAT_MODEL.md e03c31ce5087e8a203f2500791228e3c5fa9dfbb8bebf2f7352e2c31e14ee93e docs/USAGE.md 05575afa5edbb76589ee5ee00fcc3b1a07cb62a02c2b42fa204115c4e4742540 docs/USEFULNESS_COMPARISON.md diff --git a/docs/assets/codsemble-flow-v2.webp b/docs/assets/codsemble-flow-v2.webp new file mode 100644 index 0000000..87aa58a Binary files /dev/null and b/docs/assets/codsemble-flow-v2.webp differ diff --git a/docs/index.html b/docs/index.html index 3eb6461..bd8c982 100644 --- a/docs/index.html +++ b/docs/index.html @@ -3,114 +3,89 @@ - - + + + + + + + Codesemble — the repository-aware team builder for Codex +
- - Codesemble - - + Codesemble +
+
-
-
-

Open source · project-scoped · preview before apply

-

Audit your repository.
Assemble the smallest capable Codex team.

-

Codesemble turns repository evidence and your goal into a reviewable, native Codex team—without asking you to design every role by hand.

-
Install Codesemble See how it works
-
Evidence-ledNative outputHuman approval
-
-
- - A glass prism transforms repository fragments into a small team of colorful project outputs. -

01 Evidence in Native team out

+
+
+

Open source · project-scoped · preview before apply

+

Get the right Codex team for this repository.

+

Codesemble audits your project, proposes a small evidence-backed team, and shows the exact project diff before anything changes.

+
Try Codesemble See the 60-second loop
+
Read-only auditHuman approvalRollbackable
+
+ + A repository's file signals flow through a compiler into three project role cards. +
Repository clues options approved team
+
-
-

The compiler loop

From a messy project to a useful team in three clear moves.

Codesemble keeps the reasoning visible, so the team is explainable before it is ever written.

-
-
01

Audit

Read bounded, typed project signals locally and pair them with the goal you state.

repository + goal
-
02

Compile

Translate required work into the smallest complete set of evidence-backed roles.

work packages → roles
-
03

Review & apply

See the exact project diff, approve a fresh plan, then use Doctor and rollback when needed.

preview → apply → verify
+
+

The useful part

One clear loop from project context to project help.

No fixed roster. No hidden setup. You see why each role appears and what will be written.

+
AuditCompileReviewApply
+
+
01

Audit

Read repository clues locally and pair them with the goal you state.

project + goal
+
02

Compile

Turn the work into the smallest complete set of useful roles.

work → capabilities
+
03

Review

Compare Focused, Recommended, and Extended options with evidence.

options → exact plan
+
04

Apply

Approve the fresh plan, then verify or roll it back from the project.

human decision → files
-
-

A team that fits the evidence

Pick the level of coverage your project actually needs.

The names and count change with the repository. These options show the decision, not a fixed roster.

-
-
-
Example project signal
-

Release a payment flow safely

-

Codesemble found evidence for delivery, security review, and an existing test boundary.

-
- - - +
+
+

Illustrative example

See the decision before you make it.

Change the project clue or coverage level. The example is a model of the explanation Codesemble gives you—not a fixed promise.

+
+
+ Project clues

Release a payment flow safely

An existing test boundary gives the compiler a concrete validation owner.

+
-
Why this matters

A delivery goal activates a delivery work package and makes its evidence traceable.

-
-
-
- - - -
-
-
Smallest complete coverage3 roles
Delivery specialistowns the release work
Security specialistreviews the security boundary
Test specialistchecks the payment flow
- - -
Spawned-worker ceiling: 4 primary thread excluded
+
+
+

Recommended · required work plus independent verification

+ + + +

The catalog is a capability library. The project and goal decide the roles.

-
-

You keep the wheel

The primary thread coordinates. You decide.

Generated specialists are available capabilities, not an always-running swarm. The primary Codex thread delegates bounded work, reconciles evidence, and owns the final result.

01

Preview first. Audit and planning are read-only.

02

Confirm exactly. Apply requires a fresh plan and human approval.

03

Recover cleanly. Doctor and rollback preserve project-local control.

Read the safety boundary
-
- Codesemble control flowYou direct the primary Codex thread. The primary delegates bounded work to specialists and integrates their evidence.YouPrimary threadSpecialistsResultdirectdelegatesintegrates -
You → primary Codex thread → bounded specialists → integrated result
-
-
- -
-

Project-local output

Useful files, visible before they land.

Codesemble configures the project boundary. It does not edit personal Codex settings, trust, credentials, or runtime permissions.

-
-
AAGENTS.mdorchestration guidance
T.codex/agents/<role>.tomlnative specialists
C.codex/config.tomloptional ceiling
M.codex/codsemble/manifest.jsonteam ownership
↺.codex/codsemble/transactions/rollback history
-
⌁What does “preview” mean?Expand the review boundary

Before apply, the plan names the roles, instructions, sandbox/profile requests, worker ceiling, and every managed path. Apply rechecks the current plan, relevant evidence, and output preimages.

+ .codex/agents/security.toml
+ .codex/codsemble/manifest.json
· personal ~/.codex/config.toml untouched
-
-
- -
-

A common misconception

111 is a library, not a roster.

The catalog contains reusable capability primitives. Codesemble selects only roles justified by your project and goal; installed roles and active workers remain separate.

Explore the primitive library
- +
+

Control stays visible

Your Codex session stays in charge.

Generated specialists are available capabilities, not an always-running swarm. The primary thread delegates bounded work and owns the final result.

01

Preview first. Audit and planning are read-only.

02

Confirm exactly. Apply requires a fresh plan and human approval.

03

Recover cleanly. Doctor and rollback preserve project-local control.

Read the safety boundary
+
Project-local output

Useful files, visible before they land.

  • AGENTS.mdorchestration guidance
  • .codex/agents/<role>.tomlnative specialists
  • .codex/config.tomloptional worker limit
  • .codex/codsemble/manifest.jsonteam ownership
  • .codex/codsemble/transactions/rollback history
What does “preview” mean?

The plan names roles, instructions, configuration, and every managed path. Apply rechecks the exact plan and refuses stale project state.

-
-

Start with your repository

Let the project tell you what team it needs.

Install the plugin, open a fresh Codex session, and ask Codesemble to audit before you choose a team.

Install from the validated v0.2 candidate
codex plugin marketplace add VAMFI/codsemble --ref fc247152961c25e79b525a969806991f499a2bac
-codex plugin add codsemble@codsemble

Then ask:$codsemble:initialize-team Audit this workspace and help me choose the smallest useful team.
+
+

Start with your project

Install, restart Codex, and ask for the smallest useful team.

Codesemble is project-local. It does not edit your personal Codex settings or publish anything for you.

  1. InstallAdd the plugin from Git.
  2. RestartOpen a fresh Codex session.
  3. InitializeRun the audit in your workspace.
Terminal
codex plugin marketplace add VAMFI/codsemble --ref fc247152961c25e79b525a969806991f499a2bac
codex plugin add codsemble@codsemble

Then ask: $codsemble:initialize-team

-
-

Go deeper when you are ready

The short version lives here. The contracts live in the repo.

-
01Get startedInstall, initialize, update, diagnose, rollback02Understand generationCompiler, work packages, and admission03Review safetyExact approval, privacy, and threat model04See the evidenceWhat has actually been tested
-
+

Keep exploring

Clear docs for the details.

01UsageInstall, initialize, update, diagnose, roll back.02Compiler contractUnderstand evidence, capabilities, and team options.03Voice approvalUse a speakable exact challenge without weakening control.04ValidationSee what has actually been tested and where.
Why is there a 111-entry catalog?

It is a library of reusable capability primitives, not a roster or team-size target. Codesemble dynamically selects only roles justified by the repository and goal.

- + diff --git a/docs/script.js b/docs/script.js index 22eb262..d6e83ed 100644 --- a/docs/script.js +++ b/docs/script.js @@ -1,49 +1,67 @@ -const evidenceCopy = { - delivery: "A delivery goal activates a delivery work package and makes its evidence traceable.", - security: "A security requirement justifies a specialist review instead of a generic extra agent.", - tests: "An existing test boundary gives the compiler a concrete validation owner to cover.", +const signalCopy = { + tests: "An existing test boundary gives the compiler a concrete validation owner.", + security: "A security requirement justifies specialist review instead of a generic extra agent.", + delivery: "GitHub Actions evidence makes the delivery work visible and traceable.", +}; +const coverageLabel = { + recommended: "Recommended · required work plus independent verification", + focused: "Focused · the smallest complete coverage", + extended: "Extended · required work plus optional lifecycle support", }; const menuToggle = document.querySelector(".menu-toggle"); const siteNav = document.querySelector(".site-nav"); +const closeMenu = (returnFocus = false) => { + if (!menuToggle || !siteNav) return; + menuToggle.setAttribute("aria-expanded", "false"); + siteNav.classList.remove("is-open"); + if (returnFocus) menuToggle.focus(); +}; menuToggle?.addEventListener("click", () => { const open = menuToggle.getAttribute("aria-expanded") === "true"; menuToggle.setAttribute("aria-expanded", String(!open)); siteNav?.classList.toggle("is-open", !open); }); -siteNav?.querySelectorAll("a").forEach((link) => { - link.addEventListener("click", () => { - menuToggle?.setAttribute("aria-expanded", "false"); - siteNav.classList.remove("is-open"); +siteNav?.querySelectorAll("a").forEach((link) => link.addEventListener("click", () => closeMenu())); +document.addEventListener("keydown", (event) => { + if (event.key === "Escape") closeMenu(true); +}); +document.addEventListener("click", (event) => { + if (siteNav?.classList.contains("is-open") && !siteNav.contains(event.target) && !menuToggle?.contains(event.target)) closeMenu(); +}); + +const signalText = document.querySelector("#signal-copy"); +document.querySelectorAll("[data-signal]").forEach((button) => { + button.addEventListener("click", () => { + document.querySelectorAll("[data-signal]").forEach((item) => { + const active = item === button; + item.classList.toggle("is-active", active); + item.setAttribute("aria-pressed", String(active)); + }); + if (signalText) signalText.textContent = signalCopy[button.dataset.signal] ?? ""; }); }); const tabs = [...document.querySelectorAll('[role="tab"]')]; -const panels = [...document.querySelectorAll("[data-team-panel]")]; -function selectTeam(team, focus = false) { +const panels = [...document.querySelectorAll("[data-coverage-panel]")]; +const demoStatus = document.querySelector(".demo-status"); +function selectCoverage(coverage, focus = false) { tabs.forEach((tab) => { - const selected = tab.dataset.team === team; - tab.setAttribute("aria-selected", String(selected)); - tab.tabIndex = selected ? 0 : -1; + const active = tab.dataset.coverage === coverage; + tab.setAttribute("aria-selected", String(active)); + tab.tabIndex = active ? 0 : -1; }); - panels.forEach((panel) => { panel.hidden = panel.dataset.teamPanel !== team; }); - if (focus) tabs.find((tab) => tab.dataset.team === team)?.focus(); + panels.forEach((panel) => { panel.hidden = panel.dataset.coveragePanel !== coverage; }); + if (demoStatus) demoStatus.textContent = coverageLabel[coverage] ?? ""; + if (focus) tabs.find((tab) => tab.dataset.coverage === coverage)?.focus(); } tabs.forEach((tab, index) => { - tab.addEventListener("click", () => selectTeam(tab.dataset.team)); + tab.addEventListener("click", () => selectCoverage(tab.dataset.coverage)); tab.addEventListener("keydown", (event) => { if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(event.key)) return; event.preventDefault(); const next = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : (index + (event.key === "ArrowRight" ? 1 : -1) + tabs.length) % tabs.length; - selectTeam(tabs[next].dataset.team, true); - }); -}); - -const evidenceDetail = document.querySelector("#evidence-detail-text"); -document.querySelectorAll("[data-evidence]").forEach((chip) => { - chip.addEventListener("click", () => { - document.querySelectorAll("[data-evidence]").forEach((item) => item.classList.toggle("is-active", item === chip)); - if (evidenceDetail) evidenceDetail.textContent = evidenceCopy[chip.dataset.evidence] ?? "This signal contributes to a bounded work package."; + selectCoverage(tabs[next].dataset.coverage, true); }); }); @@ -52,12 +70,13 @@ document.querySelectorAll("[data-copy-target]").forEach((button) => { const target = document.getElementById(button.dataset.copyTarget); const status = button.closest(".command-box")?.querySelector(".copy-status"); if (!target) return; + const text = target.innerText.replace(/\\n/g, "\n"); try { - await navigator.clipboard.writeText(target.textContent.trim()); + await navigator.clipboard.writeText(text); button.textContent = "Copied"; - if (status) status.textContent = "Install commands copied to your clipboard."; + if (status) status.textContent = "Commands copied."; } catch { - if (status) status.textContent = "Copy is unavailable here; select the commands above instead."; + if (status) status.textContent = "Copy unavailable; select the commands above."; } window.setTimeout(() => { button.textContent = "Copy"; }, 1800); }); @@ -74,6 +93,4 @@ if (!reduceMotion && "IntersectionObserver" in window) { }); }, { threshold: .12 }); document.querySelectorAll(".reveal").forEach((element) => observer.observe(element)); -} else { - document.querySelectorAll(".reveal").forEach((element) => element.classList.add("is-visible")); } diff --git a/docs/styles.css b/docs/styles.css index e5a49e5..541f9e9 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -1,19 +1,179 @@ -:root{--ink:#edf5ff;--muted:#94aac8;--faint:#6d83a4;--navy:#071326;--panel:rgba(15,34,62,.74);--line:rgba(157,185,224,.18);--cyan:#65e3ff;--violet:#9b7bff;--coral:#ff9b8e;--radius:24px;color-scheme:dark;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none} -+*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--navy)}body{margin:0;color:var(--ink);background:radial-gradient(circle at 75% 4%,rgba(92,116,255,.14),transparent 32rem),var(--navy);line-height:1.55}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.24;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,#000,transparent 70%)} -+a{color:inherit}.shell{width:min(1180px,calc(100% - 48px));margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;z-index:20;top:-4rem;left:1rem;padding:.7rem 1rem;background:var(--cyan);color:#061222;border-radius:0 0 10px 10px;font-weight:800}.skip-link:focus{top:0} -+.site-header{position:sticky;top:0;z-index:10;border-bottom:1px solid rgba(157,185,224,.12);background:rgba(7,19,38,.76);backdrop-filter:blur(18px)}.header-inner,.footer-inner{display:flex;align-items:center;min-height:74px;gap:2rem}.brand{display:inline-flex;align-items:center;gap:.65rem;color:var(--ink);font-weight:800;letter-spacing:-.03em;text-decoration:none;font-size:1.1rem}.brand-mark{position:relative;display:inline-block;width:25px;height:25px;transform:rotate(30deg)}.brand-mark i,.brand-mark b,.brand-mark em{position:absolute;display:block;border:2px solid var(--cyan);border-radius:3px;width:13px;height:13px}.brand-mark i{top:0;left:6px;border-color:var(--violet)}.brand-mark b{bottom:0;left:0;border-color:var(--cyan)}.brand-mark em{right:0;bottom:0;border-color:var(--coral)}.site-nav{display:flex;align-items:center;gap:1.35rem;margin-left:auto;font-size:.88rem;color:var(--muted)}.site-nav a{text-decoration:none}.site-nav a:hover,.site-nav a:focus-visible{color:var(--ink)}.site-nav .nav-cta{color:#061222;background:var(--cyan);padding:.52rem .95rem;border-radius:999px;font-weight:800}.menu-toggle{display:none;margin-left:auto;border:1px solid var(--line);border-radius:10px;padding:.5rem .65rem;color:var(--ink);background:transparent;font-size:1.2rem} -+.hero{min-height:700px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:2rem;padding-block:5.5rem 5rem;position:relative}.hero-copy{position:relative;z-index:1;max-width:620px}.eyebrow{margin:0 0 1rem;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;font-weight:800;color:var(--cyan)}.pulse-dot,.status-dot{width:7px;height:7px;display:inline-block;border-radius:99px;background:var(--cyan);box-shadow:0 0 0 5px rgba(101,227,255,.1),0 0 18px var(--cyan);margin-right:.55rem;vertical-align:1px} -+h1,h2,h3,p{margin-top:0}h1{max-width:680px;margin-bottom:1.5rem;font-size:clamp(3.1rem,6.6vw,6.4rem);line-height:.98;letter-spacing:-.075em}h1 span{color:#b7c9ff}h2{max-width:680px;margin-bottom:1rem;font-size:clamp(2rem,4vw,3.5rem);line-height:1.03;letter-spacing:-.06em}h3{letter-spacing:-.035em}p{color:var(--muted)}.hero-lede{max-width:530px;font-size:1.12rem}.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:2.2rem 0 1.8rem}.button{display:inline-flex;gap:.65rem;align-items:center;min-height:48px;padding:.75rem 1.1rem;border-radius:999px;font-weight:800;text-decoration:none}.button-primary{background:var(--cyan);color:#061222;box-shadow:0 10px 30px rgba(101,227,255,.16)}.button-quiet{border:1px solid var(--line);color:var(--ink)}.button:hover,.button:focus-visible{transform:translateY(-2px)}.hero-proof{display:flex;flex-wrap:wrap;gap:1.2rem;color:var(--faint);font-size:.82rem}.hero-proof span:before{content:"·";color:var(--coral);margin-right:.45rem} -+.hero-art{min-width:0;position:relative;transform:translateX(4%)}.hero-art img{position:relative;z-index:1;display:block;width:120%;max-width:none;margin-left:-14%;border-radius:28px;mix-blend-mode:screen;opacity:.94}.art-glow{position:absolute;width:55%;aspect-ratio:1;right:14%;top:18%;border-radius:50%;background:rgba(101,227,255,.16);filter:blur(70px)}.art-caption{position:absolute;z-index:2;bottom:3%;left:12%;margin:0;color:#d5e4ff;font-size:.7rem;text-transform:uppercase;letter-spacing:.16em}.art-caption span{color:var(--coral);margin-right:.55rem}.art-caption i{display:inline-block;width:48px;height:1px;margin:0 .5rem;background:var(--cyan);vertical-align:middle} -+.section-block{padding-block:7rem}.section-heading{max-width:760px;margin-bottom:3rem}.section-heading>p:last-child{max-width:590px;font-size:1.05rem}.flow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.flow-card{min-height:330px;padding:1.6rem;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,rgba(23,48,82,.85),rgba(10,28,52,.7));position:relative;overflow:hidden}.flow-card:after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-80px;top:-80px;background:rgba(101,227,255,.08)}.card-index{color:var(--coral);font-size:.7rem;letter-spacing:.1em;font-weight:800}.flow-icon{height:76px;display:flex;align-items:center;gap:8px;margin:1.8rem 0 1.3rem}.flow-icon span{display:block;width:13px;border-radius:5px;background:linear-gradient(to top,var(--cyan),var(--violet))}.icon-scan span:nth-child(1){height:28px}.icon-scan span:nth-child(2){height:54px}.icon-scan span:nth-child(3){height:40px}.icon-compile{position:relative}.icon-compile span{width:38px;height:38px;border-radius:11px}.icon-compile span:nth-child(2){margin-left:-22px;opacity:.55}.icon-compile span:nth-child(3){margin-left:-22px;opacity:.28}.icon-approve span{width:70px;height:11px;border-radius:99px}.icon-approve span:nth-child(2){width:45px;margin-left:-30px;opacity:.6}.icon-approve span:nth-child(3){width:22px;margin-left:-30px;opacity:.28}.flow-card h3{font-size:1.45rem;margin-bottom:.55rem}.flow-card p{max-width:270px;min-height:74px}.flow-card code{color:var(--cyan);font-size:.75rem} -+.explorer-layout{display:grid;grid-template-columns:.82fr 1.18fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:rgba(7,19,38,.52)}.evidence-panel{padding:2rem;background:linear-gradient(165deg,rgba(30,45,91,.7),rgba(11,28,54,.72))}.panel-label{color:var(--cyan);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.evidence-panel h3{margin:3.5rem 0 .7rem;font-size:1.55rem}.evidence-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0}.evidence-chip{cursor:pointer;border:1px solid rgba(101,227,255,.27);border-radius:999px;padding:.45rem .65rem;color:#cce7ff;background:rgba(101,227,255,.07);font:inherit;font-size:.72rem}.evidence-chip.is-active,.evidence-chip:hover{border-color:var(--cyan);color:var(--cyan)}.evidence-detail{padding-top:1.1rem;border-top:1px solid var(--line)}.detail-kicker{color:var(--faint);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em}.evidence-detail p{margin:.4rem 0 0;font-size:.84rem}.team-panel{min-width:0}.tabs{display:flex;border-bottom:1px solid var(--line);padding:0 .8rem}.tabs button{cursor:pointer;position:relative;padding:1.15rem .9rem;border:0;color:var(--muted);background:transparent;font:inherit;font-size:.8rem;font-weight:800}.tabs button[aria-selected=true]{color:var(--ink)}.tabs button[aria-selected=true]:after{content:"";position:absolute;height:2px;left:.9rem;right:.9rem;bottom:-1px;background:var(--cyan)}.team-panel-content{padding:2rem}.panel-topline{display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.84rem}.panel-topline strong{color:var(--cyan)}.role-list{display:grid;gap:.75rem;margin:1.5rem 0 2rem}.role-list div{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-bottom:1px solid rgba(157,185,224,.1);padding-bottom:.8rem}.role-list b{font-size:.92rem}.role-list span{color:var(--muted);font-size:.75rem;text-align:right}.ceiling-note{border:1px solid rgba(255,155,142,.2);border-radius:12px;padding:.8rem 1rem;color:var(--coral);font-size:.78rem}.ceiling-note strong{color:var(--ink)}.ceiling-note small{color:var(--faint);margin-left:.4rem} -+.control-section{display:grid;grid-template-columns:.92fr 1.08fr;gap:4rem;align-items:center}.control-copy>p:not(.eyebrow){max-width:520px;font-size:1.04rem}.control-list{display:grid;gap:.85rem;margin:2rem 0}.control-list div{display:grid;grid-template-columns:30px 1fr;gap:.8rem;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:.85rem}.control-list span{color:var(--coral);font-size:.7rem;font-weight:800}.control-list p{margin:0;font-size:.88rem}.control-list b{color:var(--ink)}.text-link{color:var(--cyan);text-decoration:none;font-weight:800;font-size:.86rem}.text-link:hover{color:#fff}.control-figure{margin:0;padding:1.5rem;border:1px solid var(--line);border-radius:var(--radius);background:radial-gradient(circle at 50% 50%,rgba(113,93,255,.18),transparent 50%),var(--panel)}.control-figure svg{display:block;width:100%;height:auto}.control-figure figcaption{margin-top:.8rem;color:var(--muted);text-align:center;font-size:.76rem} -+.outputs-section{padding-top:2rem}.outputs-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:1rem;align-items:start}.file-stack{display:grid;gap:.6rem}.file-row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:.8rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:13px;background:rgba(14,32,58,.6)}.file-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:rgba(101,227,255,.1);color:var(--cyan);font-size:.65rem;font-weight:800}.file-row code{overflow-wrap:anywhere;color:#cfddf3;font-size:.77rem}.file-row>span:last-child{color:var(--faint);font-size:.72rem}.diff-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:linear-gradient(145deg,rgba(30,45,91,.6),rgba(11,28,54,.7))}.diff-card summary{display:grid;grid-template-columns:36px 1fr 20px;align-items:center;gap:.8rem;cursor:pointer;list-style:none;padding:1.25rem}.diff-card summary::-webkit-details-marker{display:none}.summary-icon{display:grid;place-items:center;width:33px;height:33px;color:var(--cyan);border:1px solid rgba(101,227,255,.3);border-radius:10px}.diff-card summary b,.diff-card summary small{display:block}.diff-card summary small{color:var(--muted);font-size:.75rem;margin-top:.2rem}.summary-arrow{color:var(--cyan);font-size:1.2rem}.diff-card[open] .summary-arrow{transform:rotate(45deg)}.diff-content{padding:0 1.25rem 1.25rem}.diff-content p{font-size:.83rem}.diff-line{padding:.5rem .7rem;margin-top:.4rem;border-radius:7px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:.7rem}.diff-add{color:#aef6d6;background:rgba(60,210,150,.08)}.diff-neutral{color:var(--muted);background:rgba(157,185,224,.07)} -+.primitive-section{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:4rem}.primitive-copy>p:not(.eyebrow){max-width:500px}.primitive-visual{min-height:280px;position:relative;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius);background:radial-gradient(circle at 50% 50%,rgba(101,227,255,.12),transparent 45%),rgba(11,28,54,.65);overflow:hidden}.primitive-count{position:relative;z-index:1;font-size:clamp(4rem,9vw,8rem);line-height:1;letter-spacing:-.1em;color:transparent;-webkit-text-stroke:1px rgba(101,227,255,.7)}.primitive-label{position:absolute;z-index:1;top:53%;left:50%;transform:translate(-50%,0);text-align:center;color:var(--muted);text-transform:uppercase;letter-spacing:.15em;font-size:.68rem}.selection-line{position:absolute;width:76%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);transform:rotate(-25deg)}.selected-role{position:absolute;padding:.45rem .65rem;border-radius:8px;border:1px solid rgba(255,155,142,.4);background:rgba(255,155,142,.1);color:#ffd8d2;font-size:.7rem}.role-one{top:18%;right:14%}.role-two{bottom:17%;right:20%}.role-three{top:31%;left:15%} -+.install-section{padding-top:3rem}.install-card{display:grid;grid-template-columns:.9fr 1.1fr;gap:2rem;padding:clamp(1.5rem,4vw,3rem);border:1px solid rgba(101,227,255,.24);border-radius:30px;background:linear-gradient(120deg,rgba(23,53,91,.9),rgba(25,34,79,.8));box-shadow:0 20px 70px rgba(0,0,0,.18)}.install-card h2{font-size:clamp(1.8rem,3.4vw,2.8rem)}.install-card>div>p:last-child{max-width:460px}.command-box{align-self:center;overflow:hidden;border:1px solid rgba(157,185,224,.24);border-radius:14px;background:#061122}.command-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem .95rem;border-bottom:1px solid var(--line);color:var(--muted);font-size:.7rem}.copy-button{cursor:pointer;border:1px solid rgba(101,227,255,.35);border-radius:999px;padding:.35rem .7rem;color:var(--cyan);background:rgba(101,227,255,.08);font:inherit;font-weight:800}.command-box pre{overflow-x:auto;margin:0;padding:1.1rem}.command-box code{color:#c9e6ff;font-size:.72rem;line-height:1.8}.copy-status{min-height:1.3rem;padding:0 1.1rem .5rem;margin:0;color:var(--cyan);font-size:.7rem}.install-next{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;padding-top:1.15rem;border-top:1px solid rgba(157,185,224,.15);color:var(--muted);font-size:.78rem}.install-next code{color:#c9e6ff} -+.docs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}.docs-grid a{position:relative;display:block;min-height:180px;padding:1.2rem;border:1px solid var(--line);border-radius:18px;color:var(--ink);text-decoration:none;background:rgba(14,32,58,.55)}.docs-grid a:hover,.docs-grid a:focus-visible{border-color:rgba(101,227,255,.6);transform:translateY(-4px)}.docs-grid span,.docs-grid i{color:var(--cyan);font-size:.7rem;font-style:normal}.docs-grid i{position:absolute;top:1.2rem;right:1.2rem}.docs-grid b,.docs-grid small{display:block;margin-top:2.6rem}.docs-grid small{margin-top:.45rem;color:var(--muted);font-size:.75rem} -+.site-footer{border-top:1px solid var(--line)}.footer-inner{justify-content:space-between;min-height:110px}.footer-inner p{margin:0;font-size:.8rem}.footer-inner>div{display:flex;gap:1rem;color:var(--muted);font-size:.78rem}.footer-inner a:hover{color:var(--cyan)} -+.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}.reveal.is-visible{opacity:1;transform:none}.reveal-delay{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}:focus-visible{outline:3px solid var(--coral);outline-offset:4px} -+@media(max-width:920px){.hero{grid-template-columns:1fr;min-height:auto;padding-top:4.5rem}.hero-art{transform:none;margin-top:-1rem}.hero-art img{width:110%;margin-left:-5%}.flow-grid,.docs-grid{grid-template-columns:repeat(2,1fr)}.explorer-layout,.control-section,.primitive-section,.outputs-grid,.install-card{grid-template-columns:1fr}.control-section,.primitive-section{gap:2rem}.outputs-section{padding-top:4rem}.install-next{grid-column:auto}} -+@media(max-width:680px){.shell{width:min(100% - 32px,560px)}.header-inner{min-height:64px}.menu-toggle{display:block}.site-nav{position:absolute;display:none;top:64px;left:0;right:0;padding:1rem;flex-direction:column;align-items:stretch;background:#09182c;border-bottom:1px solid var(--line)}.site-nav.is-open{display:flex}.site-nav a{padding:.55rem .35rem}.site-nav .nav-cta{text-align:center}.hero{padding-block:4rem 3rem}.hero-art{margin-inline:-1rem}.hero-art img{width:125%;margin-left:-12%}.art-caption{left:9%;bottom:5%;font-size:.58rem}.flow-grid,.docs-grid{grid-template-columns:1fr}.flow-card{min-height:0}.section-block{padding-block:4.5rem}.explorer-layout{border-radius:18px}.evidence-panel,.team-panel-content{padding:1.25rem}.evidence-panel h3{margin-top:2rem}.tabs{padding-inline:.2rem;overflow-x:auto}.tabs button{flex:1 0 auto;padding-inline:.75rem}.role-list div{align-items:flex-start;flex-direction:column;gap:.2rem}.role-list span{text-align:left}.control-figure{padding:.5rem}.control-figure figcaption{font-size:.65rem}.file-row{grid-template-columns:26px 1fr}.file-row>span:last-child{grid-column:2}.install-card{padding:1.25rem;border-radius:20px}.install-next{align-items:flex-start;flex-direction:column}.install-next code{overflow-wrap:anywhere}.footer-inner{align-items:flex-start;flex-wrap:wrap;padding-block:1.5rem}.footer-inner p{order:3;width:100%}.footer-inner>div{margin-left:auto}} -+@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.button:hover,.docs-grid a:hover{transform:none}} +:root { + --bg: #f5f7fb; + --surface: #ffffff; + --surface-soft: #eef3fa; + --ink: #142033; + --muted: #5b6a7f; + --line: #dbe3ee; + --cobalt: #315bd6; + --teal: #087f92; + --coral: #d85b4b; + --shadow: 0 18px 50px rgba(33, 53, 88, .1); + color-scheme: light; + font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + font-synthesis: none; +} +* { box-sizing: border-box; } +html { scroll-behavior: smooth; background: var(--bg); } +body { margin: 0; color: var(--ink); background: var(--bg); line-height: 1.55; } +body::selection { color: #fff; background: var(--cobalt); } +a { color: inherit; } +button, a { -webkit-tap-highlight-color: transparent; } +.shell { width: min(1160px, calc(100% - 48px)); margin-inline: auto; } +.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } +.skip-link { position: fixed; z-index: 20; top: -4rem; left: 1rem; padding: .7rem 1rem; color: #fff; background: var(--ink); border-radius: 0 0 10px 10px; font-weight: 800; } +.skip-link:focus { top: 0; } +.site-header { position: sticky; z-index: 10; top: 0; border-bottom: 1px solid rgba(219, 227, 238, .9); background: rgba(245, 247, 251, .9); backdrop-filter: blur(16px); } +.header-inner { display: flex; align-items: center; min-height: 72px; gap: 2rem; } +.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); font-size: 1.08rem; font-weight: 850; letter-spacing: -.04em; text-decoration: none; } +.brand-mark { position: relative; display: inline-block; width: 25px; height: 25px; transform: rotate(30deg); } +.brand-mark i, .brand-mark b, .brand-mark em { position: absolute; display: block; width: 13px; height: 13px; border: 2px solid var(--cobalt); border-radius: 3px; } +.brand-mark i { top: 0; left: 6px; border-color: var(--cobalt); } +.brand-mark b { bottom: 0; left: 0; border-color: var(--teal); } +.brand-mark em { right: 0; bottom: 0; border-color: var(--coral); } +.brand-mark.small { width: 18px; height: 18px; transform: rotate(30deg) scale(.72); transform-origin: left center; margin-right: -.2rem; } +.site-nav { display: flex; align-items: center; gap: 1.35rem; margin-left: auto; color: var(--muted); font-size: .86rem; } +.site-nav a { text-decoration: none; } +.site-nav a:hover, .site-nav a:focus-visible { color: var(--ink); } +.menu-toggle { display: none; margin-left: auto; padding: .45rem .6rem; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 9px; font-size: 1.1rem; } +.hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(4.5rem, 9vw, 8rem) clamp(4rem, 8vw, 7rem); } +.hero-copy { max-width: 560px; } +.eyebrow, .card-label { margin: 0 0 1rem; color: var(--teal); font-size: .71rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; } +.pulse-dot { display: inline-block; width: 7px; height: 7px; margin-right: .5rem; vertical-align: 1px; background: var(--coral); border-radius: 50%; } +h1, h2, h3, p { margin-top: 0; } +h1 { max-width: 670px; margin-bottom: 1.25rem; font-size: clamp(3rem, 6.2vw, 6.4rem); line-height: .96; letter-spacing: -.085em; } +h1 em { color: var(--cobalt); font-style: normal; } +h2 { max-width: 700px; margin-bottom: .9rem; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.02; letter-spacing: -.065em; } +h3 { margin-bottom: .6rem; font-size: 1.25rem; letter-spacing: -.035em; } +p { color: var(--muted); } +.hero-lede { max-width: 520px; margin-bottom: 0; font-size: 1.13rem; } +.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 1.5rem; } +.button { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .7rem 1.05rem; border-radius: 999px; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } +.button-primary { color: #fff; background: var(--cobalt); box-shadow: 0 12px 24px rgba(49, 91, 214, .22); } +.button-quiet { color: var(--ink); border: 1px solid var(--line); background: rgba(255, 255, 255, .5); } +.button:hover, .button:focus-visible { transform: translateY(-2px); } +.proof-row { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; color: var(--muted); font-size: .78rem; } +.proof-row span::before { content: "✓"; margin-right: .35rem; color: var(--teal); font-weight: 900; } +.hero-visual { position: relative; margin: 0; padding: 1rem 1rem 0; } +.hero-visual::before { position: absolute; z-index: -1; inset: 8% 0 0 5%; content: ""; background: #dce9f4; border-radius: 28px; transform: rotate(2deg); } +.hero-visual img { display: block; width: 100%; height: auto; border: 1px solid #d9e2ed; border-radius: 22px; box-shadow: var(--shadow); } +.hero-visual figcaption { margin: .9rem 0 0 .4rem; color: var(--muted); font-size: .74rem; } +.hero-visual figcaption span { margin-inline: .4rem; color: var(--coral); font-weight: 800; } +.visual-number { position: absolute; z-index: 2; top: -1.1rem; right: 1.6rem; display: grid; place-items: center; width: 44px; height: 44px; color: #fff; background: var(--coral); border-radius: 50%; font-size: .75rem; font-weight: 900; box-shadow: 0 8px 18px rgba(216, 91, 75, .28); } +.section { padding-block: clamp(4.5rem, 8vw, 7.5rem); } +.section-intro { max-width: 760px; margin-bottom: 2.4rem; } +.section-intro > p:last-child { max-width: 590px; margin-bottom: 0; font-size: 1.05rem; } +.step-rail { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.5rem; color: #8090a4; font-size: .76rem; font-weight: 800; } +.step-rail span { padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); } +.step-rail span.is-active { color: var(--cobalt); border-color: #b9c9f7; background: #e8eeff; } +.step-rail i { display: block; flex: 0 1 52px; height: 1px; background: var(--line); } +.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; } +.step-card, .signal-card, .coverage-card, .output-card { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 8px 26px rgba(33, 53, 88, .04); } +.step-card { min-height: 232px; padding: 1.35rem; } +.step-number { display: inline-grid; place-items: center; width: 31px; height: 31px; margin-bottom: 2.1rem; color: var(--cobalt); background: #e8eeff; border-radius: 50%; font-size: .7rem; font-weight: 900; } +.step-card p { min-height: 76px; margin-bottom: 1rem; font-size: .86rem; } +.step-card code, .command-next code { color: var(--teal); font-size: .72rem; } +.section-muted { background: var(--surface-soft); border-block: 1px solid var(--line); } +.demo-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1rem; } +.signal-card, .coverage-card { padding: clamp(1.3rem, 3vw, 2rem); } +.signal-card { background: var(--ink); border-color: var(--ink); } +.signal-card .card-label, .signal-card h3 { color: #dce8ff; } +.signal-card p { color: #aebed5; font-size: .87rem; } +.signal-list { display: grid; gap: .55rem; margin-top: 1.4rem; } +.signal { padding: .7rem .8rem; color: #c9d6e9; border: 1px solid #35445c; border-radius: 10px; background: #1d2a40; text-align: left; font: inherit; font-size: .77rem; cursor: pointer; } +.signal.is-active, .signal:hover, .signal:focus-visible { color: #fff; border-color: #78d8e5; background: #24435c; } +.coverage-tabs { display: flex; gap: .25rem; padding-bottom: .65rem; border-bottom: 1px solid var(--line); } +.coverage-tabs button { position: relative; padding: .65rem .75rem; color: var(--muted); border: 0; background: transparent; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; } +.coverage-tabs button[aria-selected="true"] { color: var(--cobalt); } +.coverage-tabs button[aria-selected="true"]::after { position: absolute; right: .75rem; bottom: -.66rem; left: .75rem; height: 2px; content: ""; background: var(--cobalt); } +.demo-status { margin: 1.1rem 0 .6rem; color: var(--teal); font-size: .79rem; font-weight: 800; } +.role-list, .file-list, .install-steps { padding: 0; margin: 0; list-style: none; } +.role-list { display: grid; gap: .15rem; } +.role-list li, .file-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid #edf1f6; } +.role-list li strong { font-size: .87rem; } +.role-list li span, .file-list li span { color: var(--muted); font-size: .75rem; text-align: right; } +.coverage-note { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; } +.safety-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; } +.control-list { display: grid; gap: .75rem; margin: 1.8rem 0; } +.control-list div { display: grid; grid-template-columns: 28px 1fr; gap: .7rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); } +.control-list span { color: var(--coral); font-size: .72rem; font-weight: 900; } +.control-list p { margin: 0; font-size: .87rem; } +.control-list strong { color: var(--ink); } +.text-link { color: var(--cobalt); font-size: .86rem; font-weight: 850; text-decoration: none; } +.text-link:hover { text-decoration: underline; } +.output-card { padding: clamp(1.3rem, 3vw, 2rem); } +.output-card h3 { margin-bottom: 1rem; font-size: 1.55rem; } +.file-list { margin-bottom: 1.4rem; } +.file-list li { align-items: baseline; } +.file-list li code { overflow-wrap: anywhere; color: var(--ink); font-size: .74rem; } +.output-card details, .faq { padding-top: 1rem; border-top: 1px solid var(--line); } +summary { color: var(--ink); font-size: .82rem; font-weight: 800; cursor: pointer; } +.output-card details p, .faq p { margin: .7rem 0 0; font-size: .8rem; } +.install-section { background: var(--ink); } +.install-card { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2rem; padding: clamp(1.6rem, 4vw, 3rem); color: #fff; border-radius: 26px; background: linear-gradient(125deg, #172b4b, #253c72); } +.install-card .eyebrow { color: #8fe2e7; } +.install-card h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.25rem); } +.install-card p { color: #bccbe0; } +.install-steps { display: grid; gap: .7rem; margin-top: 1.5rem; } +.install-steps li { display: grid; grid-template-columns: 90px 1fr; gap: .5rem; padding-top: .7rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .82rem; } +.install-steps b { color: #fff; } +.install-steps span { color: #bccbe0; } +.command-box { align-self: center; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; background: #0b172b; } +.command-head { display: flex; justify-content: space-between; padding: .75rem .95rem; color: #a8bad4; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .72rem; } +.copy-button { padding: .35rem .7rem; color: #8fe2e7; border: 1px solid #2c7080; border-radius: 999px; background: transparent; font: inherit; font-weight: 800; cursor: pointer; } +.command-box pre { overflow-x: auto; margin: 0; padding: 1.1rem; } +.command-box code { color: #d9e7ff; font-size: .72rem; line-height: 1.8; } +.copy-status { min-height: 1.3rem; padding: 0 1.1rem; margin: 0; color: #8fe2e7 !important; font-size: .7rem !important; } +.command-next { padding: .8rem 1.1rem 1rem; margin: 0; color: #a8bad4 !important; border-top: 1px solid rgba(255,255,255,.12); font-size: .75rem !important; } +.docs-section { padding-top: 5rem; } +.docs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1.5rem; } +.docs-grid a { display: block; min-height: 155px; padding: 1.15rem; color: var(--ink); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-decoration: none; transition: transform .2s ease, border-color .2s ease; } +.docs-grid a:hover, .docs-grid a:focus-visible { border-color: #9fb4e8; transform: translateY(-3px); } +.docs-grid span { color: var(--cobalt); font-size: .7rem; font-weight: 900; } +.docs-grid b, .docs-grid small { display: block; } +.docs-grid b { margin-top: 2.3rem; font-size: .92rem; } +.docs-grid small { margin-top: .4rem; color: var(--muted); font-size: .75rem; } +.site-footer { border-top: 1px solid var(--line); } +.footer-inner { display: flex; justify-content: space-between; align-items: center; min-height: 100px; gap: 1.5rem; } +.footer-inner p, .footer-inner div { margin: 0; color: var(--muted); font-size: .76rem; } +.footer-inner div { display: flex; gap: 1rem; } +.footer-inner a { text-decoration: none; } +.footer-inner a:hover { color: var(--cobalt); } +:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; } +@media (max-width: 980px) { + .hero { grid-template-columns: 1fr; } + .hero-copy { max-width: 700px; } + .hero-visual { max-width: 720px; margin-left: auto; } + .steps-grid, .docs-grid { grid-template-columns: repeat(2, 1fr); } + .safety-grid, .demo-grid, .install-card { grid-template-columns: 1fr; } +} +@media (max-width: 680px) { + .shell { width: min(100% - 32px, 560px); } + .header-inner { min-height: 64px; } + .menu-toggle { display: block; } + .site-nav { position: absolute; top: 64px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: .2rem; padding: .8rem 1rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); } + .site-nav.is-open { display: flex; } + .site-nav a { padding: .6rem .4rem; } + h1 { font-size: clamp(2.8rem, 15vw, 4.8rem); } + h2 { font-size: clamp(2rem, 10vw, 3rem); } + .hero { padding-block: 4rem 3rem; } + .hero-visual { padding: .5rem 0 0; } + .visual-number { top: -.9rem; right: .8rem; } + .step-rail { gap: .35rem; font-size: .68rem; } + .step-rail i { flex-basis: 15px; } + .steps-grid, .docs-grid { grid-template-columns: 1fr; } + .step-card { min-height: 0; } + .step-card p { min-height: 0; } + .coverage-tabs { overflow-x: auto; } + .coverage-tabs button { flex: 1 0 auto; } + .role-list li, .file-list li { flex-direction: column; gap: .25rem; } + .role-list li span, .file-list li span { text-align: left; } + .install-card { border-radius: 20px; } + .install-steps li { grid-template-columns: 80px 1fr; } + .footer-inner { align-items: flex-start; flex-direction: column; padding-block: 1.5rem; } +} +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } + .button, .docs-grid a { transition: none; } + .button:hover, .docs-grid a:hover { transform: none; } +}