rubyXL 3.4.34 → 3.4.36

data/rdoc/css/rdoc.css

@@ -1,103 +1,407 @@
 /*
- * "Darkfish" Rdoc CSS
- * $Id: rdoc.css 54 2009-01-27 01:09:48Z deveiant $
- *
- * Author: Michael Granger <ged@FaerieMUD.org>
+ * Aliki Theme Stylesheet
+ * Modern RDoc theme by Stan Lo
  *
+ * Features:
+ * - Three-column responsive layout (navigation, content, table of contents)
+ * - Dark mode support with localStorage persistence
+ * - Auto-generated right sidebar TOC with scroll spy
+ * - Mobile-optimized search modal
+ * - Enhanced syntax highlighting for both light and dark themes
+ * - Code-copying functionality
  */
 
-/* vim: ft=css et sw=2 ts=2 sts=2 */
-/* Base Green is: #6C8C22 */
+/* 1. Design System - CSS Variables and Tokens */
+
+/* Light Theme (Default) */
+:root {
+  /* Color Palette - Primary */
+  --color-primary-50: #fdeae9;
+  --color-primary-100: #fadad3;
+  --color-primary-200: #f8bfbd;
+  --color-primary-300: #f5a9a7;
+  --color-primary-400: #f07f7b;
+  --color-primary-500: #eb544f;
+  --color-primary-600: #e62923;
+  --color-primary-700: #b8211c;
+  --color-primary-800: #8a1915;
+  --color-primary-900: #5c100e;
+
+  /* Color Palette - Neutral */
+  --color-neutral-50: #fafaf9;
+  --color-neutral-100: #f5f5f4;
+  --color-neutral-200: #e7e5e4;
+  --color-neutral-300: #d6d3d1;
+  --color-neutral-400: #a8a29e;
+  --color-neutral-500: #78716c;
+  --color-neutral-600: #57534e;
+  --color-neutral-700: #44403c;
+  --color-neutral-800: #292524;
+  --color-neutral-900: #1c1917;
+
+  /* Code highlighting colors - neutral palette for all syntax highlighters */
+  --code-blue: #1d4ed8;
+  --code-green: #047857;
+  --code-orange: #d97706;
+  --code-purple: #7e22ce;
+  --code-red: #dc2626;
+  --code-cyan: #0891b2;
+  --code-gray: #78716c;
+
+  /* Color Palette - Green (for success states) */
+  --color-green-400: #4ade80;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+
+  /* Semantic Colors - Light Theme */
+  --color-text-primary: var(--color-neutral-900);
+  --color-text-secondary: var(--color-neutral-600);
+  --color-text-tertiary: var(--color-neutral-500);
+  --color-background-primary: #fff;
+  --color-background-secondary: var(--color-neutral-50);
+  --color-background-tertiary: var(--color-neutral-100);
+  --color-border-default: var(--color-neutral-300);
+  --color-border-subtle: var(--color-neutral-200);
+  --color-border-emphasis: var(--color-neutral-400);
+  --color-link-default: var(--color-text-primary);
+  --color-link-hover: var(--color-primary-600);
+  --color-accent-primary: var(--color-primary-600);
+  --color-accent-hover: var(--color-primary-700);
+  --color-accent-subtle: var(--color-primary-50);
+  --color-code-bg: #f6f8fa;
+  --color-code-border: var(--color-neutral-300);
+  --color-nav-bg: #fff;
+  --color-nav-text: var(--color-neutral-700);
+  --color-th-background: var(--color-neutral-100);
+  --color-td-background: var(--color-neutral-50);
+
+  /* Search Type Badge Colors */
+  --color-search-type-class-bg: #e6f0ff;
+  --color-search-type-class-text: #0050a0;
+  --color-search-type-module-bg: #e6ffe6;
+  --color-search-type-module-text: #060;
+  --color-search-type-constant-bg: #fff0e6;
+  --color-search-type-constant-text: #995200;
+  --color-search-type-method-bg: #f0e6ff;
+  --color-search-type-method-text: #5200a0;
+
+  /* RGBA Colors (theme-agnostic) */
+  --color-overlay: rgb(0 0 0 / 50%);
+  --color-emphasis-bg: rgb(255 111 97 / 10%);
+  --color-emphasis-decoration: rgb(52 48 64 / 25%);
+  --color-search-highlight-bg: rgb(224 108 117 / 10%);
+  --color-success-bg: rgb(34 197 94 / 10%);
+
+  /* Typography Scale */
+  --font-size-xs: 0.75rem;    /* 12px */
+  --font-size-sm: 0.875rem;   /* 14px */
+  --font-size-base: 1rem;     /* 16px */
+  --font-size-lg: 1.125rem;   /* 18px */
+  --font-size-xl: 1.25rem;    /* 20px */
+  --font-size-2xl: 1.5rem;    /* 24px */
+  --font-size-3xl: 1.875rem;  /* 30px */
+  --font-size-4xl: 2.25rem;   /* 36px */
+  --font-size-5xl: 3rem;      /* 48px */
+
+  /* Font Families */
+  --font-family-base: -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
+  --font-family-heading: var(--font-family-base);
+  --font-family-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
+
+  /* Font Weights */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Font Shortcuts */
+  --font-primary: var(--font-family-base);
+  --font-heading: var(--font-family-heading);
+  --font-code: var(--font-family-mono);
+
+  /* Line Heights */
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+
+  /* Spacing Scale */
+  --space-1: 0.25rem;   /* 4px */
+  --space-2: 0.5rem;    /* 8px */
+  --space-3: 0.75rem;   /* 12px */
+  --space-4: 1rem;      /* 16px */
+  --space-5: 1.25rem;   /* 20px */
+  --space-6: 1.5rem;    /* 24px */
+  --space-8: 2rem;      /* 32px */
+  --space-12: 3rem;     /* 48px */
+  --space-16: 4rem;     /* 64px */
+
+  /* Border Radius */
+  --radius-sm: 0.25rem;   /* 4px */
+  --radius-md: 0.375rem;  /* 6px */
+  --radius-lg: 0.5rem;    /* 8px */
+
+  /* Shadows */
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
+  --shadow-md: 0 2px 8px rgb(0 0 0 / 10%);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
+
+  /* Layout Dimensions */
+  --layout-sidebar-width: 300px;
+  --layout-sidebar-width-min: 300px;
+  --layout-sidebar-width-max: 15%;
+  --layout-toc-width-min: 240px;
+  --layout-toc-width-max: 18%;
+  --layout-content-max-width: 800px;
+  --layout-header-height: 64px;
+  --layout-search-width: 400px;
+
+  /* Transitions */
+  --transition-fast: 150ms ease-in-out;
+  --transition-base: 200ms ease-in-out;
+  --transition-slow: 350ms ease-in-out;
+  --ease-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Animation Durations */
+  --duration-fast: 250ms;
+  --duration-base: 300ms;
+  --duration-medium: 350ms;
+
+  /* Z-Index Scale */
+  --z-fixed: 300;
+  --z-modal: 400;
+  --z-popover: 500;
+
+}
+
+/* Dark Theme */
+[data-theme="dark"] {
+  /* Code highlighting colors - neutral palette for all syntax highlighters */
+  --code-blue: #93c5fd;
+  --code-green: #34d399;
+  --code-orange: #fbbf24;
+  --code-purple: #c084fc;
+  --code-red: #f87171;
+  --code-cyan: #22d3ee;
+  --code-gray: #a8a29e;
+
+  /* Semantic Colors - Dark Theme */
+  --color-text-primary: var(--color-neutral-50);
+  --color-text-secondary: var(--color-neutral-200);
+  --color-text-tertiary: var(--color-neutral-400);
+  --color-background-primary: var(--color-neutral-900);
+  --color-background-secondary: var(--color-neutral-800);
+  --color-background-tertiary: var(--color-neutral-700);
+  --color-border-default: var(--color-neutral-600);
+  --color-border-subtle: var(--color-neutral-700);
+  --color-border-emphasis: var(--color-neutral-300);
+  --color-link-default: var(--color-neutral-50);
+  --color-link-hover: var(--color-primary-500);
+  --color-accent-primary: var(--color-primary-500);
+  --color-accent-hover: var(--color-primary-400);
+  --color-accent-subtle: rgb(235 84 79 / 10%);
+  --color-accent-subtle-hover: rgb(235 84 79 / 20%);
+  --color-code-bg: var(--color-neutral-800);
+  --color-code-border: var(--color-neutral-700);
+  --color-nav-bg: var(--color-neutral-900);
+  --color-nav-text: var(--color-neutral-50);
+  --color-th-background: var(--color-background-tertiary);
+  --color-td-background: var(--color-background-secondary);
+
+  /* Search Type Badge Colors - Dark Theme */
+  --color-search-type-class-bg: #1e3a5f;
+  --color-search-type-class-text: #93c5fd;
+  --color-search-type-module-bg: #14532d;
+  --color-search-type-module-text: #86efac;
+  --color-search-type-constant-bg: #451a03;
+  --color-search-type-constant-text: #fcd34d;
+  --color-search-type-method-bg: #3b0764;
+  --color-search-type-method-text: #d8b4fe;
+
+  /* Dark theme shadows (slightly more subtle) */
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 40%), 0 1px 2px -1px rgb(0 0 0 / 40%);
+  --shadow-md: 0 2px 8px rgb(0 0 0 / 40%);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 40%), 0 4px 6px -4px rgb(0 0 0 / 40%);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 40%), 0 8px 10px -6px rgb(0 0 0 / 40%);
+
+}
+
+/* 2. Global Styles & Layout */
+body {
+  background: var(--color-background-primary);
+  font-family: var(--font-primary);
+  font-weight: 400;
+  color: var(--color-text-primary);
+  line-height: var(--line-height-relaxed);
+  margin: 0;
+  overflow-wrap: break-word; /* Avoid overflow on mobile */
 
-.hide { display: none !important; }
+  /* Grid layout with header, sidebar, main, and footer */
+  display: grid;
+  grid-template: "header header" var(--layout-header-height) "nav main" 1fr "nav footer" auto / var(--layout-sidebar-width) 1fr;
+  min-height: 100vh;
+}
 
