.

Author: penguine-ip

docs/app/global.css

@@ -318,12 +318,22 @@
  * uses `items-end` to align the visible 268px nav to the right edge.
  * So borders on the aside itself land in the wrong place — we target
  * its direct child (the actual 268px column) instead.               */
-#nd-sidebar > *,
+#nd-sidebar > * {
+  border-inline-start: 1px solid var(--color-fd-border);
+}
+
 #nd-sidebar-mobile > *,
 #nd-toc {
   border-inline: 1px solid var(--color-fd-border);
 }
 
+/* The seam between sidebar and prose should belong to the main docs
+ * surface, not the collapsible sidebar rail. That keeps the vertical
+ * divider visible even when the sidebar is collapsed away. */
+#nd-page {
+  border-inline-start: 1px solid var(--color-fd-border);
+}
+
 /* ==================================================================
  * Blueprint callout — one treatment, many hooks.
  *

docs/home/read-me.mdx

@@ -30,6 +30,8 @@ import {
 
 <br />
 
+<br />
+
 ## Unit testing for LLMs.
 
 Pytest-native evals that run in CI/CD or as Python scripts. Iterate locally, on your own environment, on your own criteria.

docs/src/components/Buttons/Buttons.module.scss

@@ -5,8 +5,10 @@
   justify-content: center;
   gap: 0.4rem;
   padding: 0.5rem 0.7rem;
+  border-radius: 0;
   font-size: 13px;
   font-weight: 500;
+  font-family: inherit;
   line-height: 1;
   text-decoration: none;
   appearance: none;

docs/src/components/Buttons/index.tsx

@@ -96,6 +96,7 @@ export const PrimaryButton: React.FC<PrimaryButtonProps> = (props) => {
       ref={buttonRef}
       type={type}
       className={styles.primary}
+      data-button
       data-callout
     >
       {renderContent({
@@ -138,6 +139,7 @@ export const SecondaryButton: React.FC<ButtonProps> = (props) => {
       {...buttonProps}
       type={type}
       className={styles.secondary}
+      data-button
       data-callout
     >
       {renderContent({ children, startIcon, endIcon })}

docs/src/components/Hotkey/Hotkey.module.scss

@@ -31,3 +31,9 @@
 .key {
   letter-spacing: 0.02em;
 }
+
+.key :global(svg) {
+  width: 0.72rem;
+  height: 0.72rem;
+  flex-shrink: 0;
+}

docs/src/components/Hotkey/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
-import { Command } from "lucide-react";
+import { Command, CornerDownLeft } from "lucide-react";
 import styles from "./Hotkey.module.scss";
 
 export type HotkeyConfig = {
@@ -14,6 +14,14 @@ type HotkeyProps = {
   ariaLabel?: string;
 };
 
+function renderHotkeyLabel(key: string) {
+  if (key.toLowerCase() === "enter") {
+    return <CornerDownLeft aria-hidden="true" />;
+  }
+
+  return key;
+}
+
 const Hotkey: React.FC<HotkeyProps> = ({ hotkey, ariaLabel }) => {
   useEffect(() => {
     function onKeyDown(event: KeyboardEvent) {
@@ -50,7 +58,7 @@ const Hotkey: React.FC<HotkeyProps> = ({ hotkey, ariaLabel }) => {
       <span className={styles.icon} aria-hidden="true">
         <Command />
       </span>
-      <span className={styles.key}>{hotkey.key}</span>
+      <span className={styles.key}>{renderHotkeyLabel(hotkey.key)}</span>
     </kbd>
   );
 };

docs/src/layouts/SiteTopNav/SiteTopNav.module.scss

@@ -7,6 +7,7 @@ $toc-visible-min: 1280px;
   position: sticky;
   top: var(--fd-docs-row-1);
   z-index: 10;
+  --nd-header-logo-width: 268px;
   backdrop-filter: blur(12px);
   transition: colors;
 }
@@ -62,7 +63,7 @@ $toc-visible-min: 1280px;
   @media (min-width: $grid-min) {
     display: grid;
     grid-template-columns:
-      var(--fd-sidebar-col)
+      var(--nd-header-logo-width, var(--fd-sidebar-col))
       minmax(0, 1fr)
       var(--nd-header-utils-width);
   }

docs/src/sections/home/HomeHeroSection.tsx

@@ -64,6 +64,7 @@ const HomeHeroSection: React.FC = () => {
         <div className={styles.actions}>
           <PrimaryButton
             href="/docs/getting-started"
+            shortkey="Enter"
             endIcon={<ArrowUpRight aria-hidden />}
           >
             Get Started

docs/src/sections/home/HomePytestDemo/HomePytestDemo.module.scss

@@ -173,21 +173,38 @@
 }
 
 .runButton {
+  --fd-callout-color: var(--color-fd-primary-foreground);
+  --fd-callout-ink: color-mix(
+    in oklch,
+    var(--color-fd-primary-foreground) 14%,
+    transparent
+  );
+  --fd-callout-rule: color-mix(
+    in oklch,
+    var(--color-fd-foreground) 55%,
+    transparent
+  );
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 0.45rem;
-  padding: 0.45rem 0.7rem;
-  border: 1px solid var(--demo-foreground);
-  background: var(--demo-foreground);
-  color: var(--demo-surface);
-  font-size: 11px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: opacity 150ms ease, background-color 150ms ease;
   align-self: flex-start;
+  padding: 0.5rem 0.7rem;
+  border: 1px solid var(--color-fd-primary);
+  border-radius: 0;
+  background: var(--color-fd-primary);
+  color: var(--color-fd-primary-foreground);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+  appearance: none;
+  cursor: pointer;
+  transition: background-color 160ms ease, color 160ms ease,
+    border-color 160ms ease;
 
   &:hover:not(:disabled) {
-    opacity: 0.92;
+    background: color-mix(in oklch, var(--color-fd-primary) 88%, transparent);
   }
 
   &:disabled {

docs/src/sections/home/HomePytestDemo/index.tsx

@@ -340,11 +340,13 @@ const HomePytestDemo: React.FC<HomePytestDemoProps> = ({ hideHeader = false }) =
           className={styles.runButton}
           onClick={runDemo}
           disabled={status === "running"}
+          data-button
+          data-callout
         >
           {status === "running" ? (
-            <LoaderCircle size={14} className={styles.spinner} />
+            <LoaderCircle size={14} className={styles.spinner} aria-hidden="true" />
           ) : (
-            <Play size={14} />
+            <Play size={14} aria-hidden="true" />
           )}
           {status === "running" ? "Evaluating" : "Evaluate"}
         </button>