style(docs): prose polish, Algolia modal, tabs pill, 404 cards, footer chips

src/components/CopyButton/styles.css

@@ -1,71 +1,48 @@
+/* CopyButton — base styles are intentionally neutral so the containing
+   surface (footer chip row or floating island) controls color and spacing. */
 .copy-markdown-btn {
   position: relative;
+  display: inline-flex;
+  align-items: center;
   border: none;
-  flex-direction: row;
-  display: flex;
   background: none;
-  align-items: center;
   cursor: pointer;
-  position: relative;
   outline: none;
-  transition: all 0.3s ease;
-}
-
-.sparkles {
-  width: 20px;
-  height: 20px;
-}
-
-.sparkles.is-visible {
-  fill: var(--ifm-link-color);
-  margin-right: 0.3rem;
-}
-
-html[data-theme="dark"] .sparkles {
-  fill: #ffffff;
+  color: inherit;
+  transition: color 0.3s ease;
 }
 
 .copy-markdown-btn__text {
-  color: var(--ifm-link-color);
+  color: inherit;
   transition: opacity 0.3s ease;
-  margin-left: 0.3rem;
-  font-size: 1rem;
-}
-
-html[data-theme="dark"] .copy-markdown-btn__text {
-  color: var(--ifm-color-gray-100);
-}
-
-.copy-markdown-btn:hover {
-  cursor: pointer;
+  font-size: inherit;
 }
 
 .icon-container {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 16px;
   height: 16px;
   pointer-events: none;
 }
 
-.icon-container.not-visible {
-  margin-right: 0.5rem;
+.sparkles {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+  transition: opacity 0.3s ease;
 }
 
 .copy-markdown-btn i {
-  color: var(--ifm-color-secondary);
+  color: currentColor;
   position: absolute;
-  top: 0;
-  left: 0;
-  transition: opacity 0.3s ease;
-}
-
-.copy-markdown-btn .sparkles {
-  opacity: 1;
-}
-
-.copy-markdown-btn i.fa-check {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   opacity: 0;
+  transition: opacity 0.3s ease;
 }
 
 .copy-markdown-btn.copied .sparkles {

src/components/FloatingIsland/styles.css

@@ -1,67 +1,111 @@
-.floating-island-container {
-  height: 40px;
-  width: 150px;
-  align-items: center;
-  display: flex;
-  border-radius: 20px;
-  background-color: var(--ifm-color-emphasis-200);
-  box-shadow: rgb(0 0 0 / 10%) 0px 2px 10px 0px;
-  z-index: calc(var(--ifm-z-index-fixed) - 1);
+/* Floating action island — appears when the doc footer scrolls off-screen.
+   One shared treatment for all three width variants; content sizes the pill. */
+.floating-island-container,
+.floating-island-container-single,
+.floating-island-container-double {
   position: fixed;
   bottom: 1.3rem;
-  right: 0;
-  left: 0;
-  margin-left: auto;
-  margin-right: auto;
-  justify-content: space-between;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  opacity: 1;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: calc(var(--ifm-z-index-fixed) - 1);
+
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.35rem 0.75rem;
+  width: auto;
+  height: auto;
+
+  background-color: color-mix(
+    in srgb,
+    var(--ifm-background-surface-color),
+    transparent 20%
+  );
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  border: var(--pan-card-border);
+  border-radius: 999px;
+  box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.18);
 }
 
-.floating-island-container-single {
-  height: 40px;
-  width: 130px;
+.floating-island-divider {
+  width: 1px;
+  height: 1rem;
+  background-color: var(--ifm-color-emphasis-300);
+  border: 0;
+  flex-shrink: 0;
+}
+
+/* Icon buttons inside the island */
+.floating-island-container a,
+.floating-island-container-single a,
+.floating-island-container-double a {
+  display: inline-flex;
   align-items: center;
-  display: flex;
-  border-radius: 20px;
-  background-color: var(--ifm-color-emphasis-200);
-  box-shadow: rgb(0 0 0 / 10%) 0px 2px 10px 0px;
-  z-index: calc(var(--ifm-z-index-fixed) - 1);
-  position: fixed;
-  bottom: 1.3rem;
-  right: 0;
-  left: 0;
-  margin-left: auto;
-  margin-right: auto;
   justify-content: center;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  opacity: 1;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 50%;
+  color: var(--ifm-color-emphasis-700);
+  text-decoration: none;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
 }
 
-.floating-island-container-double {
-  height: 40px;
-  width: 180px;
-  align-items: center;
-  display: flex;
-  border-radius: 20px;
-  background-color: var(--ifm-color-emphasis-200);
-  box-shadow: rgb(0 0 0 / 10%) 0px 2px 10px 0px;
-  z-index: calc(var(--ifm-z-index-fixed) - 1);
-  position: fixed;
-  bottom: 1.3rem;
-  right: 0;
-  left: 0;
-  margin-left: auto;
-  margin-right: auto;
-  justify-content: space-between;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  opacity: 1;
+.floating-island-container a:hover,
+.floating-island-container a:focus-visible,
+.floating-island-container-single a:hover,
+.floating-island-container-single a:focus-visible,
+.floating-island-container-double a:hover,
+.floating-island-container-double a:focus-visible {
+  background-color: color-mix(
+    in srgb,
+    var(--ifm-color-primary),
+    transparent 88%
+  );
+  color: var(--ifm-color-primary);
+  text-decoration: none;
 }
 
-.floating-island-divider {
-  border-right: 1px solid var(--ifm-color-emphasis-300);
-  height: 1rem;
+.floating-island-container a svg,
+.floating-island-container-single a svg,
+.floating-island-container-double a svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.floating-island-container a i,
+.floating-island-container-single a i,
+.floating-island-container-double a i {
+  color: inherit;
+  margin: 0;
+  font-size: 14px;
+}
+
+/* Icon-only mode used inside the island: neutralize CopyButton's default
+   sparkle offset and let the flex-centered chip control positioning. */
+.floating-island-container .copy-markdown-btn .icon-container,
+.floating-island-container-single .copy-markdown-btn .icon-container,
+.floating-island-container-double .copy-markdown-btn .icon-container {
+  margin-right: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.floating-island-container .copy-markdown-btn .sparkles,
+.floating-island-container-single .copy-markdown-btn .sparkles,
+.floating-island-container-double .copy-markdown-btn .sparkles {
+  margin-right: 0;
+  fill: currentColor;
+}
+
+.floating-island-container .issue-button > i,
+.floating-island-container-single .issue-button > i,
+.floating-island-container-double .issue-button > i {
+  margin-left: 0;
+  width: auto;
+  height: auto;
 }

src/components/Issue/styles.css

@@ -1,6 +1,8 @@
-.issue-button > i {
-  color: var(--ifm-font-color-base);
-  width: 20px;
-  height: 20px;
-  margin-left: 0.5rem;
+/* Issue button — neutral defaults; containing surface controls color/spacing. */
+.issue-button {
+  color: inherit;
+}
+
+.issue-button i {
+  color: inherit;
 }