@leed-ai/cli 0.0.0-stage → 6.19.0

package/dist/static/tailwind/components/tab-groups.css

@@ -0,0 +1,117 @@
+/**
+ * Tab styles
+ */
+.leed-tabs__container {
+  @apply w-full font-medium relative mt-6! pt-0!;
+
+  &:has(.docs-tab-dropdown-button[aria-expanded="true"]) {
+    @apply z-[99999];
+  }
+
+  pre {
+    @apply mt-0!;
+  }
+
+  .leed-tabs__wrapper {
+    @apply absolute top-0 left-[20px] z-10 z-999;
+  }
+  /* Tab list wrapper */
+  [role="tablist"] {
+    @apply border-b-0 mt-[3px]! sm:border-0 border-(--component-border-color)/10 flex flex-row flex-nowrap sm:-mb-px text-sm pl-0! font-medium;
+  }
+
+  /* Individual tab items */
+  [role="tab"] {
+    @apply flex px-4 py-0.5 items-center mb-0 border-b-2 border-b-transparent /* transparent default to prevent shifting */ text-(--component-text-color) hover:text-(--component-anchor-text-color) hover:bg-(--component-primary-color)/10 hover:border-(--component-anchor-text-color) cursor-pointer transition-colors duration-200;
+
+    &[aria-selected="true"] {
+      @apply font-semibold cursor-default border-(--component-current-location-text-color) text-(--component-current-location-text-color);
+    }
+
+    > i {
+      @apply mr-2 text-inherit;
+    }
+  }
+
+  /* Individual tab panel */
+  [role="tabpanel"] {
+    @apply rounded-lg transition-opacity duration-400 my-4;
+
+    pre:has(code.math) {
+      @apply p-0! bg-transparent!;
+    }
+  }
+
+  [role="tabpanel"]:not(:has(.code-block-wrapper)) {
+    @apply overflow-x-auto min-w-0 max-w-full py-3 px-4 rounded-2xl border border-(--component-code-border-color)/10 bg-(--component-code-bg-color) dark:bg-(--component-code-bg-color)/5;
+
+    & > *:first-child {
+      @apply mt-0!;
+    }
+  }
+
+  .leed-tabs__panels {
+    @apply bg-(--component-code-bg-color) border border-(--component-code-border-color)/10 rounded-2xl pt-8! px-0.5 pb-0.5;
+
+    [role="tabpanel"] {
+      @apply rounded-2xl bg-(--component-code-inner-bg-color) p-4 m-0 border-0;
+    }
+    [role="tabpanel"]:has(.code-block-wrapper) {
+      @apply p-0;
+
+      pre {
+        @apply p-0! bg-transparent! dark:bg-transparent! border-0!;
+      }
+      pre:has(code.math) {
+        @apply p-0!;
+      }
+      .copy-code-button {
+        @apply top-[-30px];
+      }
+    }
+  }
+
+  /* Docs tab dropdown styles - for overflowing tabs */
+  .docs-tab-dropdown {
+    @apply relative inline-block;
+  }
+
+  .docs-tab-dropdown-button {
+    @apply w-auto mt-[5px]! px-2! py-1! text-xs! font-medium text-left bg-transparent border-0 border-(--component-border-color)/20 rounded-lg shadow-none! hover:bg-(--component-primary-color)/10 hover:text-(--component-primary-color) focus:outline-none! focus:ring-0! focus:ring-(--component-primary-color)/50 focus:border-(--component-primary-color) flex items-center justify-between cursor-pointer transition-colors text-(--component-text-color);
+
+    > i {
+      @apply mr-1;
+    }
+    &::after {
+      @apply fa-solid leed-icon-sort text-[10px] ml-3;
+      content: var(--fa);
+    }
+    &[aria-expanded="true"]::after {
+      transform: rotate(180deg);
+    }
+  }
+
+  .docs-tab-dropdown-menu {
+    @apply absolute z-50 w-[140px] mt-0 p-1 bg-(--component-menu-bg-color) border border-(--component-border-color)/20 rounded-lg shadow-lg max-h-[250px] overflow-auto hidden;
+  }
+
+  .docs-tab-dropdown-menu[aria-hidden="false"] {
+    @apply block;
+  }
+
+  .docs-tab-dropdown-item {
+    @apply px-2 py-2 text-xs! rounded-sm text-(--component-text-color) hover:bg-(--component-primary-color)/10 hover:text-(--component-primary-color) cursor-pointer flex items-center transition-colors;
+  }
+
+  .docs-tab-dropdown-item[aria-selected="true"] {
+    @apply text-(--component-current-location-text-color) font-semibold;
+  }
+  .docs-tab-dropdown-item i {
+    @apply mr-2;
+  }
+
+  /* Hide the original tablist when it has been converted to dropdown */
+  ul[role="tablist"].converted-to-dropdown {
+    @apply hidden!;
+  }
+}