-* { padding: 0; margin: 0; }
+/* Three-column layout when TOC is present */
+body.has-toc {
+  grid-template: "header header header" var(--layout-header-height) "nav main toc" 1fr "nav footer toc" auto / var(--layout-sidebar-width) 1fr minmax(var(--layout-toc-width-min), var(--layout-toc-width-max));
+  min-height: 100vh;
+}
 
-body {
-  background: #fafafa;
-  font-family: Lato, sans-serif;
-  font-weight: 300;
+/* Mobile: stack everything vertically */
+@media (width <= 1023px) {
+  body,
+  body.has-toc {
+    display: flex;
+    flex-direction: column;
+    grid-template: none;
+  }
+}
 
-  /* Layout */
-  display: grid;
-  grid-template-columns: auto 1fr;
+/* 3. Typography */
+
+/* 4. Links */
+a {
+  color: var(--color-link-default);
+  transition: color var(--transition-base);
+  text-decoration: underline;
+  text-underline-offset: 0.2em; /* Make sure it doesn't overlap with underscores in a method name. */
 }
 
-body > :last-child {
-  grid-column: 1 / 3;
+/* 5. Code and Pre */
+
+/* Code blocks */
+pre {
+  font-family: var(--font-code);
+  background-color: var(--color-code-bg);
+  border: 1px solid var(--color-code-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+  overflow-x: auto;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  margin: var(--space-4) 0;
+  position: relative;
 }
 
-h1 span,
-h2 span,
-h3 span,
-h4 span,
-h5 span,
-h6 span {
+/* Code block wrapper for copy button */
+.code-block-wrapper {
   position: relative;
+  margin: var(--space-4) 0;
+}
 
-  display: none;
-  padding-left: 1em;
-  line-height: 0;
-  vertical-align: baseline;
-  font-size: 10px;
+/* Copy button styling */
+.copy-code-button {
+  position: absolute;
+  top: var(--space-2);
+  right: var(--space-2);
+  padding: var(--space-2);
+  background: var(--color-background-secondary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  opacity: 0.6;
+  transition:
+    opacity var(--transition-fast),
+    background var(--transition-fast),
+    border-color var(--transition-fast),
+    transform var(--transition-fast),
+    box-shadow var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  z-index: 10;
+}
+
+.copy-code-button:hover,
+.copy-code-button:focus {
+  opacity: 1;
+  background: var(--color-background-tertiary);
+  border-color: var(--color-border-emphasis);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
 }
 
-h1 span { top: -1.3em; }
-h2 span { top: -1.2em; }
-h3 span { top: -1.0em; }
-h4 span { top: -0.8em; }
-h5 span { top: -0.5em; }
-h6 span { top: -0.5em; }
+.copy-code-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-accent-subtle);
+}
 
-h1:hover span,
-h2:hover span,
-h3:hover span,
-h4:hover span,
-h5:hover span,
-h6:hover span {
-  display: inline;
+.copy-code-button:active {
+  transform: scale(0.92);
+  box-shadow: none;
 }
 
-h1:target,
-h2:target,
-h3:target,
-h4:target,
-h5:target,
-h6:target {
-  margin-left: -10px;
-  border-left: 10px solid #f1edba;
+.copy-code-button svg {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentcolor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  color: var(--color-text-secondary);
+  transition: color var(--transition-fast), transform var(--transition-base);
 }
 
-:link,
-:visited {
-  color: #6C8C22;
-  text-decoration: none;
+.copy-code-button:hover svg {
+  color: var(--color-text-primary);
 }
 
-:link:hover,
-:visited:hover {
-  border-bottom: 1px dotted #6C8C22;
+/* Copied state - subtle green checkmark */
+.copy-code-button.copied {
+  background: var(--color-success-bg);
+  border-color: var(--color-green-500);
+  opacity: 1;
 }
 
-code,
-pre {
-  font-family: "Source Code Pro", Monaco, monospace;
-  background-color: rgba(27,31,35,0.05);
-  padding: 0em 0.2em;
-  border-radius: 0.2em;
+.copy-code-button.copied svg {
+  color: var(--color-green-600);
 }
 
-em {
-  text-decoration-color: rgba(52, 48, 64, 0.25);
-  text-decoration-line: underline;
-  text-decoration-style: dotted;
+[data-theme="dark"] .copy-code-button.copied {
+  border-color: var(--color-green-400);
 }
 
-strong,
-em {
-  background-color: rgba(158, 178, 255, 0.1);
+[data-theme="dark"] .copy-code-button.copied svg {
+  color: var(--color-green-400);
+}
+
+/* Mobile adjustments */
+@media (hover: none) {
+  .copy-code-button {
+    opacity: 0.7;
+  }
+
+  .copy-code-button:active {
+    opacity: 1;
+  }
 }
 
+/* Inline code */
+code {
+  font-family: var(--font-code);
+  background-color: var(--color-code-bg);
+  border: 1px solid var(--color-border-subtle);
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.9em;
+}
+
+pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+}
+
+a code:hover {
+  color: var(--color-link-hover);
+}
+
+/* Tables */
 table {
   margin: 0;
   border-spacing: 0;
@@ -106,490 +410,956 @@ table {
 
 table tr th, table tr td {
   padding: 0.2em 0.4em;
-  border: 1px solid #ccc;
+  border: 1px solid var(--color-border-default);
 }
 
 table tr th {
-  background-color: #eceaed;
+  background-color: var(--color-th-background);
 }
 
 table tr:nth-child(even) td {
-  background-color: #f5f4f6;
+  background-color: var(--color-td-background);
+}
+
+/* 6. Header (Top Navbar) */
+header.top-navbar {
+  grid-area: header;
+  position: sticky;
+  top: 0;
+  z-index: var(--z-fixed);
+  background: var(--color-background-primary);
+  border-bottom: 1px solid var(--color-border-default);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 var(--space-6);
+  gap: var(--space-8);
+  height: var(--layout-header-height);
+  box-shadow: var(--shadow-sm);
+}
+
+header.top-navbar .navbar-brand {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  white-space: nowrap;
 }
 
-/* @group Generic Classes */
+header.top-navbar .navbar-brand:hover {
+  color: var(--color-accent-primary);
+}
+
+header.top-navbar .navbar-search {
+  position: relative;
+  flex: 0 1 auto;
+  width: var(--layout-search-width);
+}
 
-.initially-hidden {
+header.top-navbar .navbar-search form {
+  margin: 0;
+  padding: 0;
+}
+
+
+
+/* Mobile search icon button (hidden on desktop) */
+.navbar-search-mobile {
   display: none;
 }
 
-#search-field {
-  width: 98%;
-  background: white;
-  border: none;
-  height: 1.5em;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  text-align: left;
+/* Theme toggle button */
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-2);
+  margin-left: auto;
+  background: transparent;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition:
+    background var(--transition-fast),
+    border-color var(--transition-fast),
+    color var(--transition-fast),
+    transform var(--transition-fast);
+  font-size: var(--font-size-lg);
+  line-height: 1;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.theme-toggle:hover {
+  background: var(--color-background-secondary);
+  border-color: var(--color-accent-primary);
+  color: var(--color-accent-primary);
+  transform: scale(1.05);
+}
+
+.theme-toggle:focus {
+  outline: none;
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 3px var(--color-accent-subtle);
+}
+
+.theme-toggle:active {
+  transform: scale(0.95);
+}
+
+.theme-toggle-icon {
+  display: inline-block;
+  transition: transform var(--duration-base) var(--ease-out-smooth);
+}
+
+.theme-toggle:hover .theme-toggle-icon {
+  transform: rotate(15deg) scale(1.1);
+}
+
+/* Mobile navbar */
+@media (width <= 1023px) {
+  header.top-navbar {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--space-4);
+    gap: var(--space-4);
+  }
+
+  /* Hide desktop search bar on mobile */
+  header.top-navbar .navbar-search-desktop {
+    display: none;
+  }
+
+  /* Show mobile search icon */
+  .navbar-search-mobile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    background: transparent;
+    border: none;
+    font-size: 1.25rem;
+    color: var(--color-text-primary);
+    cursor: pointer;
+    transition: color var(--transition-fast);
+  }
+
+  .navbar-search-mobile:hover {
+    color: var(--color-accent-primary);
+  }
+
+  /* Brand needs left margin for hamburger button */
+  header.top-navbar .navbar-brand {
+    margin-left: 2.5rem;
+    flex: 1;
+    font-size: var(--font-size-lg);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+/* 7. Navigation (Left Sidebar) */
+nav {
+  grid-area: nav;
+  font-family: var(--font-heading);
+  font-size: var(--font-size-base);
+  border-right: 1px solid var(--color-border-default);
+  background: var(--color-nav-bg);
+  color: var(--color-nav-text);
+  overflow: hidden auto;
+  overscroll-behavior: contain;
+  display: flex;
+  flex-direction: column;
+  position: sticky;
+  top: var(--layout-header-height);
+  height: calc(100vh - var(--layout-header-height));
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-default) transparent;
 }
-#search-field:focus {
-  background: #f1edba;
+
+/* Custom scrollbar for WebKit browsers */
+nav::-webkit-scrollbar {
+  width: 6px;
 }
-#search-field:-moz-placeholder,
-#search-field::-webkit-input-placeholder {
-  font-weight: bold;
-  color: #666;
+
+nav::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-.missing-docs {
-  font-size: 120%;
-  background: white url(../images/wrench_orange.png) no-repeat 4px center;
-  color: #ccc;
-  line-height: 2em;
-  border: 1px solid #d00;
-  opacity: 1;
-  padding-left: 20px;
-  text-indent: 24px;
-  letter-spacing: 3px;
-  font-weight: bold;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
+nav::-webkit-scrollbar-thumb {
+  background: var(--color-border-default);
+  border-radius: var(--radius-sm);
+  transition: background var(--transition-fast);
 }
 
-.target-section {
-  border: 2px solid #dcce90;
-  border-left-width: 8px;
-  padding: 0 1em;
-  background: #fff3c2;
+nav::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-emphasis);
 }
 
-/* @end */
+/* Mobile navigation */
+@media (width <= 1023px) {
+  nav {
+    position: fixed;
+    top: var(--layout-header-height);
+    bottom: 0;
+    left: 0;
+    width: var(--layout-sidebar-width);
+    z-index: calc(var(--z-fixed) - 10); /* Below header */
+    box-shadow: var(--shadow-lg);
 
-/* @group Index Page, Standalone file pages */
-.table-of-contents ul {
-  margin: 1em;
-  list-style: none;
+    /* Don't set height - let top/bottom define it */
+  }
+
+  nav[hidden] {
+    display: none;
+  }
+
+  /* Backdrop for mobile nav */
+  body::before {
+    content: '';
+    position: fixed;
+    inset: var(--layout-header-height) 0 0 0;
+    background: var(--color-overlay);
+    z-index: calc(var(--z-fixed) - 20);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--transition-base);
+  }
+
+  /* Show backdrop when nav is open */
+  body.nav-open::before {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 
-.table-of-contents ul ul {
-  margin-top: 0.25em;
+/* Desktop: hide nav when [hidden] attribute is set */
+@media (width >= 1024px) {
+  nav[hidden] {
+    display: none;
+  }
 }
 
-.table-of-contents ul :link,
-.table-of-contents ul :visited {
-  font-size: 16px;
+nav .nav-section {
+  margin-top: var(--space-6);
+  padding: 0 var(--space-6);
 }
 
-.table-of-contents li {
-  margin-bottom: 0.25em;
+nav h2, nav h3 {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  margin: 0 0 var(--space-4);
+  padding: var(--space-2) 0;
+  color: var(--color-accent-primary);
+  border-bottom: 1px solid var(--color-border-default);
 }
 
-.table-of-contents li .toc-toggle {
-  width: 16px;
-  height: 16px;
-  background: url(../images/add.png) no-repeat;
+nav ul,
+nav dl,
+nav p {
+  padding: 0;
+  list-style: none;
+  margin: var(--space-3) 0;
 }
 
-.table-of-contents li .toc-toggle.open {
-  background: url(../images/delete.png) no-repeat;
+nav ul li {
+  margin-bottom: var(--space-2);
+  line-height: var(--line-height-relaxed);
 }
 
-/* @end */
+nav ul li a {
+  transition:
+    color var(--transition-fast),
+    transform var(--transition-fast),
+    padding var(--transition-fast);
+}
 
-/* @group Top-Level Structure */
+nav ul li a:hover {
+  padding-left: var(--space-1);
+}
 
-nav {
-  font-family: Helvetica, sans-serif;
-  font-size: 14px;
-  border-right: 1px solid #ccc;
-  position: sticky;
-  top: 0;
-  overflow: auto;
+nav ul ul {
+  padding-left: var(--space-5);
+  margin-top: var(--space-2);
+}
 
-  /* Layout */
-  width: 260px; /* fallback */
-  width: max(50px, 20vw);
-  min-width: 50px;
-  max-width: 80vw;
-  height: calc(100vh - 100px); /* reduce the footer height */
-  resize: horizontal;
+nav ul ul ul {
+  padding-left: var(--space-5);
 }
 
-main {
-  display: block;
-  margin: 1em;
-  min-width: 340px;
-  font-size: 16px;
+nav ul ul ul ul {
+  padding-left: var(--space-5);
 }
 
-main h1,
-main h2,
-main h3,
-main h4,
-main h5,
-main h6 {
-  font-family: Helvetica, sans-serif;
+nav a {
+  text-decoration: none;
 }
 
-.table-of-contents main {
-  margin-left: 2em;
+/* Truncation for direct nav links (not links inside code tags) */
+nav .nav-list > li > a,
+nav .nav-section > ul > li > a,
+nav .nav-section > dl > dd > a {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-#validator-badges {
-  margin: 1em 1em 2em;
-  font-size: smaller;
+nav footer {
+  padding: var(--space-4);
+  border-top: 1px solid var(--color-border-default);
 }
 
-/* @end */
+nav footer a {
+  color: var(--color-accent-hover);
+}
 
-/* @group navigation */
-nav {
-  margin-bottom: 1em;
+#navigation-toggle {
+  display: none; /* Hidden by default, shown on mobile */
 }
 
-nav .nav-section {
-  margin-top: 2em;
-  border-top: 2px solid #aaa;
-  font-size: 90%;
-  overflow: hidden;
+/* Mobile toggle button */
+@media (width <= 1023px) {
+  #navigation-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: calc(var(--layout-header-height) / 2);
+    transform: translateY(-50%);
+    left: 1rem;
+    z-index: var(--z-fixed);
+    font-size: 1.5rem;
+    background: transparent;
+    border: none;
+    color: var(--color-text-primary);
+    cursor: pointer;
+    transition: color var(--transition-fast);
+    line-height: 1;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  #navigation-toggle:hover {
+    color: var(--color-accent-primary);
+  }
 }
 
-nav h2 {
-  margin: 0;
-  padding: 2px 8px 2px 8px;
-  background-color: #e8e8e8;
-  color: #555;
-  font-size: 125%;
-  text-align: center;
+/*
+ * Shared Collapsible Animation using ::details-content pseudo-element.
+ * This is the modern CSS approach for animating <details> elements.
+ * Uses block-size animation with interpolate-size for smooth height transitions.
+ * Both nav-section-collapsible and nested link-list details share this pattern.
+ */
+nav details {
+  interpolate-size: allow-keywords;
 }
 
-nav h3,
-#table-of-contents-navigation {
-  margin: 0;
-  padding: 2px 8px 2px 8px;
-  text-align: right;
-  background-color: #e8e8e8;
-  color: #555;
+nav details::details-content {
+  overflow: hidden;
+  block-size: 0;
+  transition: block-size 200ms ease, content-visibility 200ms ease allow-discrete;
 }
 
-nav ul,
-nav dl,
-nav p {
-  padding: 4px 8px 0;
-  list-style: none;
+nav details[open]::details-content {
+  block-size: auto;
 }
 
-#project-navigation .nav-section {
-  margin: 0;
-  border-top: 0;
+/* Collapsible Navigation Section Headers */
+
+nav .nav-section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) 0;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+  -webkit-user-select: none;
+  border-bottom: 1px solid var(--color-border-default);
+  margin-bottom: var(--space-3);
+  transition: color var(--transition-fast);
 }
 
-#home-section h2 {
-  text-align: center;
+nav .nav-section-header::-webkit-details-marker {
+  display: none;
 }
 
-#table-of-contents-navigation {
-  font-size: 1.2em;
-  font-weight: bold;
-  text-align: center;
+nav .nav-section-header:hover {
+  color: var(--color-accent-primary);
 }
 
-#search-section {
-  margin-top: 0;
-  border-top: 0;
+nav .nav-section-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  color: var(--color-accent-primary);
 }
 
-#search-field-wrapper {
-  border-top: 1px solid #aaa;
-  border-bottom: 1px solid #aaa;
-  padding: 3px 8px;
-  background-color: #e8e8e8;
-  color: #555;
+nav .nav-section-icon svg {
+  width: 100%;
+  height: 100%;
 }
 
-ul.link-list li {
+nav .nav-section-title {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: inherit;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
-  line-height: 1.4em;
 }
 
-ul.link-list .type {
-  font-size: 8px;
-  text-transform: uppercase;
-  color: white;
-  background: #969696;
-  padding: 2px 4px;
-  -webkit-border-radius: 5px;
+nav .nav-section-chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  color: var(--color-text-tertiary);
+  transition: transform var(--transition-base);
 }
 
-dl.note-list dt {
-  float: left;
-  margin-right: 1em;
+nav .nav-section-chevron svg {
+  width: 100%;
+  height: 100%;
 }
 
-.calls-super {
-  background: url(../images/arrow_up.png) no-repeat right center;
+/* Rotate chevron when open */
+nav .nav-section-collapsible[open] > .nav-section-header .nav-section-chevron {
+  transform: rotate(90deg);
 }
 
-.nav-section details > summary {
-  display: block;
+nav .nav-section-collapsible > ul,
+nav .nav-section-collapsible > dl,
+nav .nav-section-collapsible > p {
+  margin-top: 0;
 }
 
-.nav-section details > summary::-webkit-details-marker {
-  display: none;
+nav .nav-section-collapsible > .nav-list {
+  padding-left: var(--space-5);
+  border-left: 1px solid var(--color-border-subtle);
+  margin-left: 9px; /* Align with the section icon center */
 }
 
-.nav-section details > summary::before {
-  content: "";
+nav .nav-section-collapsible .nav-list .link-list {
+  border-left: none;
+  margin-left: 0;
+  padding-left: var(--space-5);
 }
 
-.nav-section details > summary::after {
-  content: "\25B6"; /* BLACK RIGHT-POINTING TRIANGLE */
-  font-size: 0.8em;
-  margin-left: 0.4em;
+/*
+  Improve chevron styling for details under link-list, using SVG chevron that matches nav-section-chevron
+  We need to avoid adding the element in class content generation so it doesn't break darkfish styles
+*/
+nav li details:has(.link-list) > summary {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
 }
 
-.nav-section details[open] > summary::after {
-  content: "\25BD"; /* WHITE DOWN-POINTING TRIANGLE */
+nav li details:has(.link-list) > summary::after {
+  content: '';
+  position: static;
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  margin-left: 0;
+  background-color: var(--color-text-secondary);
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  transition: transform var(--transition-base), background-color var(--transition-fast);
 }
 
-/* @end */
-
-/* @group Documentation Section */
-main {
-  color: #333;
+nav li details:has(.link-list) > summary:hover::after {
+  background-color: var(--color-accent-primary);
 }
 
-main > h1:first-child,
-main > h2:first-child,
-main > h3:first-child,
-main > h4:first-child,
-main > h5:first-child,
-main > h6:first-child {
-  margin-top: 0px;
+nav li details:has(.link-list)[open] > summary::after {
+  transform: rotate(90deg);
+  background-color: var(--color-accent-primary);
 }
 
-main sup {
-  vertical-align: super;
-  font-size: 0.8em;
+/* 8. Main Content (Center Column) */
+main {
+  grid-area: main;
+  width: 100%;
+  max-width: var(--layout-content-max-width);
+  margin: 0 auto;
+  padding: var(--space-12) var(--space-8);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-relaxed);
+  color: var(--color-text-primary);
+  box-sizing: border-box;
+}
+
+/* Desktop: hide hamburger */
+@media (width >= 1024px) {
+  #navigation-toggle {
+    display: none;
+  }
+}
+
+/* Mobile: full width with padding */
+@media (width <= 1023px) {
+  main {
+    padding: var(--space-6) var(--space-4);
+    padding-top: var(--space-8);
+    width: 100%;
+  }
+
+  footer.site-footer {
+    padding: var(--space-8) var(--space-4);
+  }
+
+  footer.site-footer .footer-content {
+    grid-template-columns: 1fr;
+    gap: var(--space-6);
+  }
 }
 
-/* The heading with the class name */
 main h1[class] {
   margin-top: 0;
   margin-bottom: 1em;
-  font-size: 2em;
-  color: #6C8C22;
+  font-size: 2.5em;
+  color: var(--color-accent-primary);
 }
 
+main h1,
+main h2,
+main h3,
+main h4,
+main h5,
+main h6 {
+  font-family: var(--font-heading);
+  color: var(--color-accent-primary);
+  scroll-margin-top: calc(var(--layout-header-height) + 2rem);
+}
+
+/* Heading size hierarchy */
 main h1 {
-  margin: 2em 0 0.5em;
-  font-size: 1.7em;
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  margin-bottom: var(--space-4);
+  line-height: var(--line-height-tight);
 }
 
 main h2 {
-  margin: 2em 0 0.5em;
-  font-size: 1.5em;
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  margin-top: var(--space-8);
+  margin-bottom: var(--space-4);
+  line-height: var(--line-height-tight);
 }
 
 main h3 {
-  margin: 2em 0 0.5em;
-  font-size: 1.2em;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  margin-top: var(--space-6);
+  margin-bottom: var(--space-3);
+  line-height: var(--line-height-tight);
 }
 
 main h4 {
-  margin: 2em 0 0.5em;
-  font-size: 1.1em;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  margin-top: var(--space-4);
+  margin-bottom: var(--space-2);
+}
+
+main h5, main h6 {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  margin-top: var(--space-3);
+  margin-bottom: var(--space-2);
+}
+
+/* Heading links */
+main h1 a,
+main h2 a,
+main h3 a,
+main h4 a,
+main h5 a,
+main h6 a {
+  color: inherit;
+  text-decoration: none;
 }
 
-main h5 {
-  margin: 2em 0 0.5em;
-  font-size: 1em;
+main h1 a:hover,
+main h2 a:hover,
+main h3 a:hover,
+main h4 a:hover,
+main h5 a:hover,
+main h6 a:hover {
+  text-decoration: underline;
 }
 
-main h6 {
-  margin: 2em 0 0.5em;
-  font-size: 1em;
+/* Syntax Highlighting - Light Theme */
+.ruby-constant   { color: var(--code-orange); }
+.ruby-keyword    { color: var(--code-red); }
+.ruby-ivar       { color: var(--code-orange); }
+.ruby-operator   { color: var(--code-green); }
+.ruby-identifier { color: var(--code-blue); }
+.ruby-node       { color: var(--code-purple); }
+
+.ruby-comment {
+  color: var(--color-neutral-500);
+  font-style: italic;
+}
+.ruby-regexp     { color: var(--code-purple); }
+.ruby-value      { color: var(--code-orange); }
+.ruby-string     { color: var(--code-green); }
+
+/* Syntax Highlighting - Dark Theme */
+[data-theme="dark"] .ruby-constant   { color: var(--code-orange); }
+[data-theme="dark"] .ruby-keyword    { color: var(--code-red); }
+[data-theme="dark"] .ruby-ivar       { color: var(--code-orange); }
+[data-theme="dark"] .ruby-operator   { color: var(--code-green); }
+[data-theme="dark"] .ruby-identifier { color: var(--code-blue); }
+[data-theme="dark"] .ruby-node       { color: var(--code-purple); }
+
+[data-theme="dark"] .ruby-comment {
+  color: var(--color-neutral-400);
+  font-style: italic;
+}
+[data-theme="dark"] .ruby-regexp     { color: var(--code-purple); }
+[data-theme="dark"] .ruby-value      { color: var(--code-orange); }
+[data-theme="dark"] .ruby-string     { color: var(--code-green); }
+
+/* C Syntax Highlighting */
+.c-keyword { color: var(--code-red); }
+.c-type { color: var(--code-cyan); }
+.c-macro { color: var(--code-orange); }
+.c-function { color: var(--code-purple); }
+.c-identifier { color: var(--color-text-secondary); }
+.c-operator { color: var(--code-green); }
+.c-preprocessor { color: var(--code-purple); }
+.c-value { color: var(--code-orange); }
+.c-string { color: var(--code-green); }
+
+.c-comment {
+  color: var(--code-gray);
+  font-style: italic;
+}
+
+/* Shell Syntax Highlighting */
+.sh-prompt { color: var(--code-gray); }
+.sh-command { color: var(--code-blue); }
+.sh-option { color: var(--code-cyan); }
+.sh-string { color: var(--code-green); }
+.sh-envvar { color: var(--code-purple); }
+
+.sh-comment {
+  color: var(--code-gray);
+  font-style: italic;
+}
+
+/* Emphasis */
+em {
+  text-decoration-color: var(--color-emphasis-decoration);
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+}
+
+strong,
+em {
+  color: var(--color-accent-primary);
+  background-color: var(--color-emphasis-bg);
 }
 
+/* Paragraphs */
 main p {
-  margin: 0 0 0.5em;
-  line-height: 1.4em;
+  line-height: var(--line-height-relaxed);
+  font-weight: 400;
+  margin-bottom: var(--space-4);
 }
 
+/* Preformatted Text */
 main pre {
   margin: 1.2em 0.5em;
   padding: 1em;
   font-size: 0.8em;
 }
 
+.code-block-wrapper pre {
+  margin: 0;
+}
+
+/* Horizontal Rules */
 main hr {
   margin: 1.5em 1em;
-  border: 2px solid #ddd;
+  border: 2px solid var(--color-border-default);
 }
 
+/* Blockquotes */
 main blockquote {
   margin: 0 2em 1.2em 1.2em;
   padding-left: 0.5em;
-  border-left: 2px solid #ddd;
-}
-
-main ol,
-main ul {
-  margin: 1em 2em;
+  border-left: 2px solid var(--color-border-default);
 }
 
+/* Lists */
 main li > p {
-  margin-bottom: 0.5em;
+  margin: 0.5em;
 }
 
+/* Definition Lists */
 main dl {
   margin: 1em 0.5em;
 }
 
 main dt {
-  margin-bottom: 0.5em;
+  line-height: 1.5;
   font-weight: bold;
 }
 
+main dl.note-list dt {
+  margin-right: 1em;
+  float: left;
+}
+
+main dl.note-list dt:has(+ dt) {
+  margin-right: 0.25em;
+}
+
+main dl.note-list dt:has(+ dt)::after {
+  content: ', ';
+  font-weight: normal;
+}
+
 main dd {
-  margin: 0 1em 1em 0.5em;
+  margin: 0 0 1em 1em;
 }
 
+main dd p:first-child {
+  margin-top: 0;
+}
+
+/* Headers within Main */
 main header h2 {
   margin-top: 2em;
   border-width: 0;
-  border-top: 4px solid #bbb;
+  border-top: 4px solid var(--color-border-default);
   font-size: 130%;
 }
 
 main header h3 {
   margin: 2em 0 1.5em;
   border-width: 0;
-  border-top: 3px solid #bbb;
+  border-top: 3px solid var(--color-border-default);
   font-size: 120%;
 }
 
-.documentation-section-title {
-  position: relative;
+h1:target,
+h2:target,
+h3:target,
+h4:target,
+h5:target,
+h6:target {
+  margin-left: calc(-1 * var(--space-5));
+  padding-left: calc(var(--space-5) / 2);
+  border-left: calc(var(--space-5) / 2) solid var(--color-border-default);
 }
-.documentation-section-title .section-click-top {
-  position: absolute;
-  top: 6px;
-  left: 12px;
-  font-size: 10px;
-  color: #9b9877;
-  visibility: hidden;
-  padding-left: 0.5px;
+
+main .anchor-link:target {
+  scroll-margin-top: calc(var(--layout-header-height) + 2rem);
 }
 
-.documentation-section-title:hover .section-click-top {
-  visibility: visible;
+/* Legacy anchor for backward compatibility with old label- prefix links */
+.legacy-anchor {
+  display: block;
+  position: relative;
+  visibility: hidden;
+  scroll-margin-top: calc(var(--layout-header-height) + 2rem);
 }
 
-.constants-list > dl {
-  margin: 1em 0 2em;
-  border: 0;
+/* When a legacy anchor is targeted, highlight the next heading sibling */
+.legacy-anchor:target + h1,
+.legacy-anchor:target + h2,
+.legacy-anchor:target + h3,
+.legacy-anchor:target + h4,
+.legacy-anchor:target + h5,
+.legacy-anchor:target + h6 {
+  margin-left: calc(-1 * var(--space-5));
+  padding-left: calc(var(--space-5) / 2);
+  border-left: calc(var(--space-5) / 2) solid var(--color-border-default);
 }
 
-.constants-list > dl dt {
-  margin-bottom: 0.75em;
-  padding-left: 0;
-  font-family: "Source Code Pro", Monaco, monospace;
-  font-size: 110%;
+
+/* Utility Classes */
+.hide { display: none !important; }
+.initially-hidden { display: none; }
+
+/* Screen reader only */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
 }
 
-.constants-list > dl dt a {
-  color: inherit;
+
+
+/* Method Details */
+main .method-source-code {
+  visibility: hidden;
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateY(-8px);
+  transition:
+    max-height var(--duration-medium) var(--ease-out-smooth),
+    visibility var(--duration-medium),
+    opacity var(--duration-fast) ease-out,
+    transform var(--duration-fast) ease-out;
 }
 
-.constants-list > dl dd {
-  margin: 0 0 2em 0;
-  padding: 0;
-  color: #666;
+main .method-source-code pre {
+  border-color: var(--color-accent-hover);
+  border-left: 3px solid var(--color-accent-primary);
+  width: 100%;
+  box-sizing: border-box;
+  transition: border-color var(--transition-fast);
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-default) transparent;
 }
 
-.documentation-section h2 {
-  position: relative;
+main .method-source-code pre::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
 }
 
-.documentation-section h2 a {
-  position: absolute;
-  top: 8px;
-  right: 10px;
-  font-size: 12px;
-  color: #9b9877;
-  visibility: hidden;
+main .method-source-code pre::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-.documentation-section h2:hover a {
-  visibility: visible;
+main .method-source-code pre::-webkit-scrollbar-thumb {
+  background: var(--color-border-default);
+  border-radius: var(--radius-sm);
 }
 
-/* @group Method Details */
+main .method-source-code pre::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-emphasis);
+}
 
-main .method-source-code {
-  max-height: 0;
-  overflow: auto;
-  transition-duration: 200ms;
-  transition-delay: 0ms;
-  transition-property: all;
-  transition-timing-function: ease-in-out;
+main .method-source-code pre::-webkit-scrollbar-corner {
+  background: transparent;
 }
 
 main .method-source-code.active-menu {
+  visibility: visible;
   max-height: 100vh;
+  overflow: auto;
+  opacity: 1;
+  transform: translateY(0);
 }
 
 main .method-description .method-calls-super {
-  color: #333;
+  color: var(--color-text-primary);
   font-weight: bold;
 }
 
 main .method-detail {
   margin-bottom: 2.5em;
-  cursor: pointer;
 }
 
 main .method-detail:target {
-  margin-left: -10px;
-  border-left: 10px solid #f1edba;
+  margin-left: calc(-1 * var(--space-5));
+  padding-left: calc(var(--space-5) / 2);
+  border-left: calc(var(--space-5) / 2) solid var(--color-border-default);
+}
+
+main .method-header {
+  display: inline-block;
+  max-width: calc(100% - 6em); /* 6em is the width of the source code toggle */
 }
 
 main .method-heading {
   position: relative;
-  font-family: "Source Code Pro", Monaco, monospace;
-  font-size: 110%;
-  font-weight: bold;
-  color: #333;
+  font-family: var(--font-code);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: var(--space-3);
 }
-main .method-heading :link,
-main .method-heading :visited {
-  color: inherit;
+
+main .method-heading .method-name {
+  font-weight: var(--font-weight-semibold);
 }
-main .method-click-advice {
-  position: absolute;
-  top: 2px;
-  right: 5px;
-  font-size: 12px;
-  color: #9b9877;
-  visibility: hidden;
-  padding-right: 20px;
+
+main .method-heading .method-args {
+  font-weight: var(--font-weight-normal);
+}
+
+main .method-controls {
+  float: right;
+}
+
+main .method-controls summary {
+  display: inline-block;
   line-height: 20px;
-  background: url(../images/zoom.png) no-repeat right top;
+  color: var(--color-accent-primary);
+  cursor: pointer;
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  background: var(--color-accent-subtle);
+  border: 1px solid transparent;
+  transition:
+    color var(--transition-fast),
+    background var(--transition-fast),
+    border-color var(--transition-fast),
+    transform var(--transition-fast);
+  user-select: none;
+  -webkit-user-select: none;
+  list-style: none;
 }
-main .method-header:hover .method-click-advice {
-  visibility: visible;
+
+main .method-controls summary::-webkit-details-marker {
+  display: none;
 }
 
-main .method-alias .method-heading {
-  color: #666;
+main .method-controls summary:hover {
+  background: var(--color-primary-100);
+  border-color: var(--color-primary-300);
+  transform: translateY(-1px);
+}
+
+main .method-controls summary:active {
+  transform: scale(0.96);
+}
+
+[data-theme="dark"] main .method-controls summary:hover {
+  background: var(--color-accent-subtle-hover);
+  border-color: var(--color-primary-500);
 }
 
 main .method-description,
 main .aliases {
   margin-top: 0.75em;
-  color: #333;
+  color: var(--color-text-primary);
 }
 
 main .aliases {
@@ -597,6 +1367,17 @@ main .aliases {
   font-style: italic;
   cursor: default;
 }
+
+main .aliases a {
+  color: var(--color-accent-hover);
+}
+
+main .mixin-from {
+  font-size: 80%;
+  font-style: italic;
+  margin-bottom: 0.75em;
+}
+
 main .method-description ul {
   margin-left: 1.5em;
 }
@@ -605,83 +1386,570 @@ main #attribute-method-details .method-detail:hover {
   background-color: transparent;
   cursor: default;
 }
+
 main .attribute-access-type {
   text-transform: uppercase;
-  padding: 0 1em;
 }
-/* @end */
 
-/* @end */
+/* Small screen adjustments */
+@media (width <= 480px) {
+  nav {
+    width: 85%;
+    max-width: 320px;
+  }
 
-/* @group Source Code */
+  main {
+    margin: 0;
+    padding: var(--space-4);
+    max-width: 100%;
+  }
 
-pre {
-  margin: 0.5em 0;
-  border: 1px dashed #999;
-  padding: 0.5em;
-  background: #262626;
-  color: white;
-  overflow: auto;
+  table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  main .method-controls {
+    margin-top: 10px;
+    float: none;
+  }
 }
 
-.ruby-constant   { color: #7fffd4; background: transparent; }
-.ruby-keyword    { color: #00ffff; background: transparent; }
-.ruby-ivar       { color: #eedd82; background: transparent; }
-.ruby-operator   { color: #00ffee; background: transparent; }
-.ruby-identifier { color: #ffdead; background: transparent; }
-.ruby-node       { color: #ffa07a; background: transparent; }
-.ruby-comment    { color: #dc0000; background: transparent; }
-.ruby-regexp     { color: #ffa07a; background: transparent; }
-.ruby-value      { color: #7fffd4; background: transparent; }
 
-/* @end */
 
+/* 9. Search Modal (Mobile) */
+.search-modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal);
+  display: none;
+}
+
+.search-modal:not([hidden]) {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: var(--space-16) var(--space-4);
+}
+
+/* Reduce padding on very small screens */
+@media (width <= 420px) {
+  .search-modal:not([hidden]) {
+    padding: var(--space-4) var(--space-3);
+  }
+
+  .search-modal-content {
+    border-radius: var(--radius-md);
+  }
+
+  .search-modal-header {
+    padding: var(--space-3);
+  }
+
+  .search-modal-body {
+    padding: var(--space-3);
+  }
+
+  .search-modal-form input {
+    font-size: var(--font-size-base);
+    min-width: 0; /* Allow input to shrink */
+  }
+
+  .search-modal-form {
+    gap: var(--space-2);
+  }
+
+  .search-modal-close {
+    padding: var(--space-1) var(--space-3);
+    font-size: 0.75rem;
+  }
+}
+
+.search-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--color-overlay);
+  z-index: 1;
+}
+
+.search-modal-content {
+  position: relative;
+  z-index: 2;
+  background: var(--color-background-primary);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  width: 100%;
+  max-width: 600px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.search-modal-header {
+  padding: var(--space-6);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.search-modal-form {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.search-modal-icon {
+  font-size: 1.5rem;
+  color: var(--color-text-secondary);
+  flex-shrink: 0;
+}
+
+.search-modal-form input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: var(--font-size-lg);
+  color: var(--color-text-primary);
+  padding: 0;
+}
+
+.search-modal-form input::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.search-modal-close {
+  padding: var(--space-2) var(--space-4);
+  background: var(--color-background-secondary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: background var(--transition-fast), border-color var(--transition-fast);
+  flex-shrink: 0;
+}
+
+.search-modal-close:hover {
+  background: var(--color-background-tertiary);
+  border-color: var(--color-border-default);
+}
+
+.search-modal-body {
+  padding: var(--space-6);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.search-modal-empty {
+  text-align: center;
+  color: var(--color-text-tertiary);
+  padding: var(--space-12) 0;
+}
+
+.search-modal-results {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.search-modal-results.initially-hidden {
+  display: block !important; /* Override initially-hidden */
+}
+
+.search-modal-results li {
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background var(--transition-fast);
+  margin-bottom: var(--space-2);
+}
+
+.search-modal-results li:hover {
+  background: var(--color-background-secondary);
+}
+
+.search-modal-results a {
+  color: var(--color-text-primary);
+}
+
+.search-modal-results .search-match {
+  margin: 0;
+  font-size: var(--font-size-base);
+}
+
+.search-modal-results .search-match a {
+  text-decoration: none;
+}
+
+.search-modal-results .search-namespace {
+  margin: var(--space-1) 0 0 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.search-modal-results .search-snippet {
+  margin: var(--space-1) 0 0 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-tertiary);
+}
+
+/* 10. Right Sidebar - Table of Contents */
+aside.table-of-contents {
+  grid-area: toc;
+  align-self: start;
+  position: sticky;
+  top: var(--layout-header-height);
+  padding: var(--space-8) var(--space-6);
+  border: none;
+  border-left: 1px solid var(--color-border-default);
+  font-size: var(--font-size-base);
+}
+
+aside.table-of-contents * {
+  border-right: none !important;
+  outline: none !important;
+}
+
+aside.table-of-contents .toc-sticky {
+  display: flex;
+  flex-direction: column;
+
+  /* Exclude header height and top/bottom padding of aside.table-of-contents */
+  height: calc(100vh - var(--layout-header-height) - var(--space-8) * 2);
+}
 
-/* @group search results */
-#search-results {
-  font-family: Lato, sans-serif;
+aside.table-of-contents .toc-sticky nav {
+  height: auto;
+}
+
+aside.table-of-contents .toc-list > .toc-h2 {
+  margin-left: var(--space-4);
+}
+
+aside.table-of-contents .toc-list > .toc-h3 {
+  margin-left: var(--space-8);
+}
+
+/* Hide TOC on mobile/tablet */
+@media (width <= 1279px) {
+  aside.table-of-contents {
+    display: none;
+  }
+
+  body.has-toc {
+    grid-template-columns: var(--layout-sidebar-width) 1fr;
+    grid-template-areas:
+      "header header"
+      "nav main"
+      "footer footer";
+  }
+}
+
+/* Tablet adjustments (between mobile and desktop) */
+@media (width >= 768px) and (width <= 1023px) {
+  header.top-navbar {
+    padding: 0 var(--space-6);
+  }
+
+  main {
+    padding: var(--space-8) var(--space-6);
+    max-width: 100%;
+  }
+}
+
+.table-of-contents h3 {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  margin: 0 0 var(--space-5) 0;
+  color: var(--color-text-primary);
+}
+
+.table-of-contents ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.table-of-contents ul ul {
+  margin-top: var(--space-3);
+  margin-left: var(--space-5);
+  border-left: 1px solid var(--color-border-default);
+  padding-left: var(--space-4);
+}
+
+.table-of-contents li {
+  margin-bottom: var(--space-3);
+}
+
+.table-of-contents a {
+  display: block;
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+  line-height: var(--line-height-relaxed);
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+
+/* Nav hover styles sit here to keep specificity ordering with TOC links */
+nav a:hover {
+  color: var(--color-link-hover);
+  text-decoration: underline;
+}
+
+.table-of-contents a:hover {
+  color: var(--color-link-hover);
+}
+
+.table-of-contents a.active {
+  color: var(--color-accent-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+ol.breadcrumb {
+  display: flex;
+  padding: 0;
+  margin: 0 0 1em;
+}
+
+ol.breadcrumb li {
+  display: block;
+  list-style: none;
+  font-size: 125%;
+}
+
+/* 11. Footer */
+footer.site-footer {
+  grid-area: footer;
+  background: var(--color-background-secondary);
+  border-top: 1px solid var(--color-border-default);
+  padding: var(--space-12) var(--space-6);
+}
+
+footer.site-footer .footer-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-8);
+}
+
+footer.site-footer h3 {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin: 0 0 var(--space-4) 0;
+  letter-spacing: 0.05em;
+}
+
+footer.site-footer ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+footer.site-footer li {
+  margin-bottom: var(--space-2);
+}
+
+footer.site-footer a {
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  font-size: var(--font-size-sm);
+  transition: color var(--transition-fast);
+}
+
+footer.site-footer a:hover {
+  color: var(--color-link-hover);
+}
+
+footer.site-footer .footer-bottom {
+  margin-top: var(--space-8);
+  padding-top: var(--space-6);
+  border-top: 1px solid var(--color-border-default);
+  text-align: center;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+footer.site-footer .footer-bottom:first-child {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
+}
+
+/* Search */
+#search-section {
+  padding: var(--space-6);
+  background-color: var(--color-background-primary);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+#search-field-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+#search-field {
+  width: 100%;
+  padding: var(--space-2) var(--space-4) var(--space-2) 2.5rem;
+  border: 1px solid var(--color-border-default);
+  border-radius: 1.25rem;
+  font-size: var(--font-size-sm);
+  outline: none;
+  transition: border-color var(--transition-base);
+  color: var(--color-text-primary);
+}
+
+#search-field:focus {
+  border-color: var(--color-accent-primary);
+}
+
+#search-field::placeholder {
+  color: var(--color-text-primary);
+}
+
+#search-field-wrapper::before {
+  content: "\1F50D";
+  position: absolute;
+  left: var(--space-3);
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-primary);
+  opacity: 0.6;
+}
+
+/* Search Results */
+.search-results {
+  font-family: var(--font-primary);
   font-weight: 300;
 }
 
-#search-results .search-match {
-  font-family: Helvetica, sans-serif;
+.search-results a {
+  color: var(--color-text-primary);
+}
+
+.search-results a:hover {
+  color: var(--color-accent-primary);
+}
+
+.search-results .search-match {
+  font-family: var(--font-heading);
   font-weight: normal;
 }
 
-#search-results .search-selected {
-  background: #e8e8e8;
+.search-results .search-selected {
+  background: var(--color-code-bg);
   border-bottom: 1px solid transparent;
 }
 
-#search-results li {
+.search-results li {
   list-style: none;
-  border-bottom: 1px solid #aaa;
+  border-bottom: 1px solid var(--color-border-default);
   margin-bottom: 0.5em;
 }
 
-#search-results li:last-child {
+.search-results li:last-child {
   border-bottom: none;
   margin-bottom: 0;
 }
 
-#search-results li p {
+.search-results li p {
   padding: 0;
   margin: 0.5em;
 }
 
-#search-results .search-namespace {
+.search-results .search-namespace {
   font-weight: bold;
 }
 
-#search-results li em {
-  background: yellow;
+.search-results .search-type {
+  display: inline-block;
+  margin-left: var(--space-2);
+  padding: 0 var(--space-2);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+  vertical-align: middle;
+  background: var(--color-background-tertiary);
+  color: var(--color-text-secondary);
+}
+
+.search-results .search-type-class {
+  background: var(--color-search-type-class-bg);
+  color: var(--color-search-type-class-text);
+}
+
+.search-results .search-type-module {
+  background: var(--color-search-type-module-bg);
+  color: var(--color-search-type-module-text);
+}
+
+.search-results .search-type-constant {
+  background: var(--color-search-type-constant-bg);
+  color: var(--color-search-type-constant-text);
+}
+
+.search-results .search-type-instance-method,
+.search-results .search-type-class-method {
+  background: var(--color-search-type-method-bg);
+  color: var(--color-search-type-method-text);
+}
+
+.search-results li em {
+  background-color: var(--color-search-highlight-bg);
   font-style: normal;
 }
 
-#search-results pre {
+.search-results pre {
   margin: 0.5em;
-  font-family: "Source Code Pro", Monaco, monospace;
+  font-family: var(--font-code);
 }
 
-/* @end */
+header.top-navbar #search-field {
+  width: 100%;
+  padding: var(--space-2) var(--space-4);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  background: var(--color-background-primary);
+  color: var(--color-text-primary);
+  transition: border-color var(--transition-fast);
+}
 
+header.top-navbar #search-field:focus {
+  outline: none;
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 3px var(--color-accent-subtle);
+}
+
+header.top-navbar #search-field::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+/* Search results dropdown in navbar */
+header.top-navbar #search-results-desktop {
+  position: absolute;
+  top: calc(100% + var(--space-2));
+  left: 0;
+  width: var(--layout-search-width);
+  max-height: 60vh;
+  background: var(--color-background-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  overflow-y: auto;
+  z-index: var(--z-popover);
+  margin: 0;
+  padding: 0;
+}
+
+header.top-navbar #search-results-desktop.initially-hidden {
+  display: none;
+}
+
+header.top-navbar #search-results-desktop[aria-expanded="false"] {
+  display: none;
+}