refactor(types): augment CSSProperties for CSS custom properties

AGENTS.md

@@ -36,3 +36,4 @@ pnpm format           # prettier --write .
 - **Conventional commits required.** `commitlint` runs in the `commit-msg` husky hook; non-conforming messages are rejected.
 - **`metadataBase` is live.** `lib/links.ts` `site` is the real origin and `INDEXABLE` is `true`. Anything anchored on this origin — OG and canonical (via `metadataBase`); JSON-LD, `app/sitemap.ts`, `app/robots.ts` (via `SITE_URL`) — ships to production. Adding a new page = append an entry to `app/sitemap.ts`; don't add config elsewhere. Flip `INDEXABLE` to take the site out of search; only the meta tag flips (see `lib/links.ts` for why `robots.txt` stays unconditional).
 - **`docs/` is a different product.** Mintlify Cloud builds it from `docs/docs.json` and serves it at `docs.decdn.org` — independent of `pnpm build`. The website code must not import from `docs/`; ESLint and the website CI workflow ignore it. Edits to MDX go through the `docs` workflow (Prettier + `markdownlint-cli2` + `mintlify broken-links`).
+- **CSS custom properties in `style` props.** Known `--var` names are declared in `types/css.d.ts` (module-augmenting React's `CSSProperties`) so call sites can write `style={{ "--reveal-delay": "120ms" }}` without a cast. Add new vars there before using them.

components/site/Close.tsx

@@ -27,7 +27,7 @@ export function Close() {
             height={110}
             className="block"
             style={{
-              ["--wordmark-h" as string]: "clamp(4.75rem, 14vw, 11.5rem)",
+              "--wordmark-h": "clamp(4.75rem, 14vw, 11.5rem)",
               height: "var(--wordmark-h)",
               width: "auto",
               marginLeft: "calc(var(--wordmark-h) * -0.18)",
@@ -38,7 +38,7 @@ export function Close() {
           <p
             data-reveal
             style={{
-              ["--reveal-delay" as string]: "120ms",
+              "--reveal-delay": "120ms",
               fontSize: "var(--fs-body)",
             }}
             className="max-w-[64ch] leading-[1.7]"
@@ -48,7 +48,7 @@ export function Close() {
 
           <div
             data-reveal
-            style={{ ["--reveal-delay" as string]: "220ms" }}
+            style={{ "--reveal-delay": "220ms" }}
             className="flex flex-col flex-wrap gap-x-10 gap-y-4 @md:flex-row @md:items-baseline"
           >
             <a

components/site/Comparison.tsx

@@ -25,7 +25,7 @@ export function Comparison() {
         <p
           data-reveal
           style={{
-            ["--reveal-delay" as string]: "120ms",
+            "--reveal-delay": "120ms",
             fontSize: "var(--fs-body)",
           }}
           className="max-w-[62ch] leading-[1.7] text-paper/75"
@@ -40,7 +40,7 @@ export function Comparison() {
       <div className="mt-auto flex flex-col pt-12">
         <div
           data-reveal
-          style={{ ["--reveal-delay" as string]: "260ms" }}
+          style={{ "--reveal-delay": "260ms" }}
           className="grid gap-2 pb-3 @xl:grid-cols-12 @xl:gap-8"
         >
           <div className="meta opacity-0 @xl:col-span-2 @xl:block">axis</div>
@@ -56,7 +56,7 @@ export function Comparison() {
         {/* big price row */}
         <div
           data-reveal
-          style={{ ["--reveal-delay" as string]: "340ms" }}
+          style={{ "--reveal-delay": "340ms" }}
           className="grid gap-3 border-t border-current/25 py-5 @xl:grid-cols-12 @xl:gap-8 @xl:py-8"
         >
           <div className="meta opacity-60 @xl:col-span-2 @xl:pt-2">price</div>

components/ui/ComparisonRow.tsx

@@ -13,7 +13,7 @@ export function ComparisonRow({
     <div
       data-reveal
       style={{
-        ["--reveal-delay" as string]: `${delay}ms`,
+        "--reveal-delay": `${delay}ms`,
         fontSize: "var(--fs-body)",
       }}
       className="grid gap-2 border-t border-current/20 py-4 @xl:grid-cols-12 @xl:gap-8 @xl:py-5"

components/ui/FaqItem.tsx

@@ -24,7 +24,7 @@ export function FaqItem({
   return (
     <div
       data-reveal
-      style={{ ["--reveal-delay" as string]: `${delay}ms` }}
+      style={{ "--reveal-delay": `${delay}ms` }}
       className="grid grid-cols-1 gap-3 py-6 @xl:grid-cols-12 @xl:gap-8 @xl:py-8"
     >
       <div

components/ui/MethodRow.tsx

@@ -12,7 +12,7 @@ export function MethodRow({
   return (
     <div
       data-reveal
-      style={{ ["--reveal-delay" as string]: `${delay}ms` }}
+      style={{ "--reveal-delay": `${delay}ms` }}
       className="grid grid-cols-1 gap-4 py-7 @xl:grid-cols-12 @xl:gap-10 @xl:py-10"
     >
       <div className="meta tabular-nums opacity-60 @xl:col-span-1">{n}</div>

types/css.d.ts

@@ -0,0 +1,8 @@
+import "react";
+
+declare module "react" {
+  interface CSSProperties {
+    "--reveal-delay"?: `${number}ms`;
+    "--wordmark-h"?: string;
+  }
+}