package/dist/static/tailwind/components/toc.css

@@ -0,0 +1,60 @@
+/* Base TOC styling -- this is the aside tag */
+#docs-toc-wrapper {
+  @apply hidden lg:block lg:shrink-0 lg:w-64;
+}
+
+#leed-toc {
+  @apply sticky top-(--height-header) max-h-[calc(100vh-var(--height-header))] w-full pr-4 overflow-y-auto;
+
+  /* TOC heading */
+  #leed-toc-heading {
+    @apply text-sm text-(--component-header-3-color) font-semibold uppercase mb-2;
+  }
+
+  /* Nav container */
+  .leed-nav-toc {
+    @apply text-sm border-l border-(--component-current-location-text-color) pl-3; /* Add padding to accommodate the border */
+
+    /* All ordered lists */
+    ol {
+      @apply list-none m-0 p-0;
+    }
+
+    /* Nested ordered lists */
+    ol ol {
+      @apply ml-4;
+    }
+
+    /* List items - keep as normal blocks */
+    li {
+      @apply relative; /* Make relative for icon positioning */
+    }
+
+    /* All links */
+    a {
+      /* Row colors are DEFAULTS a site is expected to override. Forcing them
+         made the TOC unrestylable without an unlayered file or !important —
+         the same defect the sidebar and pager had. `hidden!` below stays: it is
+         structural, not paint. Do not reinstate the `!` here. */
+      @apply block p-0 my-1 transition-colors text-(--component-text-color) hover:text-(--component-header-1-color);
+    }
+
+    /* Active link styling */
+    a[aria-current="location"] {
+      @apply font-medium text-(--component-body-link-color) bg-transparent;
+    }
+
+    .current-item {
+      @apply -left-3.5 absolute opacity-0 hidden!; /* hide by default */
+    }
+
+    /* Adjust for nested icons */
+    ol ol .current-item {
+      @apply -left-7.5;
+    }
+
+    .current-item[aria-current="location"] {
+      @apply fa-solid leed-icon-caret-right opacity-0 /* only show When active */ text-(--component-current-location-text-color);
+    }
+  }
+}

package/dist/static/tailwind/components.css

