ardo 3.2.1 → 3.4.0

package/dist/ui/styles.css

@@ -1,3 +1,237 @@
+._8autjm0 {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--ardo-color-sidebarBg);
+  overflow: hidden;
+}
+._8autjm1 {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  padding-top: var(--ardo-layout-headerHeight);
+  min-height: 0;
+}
+._8autjm2 {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  background: var(--ardo-color-bg);
+  overflow-y: auto;
+  scroll-padding-top: var(--ardo-space-2xl);
+  padding: 0 var(--ardo-space-xl) var(--ardo-space-xl);
+}
+._8autjm3 {
+  height: auto;
+  min-height: 100vh;
+  overflow: visible;
+}
+._8autjm4 {
+  padding-top: var(--ardo-layout-headerHeight);
+}
+._8autjm3 ._8autjm2 {
+  margin-left: 0;
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+  border: none;
+  background: var(--ardo-color-bg);
+  overflow: visible;
+}
+._8autjm5 {
+  position: absolute;
+  top: -100%;
+  left: var(--ardo-space-md);
+  z-index: 200;
+  padding: 0.75rem var(--ardo-space-lg);
+  background: var(--ardo-color-brand);
+  color: white;
+  font-weight: 600;
+  font-size: var(--ardo-fontSize-sm);
+  text-decoration: none;
+  border-radius: var(--ardo-radius-base);
+  box-shadow: var(--ardo-color-shadowMd);
+}
+._8autjm5:focus {
+  top: var(--ardo-space-md);
+}
+@media (max-width: 1024px) {
+  ._8autjm2 {
+    padding: 0 var(--ardo-space-md) var(--ardo-space-xl);
+  }
+}
+._169q00b0 {
+  width: 100%;
+  padding: var(--ardo-space-2xl) var(--ardo-space-xl);
+  text-align: left;
+  background: color-mix(in oklch, var(--ardo-color-brand) 6%, var(--ardo-color-bgMute));
+  margin: var(--ardo-space-2xl) 0 0;
+}
+main > ._169q00b0 {
+  width: calc(100% + (var(--ardo-space-xl) * 2));
+  margin-right: calc(var(--ardo-space-xl) * -1);
+  margin-bottom: calc(var(--ardo-space-xl) * -1);
+  margin-left: calc(var(--ardo-space-xl) * -1);
+}
+._8autjm3 ._8autjm2 > ._169q00b0 {
+  width: 100%;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+}
+._169q00b1 {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--ardo-space-xs) var(--ardo-space-2xl);
+  width: 100%;
+  max-width: 80rem;
+  margin: 0 auto;
+}
+._169q00b2 {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  flex-wrap: wrap;
+  font-size: var(--ardo-fontSize-sm);
+  color: var(--ardo-color-textLight);
+  margin-bottom: 0;
+}
+._169q00b3 {
+  display: inline-block;
+  width: var(--ardo-space-xs);
+  height: var(--ardo-space-xs);
+  border-radius: 50%;
+  background: var(--ardo-color-textLighter);
+  margin: 0 0.75rem;
+  vertical-align: middle;
+}
+._169q00b4 {
+  color: var(--ardo-color-accent);
+  text-decoration: none;
+  transition: opacity var(--ardo-transition-fast);
+}
+._169q00b4:hover {
+  opacity: 0.8;
+}
+._169q00b5 {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--ardo-color-brand);
+  text-decoration: none;
+  transition: opacity var(--ardo-transition-fast);
+}
+._169q00b5:hover {
+  opacity: 0.8;
+}
+._169q00b6 {
+  color: var(--ardo-color-brand);
+  opacity: 0.85;
+  transition: transform var(--ardo-transition-base), opacity var(--ardo-transition-fast);
+}
+._169q00b5:hover ._169q00b6 {
+  transform: rotate(-8deg);
+  opacity: 1;
+}
+._169q00b7 {
+  grid-column: 1;
+  font-size: var(--ardo-fontSize-sm);
+  color: var(--ardo-color-textLighter);
+}
+._169q00b8 {
+  grid-column: 1;
+  font-size: var(--ardo-fontSize-sm);
+  color: var(--ardo-color-textLighter);
+}
+._169q00b9 {
+  grid-column: 2;
+  grid-row: 1 / span 3;
+  justify-self: end;
+  font-size: var(--ardo-fontSize-xs);
+  color: color-mix(in oklch, var(--ardo-color-accent) 65%, var(--ardo-color-textLighter));
+  font-family: var(--ardo-font-mono);
+  letter-spacing: 0.02em;
+  margin-top: 2px;
+  text-align: right;
+}
+._169q00ba {
+  margin-top: var(--ardo-space-2xl);
+}
+._169q00bb {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--ardo-space-lg);
+  font-size: var(--ardo-fontSize-sm);
+  color: var(--ardo-color-textLighter);
+}
+._169q00bc {
+  color: var(--ardo-color-accent);
+  text-decoration: none;
+  font-weight: 500;
+  transition: opacity var(--ardo-transition-fast);
+}
+._169q00bc:hover {
+  opacity: 0.8;
+}
+._169q00bd {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--ardo-space-md);
+  max-width: 80rem;
+}
+._169q00be {
+  display: flex;
+  flex-direction: column;
+  padding: var(--ardo-space-lg);
+  border: 1px solid var(--ardo-color-border);
+  border-radius: var(--ardo-radius-base);
+  text-decoration: none;
+  transition: all var(--ardo-transition-base);
+}
+._169q00be:hover {
+  border-color: var(--ardo-color-accent);
+  background: var(--ardo-color-bgSoft);
+}
+._169q00bg {
+  text-align: right;
+}
+._169q00bh {
+  font-size: var(--ardo-fontSize-xs);
+  font-weight: 500;
+  color: var(--ardo-color-textLighter);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: var(--ardo-space-xs);
+}
+._169q00bi {
+  font-weight: 600;
+  color: var(--ardo-color-brand);
+}
+@media (max-width: 768px) {
+  ._169q00b0 {
+    padding: var(--ardo-space-xl) var(--ardo-space-md);
+  }
+  ._169q00b1 {
+    grid-template-columns: 1fr;
+    gap: var(--ardo-space-xs);
+  }
+  ._169q00b9 {
+    grid-column: 1;
+    grid-row: auto;
+    justify-self: start;
+    text-align: left;
+  }
+}
+@media (max-width: 1024px) {
+  main > ._169q00b0 {
+    width: calc(100% + (var(--ardo-space-md) * 2));
+    margin-right: calc(var(--ardo-space-md) * -1);
+    margin-left: calc(var(--ardo-space-md) * -1);
+  }
+}
 .wxcdiv0 {
   position: relative;
   width: 100%;
@@ -9,7 +243,7 @@
   gap: var(--ardo-space-sm);
   min-height: 2.5rem;
   padding: var(--ardo-space-sm) 0.75rem;
-  background: var(--ardo-color-bgSoft);
+  background: var(--ardo-color-bg);
   border: 1px solid var(--ardo-color-border);
   border-radius: var(--ardo-radius-base);
   color: var(--ardo-color-textLighter);
@@ -20,6 +254,7 @@
 .wxcdiv0:focus-within .wxcdiv1 {
   border-color: var(--ardo-color-brand);
   color: var(--ardo-color-textLight);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ardo-color-brand) 12%, transparent);
 }
 .wxcdiv1:focus-within {
   outline: none;
@@ -79,11 +314,19 @@
   color: var(--ardo-color-textLighter);
 }
 .wxcdiv8 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ardo-space-sm);
   padding: var(--ardo-space-xl) var(--ardo-space-md);
   text-align: center;
   color: var(--ardo-color-textLighter);
 }
 .wxcdiv9 {
+  color: var(--ardo-color-textLighter);
+  opacity: 0.55;
+}
+.wxcdiva {
   display: flex;
   justify-content: center;
   gap: var(--ardo-space-lg);
@@ -93,14 +336,16 @@
   font-size: var(--ardo-fontSize-xs);
   color: var(--ardo-color-textLighter);
 }
