robindoc 3.3.3 → 3.4.0

package/lib/styles.css

@@ -1,8 +1,8 @@
 .r-header {
   position: sticky;
-  background-color: var(--r-body);
+  background-color: var(--r-main-50);
   top: 0;
-  border-bottom: 1px solid var(--r-neutral-300);
+  border-bottom: 1px solid var(--r-main-300);
   height: 60px;
   z-index: 1000;
   box-sizing: border-box;
@@ -20,12 +20,12 @@
 .r-header-logo {
   display: block;
   margin-right: 24px;
-  color: var(--r-neutral-700);
+  color: var(--r-main-700);
   transition: color 0.2s;
   box-sizing: border-box;
 }
 .r-header-logo:hover, .r-header-logo:focus {
-  color: var(--r-neutral-950);
+  color: var(--r-main-950);
 }
 
 .r-header-nav {
@@ -40,14 +40,14 @@
 }
 
 .r-header-link {
-  color: var(--r-neutral-600);
+  color: var(--r-main-600);
   text-decoration: none;
   padding: 4px 0;
   transition: color 0.2s;
   box-sizing: border-box;
 }
 .r-header-link:hover, .r-header-link:focus-visible {
-  color: var(--r-neutral-950);
+  color: var(--r-main-950);
 }
 
 .r-header-link._target {
@@ -88,9 +88,9 @@
     left: 0;
   }
 }.r-footer {
-  border-top: 1px solid var(--r-neutral-300);
-  padding-top: 24px;
-  padding-bottom: 24px;
+  border-top: 1px solid var(--r-main-300);
+  padding-top: 16px;
+  padding-bottom: 16px;
 }
 
 .r-footer-row {
@@ -101,79 +101,40 @@
 }
 
 .r-footer-additional {
-  margin-top: 32px;
+  margin-top: 20px;
   justify-content: flex-end;
 }
 
 .r-copyright {
-  color: var(--r-neutral-800);
+  color: var(--r-main-800);
 }
 
 .r-powered {
   font-size: 14px;
   display: block;
-  color: var(--r-neutral-600);
+  color: var(--r-main-600);
 }
 
 .r-powered-link {
   font-weight: 600;
   text-decoration: none;
-  color: var(--r-neutral-950);
+  color: var(--r-main-950);
 }
 .r-powered-link:hover {
   color: var(--r-primary-900);
 }.r-root {
-  overflow: hidden;
-  --rb-neutral-50: #f8fafc;
-  --rb-neutral-100: #f1f5f9;
-  --rb-neutral-200: #e2e8f0;
-  --rb-neutral-300: #cbd5e1;
-  --rb-neutral-400: #94a3b8;
-  --rb-neutral-500: #64748b;
-  --rb-neutral-600: #475569;
-  --rb-neutral-700: #334155;
-  --rb-neutral-800: #1e293b;
-  --rb-neutral-900: #0f172a;
-  --rb-neutral-950: #020617;
-  --rb-primary-50: #fff7ed;
-  --rb-primary-100: #ffedd5;
-  --rb-primary-200: #fed7aa;
-  --rb-primary-300: #fdba74;
-  --rb-primary-400: #fb923c;
-  --rb-primary-500: #f97316;
-  --rb-primary-600: #ea580c;
-  --rb-primary-700: #c2410c;
-  --rb-primary-800: #9a3412;
-  --rb-primary-900: #7c2d12;
-  --rb-primary-950: #27130d;
-  --rb-secondary-50: #eff6ff;
-  --rb-secondary-100: #dbeafe;
-  --rb-secondary-200: #bfdbfe;
-  --rb-secondary-300: #93c5fd;
-  --rb-secondary-400: #60a5fa;
-  --rb-secondary-500: #3b82f6;
-  --rb-secondary-600: #2563eb;
-  --rb-secondary-700: #1d4ed8;
-  --rb-secondary-800: #1e40af;
-  --rb-secondary-900: #1e3a8a;
-  --rb-secondary-950: #172554;
-  --rb-body-50: #ffffff;
-  --rb-body-950: #00020a;
-}
-
-.r-root {
   --r-header-height: 60px;
   position: relative;
   padding: 0;
   margin: 0;
   accent-color: var(--r-primary-600, #ea580c);
   box-sizing: border-box;
-  background-color: var(--r-body);
-  color: var(--r-neutral-950);
+  background-color: var(--r-main-50);
+  color: var(--r-main-950);
   height: 100dvh;
   overflow: hidden auto;
   scroll-padding-top: calc(var(--r-header-height) + 20px);
-  scrollbar-color: var(--r-neutral-400) var(--r-neutral-200);
+  scrollbar-color: var(--r-main-400) var(--r-main-100);
   white-space: pre-wrap;
   box-sizing: border-box;
 }
@@ -207,52 +168,38 @@
 
 .r-root.r-theme-light {
   color-scheme: light;
-  --r-body: var(--rb-body-50);
-  --r-neutral-50: var(--rb-neutral-50, #f8fafc);
-  --r-neutral-100: var(--rb-neutral-100, #f1f5f9);
-  --r-neutral-200: var(--rb-neutral-200, #e2e8f0);
-  --r-neutral-300: var(--rb-neutral-300, #cbd5e1);
-  --r-neutral-400: var(--rb-neutral-400, #94a3b8);
-  --r-neutral-500: var(--rb-neutral-500, #64748b);
-  --r-neutral-600: var(--rb-neutral-600, #475569);
-  --r-neutral-700: var(--rb-neutral-700, #334155);
-  --r-neutral-800: var(--rb-neutral-800, #1e293b);
-  --r-neutral-900: var(--rb-neutral-900, #0f172a);
-  --r-neutral-950: var(--rb-neutral-950, #020617);
-  --r-primary-50: var(--rb-primary-50, #fff7ed);
-  --r-primary-100: var(--rb-primary-100, #ffedd5);
-  --r-primary-200: var(--rb-primary-200, #fed7aa);
-  --r-primary-300: var(--rb-primary-300, #fdba74);
-  --r-primary-400: var(--rb-primary-400, #fb923c);
-  --r-primary-500: var(--rb-primary-500, #f97316);
-  --r-primary-600: var(--rb-primary-600, #ea580c);
-  --r-primary-700: var(--rb-primary-700, #c2410c);
-  --r-primary-800: var(--rb-primary-800, #9a3412);
-  --r-primary-900: var(--rb-primary-900, #7c2d12);
-  --r-primary-950: var(--rb-primary-950, #27130d);
-  --r-secondary-50: var(--rb-secondary-50, #eff6ff);
-  --r-secondary-100: var(--rb-secondary-100, #dbeafe);
-  --r-secondary-200: var(--rb-secondary-200, #bfdbfe);
-  --r-secondary-300: var(--rb-secondary-300, #93c5fd);
-  --r-secondary-400: var(--rb-secondary-400, #60a5fa);
-  --r-secondary-500: var(--rb-secondary-500, #3b82f6);
-  --r-secondary-600: var(--rb-secondary-600, #2563eb);
-  --r-secondary-700: var(--rb-secondary-700, #1d4ed8);
-  --r-secondary-800: var(--rb-secondary-800, #1e40af);
-  --r-secondary-900: var(--rb-secondary-900, #1e3a8a);
-  --r-secondary-950: var(--rb-secondary-950, #172554);
+  --r-main-50: var(--rb-body-50);
+  --r-main-50: var(--rb-main-50, oklch(98.5% 0 0deg));
+  --r-main-100: var(--rb-main-100, oklch(97% 0 0deg));
+  --r-main-200: var(--rb-main-200, oklch(92.2% 0 0deg));
+  --r-main-300: var(--rb-main-300, oklch(87% 0 0deg));
+  --r-main-400: var(--rb-main-400, oklch(70.8% 0 0deg));
+  --r-main-500: var(--rb-main-500, oklch(55.6% 0 0deg));
+  --r-main-600: var(--rb-main-600, oklch(43.9% 0 0deg));
+  --r-main-700: var(--rb-main-700, oklch(37.1% 0 0deg));
+  --r-main-800: var(--rb-main-800, oklch(26.9% 0 0deg));
+  --r-main-900: var(--rb-main-900, oklch(20.5% 0 0deg));
+  --r-main-950: var(--rb-main-950, oklch(14.5% 0 0deg));
+  --r-primary-50: var(--rb-primary-50, oklch(98% 0.016 73.684deg));
+  --r-primary-100: var(--rb-primary-100, oklch(95.4% 0.038 75.164deg));
+  --r-primary-200: var(--rb-primary-200, oklch(90.1% 0.076 70.697deg));
+  --r-primary-300: var(--rb-primary-300, oklch(83.7% 0.128 66.29deg));
+  --r-primary-400: var(--rb-primary-400, oklch(75% 0.183 55.934deg));
+  --r-primary-500: var(--rb-primary-500, oklch(70.5% 0.213 47.604deg));
+  --r-primary-600: var(--rb-primary-600, oklch(64.6% 0.222 41.116deg));
+  --r-primary-700: var(--rb-primary-700, oklch(55.3% 0.195 38.402deg));
+  --r-primary-800: var(--rb-primary-800, oklch(47% 0.157 37.304deg));
+  --r-primary-900: var(--rb-primary-900, oklch(40.8% 0.123 38.172deg));
+  --r-primary-950: var(--rb-primary-950, oklch(26.6% 0.079 36.259deg));
   --r-success: #15803d;
   --r-note: #0e7490;
   --r-tip: #047857;
   --r-important: #a21caf;
   --r-warning: #b45309;
   --r-caution: #b91c1c;
-  --r-link: var(--r-secondary-600);
-  --r-link-hovered: var(--r-secondary-800);
-  --r-link-active: var(--r-primary-700);
   /* SHIKI */
   --r-cl-1: #f9826c;
-  --r-cl-2: var(--r-neutral-100);
+  --r-cl-2: var(--r-main-100);
   --r-cl-3: #e1e4e8;
   --r-cl-4: #2f363d;
   --r-cl-5: #959da5;
@@ -317,52 +264,37 @@
 
 .r-root.r-theme-dark {
   color-scheme: dark;
-  --r-body: var(--rb-body-950);
-  --r-neutral-50: var(--rb-neutral-950, #020617);
-  --r-neutral-100: var(--rb-neutral-900, #0f172a);
-  --r-neutral-200: var(--rb-neutral-800, #1e293b);
-  --r-neutral-300: var(--rb-neutral-700, #334155);
-  --r-neutral-400: var(--rb-neutral-600, #475569);
-  --r-neutral-500: var(--rb-neutral-500, #64748b);
-  --r-neutral-600: var(--rb-neutral-400, #94a3b8);
-  --r-neutral-700: var(--rb-neutral-300, #cbd5e1);
-  --r-neutral-800: var(--rb-neutral-200, #e2e8f0);
-  --r-neutral-900: var(--rb-neutral-100, #f1f5f9);
-  --r-neutral-950: var(--rb-neutral-50, #f8fafc);
-  --r-primary-50: var(--rb-primary-950, #27130d);
-  --r-primary-100: var(--rb-primary-900, #7c2d12);
-  --r-primary-200: var(--rb-primary-800, #9a3412);
-  --r-primary-300: var(--rb-primary-700, #c2410c);
-  --r-primary-400: var(--rb-primary-600, #ea580c);
-  --r-primary-500: var(--rb-primary-500, #f97316);
-  --r-primary-600: var(--rb-primary-400, #fb923c);
-  --r-primary-700: var(--rb-primary-300, #fdba74);
-  --r-primary-800: var(--rb-primary-200, #fed7aa);
-  --r-primary-900: var(--rb-primary-100, #ffedd5);
-  --r-primary-950: var(--rb-primary-50, #fff7ed);
-  --r-secondary-50: var(--rb-secondary-950, #172554);
-  --r-secondary-100: var(--rb-secondary-900, #1e3a8a);
-  --r-secondary-200: var(--rb-secondary-800, #1e40af);
-  --r-secondary-300: var(--rb-secondary-700, #1d4ed8);
-  --r-secondary-400: var(--rb-secondary-600, #2563eb);
-  --r-secondary-500: var(--rb-secondary-500, #3b82f6);
-  --r-secondary-600: var(--rb-secondary-400, #60a5fa);
-  --r-secondary-700: var(--rb-secondary-300, #93c5fd);
-  --r-secondary-800: var(--rb-secondary-200, #bfdbfe);
-  --r-secondary-900: var(--rb-secondary-100, #dbeafe);
-  --r-secondary-950: var(--rb-secondary-50, #eff6ff);
+  --r-main-50: var(--rb-main-950, oklch(14.5% 0 0deg));
+  --r-main-100: var(--rb-main-900, oklch(20.5% 0 0deg));
+  --r-main-200: var(--rb-main-800, oklch(26.9% 0 0deg));
+  --r-main-300: var(--rb-main-700, oklch(37.1% 0 0deg));
+  --r-main-400: var(--rb-main-600, oklch(43.9% 0 0deg));
+  --r-main-500: var(--rb-main-500, oklch(55.6% 0 0deg));
+  --r-main-600: var(--rb-main-400, oklch(70.8% 0 0deg));
+  --r-main-700: var(--rb-main-300, oklch(87% 0 0deg));
+  --r-main-800: var(--rb-main-200, oklch(92.2% 0 0deg));
+  --r-main-900: var(--rb-main-100, oklch(97% 0 0deg));
+  --r-main-950: var(--rb-main-50, oklch(98.5% 0 0deg));
+  --r-primary-50: var(--rb-primary-950, oklch(26.6% 0.079 36.259deg));
+  --r-primary-100: var(--rb-primary-900, oklch(40.8% 0.123 38.172deg));
+  --r-primary-200: var(--rb-primary-800, oklch(47% 0.157 37.304deg));
+  --r-primary-300: var(--rb-primary-700, oklch(55.3% 0.195 38.402deg));
+  --r-primary-400: var(--rb-primary-600, oklch(64.6% 0.222 41.116deg));
+  --r-primary-500: var(--rb-primary-500, oklch(70.5% 0.213 47.604deg));
+  --r-primary-600: var(--rb-primary-400, oklch(75% 0.183 55.934deg));
+  --r-primary-700: var(--rb-primary-300, oklch(83.7% 0.128 66.29deg));
+  --r-primary-800: var(--rb-primary-200, oklch(90.1% 0.076 70.697deg));
+  --r-primary-900: var(--rb-primary-100, oklch(95.4% 0.038 75.164deg));
+  --r-primary-950: var(--rb-primary-50, oklch(98% 0.016 73.684deg));
   --r-success: #86efac;
   --r-note: #22d3ee;
   --r-tip: #34d399;
   --r-important: #e879f9;
   --r-warning: #fbbf24;
   --r-caution: #f87171;
-  --r-link: var(--r-secondary-500);
-  --r-link-hovered: var(--r-secondary-800);
-  --r-link-active: var(--r-primary-700);
   /* SHIKI */
   --r-cl-1: #f9826c;
-  --r-cl-2: var(--r-neutral-100);
+  --r-cl-2: var(--r-main-100);
   --r-cl-3: #444d56;
   --r-cl-4: #e1e4e8;
   --r-cl-5: #959da5;
@@ -422,10 +354,6 @@
   --r-cl-60: #86181d;
   --r-cl-61: #144620;
   --r-cl-62: #c24e00;
-}.r-page-container {
-  min-height: calc(100dvh - var(--r-header-height));
-  overflow-wrap: break-word;
-  box-sizing: border-box;
 }.r-docs-container {
   min-height: calc(100dvh - var(--r-header-height));
   overflow-wrap: break-word;
@@ -462,13 +390,69 @@
     grid-template-columns: 760px 220px;
     grid-template-rows: auto 1fr auto;
   }
+}.r-page-container {
+  min-height: calc(100dvh - var(--r-header-height));
+  overflow-wrap: break-word;
+  box-sizing: border-box;
 }.keylink-to-content {
   position: absolute !important;
   top: 8px;
   left: 12px;
   z-index: 1001;
-}.keylink-to-navigation {
+}.r-keylink.keylink-to-navigation:focus {
   margin-top: -40px;
+}.r-article {
+  padding: 20px 0 40px;
+  grid-area: content;
+}
+@media screen and (width >= 1180px) {
+  .r-article {
+    padding: 32px 0 40px;
+  }
+}
+.r-article > *:first-child {
+  margin-top: 0;
+}
+.r-article > *:last-child {
+  margin-bottom: 0;
+}
+
+.r-checkbox {
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  margin: 4px;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+.r-label {
+  cursor: pointer;
+}
+
+.r-task-ol,
+.r-task-ul {
+  list-style: none;
+}
+
+.r-task-label {
+  display: block;
+  width: 100%;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  box-sizing: border-box;
+}
+.r-task-label:hover .r-checkbox {
+  filter: brightness(0.8);
+}
+
+.r-task-li.r-task-li {
+  margin-block-start: 2px;
+  margin-block-end: 2px;
+}
+
+.r-label-text {
+  vertical-align: middle;
 }.r-sidebar {
   grid-area: sidebar;
   box-sizing: border-box;
@@ -480,8 +464,8 @@
     top: var(--r-header-height);
     left: 0;
     margin: 0 -12px;
-    background-color: var(--r-body);
-    border-bottom: 1px solid var(--r-neutral-200);
+    background-color: var(--r-main-50);
+    border-bottom: 1px solid var(--r-main-200);
     z-index: 10;
     opacity: 0.98;
     padding: 0;
@@ -532,7 +516,7 @@
   right: 0;
   height: 2px;
   border-bottom-left-radius: 2px;
-  background-color: var(--r-neutral-200);
+  background-color: var(--r-main-200);
   z-index: 1;
   transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
   box-sizing: border-box;
@@ -553,7 +537,7 @@
     top: var(--r-header-height);
     overflow: auto;
     scrollbar-width: thin;
-    scrollbar-color: var(--r-neutral-200) transparent;
+    scrollbar-color: var(--r-main-200) transparent;
     scrollbar-gutter: stable;
     max-height: calc(100dvh - var(--r-header-height));
   }
@@ -579,8 +563,8 @@
   padding: 12px;
   background: none;
   cursor: pointer;
-  color: var(--r-neutral-800);
-  background-color: var(--r-body);
+  color: var(--r-main-800);
+  background-color: var(--r-main-50);
   z-index: 1;
   box-sizing: border-box;
 }
@@ -602,7 +586,7 @@
 }
 
 .r-sidebar-list {
-  color: var(--r-neutral-700);
+  color: var(--r-main-700);
   list-style: none;
   padding: 0;
   margin: 0;
@@ -639,7 +623,7 @@
   top: -1px;
   width: 2px;
   height: calc(100% + 4px);
-  background-color: var(--r-neutral-200);
+  background-color: var(--r-main-200);
   transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
   box-sizing: border-box;
 }
@@ -652,7 +636,7 @@
 }
 
 .r-sidebar-li._separator {
-  background: var(--r-neutral-200);
+  background: var(--r-main-200);
   padding: 1px;
 }
 
@@ -670,7 +654,7 @@
 }
 
 .r-sidebar-heading {
-  color: var(--r-neutral-900);
+  color: var(--r-main-900);
   font-weight: 600;
   margin-block-end: 4px;
 }
@@ -690,12 +674,12 @@
 
 .r-sidebar-link._target {
   color: var(--r-primary-950);
-  background-color: var(--r-neutral-50);
+  background-color: var(--r-main-50);
 }
 
 .r-sidebar-link:hover {
   color: var(--r-primary-800);
-  background-color: var(--r-neutral-100);
+  background-color: var(--r-main-100);
   transition-delay: initial;
 }
 .r-sidebar-link:hover::before {
@@ -705,7 +689,7 @@
 
 .r-sidebar-link._active {
   color: var(--r-primary-700);
-  background-color: var(--r-neutral-50);
+  background-color: var(--r-main-50);
 }
 .r-sidebar-link._active::before {
   background-color: currentColor;
@@ -717,13 +701,11 @@
   top: 5px;
   border-radius: 4px;
   padding: 4px;
-  background-color: var(--r-neutral-200);
   list-style: none;
   cursor: pointer;
-  transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s, color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
+  transition: color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
 }
 .r-sidebar-drop-btn:hover {
-  background-color: var(--r-neutral-300);
   color: var(--r-primary-500);
   transition-delay: initial;
 }
@@ -743,55 +725,6 @@
 
 .r-sidebar-drop[open] > .r-sidebar-drop-btn > .r-sidebar-drop-icon {
   transform: rotate(90deg);
-}.r-article {
-  padding: 20px 0 80px;
-  grid-area: content;
-}
-@media screen and (width >= 1180px) {
-  .r-article {
-    padding: 32px 0 80px;
-  }
-}
-.r-article > *:first-child {
-  margin-top: 0;
-}
-
-.r-checkbox {
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  margin: 4px;
-  vertical-align: middle;
-  box-sizing: border-box;
-}
-
-.r-label {
-  cursor: pointer;
-}
-
-.r-task-ol,
-.r-task-ul {
-  list-style: none;
-}
-
-.r-task-label {
-  display: block;
-  width: 100%;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  box-sizing: border-box;
-}
-.r-task-label:hover .r-checkbox {
-  filter: brightness(0.8);
-}
-
-.r-task-li.r-task-li {
-  margin-block-start: 2px;
-  margin-block-end: 2px;
-}
-
-.r-label-text {
-  vertical-align: middle;
 }.r-header-menu {
   display: flex;
   justify-content: flex-end;
@@ -819,7 +752,7 @@
   .r-header-responsive {
     flex-direction: column-reverse;
     padding: 12px;
-    background-color: var(--r-body);
+    background-color: var(--r-main-50);
     position: fixed;
     top: 60px;
     right: 0;
@@ -858,7 +791,7 @@
   width: 20px;
   height: 1.5px;
   position: absolute;
-  background-color: var(--r-neutral-700);
+  background-color: var(--r-main-700);
   margin: auto;
   transition: transform 0.3s;
   box-sizing: border-box;
@@ -883,10 +816,10 @@
 }.r-search-btn {
   position: relative;
   border-radius: 6px;
-  background-color: var(--r-neutral-100);
-  color: var(--r-neutral-600);
+  background-color: var(--r-main-100);
+  color: var(--r-main-600);
   padding: 8px 20px;
-  border: 1px solid var(--r-neutral-200);
+  border: 1px solid var(--r-main-200);
   width: 100%;
   text-align: left;
   cursor: text;
@@ -899,10 +832,10 @@
   }
 }
 .r-search-btn:hover {
-  border-color: var(--r-neutral-600);
+  border-color: var(--r-main-600);
 }
 .r-search-btn:hover .r-search-kbd {
-  color: var(--r-neutral-950);
+  color: var(--r-main-950);
 }
 
 .r-search-title {
@@ -927,15 +860,15 @@
 
 .r-search-popup-header {
   position: relative;
-  border-bottom: 1px solid var(--r-neutral-200);
+  border-bottom: 1px solid var(--r-main-200);
 }
 
 .r-search-input {
   border-radius: 12px 12px 0 0;
-  background-color: var(--r-neutral-50);
+  background-color: var(--r-main-50);
   padding: 16px 20px;
   border: none;
-  border-bottom: 2px solid var(--r-neutral-300);
+  border-bottom: 2px solid var(--r-main-300);
   width: 100%;
   font-size: 16px;
   box-sizing: border-box;
@@ -953,11 +886,11 @@
   border-bottom-color: var(--r-primary-600);
 }
 .r-search-input::placeholder {
-  color: var(--r-neutral-500);
+  color: var(--r-main-500);
 }
 
 .r-search-popup-kbd {
-  color: var(--r-neutral-600);
+  color: var(--r-main-600);
   right: 20px;
 }
 
@@ -967,7 +900,7 @@
   overflow-y: auto;
   list-style: none;
   scrollbar-width: thin;
-  scrollbar-color: var(--r-neutral-200) transparent;
+  scrollbar-color: var(--r-main-200) transparent;
   margin: 0;
   box-sizing: border-box;
 }
@@ -975,17 +908,17 @@
 .r-search-item {
   display: block;
   text-decoration: none;
-  color: var(--r-neutral-700);
+  color: var(--r-main-700);
   padding: 8px 12px;
-  border: 1px solid var(--r-neutral-100);
+  border: 1px solid var(--r-main-100);
   border-radius: 6px;
   width: 100%;
   margin-top: 6px;
   box-sizing: border-box;
 }
 .r-search-item:hover, .r-search-item:focus {
-  color: var(--r-neutral-950);
-  background-color: var(--r-neutral-50);
+  color: var(--r-main-950);
+  background-color: var(--r-main-50);
 }
 
 .r-search-item-title {
@@ -994,7 +927,7 @@
 
 .r-search-item-desc {
   font-size: 14px;
-  color: var(--r-neutral-600);
+  color: var(--r-main-600);
   margin: 12px 0 0;
 }.r-header-social {
   display: flex;
@@ -1009,25 +942,18 @@
 }
 
 .r-header-social-git {
-  color: var(--r-neutral-700);
+  color: var(--r-main-700);
   transition: color 0.2s;
 }
 .r-header-social-git:hover, .r-header-social-git:focus {
-  color: var(--r-neutral-950);
-}.r-container {
-  max-width: 1180px;
-  padding-right: 12px;
-  padding-left: 12px;
-  margin-right: auto;
-  margin-left: auto;
-  box-sizing: border-box;
+  color: var(--r-main-950);
 }.r-dropdown {
   position: relative;
-  color: var(--r-neutral-600);
+  color: var(--r-main-600);
   transition: color 0.2s 0.1s;
 }
 .r-dropdown:hover, .r-dropdown:focus-within {
-  color: var(--r-neutral-950);
+  color: var(--r-main-950);
 }
 .r-dropdown:hover .r-dropdown-drop, .r-dropdown:focus-within .r-dropdown-drop {
   visibility: visible;
@@ -1071,8 +997,8 @@
   pointer-events: none;
   opacity: 0;
   transition: transform 0.3s 0.1s, opacity 0.3s 0.1s, visibility 0.3s 0.1s;
-  background-color: var(--r-neutral-50);
-  border: 1px solid var(--r-neutral-100);
+  background-color: var(--r-main-50);
+  border: 1px solid var(--r-main-100);
   border-radius: 8px;
   margin: 0;
   padding: 2px 6px;
@@ -1085,7 +1011,7 @@
   display: block;
   width: 100%;
   text-decoration: none;
-  color: var(--r-neutral-700);
+  color: var(--r-main-700);
   padding: 4px 8px;
   margin-top: 4px;
   margin-bottom: 4px;
@@ -1094,12 +1020,19 @@
   box-sizing: border-box;
 }
 .r-dropdown-link:hover {
-  color: var(--r-neutral-900);
-  background-color: var(--r-neutral-100);
+  color: var(--r-main-900);
+  background-color: var(--r-main-100);
 }
 
 .r-dropdown-link._active {
   color: var(--r-primary-700);
+}.r-container {
+  max-width: 1180px;
+  padding-right: 12px;
+  padding-left: 12px;
+  margin-right: auto;
+  margin-left: auto;
+  box-sizing: border-box;
 }.r-theme-switcher {
   position: relative;
   display: flex;
@@ -1107,7 +1040,7 @@
   width: 108px;
   height: 36px;
   padding: 2px;
-  background-color: var(--r-neutral-950);
+  background-color: var(--r-main-950);
   border-radius: 14px;
   box-sizing: border-box;
 }
@@ -1119,7 +1052,7 @@
   width: 32px;
   top: 2px;
   left: 2px;
-  background-color: var(--r-body);
+  background-color: var(--r-main-50);
   border-radius: 12px;
   transition: left 0.2s;
   box-sizing: border-box;
@@ -1131,14 +1064,14 @@
   border: 0;
   border-radius: 12px;
   cursor: pointer;
-  color: var(--r-neutral-50);
-  fill: var(--r-neutral-950);
+  color: var(--r-main-50);
+  fill: var(--r-main-950);
   z-index: 1;
   transition: color 0.2s 0.1s, fill 0.2s;
 }
 .r-theme-switcher-btn:hover {
-  color: var(--r-neutral-50);
-  fill: var(--r-neutral-50);
+  color: var(--r-main-50);
+  fill: var(--r-main-50);
 }
 
 .r-theme-dark:not(.r-theme-system) .r-theme-switcher::before {
@@ -1146,7 +1079,7 @@
 }
 
 .r-theme-dark:not(.r-theme-system) .r-theme-switcher-btn__dark {
-  color: var(--r-neutral-950);
+  color: var(--r-main-950);
   pointer-events: none;
 }
 
@@ -1156,7 +1089,7 @@
 }
 
 .r-theme-system .r-theme-switcher-btn__system {
-  color: var(--r-neutral-950);
+  color: var(--r-main-950);
   pointer-events: none;
 }
 
@@ -1165,7 +1098,7 @@
 }
 
 .r-theme-light:not(.r-theme-system) .r-theme-switcher-btn__light {
-  color: var(--r-neutral-950);
+  color: var(--r-main-950);
   pointer-events: none;
 }
 
@@ -1175,10 +1108,10 @@
   display: block;
   position: relative;
   padding: 8px 12px;
-  border: 2px solid var(--r-neutral-500);
+  border: 2px solid var(--r-main-500);
   border-radius: 6px;
   text-decoration: none;
-  background: var(--r-body);
+  background: var(--r-main-50);
 }
 
 .r-keylink:not(:focus) {
@@ -1215,7 +1148,7 @@
 }
 
 .r-breadcrumb-link {
-  color: var(--r-neutral-700);
+  color: var(--r-main-700);
   text-decoration: none;
 }
 .r-breadcrumb-link:hover {
@@ -1230,7 +1163,7 @@
 }
 
 .r-breadcrumb-title {
-  color: var(--r-neutral-950);
+  color: var(--r-main-950);
   font-weight: 600;
 }.r-contents {
   grid-area: contents;
@@ -1248,7 +1181,7 @@
     max-height: calc(100dvh - var(--r-header-height));
     overflow: auto;
     scrollbar-width: thin;
-    scrollbar-color: var(--r-neutral-200) transparent;
+    scrollbar-color: var(--r-main-200) transparent;
     scrollbar-gutter: stable;
   }
 }
@@ -1274,7 +1207,7 @@
 }
 @media screen and (width < 1180px) {
   .r-contents-control:checked + .r-contents-details .r-contents-title {
-    color: var(--r-neutral-800);
+    color: var(--r-main-800);
   }
 }
 .r-contents-control:checked + .r-contents-details .r-contents-chevron {
@@ -1299,7 +1232,7 @@
 
 @media screen and (width < 1180px) {
   .r-contents-details {
-    background: var(--r-neutral-100);
+    background: var(--r-main-100);
     border-radius: 4px;
   }
 }
@@ -1311,7 +1244,7 @@
   cursor: pointer;
   margin-top: 20px;
   padding: 12px;
-  color: var(--r-neutral-600);
+  color: var(--r-main-600);
   z-index: 1;
 }
 @media screen and (width < 1180px) {
@@ -1323,8 +1256,8 @@
 }
 @media screen and (width >= 1180px) {
   .r-contents-title {
-    color: var(--r-neutral-900);
-    background: var(--r-body);
+    color: var(--r-main-900);
+    background: var(--r-main-50);
     font-weight: 600;
     margin-top: 0;
     padding: 32px 0 12px;
@@ -1333,7 +1266,7 @@
 }
 @media screen and (width < 1180px) {
   .r-contents-title:hover {
-    color: var(--r-neutral-900);
+    color: var(--r-main-900);
   }
 }
 
@@ -1352,7 +1285,7 @@
 .r-contents-link {
   display: block;
   position: relative;
-  color: var(--r-neutral-600);
+  color: var(--r-main-600);
   text-decoration: none;
   padding-top: 4px;
   padding-bottom: 4px;
@@ -1379,7 +1312,7 @@
   box-sizing: border-box;
 }
 .r-contents-link::before {
-  border-color: var(--r-neutral-200);
+  border-color: var(--r-main-200);
 }
 .r-contents-link::after {
   mask-image: linear-gradient(135deg, #000 50%, transparent 50%);
@@ -1413,29 +1346,29 @@
   mask-position: 0 100% !important;
 }
 
-.r-contents-link._nested + .r-contents-link._passed:not(._nested)::after {
+.r-contents-link._nested + .r-contents-link._visited:not(._nested)::after {
   mask-position: 100% 0 !important;
 }
 
 @media screen and (width >= 1180px) {
-  .r-contents-link._passed {
-    color: var(--r-neutral-800);
+  .r-contents-link._visited {
+    color: var(--r-main-600);
   }
 }
 @media screen and (width >= 1180px) {
-  .r-contents-link._passed::after {
+  .r-contents-link._visited::after {
     mask-position: 0 0 !important;
   }
 }
+.r-contents-link._visited::after, .r-contents-link._visited + .r-contents-link::after {
+  transition: mask-position 0.3s;
+}
 
 @media screen and (width >= 1180px) {
   .r-contents-link._active {
-    color: var(--r-primary-800);
+    color: var(--r-main-900);
   }
 }
-.r-contents-link._active::after, .r-contents-link._active + .r-contents-link::after {
-  transition: mask-position 0.3s;
-}
 
 .r-contents-actions {
   position: sticky;
@@ -1443,7 +1376,7 @@
   padding-top: 2px;
   padding-bottom: 2px;
   margin-top: 20px;
-  background-color: var(--r-body);
+  background-color: var(--r-main-50);
 }
 @media screen and (width < 1180px) {
   .r-contents-actions {
@@ -1455,7 +1388,7 @@
   display: block;
   width: 100%;
   position: relative;
-  color: var(--r-neutral-600);
+  color: var(--r-main-600);
   text-decoration: none;
   padding-top: 10px;
   padding-bottom: 10px;
@@ -1464,13 +1397,13 @@
   box-sizing: border-box;
 }
 .r-contents-git:hover {
-  color: var(--r-neutral-900);
+  color: var(--r-main-900);
 }.r-pagination {
   grid-area: pagination;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
   gap: 16px;
-  margin-bottom: 80px;
+  margin-bottom: 40px;
 }
 
 .r-pagination-item {
@@ -1479,19 +1412,19 @@
   padding-bottom: 8px;
   text-decoration: none;
   font-size: 14px;
-  color: var(--r-neutral-700);
+  color: var(--r-main-800);
 }
 .r-pagination-item:hover {
-  color: var(--r-neutral-900);
+  color: var(--r-main-950);
 }
 
 .r-pagination-item._prev {
-  padding-left: 32px;
+  padding-left: 28px;
 }
 
 .r-pagination-item._next {
   text-align: right;
-  padding-right: 32px;
+  padding-right: 28px;
 }
 
 .r-pagination-text {
@@ -1501,8 +1434,7 @@
 
 .r-pagination-title {
   font-weight: 600;
-  font-size: 18px;
-  color: var(--r-neutral-950);
+  font-size: 16px;
 }
 
 .r-pagination-icon {
@@ -1510,7 +1442,6 @@
   top: 50%;
   transform: translateY(-50%);
   transition: transform 0.2s;
-  margin: -4px;
 }
 
 .r-pagination-icon._prev {
@@ -1540,7 +1471,7 @@
 .r-pagination-svg {
   display: block;
 }.r-last-modified {
-  color: var(--r-neutral-700);
+  color: var(--r-main-700);
   margin-block-start: 16px;
 }.r-git-logo {
   display: block;
@@ -1586,11 +1517,11 @@
   transition: opacity 0.3s allow-discrete;
   padding-inline: 8px;
   margin-inline-start: -4px;
-  color: var(--r-neutral-600);
+  color: var(--r-main-600);
   text-decoration: none;
 }
 .r-anchor-heading-link:hover {
-  color: var(--r-link-base-hovered);
+  color: var(--r-primary-800);
 }
 .r-anchor-heading-link::after {
   content: "#";
@@ -1598,6 +1529,10 @@
   position: relative;
   margin-block-start: 1.5em;
   margin-block-end: 1.75em;
+  background-color: var(--r-main-100);
+  padding: 3px;
+  border-radius: 8px;
+  border: 1px solid var(--r-main-200);
 }
 
 .r-code-section-header {
@@ -1607,16 +1542,16 @@
   align-items: center;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
-  padding: 6px 20px;
-  background-color: var(--r-neutral-100);
-  border: 1px solid var(--r-neutral-300);
-  color: var(--r-neutral-700);
+  padding-left: 20px;
+  color: var(--r-main-700);
+}
+
+.r-code-section-block._space-right {
+  padding-right: 3rem;
 }
 
 .r-code-section-header + .r-code-section-block {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  border-top: 0;
+  border: 0;
   margin-block-start: 0;
   margin-block-end: 0;
 }
@@ -1630,6 +1565,9 @@
   right: 9px;
   top: 9px;
   opacity: 0;
+  background: color-mix(in oklab, var(--r-main-100) 90%, transparent);
+  border: 2px solid var(--r-main-50);
+  backdrop-filter: blur(2px);
   transition: opacity 0.2s, color 0.2s, background-color 0.2s;
 }
 .r-code-section-copy.r-code-section-copy:hover, .r-code-section-copy.r-code-section-copy._active {
@@ -1644,12 +1582,12 @@
   margin-block-start: 12px;
   margin-block-end: 12px;
   scrollbar-width: thin;
-  scrollbar-color: var(--r-neutral-200) transparent;
+  scrollbar-color: var(--r-main-200) transparent;
   box-sizing: border-box;
 }.r-blockquote {
-  background-color: var(--r-neutral-100);
+  background-color: var(--r-main-100);
   padding: 8px 12px 8px 20px;
-  border-left: 6px solid var(--r-neutral-600);
+  border-left: 6px solid var(--r-main-600);
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
   font: inherit;
@@ -1702,33 +1640,33 @@
 }
 .r-blockquote-caution .r-blockquote-title {
   color: var(--r-caution);
-}.r-code-span {
-  font-family: var(--monospace-font, monospace, monospace);
-  background-color: var(--r-neutral-200);
-  color: var(--r-primary-900);
-  border-radius: 4px;
-  padding: 2px 6px;
-  font-size: 16px;
-  letter-spacing: 0.5px;
-}
-
-.r-code-span + .r-content-link-external {
-  margin-left: -12px;
 }.r-code-block {
   font-family: var(--monospace-font, monospace, monospace);
   font-size: 16px;
   line-height: 1.33;
   border-radius: 6px;
   padding: 16px 20px;
-  margin-block-start: 1.5em;
-  margin-block-end: 1.75em;
+  margin: 0;
   color: var(--r-primary-800);
-  background-color: var(--r-neutral-50);
-  border: 1px solid var(--r-neutral-300);
+  background-color: var(--r-main-50);
   overflow-x: auto;
   scrollbar-width: thin;
-  scrollbar-color: var(--r-neutral-200) transparent;
+  scrollbar-color: var(--r-main-200) transparent;
   box-sizing: border-box;
+}.r-code-span {
+  font-family: var(--monospace-font, monospace, monospace);
+  background-color: var(--r-main-100);
+  border: 1px solid var(--r-main-200);
+  color: var(--r-main-950);
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: inherit;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+.r-code-span + .r-content-link-external {
+  margin-left: -12px;
 }.r-h1 {
   font-size: 32px;
   line-height: 1.4;
@@ -1787,34 +1725,32 @@
 }
 
 .r-tab-list .r-code-section,
-.r-tab-list .r-code-block,
 .r-tab-list .r-code-section-header {
   margin-block-start: 0;
   margin-block-end: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  background-color: var(--r-neutral-50);
 }
 
 .r-tabs-header {
   display: flex;
+  margin: 0 12px;
+  text-wrap: nowrap;
+  overflow-x: auto;
+  scrollbar-width: thin;
 }
 
 .r-tab-header {
   position: relative;
   cursor: pointer;
-  border: 1px solid var(--r-neutral-300);
-  color: var(--r-neutral-600);
-  border-bottom: 0;
-  margin-bottom: -1px;
-  background-color: var(--r-body);
+  color: var(--r-main-600);
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
-  padding: 8px 20px;
+  padding: 8px 12px 2px;
+  border-bottom: 1px solid transparent;
+  transition: border 0.2s ease, color 0.2s ease;
 }
 .r-tab-header:hover {
-  background-color: var(--r-neutral-50);
-  color: var(--r-primary-600);
+  border-color: var(--r-main-500);
+  color: var(--r-main-800);
 }
 
 .r-tab-header-code {
@@ -1826,9 +1762,9 @@
   cursor: pointer;
 }
 .r-kbd-container:hover {
-  color: var(--r-neutral-950);
+  color: var(--r-main-950);
 }.r-kbd-key {
-  background-color: var(--r-neutral-200);
+  background-color: var(--r-main-200);
   font-size: 12px;
   border-radius: 4px;
   padding: 5px 8px;
@@ -1840,7 +1776,7 @@
   left: 0;
   bottom: 0;
   width: 100%;
-  background-color: var(--r-body);
+  background-color: var(--r-main-50);
   border-radius: 12px 12px 0 0;
   opacity: 0;
   visibility: hidden;
@@ -1872,10 +1808,9 @@
   }
 }.r-copy-button {
   position: relative;
-  padding: 8px;
+  padding: 6px;
   background: none;
-  color: var(--r-neutral-700);
-  background-color: var(--r-neutral-100);
+  color: var(--r-main-700);
   border: 0;
   border-radius: 6px;
   cursor: pointer;
@@ -1886,16 +1821,15 @@
 .r-copy-button-success {
   opacity: 0;
   transform: scale(0.7);
-  transition: 0.2s;
+  transition: transform 0.2s;
 }
 
 .r-copy-button-base {
-  transition: 0.2s;
+  transition: transform 0.2s;
 }
 
 .r-copy-button:hover {
-  color: var(--r-neutral-950);
-  background-color: var(--r-neutral-200);
+  color: var(--r-main-950);
 }
 
 .r-copy-button:active,
@@ -1915,15 +1849,50 @@
 
 .r-copy-button-svg {
   display: block;
+}.r-copy-text {
+  position: relative;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  padding: 6px 0;
+}
+.r-copy-text:hover {
+  color: var(--r-main-950);
+}
+.r-copy-text::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: linear-gradient(to right, currentColor 30%, transparent 0%, transparent 80%, currentColor 80%) repeat-x 0px/8px;
+  transition: background 0.2s;
+  box-sizing: border-box;
+  opacity: 0.6;
+}
+
+.r-copy-text:active,
+.r-copy-text._active {
+  color: var(--r-success);
 }.r-content-link {
   text-decoration: none;
-  color: var(--r-link);
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: var(--r-primary-500);
+  text-underline-offset: 3px;
+  transition: text-decoration-offset 0.2s ease;
 }
 .r-content-link:hover {
-  color: var(--r-link-hovered);
+  color: var(--r-main-700);
+  text-decoration-color: var(--r-primary-400);
+  text-underline-offset: 2px;
+  text-decoration-thickness: 2px;
 }
 .r-content-link:active {
-  color: var(--r-link-active);
+  color: var(--r-primary-600);
 }
 
 .r-content-link-external {
@@ -1957,32 +1926,6 @@
   background-color: currentColor;
   border-radius: 0 0 0 4px;
   box-sizing: border-box;
-}.r-copy-text {
-  position: relative;
-  cursor: pointer;
-  background: none;
-  border: 0;
-  padding: 0;
-  font: inherit;
-}
-.r-copy-text:hover {
-  color: var(--r-neutral-950);
-}
-.r-copy-text::before {
-  content: "";
-  position: absolute;
-  bottom: -2px;
-  left: 0;
-  width: 100%;
-  height: 1px;
-  background: linear-gradient(to right, currentColor 30%, transparent 0%, transparent 80%, currentColor 80%) repeat-x 0px/8px;
-  transition: background 0.2s;
-  box-sizing: border-box;
-}
-
-.r-copy-text:active,
-.r-copy-text._active {
-  color: var(--r-success);
 }.r-li {
   line-height: 1.8;
   margin-block-start: 6px;
@@ -1994,14 +1937,12 @@
   padding-inline-start: 20px;
   margin-block-start: 6px;
   margin-block-end: 6px;
-}.r-ol {
-  padding-inline-start: 0;
-  list-style-position: inside;
+}.r-ul {
+  padding-inline-start: 2rem;
   margin-block-start: 1em;
   margin-block-end: 1em;
-}.r-ul {
-  padding-inline-start: 0;
-  list-style-position: inside;
+}.r-ol {
+  padding-inline-start: 2rem;
   margin-block-start: 1em;
   margin-block-end: 1em;
 }.r-table {
@@ -2011,15 +1952,15 @@
   box-sizing: border-box;
 }.r-td {
   padding: 6px 12px;
-  border-bottom: 1px solid var(--r-neutral-400);
+  border-bottom: 1px solid var(--r-main-400);
   border-collapse: collapse;
 }.r-th {
   padding: 6px 12px;
-  border-top: 1px solid var(--r-neutral-500);
-  border-bottom: 1px solid var(--r-neutral-500);
+  border-top: 1px solid var(--r-main-500);
+  border-bottom: 1px solid var(--r-main-500);
   border-collapse: collapse;
 }.r-thead {
-  background-color: var(--r-neutral-100);
+  background-color: var(--r-main-100);
 }.r-task-li.r-task-li {
   margin-block-start: 2px;
   margin-block-end: 2px;
@@ -2079,7 +2020,9 @@
   display: none;
   opacity: 0;
   position: absolute;
-  background: var(--r-neutral-200);
+  background: color-mix(in oklab, var(--r-main-100) 90%, transparent);
+  border: 2px solid var(--r-main-50);
+  backdrop-filter: blur(2px);
   width: max-content;
   padding: 6px 12px;
   border-radius: 4px;
@@ -2089,12 +2032,12 @@
   box-sizing: border-box;
 }
 .r-tooltip._bottom-start {
-  bottom: -8px;
-  left: 0;
+  bottom: -4px;
+  left: -4px;
 }
 .r-tooltip._bottom-end {
-  bottom: -8px;
-  right: 0;
+  bottom: -4px;
+  right: -4px;
 }
 
 .r-tooltip._visible {