@@ -0,0 +1,248 @@
+@import "./components/alerts.css";
+@import "./components/api-methods.css";
+@import "./components/breadcrumbs.css";
+@import "./components/code.css";
+@import "./components/collapsible.css";
+@import "./components/document-search.css";
+@import "./components/form.css";
+@import "./components/kbd.css";
+@import "./components/pagination.css";
+@import "./components/scroll-status-indicator.css";
+@import "./components/tab-groups.css";
+@import "./components/tables.css";
+@import "./components/toc.css";
+
+:root {
+  /**
+   * Default theme variables for components used outside of documentation context
+   * These provide intelligent fallback values using CSS var() fallback chains:
+   * 1. First tries --docs-* variables (for docs context)
+   * 2. Then tries --site-* variables (for site context)
+   * 3. Finally falls back to default values
+   */
+
+  /* Component-specific primary colors with intelligent fallbacks */
+  --component-primary-color: var(--docs-primary-color, var(--site-primary-color, var(--default-primary-color)));
+  --component-primary-color-hover: var(
+    --docs-primary-color-hover,
+    var(--site-primary-color-hover, var(--default-primary-color-hover))
+  );
+  --component-primary-light: var(--docs-primary-light, var(--site-primary-light, var(--default-primary-light)));
+
+  /* Component text colors with intelligent fallbacks */
+  --component-text-color: var(--docs-text-color, var(--site-text-color, var(--default-text-color)));
+  --component-body-link-color: var(--docs-body-link-color, var(--site-body-link-color, var(--component-primary-color)));
+  --component-body-link-hover-color: var(
+    --docs-body-link-hover-color,
+    var(--site-body-link-hover-color, var(--component-primary-color-hover))
+  );
+  --component-body-link-active-color: var(
+    --docs-body-link-active-color,
+    var(--site-body-link-active-color, var(--component-primary-color-hover))
+  );
+  --component-code-math-text-color: var(
+    --docs-code-math-text-color,
+    var(--site-code-math-text-color, var(--default-text-color))
+  );
+
+  /* Component header colors with intelligent fallbacks */
+  --component-header-border-color: var(
+    --docs-header-border-color,
+    var(--site-header-border-color, var(--default-header-border-color))
+  );
+  --component-header-bg-color: var(--docs-header-bg-color, var(--site-header-bg-color, var(--default-header-bg-color)));
+
+  /* Component search colors with intelligent fallbacks */
+  --component-search-button-bg-color: var(
+    --docs-search-button-bg-color,
+    var(--site-search-button-bg-color, var(--default-search-button-bg-color))
+  );
+  --component-search-modal-bg-color: var(
+    --docs-search-modal-bg-color,
+    var(--site-search-modal-bg-color, var(--default-search-modal-bg-color))
+  );
+
+  /* The RESTING ground of one row in the search results list — the state before
+     the pointer or the keyboard selection reaches it. `transparent` is the
+     final fallback because that is literally what Leed ships: the row takes the
+     modal's own ground and `.search-result-selected` / `:hover` paint over it.
+     Every built-in theme sets --docs-search-result-bg-color to the same value
+     it gives --docs-search-modal-bg-color, so on those themes the wired value
+     and the transparent default render identically; the token exists so a site
+     that wants its rows to sit apart from the modal can say so. */
+  --component-search-result-bg-color: var(
+    --docs-search-result-bg-color,
+    var(--site-search-result-bg-color, transparent)
+  );
+
+  /* Component code colors with intelligent fallbacks */
+  --component-code-bg-color: var(--docs-code-bg-color, var(--site-code-bg-color, var(--default-code-bg-color)));
+  --component-code-inner-bg-color: var(
+    --docs-code-inner-bg-color,
+    var(--site-code-inner-bg-color, var(--default-code-inner-bg-color))
+  );
+  --component-code-border-color: var(
+    --docs-code-border-color,
+    var(--site-code-border-color, var(--default-code-border-color))
+  );
+  --component-code-bg-color-selection: var(
+    --docs-code-bg-color-selection,
+    var(--site-code-bg-color-selection, var(--default-code-bg-color-selection))
+  );
+
+  /* Component form colors with intelligent fallbacks */
+  --component-form-border-color: var(
+    --docs-form-border-color,
+    var(--form-border-color, var(--default-form-border-color))
+  );
+  --component-form-border-color-hover: var(
+    --docs-form-border-color-hover,
+    var(--form-border-color-hover, var(--default-form-border-color-hover))
+  );
+
+  /* Component header text colors with intelligent fallbacks */
+  --component-header-1-color: var(--docs-header-1-color, var(--site-header-1-color, var(--default-header-1-color)));
+  --component-header-2-color: var(--docs-header-2-color, var(--site-header-2-color, var(--default-header-2-color)));
+  --component-header-3-color: var(--docs-header-3-color, var(--site-header-3-color, var(--default-header-3-color)));
+  --component-header-4-color: var(--docs-header-4-color, var(--site-header-4-color, var(--default-header-4-color)));
+  --component-header-5-color: var(--docs-header-5-color, var(--site-header-5-color, var(--default-header-5-color)));
+  --component-header-6-color: var(--docs-header-6-color, var(--site-header-6-color, var(--default-header-6-color)));
+
+  /* Component background color with intelligent fallback */
+  --component-bg-color: var(--docs-bg-color, var(--site-bg-color, var(--default-bg-color)));
+
+  /* The ground behind a card. docs/api.css read --docs-card-bg-color RAW, which
+     is why a site with no CMS color theme got an unpainted card rather than a
+     default one, and why there was no --site-* rung to answer it from. Routed
+     through the chain like everything else now.
+     --default-card-bg-color is `transparent` (defaults.css), which reproduces
+     the old behavior exactly: an unset --docs-card-bg-color made the card's
+     color-mix() invalid at computed-value time, and an invalid background-color
+     computes to transparent. Leed ships no card ground of its own; a theme
+     supplies one. */
+  --component-card-bg-color: var(--docs-card-bg-color, var(--site-card-bg-color, var(--default-card-bg-color)));
+
+  /* Component current location colors with intelligent fallbacks */
+  --component-current-location-text-color: var(
+    --docs-primary-color,
+    var(--site-current-location-text-color, var(--default-current-location-text-color))
+  );
+  --component-current-location-bg-color: var(
+    --docs-current-location-bg-color,
+    var(--site-current-location-bg-color, var(--default-current-location-bg-color))
+  );
+
+  /* The three grounds a row in the documentation sidebar can have: resting,
+     under the pointer, and the page you are on. All three used to be written
+     into docs/components/navigation.css as literals, so the four --docs-* names
+     the shipped themes declare for them resolved to nothing.
+     ------------------------------------------------------------------------
+     RESTING is `transparent`, which is not a placeholder — it is what Leed
+     ships. The sidebar draws its rows on the page's own ground and lets weight
+     and color carry state, so a theme setting --docs-sidebar-link-bg-color is
+     opting INTO a tinted row rather than changing the shade of an existing one.
+
+     HOVER and CURRENT both default to a 7% wash of --component-primary-light,
+     which is the literal the two navigation.css rules carried. They are two
+     tokens rather than one because a site may want the row it is on to read
+     differently from the row under the pointer; CURRENT falls through to HOVER
+     so that a site setting only the hover ground still gets the pair in step,
+     which is the relationship the shared literal expressed.
+
+     Note that docs/layouts/charlie.css paints both of those rows
+     `bg-transparent` at higher specificity, so on charlie these two tokens are
+     inert until the site takes that override off. */
+  --component-sidebar-link-bg-color: var(--docs-sidebar-link-bg-color, var(--site-sidebar-link-bg-color, transparent));
+  --component-sidebar-link-hover-bg-color: var(
+    --docs-sidebar-link-hover-bg-color,
+    var(--site-sidebar-link-hover-bg-color, var(--component-primary-light))
+  );
+  --component-sidebar-link-current-bg-color: var(
+    --docs-sidebar-link-current-bg-color,
+    var(--site-sidebar-link-current-bg-color, var(--component-sidebar-link-hover-bg-color))
+  );
+
+  /* The 7% wash, restated for engines that have color-mix(). This mirrors
+     exactly what Tailwind emitted for the `bg-(--component-primary-light)/7`
+     literals these tokens replaced: the solid color above is the degraded
+     fallback, and this is the real value everywhere it is supported. Keeping
+     both halves means dropping the literal changed no pixel on either path. */
+  @supports (color: color-mix(in lab, red, red)) {
+    --component-sidebar-link-hover-bg-color: var(
+      --docs-sidebar-link-hover-bg-color,
+      var(--site-sidebar-link-hover-bg-color, color-mix(in oklab, var(--component-primary-light) 7%, transparent))
+    );
+  }
+
+  /* Component anchor colors with intelligent fallbacks */
+  --component-anchor-text-color: var(
+    --docs-body-link-color,
+    var(--site-anchor-text-color, var(--default-anchor-text-color))
+  );
+  --component-anchor-text-color-hover: var(
+    --docs-body-link-hover-color,
+    var(--site-anchor-text-color-hover, var(--default-anchor-text-color-hover))
+  );
+  --component-anchor-text-color-active: var(
+    --docs-body-link-active-color,
+    var(--site-anchor-text-color-active, var(--default-anchor-text-color-active))
+  );
+
+  /* Component copied content colors with intelligent fallbacks */
+  --component-copied-content-bg-color: var(
+    --docs-primary-color,
+    var(--site-copied-content-bg-color, var(--default-copied-content-bg-color))
+  );
+  --component-copied-content-text-color: var(
+    --docs-copied-content-text-color,
+    var(--site-copied-content-text-color, var(--default-copied-content-text-color))
+  );
+
+  /* Component border colors with intelligent fallbacks */
+  --component-border-color: var(--docs-border-color, var(--site-border-color, var(--default-border-color)));
+
+  /* Component menu colors with intelligent fallbacks */
+  --component-menu-bg-color: var(--docs-menu-bg-color, var(--site-menu-bg-color, var(--default-menu-bg-color)));
+
+  /* Component button secondary colors with intelligent fallbacks */
+  --component-button-secondary-bg-color: var(
+    --docs-button-secondary-bg-color,
+    var(--site-button-secondary-bg-color, var(--default-button-secondary-bg-color))
+  );
+  --component-button-secondary-bg-hover-color: var(
+    --docs-button-secondary-bg-hover-color,
+    var(--site-button-secondary-bg-hover-color, var(--default-button-secondary-bg-hover-color))
+  );
+
+  /* Component pagination icon colors with intelligent fallbacks */
+  --component-pagination-icon-color: var(
+    --docs-pagination-icon-color,
+    var(--site-pagination-icon-color, var(--default-pagination-icon-color))
+  );
+  --component-pagination-icon-color-hover: var(
+    --docs-pagination-icon-color-hover,
+    var(--site-pagination-icon-color-hover, var(--default-pagination-icon-color-hover))
+  );
+
+  /* Component step light color with intelligent fallbacks */
+  --component-step-light-color: var(
+    --docs-step-light-color,
+    var(--site-step-light-color, var(--default-step-light-color))
+  );
+
+  /* Component fixed body background color with intelligent fallbacks */
+  --component-fixed-body-bg-color: var(
+    --docs-fixed-body-bg-color,
+    var(--site-fixed-body-bg-color, var(--default-fixed-body-bg-color))
+  );
+
+  /* Component footer social icons colors with intelligent fallbacks */
+  --component-footer-social-icons-color: var(
+    --docs-footer-social-icons-color,
+    var(--site-footer-social-icons-color, var(--component-text-color))
+  );
+  --component-footer-social-icons-hover-color: var(
+    --docs-footer-social-icons-hover-color,
+    var(--site-footer-social-icons-hover-color, var(--default-footer-social-icons-hover-color))
+  );
+}