-.wxcdiv9 kbd {
+.wxcdiva kbd {
   padding: 2px 6px;
   background: var(--ardo-color-bg);
   border: 1px solid var(--ardo-color-border);
   border-radius: var(--ardo-radius-sm);
   margin-right: 4px;
+  color: var(--ardo-color-accent);
+  font-family: var(--ardo-font-mono);
 }
-.wxcdiva {
+.wxcdivb {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -116,122 +361,23 @@
   border-radius: var(--ardo-radius-sm);
   transition: all var(--ardo-transition-fast);
 }
-.wxcdiva:hover {
+.wxcdivb:hover {
   background: var(--ardo-color-bgSoft);
   color: var(--ardo-color-text);
 }
-.wxcdivb {
+.wxcdivc {
   display: flex;
   gap: 3px;
   margin-left: var(--ardo-space-xs);
 }
-.wxcdivb kbd {
+.wxcdivc kbd {
   padding: 2px 6px;
   background: var(--ardo-color-bg);
   border: 1px solid var(--ardo-color-border);
   border-radius: var(--ardo-radius-sm);
   font-size: var(--ardo-fontSize-xs);
-  font-family: var(--ardo-font-family);
-}
-._169q00b0 {
-  max-width: 80rem;
-  padding: var(--ardo-space-2xl) 0;
-  text-align: left;
-  border-top: 1px solid var(--ardo-color-border);
-  margin-top: var(--ardo-space-2xl);
-}
-._169q00b2 {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  flex-wrap: wrap;
-  font-size: var(--ardo-fontSize-sm);
-  color: var(--ardo-color-textLight);
-  margin-bottom: var(--ardo-space-xs);
-}
-._169q00b3 {
-  display: inline-block;
-  width: var(--ardo-space-xs);
-  height: var(--ardo-space-xs);
-  border-radius: 50%;
-  background: var(--ardo-color-textLighter);
-  margin: 0 0.75rem;
-  vertical-align: middle;
-}
-._169q00b4 {
-  color: var(--ardo-color-brand);
-  text-decoration: none;
-  transition: opacity var(--ardo-transition-fast);
-}
-._169q00b4:hover {
-  opacity: 0.8;
-}
-._169q00b5 {
-  font-size: var(--ardo-fontSize-sm);
-  color: var(--ardo-color-textLighter);
-}
-._169q00b6 {
-  font-size: var(--ardo-fontSize-sm);
-  color: var(--ardo-color-textLighter);
-}
-._169q00b7 {
-  font-size: var(--ardo-fontSize-xs);
-  color: var(--ardo-color-textLighter);
-  margin-top: var(--ardo-space-xs);
-}
-._169q00b8 {
-  margin-top: var(--ardo-space-2xl);
-}
-._169q00b9 {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--ardo-space-lg);
-  font-size: var(--ardo-fontSize-sm);
-  color: var(--ardo-color-textLighter);
-}
-._169q00ba {
-  color: var(--ardo-color-brand);
-  text-decoration: none;
-  font-weight: 500;
-  transition: opacity var(--ardo-transition-fast);
-}
-._169q00ba:hover {
-  opacity: 0.8;
-}
-._169q00bb {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--ardo-space-md);
-  max-width: 80rem;
-}
-._169q00bc {
-  display: flex;
-  flex-direction: column;
-  padding: 1.25rem var(--ardo-space-lg);
-  border: 1px solid var(--ardo-color-border);
-  border-radius: var(--ardo-radius-lg);
-  text-decoration: none;
-  transition: all var(--ardo-transition-base);
-}
-._169q00bc:hover {
-  border-color: var(--ardo-color-brand);
-  background: var(--ardo-color-brandSubtle);
-}
-._169q00be {
-  text-align: right;
-}
-._169q00bf {
-  font-size: var(--ardo-fontSize-xs);
-  font-weight: 500;
-  color: var(--ardo-color-textLighter);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: var(--ardo-space-xs);
-}
-._169q00bg {
-  font-weight: 600;
-  color: var(--ardo-color-brand);
+  font-family: var(--ardo-font-mono);
+  color: var(--ardo-color-accent);
 }
 ._18g5iyz0 {
   display: flex;
@@ -262,27 +408,38 @@
   right: 0;
   height: calc(var(--ardo-layout-headerHeight) + env(safe-area-inset-top));
   padding-top: env(safe-area-inset-top);
-  background: var(--ardo-color-sidebarBg);
+  background: var(--ardo-color-bg);
+  border-bottom: 1px solid var(--ardo-color-border);
   z-index: 100;
+  box-shadow: 0 1px 0 oklch(0 0 0 / 0.02);
 }
 .qjc2r51 {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 100%;
+  height: var(--ardo-layout-headerHeight);
   padding: 0 var(--ardo-space-lg);
 }
 .qjc2r52 {
   display: flex;
   align-items: center;
-  gap: var(--ardo-space-lg);
+  gap: var(--ardo-space-md);
+  flex-shrink: 0;
 }
 .qjc2r53 {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  min-width: 0;
+  padding: 0 var(--ardo-space-lg);
+}
+.qjc2r54 {
   display: flex;
   align-items: center;
   gap: 0.75rem;
+  flex-shrink: 0;
 }
-.qjc2r54 {
+.qjc2r55 {
   display: flex;
   align-items: center;
   gap: var(--ardo-space-sm);
@@ -290,18 +447,18 @@
   color: var(--ardo-color-text);
   transition: opacity var(--ardo-transition-fast);
 }
-.qjc2r54:hover {
+.qjc2r55:hover {
   opacity: 0.8;
 }
-.qjc2r55 {
-  height: 2.25rem;
-}
 .qjc2r56 {
+  height: 2rem;
+}
+.qjc2r57 {
   font-size: var(--ardo-fontSize-lg);
   font-weight: 700;
   letter-spacing: -0.025em;
 }
-.qjc2r57 {
+.qjc2r58 {
   display: none;
   background: none;
   border: none;
@@ -310,15 +467,15 @@
   border-radius: var(--ardo-radius-sm);
   color: var(--ardo-color-text);
 }
-.qjc2r57:hover {
+.qjc2r58:hover {
   background: var(--ardo-color-bgSoft);
 }
-.qjc2r58 {
+.qjc2r59 {
   display: flex;
   flex-direction: column;
   gap: var(--ardo-space-xs);
 }
-.qjc2r58 span {
+.qjc2r59 span {
   display: block;
   width: 1.25rem;
   height: 2px;
@@ -326,44 +483,46 @@
   border-radius: 1px;
   transition: all var(--ardo-transition-fast);
 }
-.qjc2r59 {
+.qjc2r5a {
   display: flex;
   align-items: center;
 }
-.qjc2r5a {
+.qjc2r5b {
   position: fixed;
   inset: 0;
   z-index: 150;
   background: oklch(0 0 0 / 0.3);
   transition: opacity var(--ardo-transition-base);
 }
-.qjc2r5a[data-open="false"] {
+.qjc2r5b[data-open="false"] {
   opacity: 0;
   pointer-events: none;
 }
-.qjc2r5b {
+.qjc2r5c {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
-  width: min(20rem, 85vw);
+  width: min(22rem, 88vw);
   z-index: 151;
   background: var(--ardo-color-bg);
   overflow-y: auto;
   padding: var(--ardo-space-lg) var(--ardo-space-lg) var(--ardo-space-xl);
+  border-right: 1px solid var(--ardo-color-border);
+  box-shadow: var(--ardo-color-shadowLg);
   transform: translateX(0);
   transition: transform var(--ardo-transition-slow);
 }
-.qjc2r5b[data-open="false"] {
+.qjc2r5c[data-open="false"] {
   transform: translateX(-100%);
 }
-.qjc2r5c {
+.qjc2r5d {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--ardo-space-lg);
 }
-.qjc2r5d {
+.qjc2r5e {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -375,39 +534,52 @@
   color: var(--ardo-color-textLight);
   transition: all var(--ardo-transition-fast);
 }
-.qjc2r5d:hover {
+.qjc2r5e:hover {
   color: var(--ardo-color-text);
   background: var(--ardo-color-bgMute);
 }
-.qjc2r5e {
+.qjc2r5f {
   margin-bottom: var(--ardo-space-lg);
   padding-bottom: var(--ardo-space-md);
   border-bottom: 1px solid var(--ardo-color-border);
 }
-.qjc2r5e a {
+.qjc2r5f a {
   display: block;
   padding: var(--ardo-space-sm) 0;
   color: var(--ardo-color-textLight);
   text-decoration: none;
   font-size: var(--ardo-fontSize-sm);
 }
-.qjc2r5f > aside {
+.qjc2r5g > aside {
   display: block;
   width: 100%;
   padding: 0;
+  border-right: none;
 }
-.qjc2r5g {
+.qjc2r5g nav[aria-label="Documentation sections"] {
   display: none;
 }
 .qjc2r5h {
   display: none;
 }
+.qjc2r5i {
+  display: none;
+}
+@media (max-width: 640px) {
+  .qjc2r51 {
+    padding: 0 var(--ardo-space-md);
+  }
+}
 @media (max-width: 1024px) {
-  .qjc2r57 {
+  .qjc2r53 {
+    justify-content: flex-end;
+    padding: 0 var(--ardo-space-sm);
+  }
+  .qjc2r58 {
     display: flex;
     align-items: center;
   }
-  .qjc2r59 {
+  .qjc2r5a {
     display: none;
   }
 }
@@ -462,143 +634,160 @@
   color: var(--ardo-color-text);
   background: var(--ardo-color-bgSoft);
 }
-._8autjm0 {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background: var(--ardo-color-sidebarBg);
-  overflow: hidden;
-}
-._8autjm1 {
+._1057ydn0 {
+  width: var(--ardo-layout-sidebarWidth);
+  flex-shrink: 0;
   display: flex;
-  flex: 1;
-  padding-top: var(--ardo-layout-headerHeight);
   min-height: 0;
+  border-right: 1px solid var(--ardo-color-sidebarBorder);
+  background: transparent;
 }
-._8autjm2 {
-  flex: 1;
-  min-width: 0;
-  margin-right: var(--ardo-space-sm);
-  margin-bottom: var(--ardo-space-sm);
-  background: var(--ardo-color-bg);
-  border-radius: var(--ardo-radius-lg);
-  border: 1px solid var(--ardo-color-border);
-  overflow-y: auto;
-  scroll-padding-top: var(--ardo-space-xl);
-  padding: var(--ardo-space-xl);
+._1057ydn1 {
+  width: 4rem;
+  flex-shrink: 0;
+  padding: var(--ardo-space-md) 0;
+  border-right: 1px solid var(--ardo-color-sidebarBorder);
+  background: var(--ardo-color-bgSoft);
 }
-._8autjm3 {
-  height: auto;
-  min-height: 100vh;
-  overflow: visible;
+._1057ydn2 {
+  position: relative;
 }
-._8autjm4 {
-  padding-top: var(--ardo-layout-headerHeight);
+._1057ydn3 {
+  position: absolute;
+  left: calc(100% + 0.75rem);
+  top: 50%;
+  transform: translateY(-50%) translateX(-4px);
+  padding: 0.375rem 0.625rem;
+  background: var(--ardo-color-text);
+  color: var(--ardo-color-bg);
+  font-size: var(--ardo-fontSize-xs);
+  font-weight: 500;
+  border-radius: var(--ardo-radius-sm);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--ardo-transition-fast), transform var(--ardo-transition-fast);
+  z-index: 50;
+}
+._1057ydn2:hover ._1057ydn3 {
+  opacity: 1;
+  transform: translateY(-50%) translateX(0);
+  transition-delay: 200ms;
+}
+._1057ydn4 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ardo-space-xs);
+  list-style: none;
+}
+._1057ydn5 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  color: var(--ardo-color-textLight);
+  border-radius: var(--ardo-radius-base);
+  text-decoration: none;
+  transition: background var(--ardo-transition-fast), color var(--ardo-transition-fast), box-shadow var(--ardo-transition-fast);
 }
-._8autjm3 ._8autjm2 {
-  margin-left: 0;
-  padding: 0;
-  margin: 0;
-  border-radius: 0;
-  border: none;
+._1057ydn5:hover {
+  color: var(--ardo-color-text);
   background: var(--ardo-color-bg);
-  overflow: visible;
+  box-shadow: var(--ardo-color-shadowSm);
 }
-._8autjm5 {
+._1057ydn5.active {
+  color: var(--ardo-color-brand);
+  background: var(--ardo-color-brandSubtle);
+  box-shadow: inset 0 0 0 1px var(--ardo-color-borderLight);
+}
+._1057ydn5.active::before {
+  content: "";
   position: absolute;
-  top: -100%;
-  left: var(--ardo-space-md);
-  z-index: 200;
-  padding: 0.75rem var(--ardo-space-lg);
+  left: -0.75rem;
+  top: 0.75rem;
+  bottom: 0.75rem;
+  width: 2px;
+  border-radius: 999px;
   background: var(--ardo-color-brand);
-  color: white;
-  font-weight: 600;
-  font-size: var(--ardo-fontSize-sm);
-  text-decoration: none;
-  border-radius: var(--ardo-radius-base);
-  box-shadow: var(--ardo-color-shadowMd);
 }
-._8autjm5:focus {
-  top: var(--ardo-space-md);
-}
-@media (max-width: 1024px) {
-  ._8autjm2 {
-    margin-right: 0;
-    margin-bottom: 0;
-    border-radius: 0;
-    border: none;
-  }
-}
-._1057ydn0 {
-  width: var(--ardo-layout-sidebarWidth);
-  flex-shrink: 0;
+._1057ydn6 {
   display: flex;
   flex-direction: column;
-  padding: var(--ardo-space-md) var(--ardo-space-md) var(--ardo-space-md) 1.25rem;
-  background: transparent;
+  min-width: 0;
+  flex: 1;
+  padding: var(--ardo-space-md) var(--ardo-space-md) var(--ardo-space-md) 1.125rem;
 }
-._1057ydn1 {
+._1057ydn7 {
   flex-shrink: 0;
-  margin-bottom: var(--ardo-space-md);
+  margin-bottom: var(--ardo-space-lg);
   position: relative;
 }
-._1057ydn2 {
+._1057ydn8 {
   flex: 1;
   overflow-y: auto;
   min-height: 0;
 }
-._1057ydn3 {
+._1057ydn9 {
   list-style: none;
 }
-._1057ydn5 {
+._1057ydnb {
   margin-left: 0.75rem;
   margin-top: 2px;
 }
-._1057ydn7 {
+._1057ydnd:not(:first-child) {
+  margin-top: var(--ardo-space-lg);
+}
+._1057ydne {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-._1057ydn8 {
+._1057ydnf {
   display: block;
-  padding: 0.25rem 0.75rem;
+  padding: 0.375rem 0.75rem;
   color: var(--ardo-color-textLight);
   text-decoration: none;
   font-size: var(--ardo-fontSize-sm);
   font-weight: 400;
-  border-radius: var(--ardo-radius-base);
+  border-left: 2px solid transparent;
+  border-radius: 0 var(--ardo-radius-base) var(--ardo-radius-base) 0;
   transition: all var(--ardo-transition-fast);
 }
-._1057ydn8:hover {
+._1057ydnf:hover {
   color: var(--ardo-color-text);
+  background: var(--ardo-color-bgSoft);
 }
-._1057ydn8.active {
+._1057ydnf.active {
   color: var(--ardo-color-brand);
   background: var(--ardo-color-brandSubtle);
+  border-left-color: var(--ardo-color-brand);
   font-weight: 500;
 }
-._1057ydn9 {
+._1057ydng {
   display: flex;
   align-items: center;
   gap: var(--ardo-space-sm);
-  padding: 0.375rem 0;
-  margin-top: var(--ardo-space-lg);
-  color: var(--ardo-color-text);
+  padding: 0.5rem 0.75rem 0.375rem;
+  color: var(--ardo-color-textLight);
   text-decoration: none;
   font-weight: 600;
   font-size: var(--ardo-fontSize-sm);
+  letter-spacing: -0.005em;
   transition: all var(--ardo-transition-fast);
 }
-._1057ydn9:hover {
+._1057ydng:hover {
   color: var(--ardo-color-text);
 }
-._1057ydn9.active {
+._1057ydng.active {
   color: var(--ardo-color-brand);
 }
-li:first-child > div > ._1057ydn9 {
-  margin-top: 0;
+._1057ydng.child-active {
+  color: var(--ardo-color-text);
 }
-._1057ydna {
+._1057ydnh {
   width: 100%;
   background: none;
   border: none;
@@ -609,7 +798,7 @@ li:first-child > div > ._1057ydn9 {
   text-align: left;
   cursor: pointer;
 }
-._1057ydnb {
+._1057ydni {
   display: flex;
   align-items: center;
   align-self: center;
@@ -621,21 +810,21 @@ li:first-child > div > ._1057ydn9 {
   border-radius: 50%;
   transition: all var(--ardo-transition-base);
 }
-._1057ydnb:hover {
+._1057ydni:hover {
   color: var(--ardo-color-text);
 }
-._1057ydnb.collapsed {
+._1057ydni.collapsed {
   transform: rotate(-90deg);
 }
-._1057ydnc {
+._1057ydnj {
   display: grid;
   grid-template-rows: 1fr;
   transition: grid-template-rows var(--ardo-transition-slow);
 }
-._1057ydnc[data-collapsed="true"] {
+._1057ydnj[data-collapsed="true"] {
   grid-template-rows: 0fr;
 }
-._1057ydnd {
+._1057ydnk {
   overflow: hidden;
   min-height: 0;
 }
@@ -644,27 +833,56 @@ li:first-child > div > ._1057ydn9 {
     display: none;
   }
 }
+._1flm2ul1 {
+  position: absolute;
+  top: var(--ardo-space-sm);
+  right: var(--ardo-space-sm);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  background: var(--ardo-color-bg);
+  border: 1px solid var(--ardo-color-codeBorder);
+  border-radius: var(--ardo-radius-sm);
+  cursor: pointer;
+  font-size: 12px;
+  font-family: var(--ardo-font-family);
+  color: var(--ardo-color-textLight);
+  opacity: 0;
+  transition: opacity var(--ardo-transition-base), border-color var(--ardo-transition-fast), color var(--ardo-transition-fast);
+}
+._1flm2ul1:hover, ._1flm2ul1:focus-visible {
+  opacity: 1;
+  border-color: var(--ardo-color-brand);
+  color: var(--ardo-color-brand);
+}
 ._1l68ra30 {
-  margin: var(--ardo-space-md) 0;
+  margin: var(--ardo-space-lg) 0;
   max-width: 120ch;
   border-radius: var(--ardo-radius-base);
   overflow: hidden;
-  background: var(--ardo-color-bgSoft);
+  background: var(--ardo-color-codeBg);
+  border: 1px solid var(--ardo-color-codeBorder);
+  box-shadow: var(--ardo-color-codeShadow);
 }
 ._1l68ra31 {
   padding: var(--ardo-space-sm) var(--ardo-space-md);
   font-size: var(--ardo-fontSize-xs);
   font-weight: 500;
   font-family: var(--ardo-font-mono);
-  color: var(--ardo-color-textLighter);
-  border-bottom: 1px solid var(--ardo-color-borderLight);
+  color: var(--ardo-color-textLight);
+  background: color-mix(in oklch, var(--ardo-color-accentSubtle) 50%, var(--ardo-color-bgSoft));
+  border-bottom: 1px solid var(--ardo-color-codeBorder);
 }
 ._1l68ra32 {
   position: relative;
 }
+._1l68ra32:hover ._1flm2ul1, ._1l68ra32:focus-within ._1flm2ul1 {
+  opacity: 1;
+}
 ._1l68ra32 pre {
   margin: 0;
-  padding: var(--ardo-space-md);
+  padding: var(--ardo-space-lg) var(--ardo-space-md);
   overflow-x: auto;
   font-family: var(--ardo-font-mono);
   font-size: var(--ardo-fontSize-sm);
@@ -689,7 +907,7 @@ li:first-child > div > ._1057ydn9 {
   border-left: 3px solid transparent;
 }
 ._1l68ra33.highlighted {
-  background: oklch(0.48 0.15 170 / 0.08);
+  background: color-mix(in oklch, var(--ardo-color-brand) 11%, transparent);
   border-left-color: var(--ardo-color-brand);
 }
 ._1l68ra34 {
@@ -708,15 +926,25 @@ li:first-child > div > ._1057ydn9 {
   font-size: var(--ardo-fontSize-xs);
   font-weight: 500;
   font-family: var(--ardo-font-mono);
-  color: var(--ardo-color-textLighter);
-  border-bottom: 1px solid var(--ardo-color-borderLight);
+  color: var(--ardo-color-textLight);
+  background: color-mix(in oklch, var(--ardo-color-accentSubtle) 50%, var(--ardo-color-bgSoft));
+  border-bottom: 1px solid var(--ardo-color-codeBorder);
+}
+.ardo-shiki {
+  margin: var(--ardo-space-lg) 0;
+  max-width: 120ch;
+  border-radius: var(--ardo-radius-base);
+  overflow: hidden;
+  background: var(--ardo-color-codeBg);
+  border: 1px solid var(--ardo-color-codeBorder);
+  box-shadow: var(--ardo-color-codeShadow);
 }
 .ardo-shiki > [data-lang] {
   position: relative;
 }
 .ardo-shiki pre {
   margin: 0;
-  padding: var(--ardo-space-md);
+  padding: var(--ardo-space-lg) var(--ardo-space-md);
   overflow-x: auto;
   font-family: var(--ardo-font-mono);
   font-size: var(--ardo-fontSize-sm);
@@ -739,7 +967,7 @@ li:first-child > div > ._1057ydn9 {
   border-left: 3px solid transparent;
 }
 .ardo-shiki .line.highlighted {
-  background: oklch(0.48 0.15 170 / 0.08);
+  background: color-mix(in oklch, var(--ardo-color-brand) 11%, transparent);
   border-left-color: var(--ardo-color-brand);
 }
 .ardo-shiki .line[data-ln]::before {
@@ -763,20 +991,19 @@ li:first-child > div > ._1057ydn9 {
   gap: var(--ardo-space-xs);
   padding: var(--ardo-space-xs) var(--ardo-space-sm);
   background: var(--ardo-color-bg);
-  border: 1px solid var(--ardo-color-border);
+  border: 1px solid var(--ardo-color-codeBorder);
   border-radius: var(--ardo-radius-sm);
   cursor: pointer;
   font-size: var(--ardo-fontSize-xs);
   font-family: var(--ardo-font-family);
   color: var(--ardo-color-textLight);
   opacity: 0;
-  transition: all var(--ardo-transition-base);
+  transition: opacity var(--ardo-transition-base), border-color var(--ardo-transition-fast), color var(--ardo-transition-fast);
 }
-.ardo-shiki:hover button[data-code] {
+.ardo-shiki:hover button[data-code], .ardo-shiki:focus-within button[data-code] {
   opacity: 1;
 }
-.ardo-shiki button[data-code]:hover {
-  opacity: 1;
+.ardo-shiki button[data-code]:hover, .ardo-shiki button[data-code]:focus-visible {
   border-color: var(--ardo-color-brand);
   color: var(--ardo-color-brand);
 }
@@ -790,15 +1017,18 @@ li:first-child > div > ._1057ydn9 {
   color: var(--shiki-dark);
 }
 ._1l68ra35 {
-  margin: var(--ardo-space-md) 0;
+  margin: var(--ardo-space-lg) 0;
   max-width: 120ch;
   border-radius: var(--ardo-radius-base);
   overflow: hidden;
-  background: var(--ardo-color-bgSoft);
+  background: var(--ardo-color-codeBg);
+  border: 1px solid var(--ardo-color-codeBorder);
+  box-shadow: var(--ardo-color-codeShadow);
 }
 ._1l68ra36 {
   display: flex;
-  border-bottom: 1px solid var(--ardo-color-borderLight);
+  background: var(--ardo-color-bgSoft);
+  border-bottom: 1px solid var(--ardo-color-codeBorder);
 }
 ._1l68ra37 {
   padding: var(--ardo-space-sm) var(--ardo-space-md);
@@ -816,8 +1046,8 @@ li:first-child > div > ._1057ydn9 {
   color: var(--ardo-color-text);
 }
 ._1l68ra37.active {
-  color: var(--ardo-color-brand);
-  border-bottom-color: var(--ardo-color-brand);
+  color: var(--ardo-color-accent);
+  border-bottom-color: var(--ardo-color-accent);
 }
 ._1l68ra39 ._1l68ra30 {
   margin: 0;
@@ -826,30 +1056,6 @@ li:first-child > div > ._1057ydn9 {
   box-shadow: none;
   background: transparent;
 }
-._1flm2ul1 {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-  background: var(--ardo-color-bg);
-  border: 1px solid var(--ardo-color-border);
-  border-radius: var(--ardo-radius-sm);
-  cursor: pointer;
-  font-size: 12px;
-  font-family: var(--ardo-font-family);
-  color: var(--ardo-color-textLight);
-  opacity: 0.6;
-  transition: all var(--ardo-transition-base);
-}
-._1flm2ul1:hover {
-  opacity: 1;
-  background: var(--ardo-color-bgSoft);
-  border-color: var(--ardo-color-brand);
-  color: var(--ardo-color-brand);
-}
 ._1l7ew7r0 {
   display: flex;
   align-items: flex-start;
@@ -954,12 +1160,14 @@ li:first-child > div > ._1057ydn9 {
   font-weight: 700;
   letter-spacing: -0.02em;
   margin-bottom: 12px;
+  text-wrap: balance;
 }
 ._15qe9bp3 {
   font-size: 18px;
   color: var(--ardo-color-textLight);
   max-width: 560px;
   margin: 0 auto;
+  text-wrap: pretty;
 }
 ._15qe9bp4 {
   display: grid;
@@ -978,8 +1186,8 @@ li:first-child > div > ._1057ydn9 {
   animation: _1fj68r90 0.5s ease both;
 }
 ._15qe9bp5:hover {
-  border-color: oklch(0.48 0.15 170 / 0.4);
-  box-shadow: var(--ardo-color-shadowMd), 0 0 0 1px oklch(0.48 0.15 170 / 0.1);
+  border-color: color-mix(in oklch, var(--ardo-color-brand) 38%, var(--ardo-color-border));
+  box-shadow: var(--ardo-color-shadowMd), 0 0 0 1px color-mix(in oklch, var(--ardo-color-brand) 12%, transparent);
 }
 ._15qe9bp4 ._15qe9bp5:nth-child(1) {
   animation-delay: 0ms;
@@ -1007,7 +1215,7 @@ li:first-child > div > ._1057ydn9 {
   height: 48px;
   margin-bottom: 16px;
   background: var(--ardo-color-brandSubtle);
-  border: 1px solid oklch(0.48 0.15 170 / 0.12);
+  border: 1px solid color-mix(in oklch, var(--ardo-color-brand) 16%, var(--ardo-color-border));
   border-radius: 50%;
   color: var(--ardo-color-brand);
   transition: all var(--ardo-transition-base);
@@ -1022,12 +1230,14 @@ li:first-child > div > ._1057ydn9 {
   font-weight: 600;
   margin-bottom: 10px;
   letter-spacing: -0.01em;
+  text-wrap: balance;
 }
 ._15qe9bp8 {
   font-size: 14px;
   color: var(--ardo-color-textLight);
   line-height: 1.6;
   margin-bottom: 12px;
+  text-wrap: pretty;
 }
 ._15qe9bp9 {
   font-size: 14px;
@@ -1082,11 +1292,11 @@ li:first-child > div > ._1057ydn9 {
   left: 0;
   right: 0;
   bottom: 0;
-  background: radial-gradient(ellipse 60% 50% at 30% 0%, oklch(0.48 0.15 200 / 0.06) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 70% -10%, oklch(0.48 0.15 170 / 0.12) 0%, transparent 70%), linear-gradient(180deg, var(--ardo-color-bg) 0%, var(--ardo-color-bgSoft) 100%);
+  background: radial-gradient(ellipse 60% 50% at 30% 0%, color-mix(in oklch, var(--ardo-color-brand) 6%, transparent) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 70% -10%, color-mix(in oklch, var(--ardo-color-brand) 10%, transparent) 0%, transparent 70%), linear-gradient(180deg, var(--ardo-color-bg) 0%, var(--ardo-color-bgSoft) 100%);
   pointer-events: none;
 }
 .dark .j780910::before {
-  background: radial-gradient(ellipse 60% 50% at 30% 0%, oklch(0.65 0.16 200 / 0.1) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 70% -10%, oklch(0.65 0.16 170 / 0.2) 0%, transparent 70%), linear-gradient(180deg, var(--ardo-color-bg) 0%, var(--ardo-color-bgSoft) 100%);
+  background: radial-gradient(ellipse 60% 50% at 30% 0%, color-mix(in oklch, var(--ardo-color-brand) 12%, transparent) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 70% -10%, color-mix(in oklch, var(--ardo-color-brand) 18%, transparent) 0%, transparent 70%), linear-gradient(180deg, var(--ardo-color-bg) 0%, var(--ardo-color-bgSoft) 100%);
 }
 .j780911 {
   max-width: 800px;
@@ -1100,7 +1310,7 @@ li:first-child > div > ._1057ydn9 {
 .j780910 img {
   max-width: 180px;
   margin-bottom: 40px;
-  filter: drop-shadow(0 4px 20px oklch(0.48 0.15 170 / 0.15));
+  filter: drop-shadow(0 4px 18px oklch(0 0 0 / 0.12));
 }
 .j780913 {
   display: inline-block;
@@ -1109,7 +1319,7 @@ li:first-child > div > ._1057ydn9 {
   font-weight: 600;
   color: var(--ardo-color-brand);
   background: var(--ardo-color-brandSubtle);
-  border: 1px solid oklch(0.48 0.15 170 / 0.15);
+  border: 1px solid color-mix(in oklch, var(--ardo-color-brand) 20%, var(--ardo-color-border));
   border-radius: 999px;
   margin-bottom: 16px;
   letter-spacing: 0.02em;
@@ -1123,6 +1333,7 @@ li:first-child > div > ._1057ydn9 {
   background-clip: text;
   letter-spacing: -0.03em;
   line-height: 1.1;
+  text-wrap: balance;
 }
 .j780915 {
   font-size: 48px;
@@ -1130,6 +1341,7 @@ li:first-child > div > ._1057ydn9 {
   margin-top: 8px;
   letter-spacing: -0.02em;
   line-height: 1.15;
+  text-wrap: balance;
 }
 .j780916 {
   font-size: 18px;
@@ -1139,6 +1351,7 @@ li:first-child > div > ._1057ydn9 {
   margin-left: auto;
   margin-right: auto;
   line-height: 1.65;
+  text-wrap: pretty;
 }
 .j780917 {
   display: flex;
@@ -1161,11 +1374,11 @@ li:first-child > div > ._1057ydn9 {
 .j780919 {
   background: var(--ardo-color-brand);
   color: white;
-  box-shadow: 0 4px 14px oklch(0.48 0.15 170 / 0.3);
+  box-shadow: 0 4px 14px color-mix(in oklch, var(--ardo-color-brand) 26%, transparent);
 }
 .j780919:hover {
   background: var(--ardo-color-brandDark);
-  box-shadow: 0 6px 20px oklch(0.48 0.15 170 / 0.4);
+  box-shadow: 0 6px 20px color-mix(in oklch, var(--ardo-color-brand) 36%, transparent);
 }
 .j78091a {
   background: var(--ardo-color-bg);
@@ -1295,10 +1508,12 @@ li:first-child > div > ._1057ydn9 {
 .jmxrtm0 h1, .jmxrtm0 h2, .jmxrtm0 h3, .jmxrtm0 h4, .jmxrtm0 h5, .jmxrtm0 h6 {
   font-family: var(--ardo-font-familyHeading);
   font-weight: 600;
-  line-height: 1.3;
-  margin-top: var(--ardo-space-xl);
-  margin-bottom: var(--ardo-space-sm);
-  letter-spacing: -0.02em;
+  line-height: 1.22;
+  margin-top: var(--ardo-space-2xl);
+  margin-bottom: var(--ardo-space-md);
+  letter-spacing: -0.01em;
+  max-width: var(--ardo-layout-contentMaxWidth);
+  text-wrap: balance;
 }
 .jmxrtm0 h1 {
   font-size: var(--ardo-fontSize-2xl);
@@ -1306,12 +1521,11 @@ li:first-child > div > ._1057ydn9 {
   margin-top: var(--ardo-space-2xl);
 }
 .jmxrtm0 h2 {
-  font-size: var(--ardo-fontSize-xl);
-  padding-top: var(--ardo-space-sm);
-  letter-spacing: -0.015em;
+  font-size: 1.375rem;
+  padding-top: var(--ardo-space-md);
 }
 .jmxrtm0 h3 {
-  font-size: var(--ardo-fontSize-base);
+  font-size: var(--ardo-fontSize-lg);
   font-weight: 600;
 }
 .jmxrtm0 h4 {
@@ -1319,27 +1533,35 @@ li:first-child > div > ._1057ydn9 {
   font-weight: 600;
 }
 .jmxrtm0 p {
-  margin-bottom: var(--ardo-space-md);
-  max-width: 68ch;
+  margin-bottom: var(--ardo-space-lg);
+  max-width: var(--ardo-layout-contentMaxWidth);
+  font-size: var(--ardo-fontSize-base);
+  line-height: var(--ardo-font-lineHeight);
+  overflow-wrap: break-word;
+  text-wrap: pretty;
 }
 .jmxrtm0 a {
   color: var(--ardo-color-brand);
   text-decoration: underline;
-  text-decoration-color: transparent;
+  text-decoration-color: color-mix(in oklch, var(--ardo-color-brand) 35%, transparent);
   text-decoration-thickness: 1px;
-  text-underline-offset: 2px;
+  text-underline-offset: 3px;
   transition: text-decoration-color var(--ardo-transition-fast);
 }
 .jmxrtm0 a:hover {
   text-decoration-color: var(--ardo-color-brand);
 }
 .jmxrtm0 ul, .jmxrtm0 ol {
-  margin-bottom: var(--ardo-space-md);
+  margin-bottom: var(--ardo-space-lg);
   padding-left: var(--ardo-space-lg);
-  max-width: 68ch;
+  max-width: var(--ardo-layout-contentMaxWidth);
+  text-wrap: pretty;
 }
 .jmxrtm0 li {
   margin-bottom: var(--ardo-space-xs);
+  line-height: var(--ardo-font-lineHeight);
+  overflow-wrap: break-word;
+  text-wrap: pretty;
 }
 .jmxrtm0 li::marker {
   color: var(--ardo-color-textLighter);
@@ -1348,10 +1570,11 @@ li:first-child > div > ._1057ydn9 {
   margin: var(--ardo-space-lg) 0;
   padding: var(--ardo-space-md) var(--ardo-space-lg);
   border-left: 3px solid var(--ardo-color-brand);
-  background: var(--ardo-color-bgSoft);
+  background: var(--ardo-color-brandSubtle);
   border-radius: 0 var(--ardo-radius-base) var(--ardo-radius-base) 0;
   color: var(--ardo-color-text);
   font-size: var(--ardo-fontSize-base);
+  max-width: var(--ardo-layout-contentMaxWidth);
 }
 .jmxrtm0 hr {
   margin: var(--ardo-space-xl) 0;
@@ -1359,13 +1582,28 @@ li:first-child > div > ._1057ydn9 {
   border-top: 1px solid var(--ardo-color-border);
 }
 .jmxrtm0 table {
+  display: block;
   width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
   margin: var(--ardo-space-lg) 0;
   border-collapse: collapse;
   font-size: var(--ardo-fontSize-sm);
   border-radius: var(--ardo-radius-base);
-  overflow: hidden;
   border: 1px solid var(--ardo-color-border);
+  background: var(--ardo-color-bg);
+}
+.jmxrtm0 tbody, .jmxrtm0 thead {
+  width: 100%;
+}
+.jmxrtm0 tr {
+  display: table-row;
+}
+.jmxrtm0 thead {
+  display: table-header-group;
+}
+.jmxrtm0 tbody {
+  display: table-row-group;
 }
 .jmxrtm0 th, .jmxrtm0 td {
   padding: var(--ardo-space-sm) var(--ardo-space-md);
@@ -1388,7 +1626,8 @@ li:first-child > div > ._1057ydn9 {
   font-family: var(--ardo-font-mono);
   font-size: 0.875em;
   padding: 0.125rem 0.375rem;
-  background: var(--ardo-color-bgMute);
+  background: var(--ardo-color-bgSoft);
+  border: 1px solid var(--ardo-color-borderLight);
   border-radius: var(--ardo-radius-sm);
   font-weight: 500;
 }
@@ -1399,63 +1638,139 @@ li:first-child > div > ._1057ydn9 {
   font-weight: 400;
 }
 ._1f1m4jr0 {
-  display: flex;
+  display: grid;
   flex: 1;
   min-width: 0;
-  gap: var(--ardo-space-3xl);
-  max-width: 80rem;
+  width: 100%;
+  grid-template-columns: minmax(0, 72rem) var(--ardo-layout-tocWidth);
+  justify-content: start;
+  gap: clamp(2rem, 4vw, 4rem);
+  max-width: 100rem;
+  margin: 0 auto;
+  padding-top: var(--ardo-space-2xl);
 }
 ._1f1m4jr1 {
-  flex: 1;
   min-width: 0;
-  max-width: none;
+  width: 100%;
+  max-width: 100%;
 }
 ._1f1m4jr2 {
-  margin-bottom: var(--ardo-space-lg);
-  padding-bottom: var(--ardo-space-md);
-  border-bottom: 1px solid var(--ardo-color-border);
+  margin-bottom: var(--ardo-space-xl);
+  padding-bottom: var(--ardo-space-sm);
 }
 ._1f1m4jr3 {
-  font-size: var(--ardo-fontSize-2xl);
+  font-size: clamp(2rem, 4vw, 3.15rem);
   font-family: var(--ardo-font-familyHeading);
   font-weight: 700;
-  line-height: 1.2;
-  letter-spacing: -0.025em;
-  margin-bottom: var(--ardo-space-xs);
+  line-height: 1.08;
+  letter-spacing: -0.01em;
+  margin-bottom: var(--ardo-space-sm);
+  overflow-wrap: break-word;
+  text-wrap: balance;
 }
 ._1f1m4jr4 {
-  font-size: var(--ardo-fontSize-base);
+  font-size: var(--ardo-fontSize-lg);
   color: var(--ardo-color-textLight);
-  line-height: 1.6;
-  max-width: 60ch;
+  line-height: 1.65;
+  max-width: var(--ardo-layout-contentMaxWidth);
+  overflow-wrap: break-word;
+  text-wrap: pretty;
 }
 ._1f1m4jr5 {
-  line-height: 1.6;
+  line-height: var(--ardo-font-lineHeight);
+  overflow-wrap: break-word;
 }
-._16vvfx80 {
+._1f1m4jr6 {
   width: var(--ardo-layout-tocWidth);
-  flex-shrink: 0;
   position: sticky;
-  top: 0;
-  align-self: flex-start;
-  max-height: 100%;
-  padding: var(--ardo-space-xl) 0;
+  top: var(--ardo-space-xl);
+  align-self: start;
+  max-height: calc(100vh - var(--ardo-layout-headerHeight) - var(--ardo-space-2xl));
+  padding: var(--ardo-space-xs) 0 var(--ardo-space-lg);
   overflow-y: auto;
 }
-._16vvfx81 {
+._1f1m4jr7 {
+  padding: var(--ardo-space-md) 0;
+}
+._1f1m4jr7:first-child {
+  padding-top: 0;
+}
+._1f1m4jr7:not(:last-child) {
+  border-bottom: 1px solid var(--ardo-color-borderLight);
+}
+._1f1m4jr8 {
   font-size: var(--ardo-fontSize-xs);
-  font-weight: 700;
+  font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.08em;
+  color: var(--ardo-color-textLighter);
+  margin-bottom: var(--ardo-space-sm);
+}
+._1f1m4jr9 {
+  font-size: var(--ardo-fontSize-sm);
+  line-height: 1.5;
   color: var(--ardo-color-textLight);
-  margin-bottom: var(--ardo-space-md);
+}
+._1f1m4jra {
+  display: inline-flex;
+  align-items: center;
+  color: var(--ardo-color-text);
+  text-decoration: none;
+  font-size: var(--ardo-fontSize-sm);
+  font-weight: 500;
+  transition: color var(--ardo-transition-fast);
+}
+._1f1m4jra:hover {
+  color: var(--ardo-color-accent);
+}
+._1f1m4jrb {
+  width: 100%;
+  min-height: 2.5rem;
+  padding: 0 var(--ardo-space-sm);
+  border: 1px solid var(--ardo-color-border);
+  border-radius: var(--ardo-radius-base);
+  background: var(--ardo-color-bg);
+  color: var(--ardo-color-text);
+  font: inherit;
+  font-size: var(--ardo-fontSize-sm);
+}
+@media (min-width: 1536px) {
+  ._1f1m4jr0 {
+    grid-template-columns: minmax(0, 78rem) var(--ardo-layout-tocWidth);
+  }
+}
+@media (max-width: 1280px) {
+  ._1f1m4jr0 {
+    grid-template-columns: minmax(0, 1fr);
+    max-width: min(100%, 72rem);
+    justify-content: center;
+  }
+  ._1f1m4jr6 {
+    display: none;
+  }
+}
+@media (max-width: 1024px) {
+  ._1f1m4jr0 {
+    padding-top: var(--ardo-space-xl);
+  }
+}
+._16vvfx80 {
+  width: 100%;
+}
+._16vvfx81 {
+  font-size: var(--ardo-fontSize-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ardo-color-textLighter);
+  margin-bottom: var(--ardo-space-sm);
 }
 ._16vvfx82 {
   list-style: none;
 }
 ._16vvfx83 {
   display: block;
-  padding: var(--ardo-space-xs) 0 var(--ardo-space-xs) var(--ardo-space-md);
+  padding: var(--ardo-space-xs) 0 var(--ardo-space-xs) var(--ardo-space-sm);
   color: var(--ardo-color-textLighter);
   text-decoration: none;
   font-size: var(--ardo-fontSize-sm);
@@ -1466,11 +1781,11 @@ li:first-child > div > ._1057ydn9 {
 }
 ._16vvfx83:hover {
   color: var(--ardo-color-text);
-  border-left-color: var(--ardo-color-borderLight);
+  border-left-color: var(--ardo-color-border);
 }
 ._16vvfx83.active {
-  color: var(--ardo-color-brand);
-  border-left-color: var(--ardo-color-brand);
+  color: var(--ardo-color-accent);
+  border-left-color: var(--ardo-color-accent);
   font-weight: 500;
 }
 ._16vvfx84 {
@@ -1479,11 +1794,6 @@ li:first-child > div > ._1057ydn9 {
 ._16vvfx85 {
   padding-left: 2.5rem;
 }
-@media (max-width: 1280px) {
-  ._16vvfx80 {
-    display: none;
-  }
-}
 .zakc1e0 {
   margin: var(--ardo-space-xl) 0;
   padding-bottom: var(--ardo-space-xl);
@@ -1703,29 +2013,33 @@ li:first-child > div > ._1057ydn9 {
   margin: var(--ardo-space-md) 0;
 }
 :root {
-  --ardo-color-brand: oklch(0.48 0.15 170);
-  --ardo-color-brandLight: oklch(0.6 0.15 170);
-  --ardo-color-brandDark: oklch(0.4 0.17 170);
-  --ardo-color-brandSubtle: oklch(0.96 0.02 170);
-  --ardo-color-brandGradient: linear-gradient(135deg, oklch(0.48 0.15 170) 0%, oklch(0.56 0.13 200) 100%);
-  --ardo-color-bg: #ffffff;
-  --ardo-color-bgSoft: oklch(0.98 0.003 170);
-  --ardo-color-bgMute: oklch(0.96 0.005 170);
-  --ardo-color-bgAlt: oklch(0.94 0.006 170);
-  --ardo-color-text: oklch(0.18 0.01 170);
-  --ardo-color-textLight: oklch(0.42 0.008 170);
-  --ardo-color-textLighter: oklch(0.56 0.005 170);
-  --ardo-color-border: oklch(0.9 0.005 170);
-  --ardo-color-borderLight: oklch(0.94 0.003 170);
-  --ardo-color-divider: oklch(0.9 0.005 170);
-  --ardo-color-sidebarBg: oklch(0.975 0.005 170);
-  --ardo-color-sidebarBorder: oklch(0.93 0.008 170);
-  --ardo-color-codeBg: oklch(0.98 0.002 170);
-  --ardo-color-codeBorder: oklch(0.92 0.005 170);
-  --ardo-color-codeShadow: 0 1px 3px oklch(0 0 0 / 0.03);
-  --ardo-color-shadowSm: 0 1px 2px oklch(0 0 0 / 0.04), 0 1px 3px oklch(0 0 0 / 0.06);
-  --ardo-color-shadowMd: 0 4px 6px oklch(0 0 0 / 0.04), 0 2px 4px oklch(0 0 0 / 0.03);
-  --ardo-color-shadowLg: 0 10px 25px oklch(0 0 0 / 0.06), 0 4px 10px oklch(0 0 0 / 0.04);
+  --ardo-color-brand: oklch(0.5 0.1 356);
+  --ardo-color-brandLight: oklch(0.62 0.09 356);
+  --ardo-color-brandDark: oklch(0.39 0.11 356);
+  --ardo-color-brandSubtle: oklch(0.955 0.025 356);
+  --ardo-color-brandGradient: linear-gradient(135deg, oklch(0.5 0.1 356) 0%, oklch(0.6 0.075 372) 100%);
+  --ardo-color-accent: oklch(0.5 0.075 230);
+  --ardo-color-accentLight: oklch(0.62 0.07 230);
+  --ardo-color-accentDark: oklch(0.38 0.085 230);
+  --ardo-color-accentSubtle: oklch(0.963 0.012 230);
+  --ardo-color-bg: oklch(0.992 0.0015 356);
+  --ardo-color-bgSoft: oklch(0.975 0.003 356);
+  --ardo-color-bgMute: oklch(0.955 0.004 356);
+  --ardo-color-bgAlt: oklch(0.935 0.005 356);
+  --ardo-color-text: oklch(0.17 0.008 356);
+  --ardo-color-textLight: oklch(0.4 0.007 356);
+  --ardo-color-textLighter: oklch(0.56 0.005 356);
+  --ardo-color-border: oklch(0.88 0.005 356);
+  --ardo-color-borderLight: oklch(0.925 0.003 356);
+  --ardo-color-divider: oklch(0.89 0.004 356);
+  --ardo-color-sidebarBg: oklch(0.965 0.004 356);
+  --ardo-color-sidebarBorder: oklch(0.885 0.005 356);
+  --ardo-color-codeBg: oklch(0.965 0.012 230);
+  --ardo-color-codeBorder: oklch(0.88 0.016 230);
+  --ardo-color-codeShadow: 0 1px 2px oklch(0 0 0 / 0.025);
+  --ardo-color-shadowSm: 0 1px 2px oklch(0 0 0 / 0.035), 0 1px 3px oklch(0 0 0 / 0.045);
+  --ardo-color-shadowMd: 0 8px 18px oklch(0 0 0 / 0.045), 0 2px 6px oklch(0 0 0 / 0.035);
+  --ardo-color-shadowLg: 0 18px 42px oklch(0 0 0 / 0.075), 0 6px 18px oklch(0 0 0 / 0.045);
   --ardo-color-tip: oklch(0.5 0.15 155);
   --ardo-color-tipBg: oklch(0.97 0.025 155);
   --ardo-color-tipBorder: oklch(0.85 0.08 155);
@@ -1756,10 +2070,10 @@ li:first-child > div > ._1057ydn9 {
   --ardo-color-badgePink: oklch(0.5 0.14 350);
   --ardo-color-badgePinkBg: oklch(0.97 0.02 350);
   --ardo-color-badgePinkBorder: oklch(0.88 0.06 350);
-  --ardo-layout-sidebarWidth: 17rem;
-  --ardo-layout-tocWidth: 16rem;
-  --ardo-layout-contentMaxWidth: 48rem;
-  --ardo-layout-headerHeight: 4rem;
+  --ardo-layout-sidebarWidth: 20rem;
+  --ardo-layout-tocWidth: 15rem;
+  --ardo-layout-contentMaxWidth: 68ch;
+  --ardo-layout-headerHeight: 3.5rem;
   --ardo-transition-fast: 0.12s ease-out;
   --ardo-transition-base: 0.2s ease-out;
   --ardo-transition-slow: 0.35s ease-out;
@@ -1767,7 +2081,7 @@ li:first-child > div > ._1057ydn9 {
   --ardo-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
   --ardo-font-familyHeading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --ardo-font-size: 1rem;
-  --ardo-font-lineHeight: 1.7;
+  --ardo-font-lineHeight: 1.72;
   --ardo-fontSize-xs: 0.75rem;
   --ardo-fontSize-sm: 0.875rem;
   --ardo-fontSize-base: 1rem;
@@ -1790,29 +2104,33 @@ li:first-child > div > ._1057ydn9 {
   --ardo-radius-lg: 0.75rem;
 }
 .dark {
-  --ardo-color-brand: oklch(0.65 0.16 170);
-  --ardo-color-brandLight: oklch(0.77 0.16 170);
-  --ardo-color-brandDark: oklch(0.57 0.18 170);
-  --ardo-color-brandSubtle: oklch(0.2 0.04 170);
-  --ardo-color-brandGradient: linear-gradient(135deg, oklch(0.65 0.16 170) 0%, oklch(0.73 0.14 200) 100%);
-  --ardo-color-bg: oklch(0.14 0.01 170);
-  --ardo-color-bgSoft: oklch(0.18 0.012 170);
-  --ardo-color-bgMute: oklch(0.26 0.015 170);
-  --ardo-color-bgAlt: oklch(0.36 0.012 170);
-  --ardo-color-text: oklch(0.95 0.005 170);
-  --ardo-color-textLight: oklch(0.68 0.01 170);
-  --ardo-color-textLighter: oklch(0.5 0.008 170);
-  --ardo-color-border: oklch(0.28 0.015 170);
-  --ardo-color-borderLight: oklch(0.35 0.01 170);
-  --ardo-color-divider: oklch(0.28 0.015 170);
-  --ardo-color-sidebarBg: oklch(0.16 0.012 170);
-  --ardo-color-sidebarBorder: oklch(0.26 0.015 170);
-  --ardo-color-codeBg: oklch(0.16 0.008 170);
-  --ardo-color-codeBorder: oklch(0.24 0.01 170);
-  --ardo-color-codeShadow: 0 1px 3px oklch(0 0 0 / 0.2);
-  --ardo-color-shadowSm: 0 1px 2px oklch(0 0 0 / 0.12), 0 1px 3px oklch(0 0 0 / 0.15);
-  --ardo-color-shadowMd: 0 4px 6px oklch(0 0 0 / 0.12), 0 2px 4px oklch(0 0 0 / 0.08);
-  --ardo-color-shadowLg: 0 10px 25px oklch(0 0 0 / 0.2), 0 4px 10px oklch(0 0 0 / 0.12);
+  --ardo-color-brand: oklch(0.74 0.115 356);
+  --ardo-color-brandLight: oklch(0.84 0.1 356);
+  --ardo-color-brandDark: oklch(0.62 0.125 356);
+  --ardo-color-brandSubtle: oklch(0.275 0.06 356);
+  --ardo-color-brandGradient: linear-gradient(135deg, oklch(0.74 0.115 356) 0%, oklch(0.81 0.08 372) 100%);
+  --ardo-color-accent: oklch(0.74 0.08 230);
+  --ardo-color-accentLight: oklch(0.84 0.07 230);
+  --ardo-color-accentDark: oklch(0.6 0.09 230);
+  --ardo-color-accentSubtle: oklch(0.26 0.03 230);
+  --ardo-color-bg: oklch(0.155 0.008 356);
+  --ardo-color-bgSoft: oklch(0.195 0.009 356);
+  --ardo-color-bgMute: oklch(0.255 0.01 356);
+  --ardo-color-bgAlt: oklch(0.33 0.01 356);
+  --ardo-color-text: oklch(0.94 0.004 356);
+  --ardo-color-textLight: oklch(0.72 0.007 356);
+  --ardo-color-textLighter: oklch(0.55 0.007 356);
+  --ardo-color-border: oklch(0.285 0.011 356);
+  --ardo-color-borderLight: oklch(0.35 0.01 356);
+  --ardo-color-divider: oklch(0.29 0.01 356);
+  --ardo-color-sidebarBg: oklch(0.13 0.008 356);
+  --ardo-color-sidebarBorder: oklch(0.265 0.011 356);
+  --ardo-color-codeBg: oklch(0.21 0.016 230);
+  --ardo-color-codeBorder: oklch(0.33 0.024 230);
+  --ardo-color-codeShadow: 0 10px 26px oklch(0 0 0 / 0.18);
+  --ardo-color-shadowSm: 0 1px 2px oklch(0 0 0 / 0.14), 0 1px 3px oklch(0 0 0 / 0.18);
+  --ardo-color-shadowMd: 0 8px 18px oklch(0 0 0 / 0.18), 0 2px 6px oklch(0 0 0 / 0.12);
+  --ardo-color-shadowLg: 0 20px 50px oklch(0 0 0 / 0.28), 0 8px 20px oklch(0 0 0 / 0.18);
   --ardo-color-tip: oklch(0.5 0.15 155);
   --ardo-color-tipBg: oklch(0.2 0.04 155);
   --ardo-color-tipBorder: oklch(0.35 0.1 155);
@@ -1843,10 +2161,10 @@ li:first-child > div > ._1057ydn9 {
   --ardo-color-badgePink: oklch(0.7 0.14 350);
   --ardo-color-badgePinkBg: oklch(0.22 0.04 350);
   --ardo-color-badgePinkBorder: oklch(0.35 0.08 350);
-  --ardo-layout-sidebarWidth: 17rem;
-  --ardo-layout-tocWidth: 16rem;
-  --ardo-layout-contentMaxWidth: 48rem;
-  --ardo-layout-headerHeight: 4rem;
+  --ardo-layout-sidebarWidth: 20rem;
+  --ardo-layout-tocWidth: 15rem;
+  --ardo-layout-contentMaxWidth: 68ch;
+  --ardo-layout-headerHeight: 3.5rem;
   --ardo-transition-fast: 0.12s ease-out;
   --ardo-transition-base: 0.2s ease-out;
   --ardo-transition-slow: 0.35s ease-out;
@@ -1854,7 +2172,7 @@ li:first-child > div > ._1057ydn9 {
   --ardo-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
   --ardo-font-familyHeading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --ardo-font-size: 1rem;
-  --ardo-font-lineHeight: 1.7;
+  --ardo-font-lineHeight: 1.72;
   --ardo-fontSize-xs: 0.75rem;
   --ardo-fontSize-sm: 0.875rem;
   --ardo-fontSize-base: 1rem;
@@ -1893,6 +2211,10 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
+  overflow-x: hidden;
+}
+h1, h2, h3, h4, h5, h6 {
+  text-wrap: balance;
 }
 ::selection {
   background: var(--ardo-color-brandSubtle);