diff --git a/.github/workflows/ruby-docs.yml b/.github/workflows/ruby-docs.yml
new file mode 100644
index 0000000000..d6514cea9f
--- /dev/null
+++ b/.github/workflows/ruby-docs.yml
@@ -0,0 +1,59 @@
+name: Deploy Ruby docs to Pages
+
+on:
+  push:
+    branches: [ 'rorvswild_theme' ]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    if: ${{ github.repository == 'basesecrete/rdoc' && !startsWith(github.event_name, 'pull') }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Checkout Ruby
+        uses: actions/checkout@v4
+        with:
+          repository: ruby/ruby
+          path: ruby
+
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@161cd54b698f1fb3ea539faab2e036d409550e3c # v1.187.0
+        with:
+          ruby-version: '3.2'
+          bundler-cache: true
+
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v5
+
+      - name: Build with RDoc
+        run: |
+          bundle
+          bundle exec rake generate
+          bundle exec rdoc --root=ruby --include=ruby/doc --title "Ruby Documentation" --main=README.md --template=rorvswild --debug
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/lib/rdoc/code_object/class_module.rb b/lib/rdoc/code_object/class_module.rb
index c69e14b5e4..85d0130d9a 100644
--- a/lib/rdoc/code_object/class_module.rb
+++ b/lib/rdoc/code_object/class_module.rb
@@ -710,6 +710,16 @@ def superclass=(superclass)
     @superclass = superclass
   end
 
+  def super_classes
+    result = []
+    parent = self
+    while parent = parent.superclass
+      result << parent
+      return result if parent.is_a?(String)
+    end
+    result
+  end
+
   def to_s # :nodoc:
     if is_alias_for then
       "#{self.class.name} #{self.full_name} -> #{is_alias_for}"
diff --git a/lib/rdoc/generator/template/darkfish/_sidebar_search.rhtml b/lib/rdoc/generator/template/darkfish/_dialog_search.rhtml
similarity index 55%
rename from lib/rdoc/generator/template/darkfish/_sidebar_search.rhtml
rename to lib/rdoc/generator/template/darkfish/_dialog_search.rhtml
index afc7f7b88d..8d8ac34d6a 100644
--- a/lib/rdoc/generator/template/darkfish/_sidebar_search.rhtml
+++ b/lib/rdoc/generator/template/darkfish/_dialog_search.rhtml
@@ -1,6 +1,7 @@
-<div id="search-section" role="search" class="project-section initially-hidden">
+<dialog id="search-dialog" role="search" class="search-dialog initially-hidden">
   <form action="#" method="get" accept-charset="utf-8">
     <div id="search-field-wrapper">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
       <input id="search-field" role="combobox" aria-label="Search"
              aria-autocomplete="list" aria-controls="search-results"
              type="text" name="search" placeholder="Search (/) for a class, method, ..." spellcheck="false"
@@ -9,6 +10,7 @@
 
     <ul id="search-results" aria-label="Search Results"
         aria-busy="false" aria-expanded="false"
-        aria-atomic="false" class="initially-hidden"></ul>
+        aria-atomic="false" class="initially-hidden">
+    </ul>
   </form>
-</div>
+</dialog>
diff --git a/lib/rdoc/generator/template/darkfish/_footer.rhtml b/lib/rdoc/generator/template/darkfish/_footer.rhtml
index 9791b42901..3ab9ffdec3 100644
--- a/lib/rdoc/generator/template/darkfish/_footer.rhtml
+++ b/lib/rdoc/generator/template/darkfish/_footer.rhtml
@@ -1,5 +1,4 @@
-<footer id="validator-badges" role="contentinfo">
-  <p><a href="https://validator.w3.org/check/referer">Validate</a>
-  <p>Generated by <a href="https://ruby.github.io/rdoc/">RDoc</a> <%= RDoc::VERSION %>.
-  <p>Based on <a href="http://deveiate.org/projects/Darkfish-RDoc/">Darkfish</a> by <a href="http://deveiate.org">Michael Granger</a>.
-</footer>
+<footer role="contentinfo">
+  <p>Generated by <a href="https://ruby.github.io/rdoc/">RDoc</a> <%= RDoc::VERSION %>. <a href="https://validator.w3.org/check/referer">Validate</a>.
+  <p><a href="http://rorvswild.com/theme">RoRvsWild theme</a> based on <a href="http://deveiate.org/projects/Darkfish-RDoc/">Darkfish</a>.
+</footer>
\ No newline at end of file
diff --git a/lib/rdoc/generator/template/darkfish/_navigation.rhtml b/lib/rdoc/generator/template/darkfish/_navigation.rhtml
new file mode 100644
index 0000000000..88986bf9e6
--- /dev/null
+++ b/lib/rdoc/generator/template/darkfish/_navigation.rhtml
@@ -0,0 +1,5 @@
+<nav id="navigation" role="navigation">
+  <%= render '_sidebar_classes.rhtml' %>
+  <%= render '_sidebar_pages.rhtml' %>
+  <%= render '_footer.rhtml' %>
+</nav>
\ No newline at end of file
diff --git a/lib/rdoc/generator/template/darkfish/_sidebar_classes.rhtml b/lib/rdoc/generator/template/darkfish/_sidebar_classes.rhtml
index d3d8da4017..11d3e33b22 100644
--- a/lib/rdoc/generator/template/darkfish/_sidebar_classes.rhtml
+++ b/lib/rdoc/generator/template/darkfish/_sidebar_classes.rhtml
@@ -1,4 +1,4 @@
-<div id="classindex-section" class="nav-section">
+<div class="nav-section">
   <h3>Class and Module Index</h3>
 
   <%-
@@ -9,22 +9,37 @@
   end
   link = proc do |index_klass, display = index_klass.display?|
     if display
-      -%><code><a href="<%= rel_prefix %>/<%= index_klass.path %>"><%= index_klass.name %></a></code><%-
+      -%><a href="<%= rel_prefix %>/<%= index_klass.path %>"><%= index_klass.name %></a><%-
     else
-      -%><code><%= index_klass.name %></code><%-
+      -%><%= index_klass.name %><%-
     end
   end
+
+  def has_active_descendant?(klass, current, all_classes)
+    return false unless defined?(current)
+    return true if klass == current
+    children = all_classes[klass.full_name]
+    return false unless children
+    children.any? { |child| has_active_descendant?(child, current, all_classes) }
+  end
+
   if top = all_classes[nil]
     solo = top.one? {|klass| klass.display?}
-    traverse = proc do |klasses| -%>
-  <ul class="link-list">
+    traverse = proc do |klasses|
+      has_active_descendant = false
+      -%>
+    <ul class="link-list" id="class-and-module-index">
       <%- klasses.each do |index_klass| -%>
         <%- if children = all_classes[index_klass.full_name] -%>
-  <li><details<% if solo; solo = false %> open<% end %>><summary><% link.call(index_klass) %></summary>
-          <%- traverse.call(children) -%>
-  </ul></details>
+          <li class="<%= "active" if defined?(current) && (index_klass == current) %>">
+            <details<% if solo || (defined?(current) && has_active_descendant?(index_klass, current, all_classes)); solo = false %>  open<% end %>>
+              <summary><% link.call(index_klass) %></summary>
+              <%- traverse.call(children) -%>
+              </ul>
+            </details>
         <%- elsif index_klass.display? -%>
-  <li><% link.call(index_klass, true) %>
+          <li class="<%= "active" if defined?(current) && (index_klass == current) %>">
+            <% link.call(index_klass, true) %>
         <%- end -%>
       <%- end -%>
     <%- end -%>
diff --git a/lib/rdoc/generator/template/darkfish/_sidebar_constants.rhtml b/lib/rdoc/generator/template/darkfish/_sidebar_constants.rhtml
new file mode 100644
index 0000000000..01645af93d
--- /dev/null
+++ b/lib/rdoc/generator/template/darkfish/_sidebar_constants.rhtml
@@ -0,0 +1,10 @@
+<% if (constants = klass.constants.sort).any? %>
+  <div class="nav-section">
+    <h3>Constants</h3>
+    <ul class="link-list" role="directory">
+      <%- constants.each do |const| -%>
+      <li><a href="#<%= h const.name %>"><%= h const.name -%></a></li>
+      <%- end -%>
+    </ul>
+  </div>
+<% end %>
diff --git a/lib/rdoc/generator/template/darkfish/_sidebar_extends.rhtml b/lib/rdoc/generator/template/darkfish/_sidebar_extends.rhtml
index 7602076c96..da72189d14 100644
--- a/lib/rdoc/generator/template/darkfish/_sidebar_extends.rhtml
+++ b/lib/rdoc/generator/template/darkfish/_sidebar_extends.rhtml
@@ -1,15 +1,15 @@
 <%- unless klass.extends.empty? then %>
-<div id="extends-section" class="nav-section">
-  <h3>Extended With Modules</h3>
+  <div class="nav-section">
+    <h3>Extended With Modules</h3>
 
-  <ul class="link-list">
-    <%- klass.each_extend do |ext| -%>
-  <%- unless String === ext.module then -%>
-    <li><a class="extend" href="<%= klass.aref_to ext.module.path %>"><%= ext.module.full_name %></a>
-  <%- else -%>
-    <li><span class="extend"><%= ext.name %></span>
-  <%- end -%>
-  <%- end -%>
-  </ul>
-</div>
+    <ul class="link-list">
+      <%- klass.each_extend do |ext| -%>
+    <%- unless String === ext.module then -%>
+      <li><a class="extend" href="<%= klass.aref_to ext.module.path %>"><%= ext.module.full_name %></a>
+    <%- else -%>
+      <li><span class="extend"><%= ext.name %></span>
+    <%- end -%>
+    <%- end -%>
+    </ul>
+  </div>
 <%- end -%>
diff --git a/lib/rdoc/generator/template/darkfish/_sidebar_in_files.rhtml b/lib/rdoc/generator/template/darkfish/_sidebar_in_files.rhtml
index 74869a4b51..1b479df965 100644
--- a/lib/rdoc/generator/template/darkfish/_sidebar_in_files.rhtml
+++ b/lib/rdoc/generator/template/darkfish/_sidebar_in_files.rhtml
@@ -1,9 +1,8 @@
 <div id="file-list-section" class="nav-section">
   <h3>Defined In</h3>
-
   <ul>
-<%- klass.in_files.each do |tl| -%>
-    <li><%= h tl.relative_name %>
-<%- end -%>
+    <%- klass.in_files.each do |tl| -%>
+      <li><%= h tl.relative_name %>
+    <%- end -%>
   </ul>
 </div>
diff --git a/lib/rdoc/generator/template/darkfish/_sidebar_includes.rhtml b/lib/rdoc/generator/template/darkfish/_sidebar_includes.rhtml
index 5b600e5975..e6a1c4a58e 100644
--- a/lib/rdoc/generator/template/darkfish/_sidebar_includes.rhtml
+++ b/lib/rdoc/generator/template/darkfish/_sidebar_includes.rhtml
@@ -1,15 +1,15 @@
 <%- unless klass.includes.empty? then %>
-<div id="includes-section" class="nav-section">
-  <h3>Included Modules</h3>
+  <div class="nav-section">
+    <h3>Included Modules</h3>
 
-  <ul class="link-list">
-  <%- klass.each_include do |inc| -%>
-  <%- unless String === inc.module then -%>
-    <li><a class="include" href="<%= klass.aref_to inc.module.path %>"><%= inc.module.full_name %></a>
-  <%- else -%>
-    <li><span class="include"><%= inc.name %></span>
-  <%- end -%>
-  <%- end -%>
-  </ul>
-</div>
+    <ul class="link-list">
+    <%- klass.each_include do |inc| -%>
+    <%- unless String === inc.module then -%>
+      <li><a class="include" href="<%= klass.aref_to inc.module.path %>"><%= inc.module.full_name %></a>
+    <%- else -%>
+      <li><span class="include"><%= inc.name %></span>
+    <%- end -%>
+    <%- end -%>
+    </ul>
+  </div>
 <%- end -%>
diff --git a/lib/rdoc/generator/template/darkfish/_sidebar_methods.rhtml b/lib/rdoc/generator/template/darkfish/_sidebar_methods.rhtml
index 5b4c295bed..d09216a0f6 100644
--- a/lib/rdoc/generator/template/darkfish/_sidebar_methods.rhtml
+++ b/lib/rdoc/generator/template/darkfish/_sidebar_methods.rhtml
@@ -1,12 +1,21 @@
-<%- unless klass.method_list.empty? then %>
-<!-- Method Quickref -->
-<div id="method-list-section" class="nav-section">
-  <h3>Methods</h3>
+<% if (class_methods = klass.class_method_list.sort).any? %>
+  <div class="nav-section">
+    <h3>Class Methods</h3>
+    <ul class="link-list" role="directory">
+      <%- class_methods.each do |meth| -%>
+      <li <%- if meth.calls_super %>class="calls-super" <%- end %>><a href="#<%= meth.aref %>"><%= h meth.name -%></a></li>
+      <%- end -%>
+    </ul>
+  </div>
+<% end %>
 
-  <ul class="link-list" role="directory">
-    <%- klass.each_method do |meth| -%>
-    <li <%- if meth.calls_super %>class="calls-super" <%- end %>><a href="#<%= meth.aref %>"><%= meth.singleton ? '::' : '#' %><%= h meth.name -%></a>
-    <%- end -%>
-  </ul>
-</div>
-<%- end -%>
+<% if (instance_methods = klass.instance_methods.sort).any? %>
+  <div class="nav-section">
+    <h3>Instance Methods</h3>
+    <ul class="link-list" role="directory">
+      <%- instance_methods.each do |meth| -%>
+      <li <%- if meth.calls_super %>class="calls-super" <%- end %>><a href="#<%= meth.aref %>"><%= h meth.name -%></a></li>
+      <%- end -%>
+    </ul>
+  </div>
+<% end %>
diff --git a/lib/rdoc/generator/template/darkfish/_sidebar_navigation.rhtml b/lib/rdoc/generator/template/darkfish/_sidebar_navigation.rhtml
deleted file mode 100644
index d7f330840a..0000000000
--- a/lib/rdoc/generator/template/darkfish/_sidebar_navigation.rhtml
+++ /dev/null
@@ -1,11 +0,0 @@
-<div id="home-section" role="region" title="Quick navigation" class="nav-section">
-  <h2>
-    <a href="<%= rel_prefix %>/index.html" rel="home">Home</a>
-  </h2>
-
-  <div id="table-of-contents-navigation">
-    <a href="<%= rel_prefix %>/table_of_contents.html#pages">Pages</a>
-    <a href="<%= rel_prefix %>/table_of_contents.html#classes">Classes</a>
-    <a href="<%= rel_prefix %>/table_of_contents.html#methods">Methods</a>
-  </div>
-</div>
diff --git a/lib/rdoc/generator/template/darkfish/_sidebar_pages.rhtml b/lib/rdoc/generator/template/darkfish/_sidebar_pages.rhtml
index 3f68f0c0dc..ac34b9c6a8 100644
--- a/lib/rdoc/generator/template/darkfish/_sidebar_pages.rhtml
+++ b/lib/rdoc/generator/template/darkfish/_sidebar_pages.rhtml
@@ -1,9 +1,11 @@
 <%- simple_files = @files.select { |f| f.text? } %>
-<%- if defined?(current) -%>
+
+<%- if defined?(current) && current.respond_to?(:page_name) -%>
   <%- dir = current.full_name[%r{\A[^/]+(?=/)}] || current.page_name -%>
 <%- end -%>
+
 <%- unless simple_files.empty? then -%>
-<div id="fileindex-section" class="nav-section">
+<div class="nav-section">
   <h3>Pages</h3>
 
   <ul class="link-list">
@@ -12,7 +14,7 @@
   <%- end.each do |n, files| -%>
     <%- f = files.shift -%>
     <%- if files.empty? -%>
-    <li><a href="<%= rel_prefix %>/<%= h f.path %>"><%= h f.page_name %></a>
+      <li class="<%= 'active' if defined?(dir) && (dir == f.page_name) %>"><a href="<%= rel_prefix %>/<%= h f.path %>"><%= h f.page_name %></a>
       <%- next -%>
     <%- end -%>
     <li><details<% if dir == n %> open<% end %>><summary><%
@@ -23,7 +25,7 @@
     end %></summary>
     <ul class="link-list">
     <%- files.each do |f| -%>
-      <li><a href="<%= rel_prefix %>/<%= h f.path %>"><%= h f.page_name %></a>
+      <li class="<%= 'active' if defined?(dir) && (dir == f.page_name) %>"><a href="<%= rel_prefix %>/<%= h f.path %>"><%= h f.page_name %></a>
     <%- end -%>
     </ul></details>
   <%- end -%>
diff --git a/lib/rdoc/generator/template/darkfish/_sidebar_parent.rhtml b/lib/rdoc/generator/template/darkfish/_sidebar_parent.rhtml
index 1420da3201..04e2f80296 100644
--- a/lib/rdoc/generator/template/darkfish/_sidebar_parent.rhtml
+++ b/lib/rdoc/generator/template/darkfish/_sidebar_parent.rhtml
@@ -1,11 +1,41 @@
-<%- if klass.type == 'class' then %>
-<div id="parent-class-section" class="nav-section">
-  <h3>Parent</h3>
+<%- if klass.type == 'class' && (ancestors = klass.super_classes).any? then -%>
+  <div class="nav-section">
+    <h3>Ancestors</h3>
+    <ul class="link-list" role="directory">
+      <%- ancestors.each_with_index do |ancestor, index| -%>
+        <%- if ancestor.is_a?(String) -%>
+          <li>
+            <%- if index == 0 && ancestors.size > 1 -%>
+              <details>
+                <summary><%= ancestor -%></summary>
+                  <ul class="link-list" role="directory">
+            <%- else -%>
+              <span><%= ancestor -%></span>
+              <ul class="link-list" role="directory">
+            <%- end -%>
+        <%- elsif ancestor.is_a?(RDoc::NormalClass) -%>
+          <li>
+            <%- if index == 0 && ancestors.size > 1 -%>
+              <details>
+                <summary><a href="<%= klass.aref_to ancestor.path -%>"><%= ancestor.full_name -%></a></summary>
+                <ul class="link-list" role="directory">
+            <%- else -%>
+              <a href="<%= klass.aref_to ancestor.path -%>"><%= ancestor.full_name -%></a>
+              <ul class="link-list" role="directory">
+            <%- end -%>
+        <%- end -%>
+      <%- end -%>
 
-  <%- if klass.superclass and not String === klass.superclass then -%>
-  <p class="link"><a href="<%= klass.aref_to klass.superclass.path %>"><%= klass.superclass.full_name %></a>
-  <%- else -%>
-  <p class="link"><%= klass.superclass %>
-  <%- end -%>
-</div>
+      <%- ancestors.each_with_index do |ancestor, index| -%>
+        <%- if index == 0 && ancestors.size > 1 -%>
+              </ul>
+            </details>
+          </li>
+        <%- else -%>
+            </ul>
+          </li>
+        <%- end -%>
+      <%- end -%>
+    </ul>
+  </div>
 <%- end -%>
diff --git a/lib/rdoc/generator/template/darkfish/_sidebar_sections.rhtml b/lib/rdoc/generator/template/darkfish/_sidebar_sections.rhtml
index 6dcd2ae81f..fd14d1345b 100644
--- a/lib/rdoc/generator/template/darkfish/_sidebar_sections.rhtml
+++ b/lib/rdoc/generator/template/darkfish/_sidebar_sections.rhtml
@@ -1,11 +1,11 @@
 <%- unless klass.sections.length == 1 then %>
-<div id="sections-section" class="nav-section">
-  <h3>Sections</h3>
+  <div class="nav-section">
+    <h3>Sections</h3>
 
-  <ul class="link-list" role="directory">
-    <%- klass.sort_sections.each do |section| -%>
-      <li><a href="#<%= section.aref %>"><%= h section.title %></a></li>
-    <%- end -%>
-  </ul>
-</div>
+    <ul class="link-list" role="directory">
+      <%- klass.sort_sections.each do |section| -%>
+        <li><a href="#<%= section.aref %>"><%= h section.title %></a></li>
+      <%- end -%>
+    </ul>
+  </div>
 <%- end -%>
diff --git a/lib/rdoc/generator/template/darkfish/_sidebar_table_of_contents.rhtml b/lib/rdoc/generator/template/darkfish/_sidebar_table_of_contents.rhtml
index b1e047b5f7..ecc3b2a618 100644
--- a/lib/rdoc/generator/template/darkfish/_sidebar_table_of_contents.rhtml
+++ b/lib/rdoc/generator/template/darkfish/_sidebar_table_of_contents.rhtml
@@ -1,4 +1,5 @@
-<%- comment = if current.respond_to? :comment_location then
+<%-   
+  comment = if current.respond_to? :comment_location then
                current.comment_location
              else
                current.comment
@@ -6,8 +7,8 @@
    table = current.parse(comment).table_of_contents.dup
 
    if table.length > 1 then %>
-<div class="nav-section">
-  <h3>Table of Contents</h3>
+  <div class="nav-section">
+    <h3>On this page</h3>
 
     <%- display_link = proc do |heading| -%>
       <a href="#<%= heading.label current %>"><%= heading.plain_html %></a>
@@ -31,9 +32,9 @@
         <%- end -%>
       <%- end -%>
     <%- end -%>
-
-  <ul class="link-list" role="directory">
-    <% list_siblings.call %>
-  </ul>
-</div>
+    
+    <ul class="link-list" role="directory">
+      <% list_siblings.call %>
+    </ul>
+  </div>
 <%- end -%>
diff --git a/lib/rdoc/generator/template/darkfish/_topbar.rhtml b/lib/rdoc/generator/template/darkfish/_topbar.rhtml
new file mode 100644
index 0000000000..67f8fa4f96
--- /dev/null
+++ b/lib/rdoc/generator/template/darkfish/_topbar.rhtml
@@ -0,0 +1,10 @@
+<header class="topbar">
+  <%= render '_sidebar_toggle.rhtml' %>
+  <a href="<%= rel_prefix %>/index.html" rel="home"><%= @options.title %></a>
+  <button type="button" aria-label="Search" class="search-button">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+    <span>search</span>
+  </button>
+</header>
+
+<%= render '_dialog_search.rhtml' %>
\ No newline at end of file
diff --git a/lib/rdoc/generator/template/darkfish/class.rhtml b/lib/rdoc/generator/template/darkfish/class.rhtml
index 6c64ba6c98..516acb8d46 100644
--- a/lib/rdoc/generator/template/darkfish/class.rhtml
+++ b/lib/rdoc/generator/template/darkfish/class.rhtml
@@ -1,181 +1,154 @@
-<body id="top" role="document" class="<%= klass.type %>">
-<%= render '_sidebar_toggle.rhtml' %>
-
-<nav id="navigation" role="navigation">
-  <div id="project-navigation">
-    <%= render '_sidebar_navigation.rhtml' %>
-    <%= render '_sidebar_search.rhtml' %>
-  </div>
-
-  <%= render '_sidebar_table_of_contents.rhtml' %>
-  <%= render '_sidebar_sections.rhtml' %>
-  <%= render '_sidebar_parent.rhtml' %>
-  <%= render '_sidebar_includes.rhtml' %>
-  <%= render '_sidebar_extends.rhtml' %>
-  <%= render '_sidebar_methods.rhtml' %>
-
-  <%= render '_footer.rhtml' %>
-</nav>
-
-<main role="main" aria-labelledby="<%=h klass.aref %>">
-  <h1 id="<%=h klass.aref %>" class="<%= klass.type %>">
-    <%= klass.type %> <%= klass.full_name %>
-  </h1>
-
-  <section class="description">
-    <%= klass.description %>
-  </section>
-
-  <%- klass.each_section do |section, constants, attributes| -%>
-  <section id="<%= section.aref %>" class="documentation-section">
-    <%- if section.title then -%>
-    <header class="documentation-section-title">
-      <h2>
-        <%= section.title %>
-      </h2>
-      <span class="section-click-top">
-        <a href="#top">&uarr; top</a>
-      </span>
-    </header>
-    <%- end -%>
-
-    <%- if section.comment then -%>
-    <div>
-      <%= section.description %>
-    </div>
-    <%- end -%>
-
-    <%- unless constants.empty? then -%>
-    <section class="constants-list">
-      <header>
-        <h3>Constants</h3>
-      </header>
-      <dl>
-      <%- constants.each do |const| -%>
-        <dt id="<%= const.name %>"><%= const.name %>
-        <%- if const.comment then -%>
-        <dd><%= const.description.strip %>
-        <%- else -%>
-        <dd class="missing-docs">(Not documented)
-        <%- end -%>
-      <%- end -%>
-      </dl>
-    </section>
-    <%- end -%>
-
-    <%- unless attributes.empty? then -%>
-    <section class="attribute-method-details" class="method-section">
-      <header>
-        <h3>Attributes</h3>
-      </header>
-
-      <%- attributes.each do |attrib| -%>
-      <div id="<%= attrib.aref %>" class="method-detail">
-        <div class="method-heading attribute-method-heading">
-          <span class="method-name"><%= h attrib.name %></span><span
-            class="attribute-access-type">[<%= attrib.rw %>]</span>
-        </div>
-
-        <div class="method-description">
-        <%- if attrib.comment then -%>
-        <%= attrib.description.strip %>
-        <%- else -%>
-        <p class="missing-docs">(Not documented)
-        <%- end -%>
-        </div>
-      </div>
-      <%- end -%>
-    </section>
-    <%- end -%>
-
-    <%- klass.methods_by_type(section).each do |type, visibilities|
-       next if visibilities.empty?
-       visibilities.each do |visibility, methods|
-         next if methods.empty? %>
-     <section id="<%= visibility %>-<%= type %>-<%= section.aref %>-method-details" class="method-section">
-       <header>
-         <h3><%= visibility.to_s.capitalize %> <%= type.capitalize %> Methods</h3>
-       </header>
-
-    <%- methods.each do |method| -%>
-      <div id="<%= method.aref %>" class="method-detail <%= method.is_alias_for ? "method-alias" : '' %>">
-        <div class="method-header">
-          <%- if (call_seq = method.call_seq) then -%>
-          <%-   call_seq.strip.split("\n").each_with_index do |call_seq, i| -%>
-          <div class="method-heading">
-            <span class="method-callseq">
-              <%= h(call_seq.strip.
-                    gsub( /^\w+\./m, '')).
-                    gsub(/(.*)[-=]&gt;/, '\1&rarr;') %>
-            </span>
-            <%- if i == 0 and method.token_stream then -%>
-            <span class="method-click-advice">click to toggle source</span>
-            <%- end -%>
-          </div>
-          <%-   end -%>
-          <%- elsif method.has_call_seq? then -%>
-          <div class="method-heading">
-            <span class="method-name"><%= h method.name %></span>
-          </div>
-          <%- else -%>
-          <div class="method-heading">
-            <span class="method-name"><%= h method.name %></span><span
-              class="method-args"><%= h method.param_seq %></span>
-            <%- if method.token_stream then -%>
-            <span class="method-click-advice">click to toggle source</span>
-            <%- end -%>
-          </div>
+<body id="top" role="document">
+  <%= render '_topbar.rhtml' %>
+  <%= render '_navigation.rhtml' %>
+
+  <main role="main" aria-labelledby="<%=h klass.aref %>">
+    <article>
+      <h1 id="<%=h klass.aref %>">
+        <%= klass.type %> <%= klass.full_name %>
+      </h1>
+
+      <%= klass.description %>
+
+      <%- klass.each_section do |section, constants, attributes| -%>
+        
+          <%- if section.title then -%>
+            <h2><%= section.title %></h2>
           <%- end -%>
-        </div>
 
-        <%- unless method.skip_description? then -%>
-        <div class="method-description">
-          <%- if method.comment then -%>
-          <%= method.description.strip %>
-          <%- else -%>
-          <p class="missing-docs">(Not documented)
-          <%- end -%>
-          <%- if method.calls_super then -%>
-            <div class="method-calls-super">
-              Calls superclass method
-              <%=
-                  method.superclass_method ?
-                  method.formatter.link(method.superclass_method.full_name, method.superclass_method.full_name) : nil
-              %>
-            </div>
+          <%- if section.comment then -%>
+            <div><%= section.description %></div>
           <%- end -%>
 
-          <%- if method.token_stream then -%>
-          <div class="method-source-code" id="<%= method.html_name %>-source">
-            <pre><%= method.markup_code %></pre>
-          </div>
+          <%- unless constants.empty? then -%>
+            <section class="constants-list">
+              <header>
+                <h2>Constants</h2>
+              </header>
+              <dl>
+                <%- constants.each do |const| -%>
+                  <dt id="<%= const.name %>"><%= const.name %></dt>
+                  <%- if const.comment then -%>
+                    <dd><%= const.description.strip %></dd>
+                  <%- else -%>
+                    <dd class="missing-docs">(Not documented)</dd>
+                  <%- end -%>
+                <%- end -%>
+              </dl>
+            </section>
           <%- end -%>
-        </div>
-        <%- end -%>
-
-        <%- unless method.aliases.empty? then -%>
-        <div class="aliases">
-          Also aliased as: <%= method.aliases.map do |aka|
-            if aka.parent then # HACK lib/rexml/encodings
-              %{<a href="#{klass.aref_to aka.path}">#{h aka.name}</a>}
-            else
-              h aka.name
-            end
-          end.join ", " %>
-        </div>
-        <%- end -%>
 
-        <%- if method.is_alias_for then -%>
-        <div class="aliases">
-          Alias for: <a href="<%= klass.aref_to method.is_alias_for.path %>"><%= h method.is_alias_for.name %></a>
-        </div>
-        <%- end -%>
-      </div>
+          <%- unless attributes.empty? then -%>
+            <section class="attribute-method-details" class="method-section">
+              <header>
+                <h2>Attributes</h2>
+              </header>
+              <%- attributes.each do |attrib| -%>
+                <div id="<%= attrib.aref %>" class="method-detail">
+                  <div class="method-heading attribute-method-heading">
+                    <span class="method-name"><%= h attrib.name %></span>
+                    <span class="attribute-access-type">[<%= attrib.rw %>]</span>
+                  </div>
+
+                  <div class="method-description">
+                    <%- if attrib.comment then -%>
+                      <%= attrib.description.strip %>
+                    <%- else -%>
+                      <p class="missing-docs">(Not documented)</p>
+                    <%- end -%>
+                  </div>
+                </div>
+              <%- end -%>
+            </section>
+          <%- end -%>
 
-    <%- end -%>
-    </section>
-  <%- end
-     end %>
-  </section>
-<%- end -%>
-</main>
+          <%- klass.methods_by_type(section).each do |type, visibilities|
+            next if visibilities.empty?
+            visibilities.each do |visibility, methods|
+              next if methods.empty? %>
+            <section id="<%= visibility %>-<%= type %>-<%= section.aref %>-method-details" class="method-section">
+              <header>
+                <h2><%= visibility.to_s.capitalize %> <%= type.capitalize %> Methods</h2>
+              </header>
+
+              <%- methods.each do |method| -%>
+                <div id="<%= method.aref %>" class="method-detail <%= method.is_alias_for ? "method-alias" : '' %>">
+                  <div class="method-header">
+                    <%- if (call_seq = method.call_seq) then -%>
+                      <%- call_seq.strip.split("\n").each_with_index do |call_seq, i| -%>
+                        <div class="method-heading">
+                          <span class="method-callseq">
+                            <%= h(call_seq.strip.
+                                  gsub( /^\w+\./m, '')).
+                                  gsub(/(.*)[-=]&gt;/, '\1&rarr;') %>
+                          </span>
+                        </div>
+                      <%- end -%>
+                    <%- elsif method.has_call_seq? then -%>
+                      <div class="method-heading">
+                        <span class="method-name"><%= h method.name %></span>
+                      </div>
+                    <%- else -%>
+                      <div class="method-heading">
+                        <span class="method-name"><%= h method.name %></span>
+                        <span class="method-args"><%= h method.param_seq %></span>
+                      </div>
+                    <%- end -%>
+                  </div>
+
+                  <%- unless method.skip_description? then -%>
+                    <div class="method-description">
+                      <%- if method.comment then -%>
+                        <%= method.description.strip %>
+                      <%- else -%>
+                        <p class="missing-docs">(Not documented)</p>
+                      <%- end -%>
+                      <%- if method.calls_super then -%>
+                        <div class="method-calls-super">
+                          Calls superclass method <%= method.superclass_method ? method.formatter.link(method.superclass_method.full_name, method.superclass_method.full_name) : nil %>
+                        </div>
+                      <%- end -%> 
+                      <%- if method.token_stream then -%>
+                        <button class="toggle-source">toggle source</button>
+                        <div class="method-source-code" id="<%= method.html_name %>-source">
+                          <pre><%= method.markup_code %></pre>
+                        </div>
+                      <%- end -%>
+                    </div>
+                  <%- end -%>
+
+                  <%- unless method.aliases.empty? then -%>
+                    <div class="aliases">
+                      Also aliased as: <%= method.aliases.map do |aka|
+                        if aka.parent then # HACK lib/rexml/encodings
+                          %{<a href="#{klass.aref_to aka.path}">#{h aka.name}</a>}
+                        else
+                          h aka.name
+                        end
+                      end.join ", " %>
+                    </div>
+                  <%- end -%>
+
+                  <%- if method.is_alias_for then -%>
+                    <div class="aliases">
+                      Alias for: <a href="<%= klass.aref_to method.is_alias_for.path %>"><%= h method.is_alias_for.name %></a>
+                    </div>
+                  <%- end -%>
+                </div>
+              <%- end -%>
+            </section>
+          <%- end
+            end %>
+      <%- end -%>
+    </article>
+    <nav class="contextual">
+      <%= render '_sidebar_parent.rhtml' %>
+      <%= render '_sidebar_includes.rhtml' %>
+      <%= render '_sidebar_table_of_contents.rhtml' %>
+      <%= render '_sidebar_sections.rhtml' %>
+      <%= render '_sidebar_extends.rhtml' %>
+      <%= render '_sidebar_constants.rhtml' %>
+      <%= render '_sidebar_methods.rhtml' %>
+    </nav>
+  </main>
+</body>
diff --git a/lib/rdoc/generator/template/darkfish/css/fonts.css b/lib/rdoc/generator/template/darkfish/css/fonts.css
index 57302b5183..51d75fc80d 100644
--- a/lib/rdoc/generator/template/darkfish/css/fonts.css
+++ b/lib/rdoc/generator/template/darkfish/css/fonts.css
@@ -1,167 +1,34 @@
-/*
- * Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/),
- * with Reserved Font Name "Source". All Rights Reserved. Source is a
- * trademark of Adobe Systems Incorporated in the United States and/or other
- * countries.
- *
- * This Font Software is licensed under the SIL Open Font License, Version
- * 1.1.
- *
- * This license is copied below, and is also available with a FAQ at:
- * http://scripts.sil.org/OFL
- */
-
 @font-face {
-  font-family: "Source Code Pro";
+  font-family: "Monaspace";
   font-style: normal;
   font-weight: 400;
-  src: local("Source Code Pro"),
-       local("SourceCodePro-Regular"),
-       url("../fonts/SourceCodePro-Regular.ttf") format("truetype");
+  src: url('<%= asset_path('../fonts/MonaspaceNeon-Regular.woff2') %>') format('woff2');
 }
 
 @font-face {
-  font-family: "Source Code Pro";
+  font-family: "Monaspace";
   font-style: normal;
   font-weight: 700;
-  src: local("Source Code Pro Bold"),
-       local("SourceCodePro-Bold"),
-       url("../fonts/SourceCodePro-Bold.ttf") format("truetype");
+  src: url('<%= asset_path('../fonts/MonaspaceNeon-Bold.woff2') %>') format('woff2');
 }
 
-/*
- * Copyright (c) 2010, Łukasz Dziedzic (dziedzic@typoland.com),
- * with Reserved Font Name Lato.
- *
- * This Font Software is licensed under the SIL Open Font License, Version
- * 1.1.
- *
- * This license is copied below, and is also available with a FAQ at:
- * http://scripts.sil.org/OFL
- */
-
 @font-face {
-  font-family: "Lato";
+  font-family: "Inter";
   font-style: normal;
-  font-weight: 300;
-  src: local("Lato Light"),
-       local("Lato-Light"),
-       url("../fonts/Lato-Light.ttf") format("truetype");
+  font-weight: 400;
+  src: url('<%= asset_path('../fonts/Inter-Regular.woff2') %>') format('woff2');
 }
 
 @font-face {
-  font-family: "Lato";
+  font-family: "Inter";
   font-style: italic;
-  font-weight: 300;
-  src: local("Lato Light Italic"),
-       local("Lato-LightItalic"),
-       url("../fonts/Lato-LightItalic.ttf") format("truetype");
+  font-weight: 400;
+  src: url('<%= asset_path('../fonts/Inter-Italic.woff2') %>') format('woff2');
 }
 
 @font-face {
-  font-family: "Lato";
+  font-family: "Inter";
   font-style: normal;
   font-weight: 700;
-  src: local("Lato Regular"),
-       local("Lato-Regular"),
-       url("../fonts/Lato-Regular.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Lato";
-  font-style: italic;
-  font-weight: 700;
-  src: local("Lato Italic"),
-       local("Lato-Italic"),
-       url("../fonts/Lato-RegularItalic.ttf") format("truetype");
-}
-
-/*
- * -----------------------------------------------------------
- * SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
- * -----------------------------------------------------------
- *
- * PREAMBLE
- * The goals of the Open Font License (OFL) are to stimulate worldwide
- * development of collaborative font projects, to support the font creation
- * efforts of academic and linguistic communities, and to provide a free and
- * open framework in which fonts may be shared and improved in partnership
- * with others.
- *
- * The OFL allows the licensed fonts to be used, studied, modified and
- * redistributed freely as long as they are not sold by themselves. The
- * fonts, including any derivative works, can be bundled, embedded,
- * redistributed and/or sold with any software provided that any reserved
- * names are not used by derivative works. The fonts and derivatives,
- * however, cannot be released under any other type of license. The
- * requirement for fonts to remain under this license does not apply
- * to any document created using the fonts or their derivatives.
- *
- * DEFINITIONS
- * "Font Software" refers to the set of files released by the Copyright
- * Holder(s) under this license and clearly marked as such. This may
- * include source files, build scripts and documentation.
- *
- * "Reserved Font Name" refers to any names specified as such after the
- * copyright statement(s).
- *
- * "Original Version" refers to the collection of Font Software components as
- * distributed by the Copyright Holder(s).
- *
- * "Modified Version" refers to any derivative made by adding to, deleting,
- * or substituting -- in part or in whole -- any of the components of the
- * Original Version, by changing formats or by porting the Font Software to a
- * new environment.
- *
- * "Author" refers to any designer, engineer, programmer, technical
- * writer or other person who contributed to the Font Software.
- *
- * PERMISSION & CONDITIONS
- * Permission is hereby granted, free of charge, to any person obtaining
- * a copy of the Font Software, to use, study, copy, merge, embed, modify,
- * redistribute, and sell modified and unmodified copies of the Font
- * Software, subject to the following conditions:
- *
- * 1) Neither the Font Software nor any of its individual components,
- * in Original or Modified Versions, may be sold by itself.
- *
- * 2) Original or Modified Versions of the Font Software may be bundled,
- * redistributed and/or sold with any software, provided that each copy
- * contains the above copyright notice and this license. These can be
- * included either as stand-alone text files, human-readable headers or
- * in the appropriate machine-readable metadata fields within text or
- * binary files as long as those fields can be easily viewed by the user.
- *
- * 3) No Modified Version of the Font Software may use the Reserved Font
- * Name(s) unless explicit written permission is granted by the corresponding
- * Copyright Holder. This restriction only applies to the primary font name as
- * presented to the users.
- *
- * 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
- * Software shall not be used to promote, endorse or advertise any
- * Modified Version, except to acknowledge the contribution(s) of the
- * Copyright Holder(s) and the Author(s) or with their explicit written
- * permission.
- *
- * 5) The Font Software, modified or unmodified, in part or in whole,
- * must be distributed entirely under this license, and must not be
- * distributed under any other license. The requirement for fonts to
- * remain under this license does not apply to any document created
- * using the Font Software.
- *
- * TERMINATION
- * This license becomes null and void if any of the above conditions are
- * not met.
- *
- * DISCLAIMER
- * THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
- * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
- * OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
- * COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
- * INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
- * DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
- * OTHER DEALINGS IN THE FONT SOFTWARE.
- */
-
+  src: url('<%= asset_path('../fonts/Inter-Bold.woff2') %>') format('woff2');
+}
\ No newline at end of file
diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index 772a06b85b..60c5a9a668 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -1,50 +1,51 @@
 /*
- * "Darkfish" Rdoc CSS
- * $Id: rdoc.css 54 2009-01-27 01:09:48Z deveiant $
+ * RoRvsWild Theme – Rdoc CSS
  *
- * Author: Michael Granger <ged@FaerieMUD.org>
+ * Authors: Antoine Marguerie & Alexis Bernard (rorvswild.com)
  *
  */
 
-/* vim: ft=css et sw=2 ts=2 sts=2 */
-/* Base Green is: #6C8C22 */
-
-/* 1. Variables and Root Styles */
 :root {
-  --sidebar-width: 300px;
-  --primary-color: #2c8c5e;  /* A more muted green */
-  --secondary-color: #246b4b;  /* A darker, muted green */
-  --text-color: #333;
-  --background-color: #f8f9fa;
-  --code-block-background-color: #f0f4f8;
-  --code-block-border-color: #d1d5da;
-  --link-color: #246b4b;  /* A muted teal-green color */
-  --link-hover-color: #25a28a;  /* A slightly brighter teal-green */
-  --border-color: #e0e0e0;
-  --sidebar-text-color: #2c3e50;  /* Dark blue-gray for contrast */
-
-  /* Font family variables */
-  --font-primary: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
-  --font-heading: 'Helvetica Neue', Arial, sans-serif;
-  --font-code: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-}
-
-/* 2. Global Styles */
-body {
-  background: var(--background-color);
-  font-family: var(--font-primary);
-  font-weight: 400;
-  color: var(--text-color);
-  line-height: 1.6;
+  --sidebar-width: 240px;
+
+  --color-primary: oklch(0.5 0.18 29);
+  --color-primary-hover: oklch(0.4 0.18 29);
+  --color-strong-background: oklch(0.97 0.03 59);
+  --color-topbar: var(--color-primary);
+  --color-topbar-text: var(--color-background);
+  --color-text: oklch(0.4 0.03 269);
+  --color-text-light: oklch(0.5 0.03 269);
+  --color-title: oklch(0.27 0.03 269);
+  --color-background: oklch(0.99 0.001 269);
+  --color-code-background: oklch(0.97 0.002 269);
+  --color-th-background: oklch(0.95 0.002 269);
+  --color-border: oklch(0.91 0.002 269);
+
+  --font-sans: "Inter", system-ui, sans-serif;
+  --font-mono: "Monaspace", ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+}
+
+html {
+  line-height: 1.5;
+  color: var(--color-text);
+  font-weight: normal;
+  font-size: 14px;
+  font-optical-sizing: auto;
+  scroll-padding-top: calc(40px + 1em);
+  scroll-behavior: smooth;
+  font-feature-settings: 'liga' 1, 'calt' 1;
+}
 
-  /* Layout */
+body {
+  background: var(--color-background);
+  font-family: var(--font-sans);
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   margin: 0;
+  padding-top: 35px;
 }
 
-/* 3. Typography */
 h1 span,
 h2 span,
 h3 span,
@@ -52,20 +53,19 @@ h4 span,
 h5 span,
 h6 span {
   position: relative;
-
   display: none;
   padding-left: 1em;
   line-height: 0;
   vertical-align: baseline;
-  font-size: 10px;
+  font-size: 1rem;
 }
 
-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; }
+h1 span { top: -0.28em; }
+h2 span { top: -0.28em; }
+h3 span { top: -0.1em; }
+h4 span { top: -0.1em; }
+h5 span { top: 0; }
+h6 span { top: 0; }
 
 h1:hover span,
 h2:hover span,
@@ -76,45 +76,28 @@ h6:hover span {
   display: inline;
 }
 
-h1:target,
-h2:target,
-h3:target,
-h4:target,
-h5:target,
-h6:target {
-  margin-left: -10px;
-  border-left: 10px solid #f1edba;
-}
-
-/* 4. Links */
-:link,
-:visited {
-  color: var(--link-color);
-  text-decoration: none;
+:any-link {
+  color: var(--color-primary);
+  text-decoration: underline;
+  text-decoration-thickness: 0.02em;
   transition: color 0.3s ease;
 }
 
-:link:hover,
-:visited:hover {
-  color: var(--link-hover-color);
-  text-decoration: underline;
-}
+:any-link:hover { color: var(--color-primary-hover); }
 
-/* 5. Code and Pre */
 code,
 pre {
-  font-family: var(--font-code);
-  background-color: var(--code-block-background-color);
-  border: 1px solid var(--code-block-border-color);
+  font-family: var(--font-mono);
+  background-color: var(--color-code-background);
+  box-shadow: 0 0 0 1px var(--color-border) inset;
   border-radius: 6px;
   padding: 16px;
   overflow-x: auto;
-  font-size: 15px;  /* Increased from 14px */
-  line-height: 1.5;  /* Slightly increased for better readability with larger font */
-  margin: 1em 0;  /* Add some vertical margin */
+  font-size: 1rem;
+  line-height: 1.5;
+  margin: 1em 0;
 }
 
-/* 6. Tables */
 table {
   margin: 0;
   border-spacing: 0;
@@ -123,423 +106,532 @@ table {
 
 table tr th, table tr td {
   padding: 0.2em 0.4em;
-  border: 1px solid #ccc;
+  border: 1px solid var(--color-border);
 }
 
-table tr th {
-  background-color: #eceaed;
+table tr th { background-color: var(--color-th-background); }
+
+table tr:nth-child(even) td { background-color: var(--color-code-background); }
+
+ul {
+  padding: 0;
+  list-style: none;
 }
 
-table tr:nth-child(even) td {
-  background-color: #f5f4f6;
+main article > ul {
+  padding: 0 0 0 16px;
+  list-style-type: square;
 }
 
-/* 7. Navigation and Sidebar */
-nav {
-  font-family: var(--font-heading);
-  font-size: 16px;
-  border-right: 1px solid var(--border-color);
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: var(--sidebar-width);
-  background: var(--background-color);
-  overflow-y: auto;
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  color: var(--sidebar-text-color);
+li { padding: 0.25em 0; }
+
+main li > p { margin: 0; }
+
+li li { padding-bottom: 0; }
+
+ul ul {
+  margin: 0 0 0 10px;
+  padding-left: 0;
 }
 
-nav[hidden] {
-  display: none;
+ul ul li {
+  padding-left: 15px;
+  position: relative;
+  border-left: 1px solid var(--color-border);
 }
 
-nav footer {
-  padding: 1em;
-  border-top: 1px solid #ccc;
+ul ul li:before {
+  position: absolute;
+  left: 0;
+  top: 18px;
+  content: '';
+  display: inline-block;
+  height: 1px;
+  width: 11px;
+  background: var(--color-border);
 }
 
-nav .nav-section {
-  margin-top: 1em;
-  padding: 0 1em;
+ul ul li:last-of-type { border-left: 0; }
+
+ul ul li:last-of-type:after {
+  position: absolute;
+  left: 0;
+  top: 0;
+  content: '';
+  display: inline-block;
+  height:18px;
+  width: 1px;
+  background: var(--color-border);
 }
 
-nav h2 {
-  margin: 0 0 0.5em;
-  padding: 0.5em 0;
-  font-size: 1.2em;
-  color: var(--text-color);
-  border-bottom: 1px solid var(--border-color);
+ol {
+  margin: 1em 0 0;
+  padding: 0 1em;
 }
 
-nav h3,
-#table-of-contents-navigation {
-  margin: 0;
-  padding: 0.5em 0;
-  font-size: 1em;
-  color: var(--text-color);
+ol ol { margin: 0; }
+
+details > summary {
+  list-style: none;
+  position: relative;
+  display: flex;
+  width: calc(100% - 0.25rem);
+  gap: 4px;
+  padding: 0 0 0 0.25rem;
 }
 
-nav ul,
-nav dl,
-nav p {
+details > summary:has(> a) {
   padding: 0;
-  list-style: none;
-  margin: 0.5em 0;
+  width: 100%;
 }
 
-nav ul li {
-  margin-bottom: 0.3em;
+summary::-webkit-details-marker { display: none; }
+
+details > summary::after {
+  content: '+';
+  font-size: 0.833em;
+  font-weight: bold;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  border-radius: 50%;
+  text-align: center;
+  box-shadow: 0 0 0 1px var(--color-border) inset;
+  transition: transform 0.2s ease;
+  display: inline-block;
+  flex-shrink: 0;
+  cursor: pointer;
+  position: relative;
+  top: 2px;
+  margin-left: auto;
 }
 
-nav ul ul {
-  padding-left: 1em;
+details[open] > summary::after { content: '-'; }
+
+main {
+  padding: 1em;
+  width: calc(100% - 2em);
+  margin: 0 auto;
 }
 
-nav ul ul ul {
-  padding-left: 1em;
+main sup {
+  vertical-align: super;
+  font-size: 0.8em;
 }
 
-nav ul ul ul ul {
-  padding-left: 1em;
+main h1 {
+  font-size: 2.074rem;
+  line-height: 3rem;
+  margin: 1rem 0 0;
+  color: var(--color-title);
+  word-break: break-word;
 }
 
-nav a {
-  color: var(--link-color);
-  text-decoration: none;
+main h1 + p {
+  font-size: 1.44em;
+  margin-top: 0.5rem;
+  color: var(--color-text-light);
 }
 
-nav a:hover {
-  text-decoration: underline;
+main h2 {
+  margin: 1.5em 0 0.5em;
+  font-size: 1.44rem;
+  line-height: 3rem;
+  color: var(--color-title);
+  box-shadow: 0 1px 0 0 var(--color-text-light);
 }
 
-#navigation-toggle {
-  z-index: 1000;
-  font-size: 2em;
-  display: block;
-  position: fixed;
-  top: 10px;
-  left: 20px;
-  cursor: pointer;
+main h3 {
+  margin: 1.5em 0 0.5em;
+  font-size: 1.2em;
+  color: var(--color-title);
 }
 
-#navigation-toggle[aria-expanded="true"] {
-  top: 10px;
-  left: 250px;
+main h4 {
+  margin: 1.5em 0 0;
+  font-size: 1em;
+  text-transform: uppercase;
+  color: var(--color-title);
+  letter-spacing: 0.05em;
 }
 
-nav ul li details {
-  position: relative;
-  padding-right: 1.5em;  /* Add space for the marker on the right */
+main h5 {
+  margin: 1em 0 0;
+  font-size: 1em;
+  color: var(--color-title);
 }
 
-nav ul li details > summary {
-  list-style: none;  /* Remove the default marker */
-  position: relative; /* So that the open/close triangle can position itself absolutely inside */
+main h6 {
+  margin: 1em 0 0;
+  font-size: 0.833rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--color-title);
 }
 
-nav ul li details > summary::after {
-  content: '▶';  /* Unicode right-pointing triangle */
-  position: absolute;
-  font-size: 0.8em;
-  bottom: 0.1em;
-  margin-left: 0.3em;
-  transition: transform 0.2s ease;
+main h4 + p,
+main h5 + p, 
+main h6 + p {
+  margin-top: 0;
 }
 
-nav ul li details[open] > summary::after {
-  transform: rotate(90deg);  /* Rotate the triangle when open */
+main p {
+  line-height: 1.5em;
+  font-weight: 400;
 }
 
-/* 8. Main Content */
-main {
-  flex: 1;
-  display: block;
-  margin: 3em auto;
-  padding: 0 2em;
-  max-width: 800px;
-  font-size: 16px;
-  line-height: 1.6;
-  color: var(--text-color);
-  box-sizing: border-box;
+main pre {
+  margin: 1em 0;
+  padding: 1em 1.5em;
+  font-size: 0.833rem;
 }
 
-@media (min-width: 1024px) {
-  main {
-    margin-left: var(--sidebar-width);
-  }
+main hr {
+  margin: 1.5em 0;
+  border: 2px solid var(--color-border);
 }
 
-main h1,
-main h2,
-main h3,
-main h4,
-main h5,
-main h6 {
-  font-family: var(--font-heading);
+main blockquote {
+  margin: 0 2em 1.2em 1.2em;
+  padding-left: 0.5em;
+  border-left: 2px solid var(--color-border);
 }
 
-@media (min-width: 1024px) {
-  .table-of-contents main {
-    margin-left: 20em;
-  }
+main dl { margin: 1em 0; }
+
+main dt {
+  margin: 1em 0 0;
+  font-weight: bold;
+  color: var(--color-title);
 }
 
-#validator-badges {
-  margin: 1em 1em 2em;
-  font-size: smaller;
+main dd,
+main dd p {
+  margin: 0;
+  color: var(--color-text-light);
 }
 
-/* 9. Search */
-#search-section {
-  padding: 1em;
-  background-color: var(--background-color);
-  border-bottom: 1px solid var(--border-color);
+main header h2 { margin-top: 2em; }
+
+main header h3 {
+  margin: 2em 0 1.5em;
+  padding-top: 1em;
+  border-width: 0;
+  border-top: 1px solid var(--color-border);
+  font-size: 120%;
 }
 
-#search-field-wrapper {
-  position: relative;
+.topbar {
+  width: 100%;
+  padding: 0.5em 1rem;
+  z-index: 100;
+  position: fixed;
+  top: 0;
+  background-color: var(--color-topbar);
   display: flex;
-  align-items: center;
+  gap: 8px;
 }
 
-#search-field {
-  width: 100%;
-  padding: 0.5em 1em 0.5em 2.5em;
-  border: 1px solid var(--border-color);
-  border-radius: 20px;
-  font-size: 14px;
-  outline: none;
-  transition: border-color 0.3s ease;
-  background-color: var(--background-color);
+.topbar > a:any-link {
+  text-decoration: none;
+  font-weight: 700;
+  color: var(--color-topbar-text);
 }
 
-#search-field:focus {
-  border-color: var(--primary-color);
+.topbar > a:any-link:hover { color: var(--color-topbar-text); }
+
+#navigation-toggle {
+  display: inline-block;
+  color: var(--color-topbar-text);
 }
 
-#search-field::placeholder {
-  color: var(--text-color);
-  opacity: 0.6;
+nav {
+  border-right: 1px solid var(--color-border);
+  position: fixed;
+  top: 35px;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  max-width: var(--sidebar-width);
+  background: var(--color-background);
+  overflow-y: auto;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  font-size: 0.833rem;
+  line-height: 1.5rem;
 }
 
-#search-field-wrapper::before {
-  content: "\1F50D";  /* Unicode for magnifying glass */
-  position: absolute;
-  left: 0.75em;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 14px;
-  color: var(--text-color);
-  opacity: 0.6;
+nav a:any-link {
+  color: var(--color-text);
+  text-decoration-color: inherit;
 }
 
-/* 10. Utility Classes */
-.hide { display: none !important; }
-.initially-hidden { display: none; }
+nav[hidden] { display: none; }
 
-/* 11. Media Queries */
-@media (min-width: 1024px) {
-  /* Styles for larger screens */
+nav footer {
+  padding: 1em 1rem;
+  border-top: 1px solid var(--color-border);
+  font-size: 0.694rem;
 }
 
-/* 12. Print Styles */
-@media print {
-  /* Print-specific styles */
+nav footer a:any-link {
+  font-weight: 700;
 }
 
-/* 13. Syntax Highlighting */
-.ruby-constant   { color: #0366d6; }  /* Bright blue for constants */
-.ruby-keyword    { color: #d73a49; }  /* Red for keywords */
-.ruby-ivar       { color: #e36209; }  /* Orange for instance variables */
-.ruby-operator   { color: #005cc5; }  /* Dark blue for operators */
-.ruby-identifier { color: #24292e; }  /* Dark gray for identifiers */
-.ruby-node       { color: #22863a; }  /* Green for interpolation */
-.ruby-comment    { color: #6a737d; }  /* Gray for comments */
-.ruby-regexp     { color: #032f62; }  /* Navy for regular expressions */
-.ruby-value      { color: #005cc5; }  /* Dark blue for numeric values */
-.ruby-string     { color: #22863a; }  /* Green for strings */
+.nav-section { margin-top: 1rem; }
 
-code {
-  background-color: #f0f4f8;  /* Match pre background */
-  padding: 0.2em 0.4em;
-  border-radius: 3px;
-  font-size: 85%;
-}
+.nav-section h3 { padding: 0 1rem; }
 
-em {
-  text-decoration-color: rgba(52, 48, 64, 0.25);
-  text-decoration-line: underline;
-  text-decoration-style: dotted;
+.nav-section ul { 
+  margin-top: 0;
+  overflow: hidden;
 }
 
-strong,
-em {
-  background-color: rgba(158, 178, 255, 0.1);
+.nav-section > ul > li {
+  padding: 0.25em 0.75rem;
 }
 
-/* 14. Specific Component Styles */
-.table-of-contents ul {
-  margin: 1em;
-  list-style: none;
+.nav-section li.active > a,
+.nav-section li.active > details > summary > a,
+.nav-section li:has(li.active) > details > summary > a {
+  text-decoration: none;
+  background-color: var(--color-strong-background);
+  border-radius: 3px;
+  font-weight: 700;
+  cursor: initial;
 }
 
-.table-of-contents ul ul {
-  margin-top: 0.25em;
+.nav-section li a,
+.nav-section li > span {
+  padding: 0 0.25rem;
+  display: inline-block;
+  word-break: break-word;
 }
 
-.table-of-contents ul :link,
-.table-of-contents ul :visited {
-  font-size: 16px;
+nav h2 {
+  margin: 0 0 0.5em;
+  padding: 0.5em 0;
+  font-size: 1.2em;
+  color: var(--color-text);
+  border-bottom: 1px solid var(--color-border);
 }
 
-.table-of-contents li {
-  margin-bottom: 0.25em;
+nav h3,
+#table-of-contents-navigation {
+  margin: 0;
+  padding: 0.5em 0;
+  font-size: 0.694rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
-.table-of-contents li .toc-toggle {
-  width: 16px;
-  height: 16px;
-  background: url(../images/add.png) no-repeat;
+nav dl,
+nav p {
+  padding: 0;
+  list-style: none;
+  margin: 0.5em 0 0;
 }
 
-.table-of-contents li .toc-toggle.open {
-  background: url(../images/delete.png) no-repeat;
+nav.contextual { display: none }
+
+#validator-badges {
+  margin: 1em 1em 2em;
+  font-size: smaller;
 }
 
-main {
-  color: #333;
+.search-button {
+  background-color: var(--color-background);
+  border: none;
+  border-radius: 4px;
+  color:var(--color-text-light);
+  box-shadow: 0 0 0 1px var(--color-border);
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  cursor: text;
 }
 
-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;
+.search-button svg {
+  width: 12px;
+  height: 12px;
+  opacity: 0.8;
 }
 
-main sup {
-  vertical-align: super;
-  font-size: 0.8em;
+.search-button:hover,
+.search-button:focus {
+  color:var(--color-text);
 }
 
-/* The heading with the class name */
-main h1[class] {
-  margin-top: 0;
-  margin-bottom: 1em;
-  font-size: 2.5em;
-  color: var(--primary-color);
+.search-dialog {
+  background-color: var(--color-background);
+  width: calc(100% - 4em);
+  max-width: 1000px;
+  max-height: calc(100svh - 80px);
+  margin: 0 auto;
+  padding: 0;
+  top: 40px;
+  border: 0;
+  border-radius: 8px;
+  box-shadow: 
+    0 0 0 1px var(--color-border), 
+    0 0 24px 8px oklch(0.02 0.05 269 /1);
+  overflow: hidden;
 }
 
-main h1 {
-  margin: 1.5em 0 0.5em;
-  font-size: 2.2em;
-  color: var(--secondary-color);
+.search-dialog::backdrop {
+  background-color: oklch(0.1 0.02 269 /0.9);
+  backdrop-filter: blur(4px);
 }
 
-main h2 {
-  margin: 1.3em 0 0.5em;
-  font-size: 1.8em;
-  color: var(--secondary-color);
+.search-dialog[open] { display: flex; }
+
+.search-dialog form {
+ overflow: hidden; 
+ display: flex;
+ flex-direction: column;
+ flex: 1;
 }
 
-main h3 {
-  margin: 1.2em 0 0.5em;
-  font-size: 1.5em;
-  color: var(--secondary-color);
+#search-section {
+  padding: 1em 1em 0;
+  background-color: var(--color-background);
+  border-bottom: 1px solid var(--color-border);
 }
 
-main h4 {
-  margin: 1.1em 0 0.5em;
-  font-size: 1.3em;
-  color: var(--secondary-color);
+#search-field-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 1rem;
 }
 
-main h5, main h6 {
-  margin: 1em 0 0.5em;
-  font-size: 1.1em;
-  color: var(--secondary-color);
+.search-dialog form:has(li) #search-field-wrapper { box-shadow: 0 1px 0 0 var(--color-border); }
+
+#search-field {
+  width: 100%;
+  padding: 0.5em 1em 0.5em 2em;
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+  border-radius: 4px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.3s ease;
+  background-color: var(--color-background);
 }
 
-main p {
-  line-height: 1.5em;
-  font-weight: 400;
+#search-field:focus { border-color: var(--color-primary); }
+
+#search-field::placeholder {
+  color: var(--color-text);
+  opacity: 0.6;
 }
 
-main pre {
-  margin: 1.2em 0.5em;
-  padding: 1em;
-  font-size: 0.8em;
+#search-field-wrapper svg {
+  position: absolute;
+  stroke: var(--color-text-light);
+  width: 16px;
+  height: 16px;
+  left: 24px;
+  opacity: 0.6;
 }
 
-main hr {
-  margin: 1.5em 1em;
-  border: 2px solid #ddd;
+#search-results {
+  color: var(--color-text);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  margin: 0;
 }
 
-main blockquote {
-  margin: 0 2em 1.2em 1.2em;
-  padding-left: 0.5em;
-  border-left: 2px solid #ddd;
+#search-results .search-match { font-weight: normal; }
+
+#search-results .search-selected {
+  background: var(--color-code-background);
+  border-bottom: 1px solid transparent;
+  box-shadow: 0 0 0 1px var(--color-border) inset;
 }
 
-main ol,
-main ul {
-  margin: 1em 2em;
+#search-results li {
+  list-style: none;
+  border-bottom: 1px solid var(--color-border);
+  padding: 0.5em 1rem;
 }
 
-main li > p {
-  margin-bottom: 0.5em;
+#search-results li:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
 }
 
-main dl {
-  margin: 1em 0.5em;
+#search-results li p {
+  padding: 0;
+  margin: 0;
 }
 
-main dt {
-  margin-bottom: 0.5em;
-  margin-right: 1em;
-  float: left;
-  font-weight: bold;
+#search-results .search-namespace { font-weight: bold; }
+
+#search-results li em {
+  background: var(--color-strong-background);
+  font-style: normal;
 }
 
-main dd {
-  margin: 0 1em 1em 0.5em;
+#search-results pre {
+  font-size: 0.833rem;
+  margin: 0.5rem 0;
 }
 
-main header h2 {
-  margin-top: 2em;
-  border-width: 0;
-  border-top: 4px solid #bbb;
-  font-size: 130%;
+.hide { display: none !important; }
+.initially-hidden { display: none; }
+
+pre,
+code {
+  --color-constant: oklch(0.5 0.18 269);
+  --color-keyword: var(--color-primary);
+  --color-ivar: oklch(0.5 0.18 59);
+  --color-operator: oklch(0.38 0.18 269);
+  --color-identifier: var(--color-title);
+  --color-node: oklch(0.5 0.18 149);
+  --color-comment: oklch(0.5 0.03 269);
+  --color-regexp: oklch(0.5 0.18 299);
+  --color-value: var(--color-operator);
+  --color-string: oklch(0.5 0.18 149);
 }
 
-main header h3 {
-  margin: 2em 0 1.5em;
-  border-width: 0;
-  border-top: 3px solid #bbb;
-  font-size: 120%;
+code {
+  background-color: var(--color-code-background);
+  padding: 0em 0.4em;
+  border-radius: 3px;
+  font-size: 1em;
+  line-height: 1em;
+  text-transform: initial;
 }
 
-.documentation-section-title {
-  position: relative;
+.ruby-constant   { color: var(--color-constant); }
+.ruby-keyword    { color: var(--color-keyword); }
+.ruby-ivar       { color: var(--color-ivar); }
+.ruby-operator   { color: var(--color-operator); }
+.ruby-identifier { color: var(--color-identifier); }
+.ruby-node       { color: var(--color-node); }
+.ruby-comment    { color: var(--color-comment); }
+.ruby-regexp     { color: var(--color-regexp); }
+.ruby-value      { color: var(--color-value); }
+.ruby-string     { color: var(--color-string); }
+
+em {
+  text-decoration-color: var(--color-border);
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
 }
-.documentation-section-title .section-click-top {
-  position: absolute;
-  top: 6px;
-  left: 12px;
-  font-size: 10px;
-  color: #9b9877;
-  visibility: hidden;
-  padding-left: 0.5px;
+
+strong,
+em {
+  background-color: var(--color-strong-background);
 }
 
-.documentation-section-title:hover .section-click-top {
-  visibility: visible;
+.note-list {
+  padding: 1em 1em 2em;
+  box-shadow: 0 0 0 1px var(--color-border) inset;
 }
 
 .constants-list > dl {
@@ -550,43 +642,18 @@ main header h3 {
 .constants-list > dl dt {
   margin-bottom: 0.75em;
   padding-left: 0;
-  font-family: var(--font-code);
+  font-family: var(--font-mono);
   font-size: 110%;
 }
 
-.constants-list > dl dt a {
-  color: inherit;
-}
+.constants-list > dl dt a { color: inherit; }
 
 .constants-list > dl dd {
   margin: 0 0 2em 0;
   padding: 0;
-  color: #666;
-}
-
-.documentation-section h2 {
-  position: relative;
-}
-
-.documentation-section h2 a {
-  position: absolute;
-  top: 8px;
-  right: 10px;
-  font-size: 12px;
-  color: #9b9877;
-  visibility: hidden;
 }
 
-.documentation-section h2:hover a {
-  visibility: visible;
-}
-
-/* @group Method Details */
-
-main .method-source-code {
-  /* While this is already invisible through the rule below, this will inform the browser to
-  not consider source code during text searching until it is actually expanded. */
-  visibility: hidden;
+.method-source-code {
   max-height: 0;
   overflow: auto;
   transition-duration: 200ms;
@@ -595,154 +662,180 @@ main .method-source-code {
   transition-timing-function: ease-in-out;
 }
 
-main .method-source-code.active-menu {
-  visibility: visible;
-  max-height: 100vh;
-}
+.method-source-code.active-menu { max-height: none; }
 
-main .method-description .method-calls-super {
-  color: var(--text-color);
+.method-description .method-calls-super {
+  color: var(--color-text);
   font-weight: bold;
 }
 
-main .method-detail {
-  margin-bottom: 2.5em;
-  cursor: pointer;
-}
+.method-detail { margin: 1.5rem 0 0; }
 
-main .method-detail:target {
-  margin-left: -10px;
-  border-left: 10px solid #f1edba;
+.method-detail + .method-detail {
+  margin: 1.5rem 0 0;
+  border-top: 1px solid var(--color-border);
+  padding-top: 1.5em;
 }
 
-main .method-heading {
+.method-heading {
   position: relative;
-  font-family: var(--font-code);
-  font-size: 110%;
+  font-family: var(--font-mono);
+  font-size: 1rem;
   font-weight: bold;
-  color: var(--text-color);
-}
-main .method-heading :link,
-main .method-heading :visited {
-  color: inherit;
-}
-main .method-click-advice {
-  position: absolute;
-  top: 2px;
-  right: 5px;
-  font-size: 12px;
-  color: #9b9877;
-  visibility: hidden;
-  padding-right: 20px;
-  line-height: 20px;
-  background: url(../images/zoom.png) no-repeat right top;
+  color: var(--color-text);
 }
-main .method-header:hover .method-click-advice {
-  visibility: visible;
+
+.method-heading span { background-color: var(--color-code-background); }
+
+.method-heading :any-link { color: inherit; }
+
+.toggle-source {
+  margin-top: 1rem;
+  font-size: 0.833rem;
+  font-weight: 400;
+  line-height: 1rem;
+  background: var(--color-code-background);
+  box-shadow: 0 0 0 1px var(--color-border);
+  color: var(--color-text);
+  border-radius: 2px;
+  border: none;
+  cursor: pointer;
 }
 
-main .method-alias .method-heading {
-  color: #666;
+.toggle-source:hover {
+  box-shadow: 0 0 0 1px var(--color-text-light);
+  color: var(--color-title);
 }
 
-main .method-description,
-main .aliases {
-  margin-top: 0.75em;
-  color: var(--text-color);
+pre + .toggle-source { margin-top: 0.5rem; }
+
+.method-description,
+.aliases {
+  color: var(--color-text-light);
+  margin-top: 0.5em;
 }
 
-main .aliases {
+.aliases {
   padding-top: 4px;
   font-style: italic;
   cursor: default;
 }
-main .method-description ul {
-  margin-left: 1.5em;
-}
 
-main #attribute-method-details .method-detail:hover {
+.method-description p { margin: 0; }
+
+.method-description ul { margin-left: 1.5em; }
+ 
+#attribute-method-details .method-detail:hover {
   background-color: transparent;
   cursor: default;
 }
-main .attribute-access-type {
+
+.attribute-access-type {
   text-transform: uppercase;
   padding: 0 1em;
 }
-/* @end */
 
-/* @end */
+@media (max-width: 480px) {
+  main {
+    margin: 1em auto;
+    padding: 0 1em;
+    max-width: 100%;
+  }
 
-/* @group search results */
-#search-results {
-  font-family: var(--font-primary);
-  font-weight: 300;
+  table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
 }
 
-#search-results .search-match {
-  font-family: var(--font-heading);
-  font-weight: normal;
-}
+@media (min-width: 800px) {
+  main {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 1300px;
+    padding: 0;
+    position: relative;
+    grid-column: 2/ span 1;
+    display: grid;
+    grid-template-columns: 1fr var(--sidebar-width);
+    gap: 32px;
+  }
 
-#search-results .search-selected {
-  background: #e8e8e8;
-  border-bottom: 1px solid transparent;
-}
+  main > article {
+    position: relative;
+    overflow: hidden;
+    padding: 0 1rem 3rem;
+    width: 100%;
+    grid-column: 1 / span 1;
+  }
 
-#search-results li {
-  list-style: none;
-  border-bottom: 1px solid #aaa;
-  margin-bottom: 0.5em;
+  nav.contextual {
+    width: var(--sidebar-width);
+    grid-column: 2 / span 1;
+    position: sticky;
+    max-height: calc(100svh - 40px);
+    left: auto;
+    right: 0;
+    border: 0;
+    overflow-y: auto;
+    background: transparent;
+    display: flex;
+    align-self: start;
+  }
 }
 
-#search-results li:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
-}
+@media (min-width: 1024px) {
+  html { font-size: 16px; }
 
-#search-results li p {
-  padding: 0;
-  margin: 0.5em;
-}
+  body { 
+    padding-top: 40px;
+    display: grid;
+    grid-template-columns: var(--sidebar-width) auto;
+    gap: 1rem;
+  }
 
-#search-results .search-namespace {
-  font-weight: bold;
-}
+  #navigation-toggle { display: none }
 
-#search-results li em {
-  background: yellow;
-  font-style: normal;
+  nav { top: 40px; }
+
+  nav[hidden] { display: block; }
 }
 
-#search-results pre {
-  margin: 0.5em;
-  font-family: var(--font-code);
+@media (min-width: 1200px) {
+  :root { --sidebar-width: 300px; }
 }
 
-@media (max-width: 480px) {
-  nav {
-    width: 100%;
-  }
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-primary: oklch(0.85 0.09 29);
+    --color-primary-hover: oklch(87.78296875% 0.07 29);
 
-  main {
-    margin: 1em auto;
-    padding: 0 1em;
-    max-width: 100%;
-  }
+    --color-strong-background: oklch(0.27 0.04 59);
 
-  #navigation-toggle {
-    right: 10px;
-    left: auto;
-  }
+    --color-topbar: oklch(0.5 0.18 29);
+    --color-topbar-text: oklch(0.99 0.001 269);
 
-  #navigation-toggle[aria-expanded="true"] {
-    left: auto;
+    --color-text: oklch(0.84 0.02 269);
+    --color-text-light: oklch(0.74 0.02 269);
+    --color-title: oklch(0.91 0.02 269);
+    --color-background: oklch(0.19 0.01 269);
+    --color-code-background: oklch(0.25 0.01 269);
+    --color-th-background: oklch(0.41 0.01 269);
+    --color-border: oklch(0.27 0.01 269);
   }
 
-  table {
-    display: block;
-    overflow-x: auto;
-    white-space: nowrap;
+  pre,
+  code {
+    --color-constant: oklch(0.84 0.09 260);
+    --color-keyword: var(--color-primary);
+    --color-ivar: oklch(0.85 0.09 59);
+    --color-operator: oklch(0.91 0.04 269);
+    --color-identifier: var(--color-title);
+    --color-node: oklch(0.83 0.09 149);
+    --color-comment: oklch(0.69 0.02 269);
+    --color-regexp: oklch(0.85 0.09 299);
+    --color-value: var(--color-operator);
+    --color-string: oklch(0.83 0.09 149);
   }
-}
-/* @end */
-
+}
\ No newline at end of file
diff --git a/lib/rdoc/generator/template/darkfish/fonts/Inter-Bold.woff2 b/lib/rdoc/generator/template/darkfish/fonts/Inter-Bold.woff2
new file mode 100644
index 0000000000..0f1b157633
Binary files /dev/null and b/lib/rdoc/generator/template/darkfish/fonts/Inter-Bold.woff2 differ
diff --git a/lib/rdoc/generator/template/darkfish/fonts/Inter-Italic.woff2 b/lib/rdoc/generator/template/darkfish/fonts/Inter-Italic.woff2
new file mode 100644
index 0000000000..4c24ce2815
Binary files /dev/null and b/lib/rdoc/generator/template/darkfish/fonts/Inter-Italic.woff2 differ
diff --git a/lib/rdoc/generator/template/darkfish/fonts/Inter-Regular.woff2 b/lib/rdoc/generator/template/darkfish/fonts/Inter-Regular.woff2
new file mode 100644
index 0000000000..b8699af29b
Binary files /dev/null and b/lib/rdoc/generator/template/darkfish/fonts/Inter-Regular.woff2 differ
diff --git a/lib/rdoc/generator/template/darkfish/fonts/Lato-Light.ttf b/lib/rdoc/generator/template/darkfish/fonts/Lato-Light.ttf
deleted file mode 100644
index b49dd43729..0000000000
Binary files a/lib/rdoc/generator/template/darkfish/fonts/Lato-Light.ttf and /dev/null differ
diff --git a/lib/rdoc/generator/template/darkfish/fonts/Lato-LightItalic.ttf b/lib/rdoc/generator/template/darkfish/fonts/Lato-LightItalic.ttf
deleted file mode 100644
index 7959fef075..0000000000
Binary files a/lib/rdoc/generator/template/darkfish/fonts/Lato-LightItalic.ttf and /dev/null differ
diff --git a/lib/rdoc/generator/template/darkfish/fonts/Lato-Regular.ttf b/lib/rdoc/generator/template/darkfish/fonts/Lato-Regular.ttf
deleted file mode 100644
index 839cd589dc..0000000000
Binary files a/lib/rdoc/generator/template/darkfish/fonts/Lato-Regular.ttf and /dev/null differ
diff --git a/lib/rdoc/generator/template/darkfish/fonts/Lato-RegularItalic.ttf b/lib/rdoc/generator/template/darkfish/fonts/Lato-RegularItalic.ttf
deleted file mode 100644
index bababa09e3..0000000000
Binary files a/lib/rdoc/generator/template/darkfish/fonts/Lato-RegularItalic.ttf and /dev/null differ
diff --git a/lib/rdoc/generator/template/darkfish/fonts/MonaspaceNeon-Bold.woff2 b/lib/rdoc/generator/template/darkfish/fonts/MonaspaceNeon-Bold.woff2
new file mode 100644
index 0000000000..1ea8f8e15e
Binary files /dev/null and b/lib/rdoc/generator/template/darkfish/fonts/MonaspaceNeon-Bold.woff2 differ
diff --git a/lib/rdoc/generator/template/darkfish/fonts/MonaspaceNeon-Regular.woff2 b/lib/rdoc/generator/template/darkfish/fonts/MonaspaceNeon-Regular.woff2
new file mode 100644
index 0000000000..1b925ec97f
Binary files /dev/null and b/lib/rdoc/generator/template/darkfish/fonts/MonaspaceNeon-Regular.woff2 differ
diff --git a/lib/rdoc/generator/template/darkfish/fonts/SourceCodePro-Bold.ttf b/lib/rdoc/generator/template/darkfish/fonts/SourceCodePro-Bold.ttf
deleted file mode 100644
index dd00982d49..0000000000
Binary files a/lib/rdoc/generator/template/darkfish/fonts/SourceCodePro-Bold.ttf and /dev/null differ
diff --git a/lib/rdoc/generator/template/darkfish/fonts/SourceCodePro-Regular.ttf b/lib/rdoc/generator/template/darkfish/fonts/SourceCodePro-Regular.ttf
deleted file mode 100644
index 1decfb95af..0000000000
Binary files a/lib/rdoc/generator/template/darkfish/fonts/SourceCodePro-Regular.ttf and /dev/null differ
diff --git a/lib/rdoc/generator/template/darkfish/index.rhtml b/lib/rdoc/generator/template/darkfish/index.rhtml
index a5c0dd54da..7886712597 100644
--- a/lib/rdoc/generator/template/darkfish/index.rhtml
+++ b/lib/rdoc/generator/template/darkfish/index.rhtml
@@ -1,23 +1,19 @@
 <body id="top" role="document" class="file">
-<%= render '_sidebar_toggle.rhtml' %>
+  <%= render '_topbar.rhtml' %>
+  <%= render '_navigation.rhtml' %>
 
-<nav id="navigation" role="navigation">
-  <div id="project-navigation">
-    <%= render '_sidebar_navigation.rhtml' %>
-    <%= render '_sidebar_search.rhtml' %>
-  </div>
+  <main role="main">
+    <article>
+      <%- if @options.main_page and
+        main_page = @files.find { |f| f.full_name == @options.main_page } then %>
+        <%- current = main_page -%>
+        <%= main_page.description %>
+      <%- else -%>
+        <p>This is the API documentation for <%= h @title %>.
+      <%- end -%>
+    </article>
 
-  <%= render '_sidebar_pages.rhtml' %>
-  <%= render '_sidebar_classes.rhtml' %>
-
-  <%= render '_footer.rhtml' %>
-</nav>
-
-<main role="main">
-<%- if @options.main_page and
-      main_page = @files.find { |f| f.full_name == @options.main_page } then %>
-<%= main_page.description %>
-<%- else -%>
-<p>This is the API documentation for <%= h @title %>.
-<%- end -%>
-</main>
+    <nav class="contextual">
+      <%= render '_sidebar_table_of_contents.rhtml' if current %>
+    </nav>
+  </main>
diff --git a/lib/rdoc/generator/template/darkfish/js/darkfish.js b/lib/rdoc/generator/template/darkfish/js/darkfish.js
index bea0a5f1cb..1e02c7469a 100644
--- a/lib/rdoc/generator/template/darkfish/js/darkfish.js
+++ b/lib/rdoc/generator/template/darkfish/js/darkfish.js
@@ -34,17 +34,39 @@ function showSource( e ) {
 };
 
 function hookSourceViews() {
-  document.querySelectorAll('.method-heading').forEach(function (codeObject) {
+  document.querySelectorAll('.toggle-source').forEach(function (codeObject) {
     codeObject.addEventListener('click', showSource);
   });
 };
 
 function hookSearch() {
+
+  const searchButton = document.querySelector('button[aria-label="Search"]');
+  const searchDialog = document.getElementById('search-dialog');
+
+  if (searchButton && searchDialog) {
+    searchButton.addEventListener('click', function(event) {
+      event.preventDefault();
+      searchDialog.showModal();
+      searchDialog.querySelector('input[name="q"]').focus();
+    });
+  }
+
+  // Close dialog when clicking on the backdrop
+  searchDialog.addEventListener('click', function(event) {
+    const rect = this.getBoundingClientRect();
+    const isInDialog = (rect.top <= event.clientY && event.clientY <= rect.top + rect.height &&
+                        rect.left <= event.clientX && event.clientX <= rect.left + rect.width);
+    if (!isInDialog) {
+      this.close();
+    }
+  });
+
   var input  = document.querySelector('#search-field');
   var result = document.querySelector('#search-results');
   result.classList.remove("initially-hidden");
 
-  var search_section = document.querySelector('#search-section');
+  var search_section = document.querySelector('#search-dialog');
   search_section.classList.remove("initially-hidden");
 
   var search = new Search(search_data, input, result);
@@ -106,9 +128,40 @@ function hookSidebar() {
   }
 }
 
+function hookScrollSpy() {
+  const anchors = document.querySelectorAll('[id]');
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      const id = entry.target.id;
+      const correspondingLi = document.querySelector(`.contextual li a[href="#${id}"]`)?.parentElement;
+
+      if (correspondingLi) {
+        if (entry.isIntersecting) {
+          correspondingLi.classList.add('active');
+        } else {
+          correspondingLi.classList.remove('active');
+        }
+      }
+    });
+  }, {
+    rootMargin: '-60px 0px -10% 0px',
+    threshold: 0
+  });
+
+  anchors.forEach(anchor => observer.observe(anchor));
+}
+
+function scrollToActiveLeftSidebarItem() {
+  const item = document.querySelector("#class-and-module-index .active")
+  item && item.scrollIntoView({block: "center"})
+}
+
 document.addEventListener('DOMContentLoaded', function() {
   hookSourceViews();
   hookSearch();
   hookFocus();
   hookSidebar();
+  hookScrollSpy();
+  scrollToActiveLeftSidebarItem();
 });
diff --git a/lib/rdoc/generator/template/darkfish/page.rhtml b/lib/rdoc/generator/template/darkfish/page.rhtml
index fb33eba6fd..854b84c038 100644
--- a/lib/rdoc/generator/template/darkfish/page.rhtml
+++ b/lib/rdoc/generator/template/darkfish/page.rhtml
@@ -1,18 +1,12 @@
 <body id="top" role="document" class="file">
-<%= render '_sidebar_toggle.rhtml' %>
-
-<nav id="navigation" role="navigation">
-  <div id="project-navigation">
-    <%= render '_sidebar_navigation.rhtml' %>
-    <%= render '_sidebar_search.rhtml' %>
-  </div>
-
-  <%= render '_sidebar_table_of_contents.rhtml' %>
-  <%= render '_sidebar_pages.rhtml' %>
-
-  <%= render '_footer.rhtml' %>
-</nav>
-
-<main role="main" aria-label="Page <%=h file.full_name%>">
-<%= file.description %>
-</main>
+  <%= render '_topbar.rhtml' %>
+  <%= render '_navigation.rhtml' %>
+
+  <main role="main" aria-label="Page <%=h file.full_name%>">
+    <article>
+      <%= file.description %>
+    </article>
+    <nav class="contextual">
+      <%= render '_sidebar_table_of_contents.rhtml' %>
+    </nav>
+  </main>
\ No newline at end of file
diff --git a/lib/rdoc/generator/template/darkfish/servlet_not_found.rhtml b/lib/rdoc/generator/template/darkfish/servlet_not_found.rhtml
index 098b589add..02f24ec3b0 100644
--- a/lib/rdoc/generator/template/darkfish/servlet_not_found.rhtml
+++ b/lib/rdoc/generator/template/darkfish/servlet_not_found.rhtml
@@ -2,10 +2,6 @@
 <%= render '_sidebar_toggle.rhtml' %>
 
 <nav id="navigation" role="navigation">
-  <div id="project-navigation">
-    <%= render '_sidebar_navigation.rhtml' %>
-    <%= render '_sidebar_search.rhtml' %>
-  </div>
 
   <%= render '_sidebar_pages.rhtml' %>
   <%= render '_sidebar_classes.rhtml' %>
diff --git a/lib/rdoc/generator/template/darkfish/servlet_root.rhtml b/lib/rdoc/generator/template/darkfish/servlet_root.rhtml
index 373e0006d9..bb931cdc17 100644
--- a/lib/rdoc/generator/template/darkfish/servlet_root.rhtml
+++ b/lib/rdoc/generator/template/darkfish/servlet_root.rhtml
@@ -8,8 +8,6 @@
         <a href="<%= rel_prefix %>/" rel="home">Home</a>
       </h2>
     </div>
-
-    <%= render '_sidebar_search.rhtml' %>
   </div>
 
   <%= render '_sidebar_installed.rhtml' %>
diff --git a/lib/rdoc/generator/template/darkfish/table_of_contents.rhtml b/lib/rdoc/generator/template/darkfish/table_of_contents.rhtml
index 2cd2207836..b848074e60 100644
--- a/lib/rdoc/generator/template/darkfish/table_of_contents.rhtml
+++ b/lib/rdoc/generator/template/darkfish/table_of_contents.rhtml
@@ -2,12 +2,6 @@
 <%= render '_sidebar_toggle.rhtml' %>
 
 <nav id="navigation" role="navigation">
-  <div id="project-navigation">
-    <%= render '_sidebar_navigation.rhtml' %>
-
-    <%= render '_sidebar_search.rhtml' %>
-  </div>
-
   <%= render '_footer.rhtml' %>
 </nav>
 <main role="main">