package/dist/static/tailwind/defaults.css

@@ -0,0 +1,260 @@
+:root {
+  /* Default color variables using Tailwind color names */
+  --default-header-1-color: var(--color-gray-900);
+  --default-header-2-color: var(--color-gray-900);
+  --default-header-3-color: var(--color-gray-800);
+  --default-header-4-color: var(--color-gray-800);
+  --default-header-5-color: var(--color-gray-800);
+  --default-header-6-color: var(--color-gray-800);
+
+  --default-primary-color: var(--color-blue-500);
+  --default-primary-color-hover: var(--color-blue-600);
+  --default-primary-light: var(--color-blue-400);
+  --default-text-color: var(--color-gray-700);
+  --default-bg-color: var(--color-white);
+  --default-header-border-color: var(--color-gray-500);
+  --default-header-bg-color: var(--color-gray-100);
+  --default-code-bg-color: var(--color-gray-100);
+  --default-code-inner-bg-color: var(--color-white);
+  --default-code-border-color: var(--color-gray-950);
+  --default-code-bg-color-selection: var(--color-blue-100);
+  --default-form-border-color: var(--color-gray-300);
+  --default-form-border-color-hover: var(--color-gray-500);
+  --default-search-button-bg-color: var(--color-white);
+  --default-search-modal-bg-color: var(--color-white);
+  --default-current-location-text-color: var(--color-sky-800);
+  --default-current-location-bg-color: var(--color-slate-50);
+  /* Deliberately transparent, and the same in both schemes. Leed ships no card
+     ground: docs/api.css used to read --docs-card-bg-color raw, so with no
+     color theme the card's background-color was invalid and computed to
+     transparent. Stating that as the default keeps the rendering identical
+     while giving --component-card-bg-color a third rung like every other
+     token. A theme that wants a card to sit apart from the page sets
+     --docs-card-bg-color; a themeless site sets --site-card-bg-color. */
+  --default-card-bg-color: transparent;
+  --default-anchor-text-color: var(--color-sky-600);
+  --default-anchor-text-color-hover: var(--color-sky-700);
+  --default-anchor-text-color-active: var(--color-sky-900);
+  --default-copied-content-bg-color: var(--color-pink-800);
+  --default-copied-content-text-color: var(--color-white);
+  --default-border-color: var(--color-slate-300);
+  --default-menu-bg-color: var(--color-white);
+  --default-step-light-color: var(--color-gray-200);
+  --default-fixed-body-bg-color: var(--color-slate-950);
+  --default-footer-social-icons-hover-color: var(--color-gray-500);
+
+  /**
+   * These five had a dark-mode value and no light-mode one, so in light mode
+   * the var() chain ran off the end and the property was invalid: a
+   * secondary button had no background, the footer's social icons and the
+   * pagination arrows had no color. Stated for both modes now.
+   */
+  --default-button-secondary-bg-color: var(--color-gray-100);
+  --default-button-secondary-bg-hover-color: var(--color-gray-200);
+  --default-footer-social-icons-color: var(--default-text-color);
+  --default-pagination-icon-color: var(--color-gray-500);
+  --default-pagination-icon-color-hover: var(--color-gray-700);
+
+  /* Icons — Font Awesome 7 glyphs, each a Free icon. Override any one with
+     --site-icon-*; see utils/icons.css. */
+  --default-icon-menu: "\f0c9"; /* bars */
+  --default-icon-close: "\f00d"; /* xmark */
+  --default-icon-search: "\f002"; /* magnifying-glass */
+  --default-icon-chevron-right: "\f054";
+  --default-icon-chevron-left: "\f053";
+  --default-icon-chevron-down: "\f078";
+  --default-icon-caret-right: "\f0da";
+  --default-icon-arrow-left: "\f060";
+  --default-icon-arrow-right: "\f061";
+  --default-icon-arrow-right-long: "\f178";
+  --default-icon-external: "\f08e"; /* arrow-up-right-from-square */
+  --default-icon-external-square: "\f14c"; /* square-arrow-up-right */
+  --default-icon-ellipsis: "\f141";
+  --default-icon-hashtag: "#";
+  --default-icon-clock: "\f017";
+  --default-icon-copy: "\f0c5";
+  --default-icon-check: "\f00c";
+  --default-icon-list: "\f0ca"; /* list-ul */
+  --default-icon-home: "\f015"; /* house */
+  --default-icon-sort: "\f338"; /* up-down */
+  --default-icon-spinner: "\f1ce"; /* circle-notch */
+  --default-icon-panel-toggle: "\f152"; /* square-caret-right */
+  --default-icon-alert-note: "\f05a"; /* circle-info */
+  --default-icon-alert-tip: "\f135"; /* rocket */
+  --default-icon-alert-info: "\f0eb"; /* lightbulb */
+  --default-icon-alert-warning: "\f071"; /* triangle-exclamation */
+  --default-icon-alert-danger: "\f714"; /* skull-crossbones */
+
+  @media (prefers-color-scheme: dark) {
+    /* Default dark mode color variables using Tailwind color names */
+    /* heading colors */
+    --default-header-1-color: var(--color-gray-200);
+    --default-header-2-color: var(--color-gray-200);
+    --default-header-3-color: var(--color-gray-100);
+    --default-header-4-color: var(--color-gray-100);
+    --default-header-5-color: var(--color-slate-100);
+    --default-header-6-color: var(--color-slate-100);
+
+    --default-primary-color: var(--color-blue-400);
+    --default-primary-color-hover: var(--color-blue-500);
+    --default-primary-light: var(--color-blue-300);
+    --default-text-color: var(--color-slate-400);
+    --default-bg-color: var(--color-slate-950);
+    --default-header-border-color: var(--color-slate-200);
+    --default-header-bg-color: var(--color-slate-900);
+    --default-code-bg-color: var(--color-slate-900);
+    --default-code-inner-bg-color: var(--color-slate-950);
+    --default-code-border-color: var(--color-white);
+    --default-code-bg-color-selection: var(--color-blue-800);
+    --default-form-border-color: var(--color-white);
+    --default-form-border-color-hover: var(--color-white);
+    --default-search-button-bg-color: var(--color-slate-950);
+    --default-search-modal-bg-color: var(--color-slate-950);
+    --default-current-location-text-color: var(--color-sky-500);
+    --default-current-location-bg-color: var(--color-slate-800);
+    --default-anchor-text-color: var(--color-sky-600);
+    --default-anchor-text-color-hover: var(--color-sky-400);
+    --default-copied-content-text-color: var(--color-white);
+    --default-copied-content-bg-color: var(--color-pink-800);
+    --default-border-color: var(--color-slate-500);
+    --default-menu-bg-color: var(--color-slate-900);
+    --default-button-secondary-bg-color: var(--color-gray-600);
+    --default-button-secondary-bg-hover-color: var(--color-gray-700);
+    --default-pagination-icon-color: var(--color-gray-400);
+    --default-pagination-icon-color-hover: var(--color-gray-200);
+    --default-step-light-color: var(--color-slate-800);
+    --default-footer-social-icons-color: var(--default-text-color);
+    --default-footer-social-icons-hover-color: var(--color-gray-400);
+  }
+}
+
+@layer base {
+  [x-cloak] {
+    display: none !important;
+  }
+
+  img[x-zoomable]:hover {
+    @apply cursor-zoom-in;
+  }
+
+  /* Diagrams open the same viewer, on a delegated click rather than the
+     directive — see the note in zoomable.js. The affordance has to be here
+     because there is no attribute on them to hang it off. */
+  pre.mermaid:hover {
+    @apply cursor-zoom-in;
+  }
+
+  .zoomable-fullscreen-container {
+    @apply fixed inset-0 bg-black/90 hidden z-99999 cursor-zoom-out overflow-hidden touch-none w-screen h-dvh;
+  }
+
+  .zoomable-fullscreen-image {
+    transform: translate(-50%, -50%);
+
+    @apply absolute top-1/2 left-1/2 max-w-[90%] max-h-[90%] transition-transform duration-200 ease-in-out touch-none select-none cursor-zoom-out;
+  }
+
+  /* The stage carries the page's own ground, and it is not decoration.
+     A diagram themed from CSS variables resolves them against the page it was
+     cloned out of, so its strokes and text are whatever reads well *there* —
+     ink on parchment in a light theme. Dropped straight onto the 90% black
+     backdrop, that is dark-on-dark and close to unreadable. Giving the stage
+     the same background the diagram had in the document puts it back on the
+     ground its colors were chosen for. */
+  .zoomable-fullscreen-svg {
+    @apply rounded-lg p-6;
+
+    background: var(--component-bg-color, #ffffff);
+  }
+
+  /* The diagram arrives wrapped in a shallow copy of the element it sits in on
+     the page, so that a site's own `pre.mermaid svg { ... }` rules still match
+     here — see the note in zoomable.js. That carrier is present to be matched
+     by a selector, not to lay anything out, so it gives up its own box: a
+     `<pre>` would otherwise bring margins, a background and `white-space`
+     into a stage that has already set all three. */
+  .zoomable-fullscreen-svg > * {
+    @apply block w-full h-full;
+
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    white-space: normal;
+  }
+
+  /* The SVG stage is a wrapper, so the diagram inside has to be told to fill
+     it — an <svg> does not stretch to its parent the way a replaced element
+     does. `max-width: none` overrides the inline width Mermaid sizes each
+     diagram to for the column it rendered into, which would otherwise cap it
+     at that width however far it is zoomed.
+
+     A descendant selector rather than a child one, because of the carrier. */
+  .zoomable-fullscreen-svg svg {
+    @apply w-full h-full;
+
+    max-width: none !important;
+  }
+
+  .video-player {
+    @apply relative aspect-video w-full;
+  }
+
+  div[data-cloudflare-video] > iframe /* old mechanism, pre markdown */,
+  .embedded-cf-video > iframe,
+  .embedded-youtube > iframe {
+    @apply border-0 top-0 left-0 w-full h-full;
+  }
+
+  /*
+     The default border color has changed to `currentColor` in Tailwind CSS v4,
+     so we've added these compatibility styles to make sure everything still
+     looks the same as it did with Tailwind CSS v3.
+
+     If we ever want to remove these styles, we need to add an explicit border
+     color utility to any element that depends on these defaults.
+   */
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+
+  /**
+   * Anchor links land below a fixed header rather than under it.
+   *
+   * --height-header and --height-toc are set at runtime by documentation.js,
+   * which only loads on documentation pages. Everywhere else both were
+   * undefined, so this calc() was invalid and the whole declaration was
+   * dropped — scroll-padding-top computed to `auto` and every in-page anchor
+   * on a non-docs site scrolled its target under the header.
+   *
+   * The fallbacks make the calc valid whatever is set, and a site with a fixed
+   * header declares its own height once:
+   *
+   *   :root { --site-header-height: 68px; }
+   */
+  html {
+    scroll-padding-top: calc(var(--height-header, var(--site-header-height, 0px)) + var(--height-toc, 0px));
+  }
+
+  html,
+  body {
+    overscroll-behavior: none;
+  }
+}
+
+@layer utilities {
+  /**
+   * 567px min width
+   * 500px max height
+   */
+  @media (min-width: 35.4375rem) and (max-height: 31.25rem) and (orientation: landscape) {
+    .leed-mobile-video {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}