ardo 3.3.0 → 3.4.0

package/dist/ui/styles.css

@@ -1,139 +1,3 @@
-.wxcdiv0 {
-  position: relative;
-  width: 100%;
-  max-width: 100%;
-}
-.wxcdiv1 {
-  display: flex;
-  align-items: center;
-  gap: var(--ardo-space-sm);
-  min-height: 2.5rem;
-  padding: var(--ardo-space-sm) 0.75rem;
-  background: var(--ardo-color-bg);
-  border: 1px solid var(--ardo-color-border);
-  border-radius: var(--ardo-radius-base);
-  color: var(--ardo-color-textLighter);
-  cursor: text;
-  transition: border-color var(--ardo-transition-fast), box-shadow var(--ardo-transition-fast), color var(--ardo-transition-fast);
-  outline: none;
-}
-.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;
-}
-.wxcdiv2 {
-  flex: 1;
-  min-width: 0;
-  border: none;
-  outline: none;
-  font-size: var(--ardo-fontSize-sm);
-  background: none;
-  color: var(--ardo-color-text);
-}
-.wxcdiv2::placeholder {
-  color: var(--ardo-color-textLighter);
-}
-.wxcdiv2:focus-visible {
-  outline: none;
-}
-.wxcdiv3 {
-  position: fixed;
-  width: min(28rem, calc(100vw - 2rem));
-  background: var(--ardo-color-bg);
-  border-radius: var(--ardo-radius-lg);
-  border: 1px solid var(--ardo-color-border);
-  box-shadow: var(--ardo-color-shadowLg);
-  overflow: hidden;
-  z-index: 210;
-}
-.wxcdiv4 {
-  list-style: none;
-  max-height: 25rem;
-  overflow-y: auto;
-}
-.wxcdiv5 {
-  display: block;
-  padding: 0.75rem var(--ardo-space-md);
-  text-decoration: none;
-  color: var(--ardo-color-text);
-  border-bottom: 1px solid var(--ardo-color-borderLight);
-  transition: background var(--ardo-transition-fast);
-}
-.wxcdiv5:last-child {
-  border-bottom: none;
-}
-.wxcdiv5:hover, .wxcdiv5.selected {
-  background: var(--ardo-color-brandSubtle);
-}
-.wxcdiv6 {
-  display: block;
-  font-weight: 500;
-  margin-bottom: 2px;
-}
-.wxcdiv7 {
-  display: block;
-  font-size: var(--ardo-fontSize-xs);
-  color: var(--ardo-color-textLighter);
-}
-.wxcdiv8 {
-  padding: var(--ardo-space-xl) var(--ardo-space-md);
-  text-align: center;
-  color: var(--ardo-color-textLighter);
-}
-.wxcdiv9 {
-  display: flex;
-  justify-content: center;
-  gap: var(--ardo-space-lg);
-  padding: 0.75rem var(--ardo-space-md);
-  background: var(--ardo-color-bgSoft);
-  border-top: 1px solid var(--ardo-color-border);
-  font-size: var(--ardo-fontSize-xs);
-  color: var(--ardo-color-textLighter);
-}
-.wxcdiv9 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;
-}
-.wxcdiva {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  flex-shrink: 0;
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: var(--ardo-fontSize-lg);
-  color: var(--ardo-color-textLighter);
-  padding: var(--ardo-space-xs);
-  border-radius: var(--ardo-radius-sm);
-  transition: all var(--ardo-transition-fast);
-}
-.wxcdiva:hover {
-  background: var(--ardo-color-bgSoft);
-  color: var(--ardo-color-text);
-}
-.wxcdivb {
-  display: flex;
-  gap: 3px;
-  margin-left: var(--ardo-space-xs);
-}
-.wxcdivb 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);
-}
 ._8autjm0 {
   height: 100vh;
   width: 100%;
@@ -193,9 +57,6 @@
   top: var(--ardo-space-md);
 }
 @media (max-width: 1024px) {
-  ._8autjm1 {
-    padding-top: calc(var(--ardo-layout-headerHeight) + 2.75rem);
-  }
   ._8autjm2 {
     padding: 0 var(--ardo-space-md) var(--ardo-space-xl);
   }
@@ -247,7 +108,7 @@ main > ._169q00b0 {
   vertical-align: middle;
 }
 ._169q00b4 {
-  color: var(--ardo-color-brand);
+  color: var(--ardo-color-accent);
   text-decoration: none;
   transition: opacity var(--ardo-transition-fast);
 }
@@ -255,28 +116,50 @@ main > ._169q00b0 {
   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);
 }
-._169q00b6 {
+._169q00b8 {
   grid-column: 1;
   font-size: var(--ardo-fontSize-sm);
   color: var(--ardo-color-textLighter);
 }
-._169q00b7 {
+._169q00b9 {
   grid-column: 2;
   grid-row: 1 / span 3;
   justify-self: end;
   font-size: var(--ardo-fontSize-xs);
-  color: var(--ardo-color-textLighter);
+  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;
 }
-._169q00b8 {
+._169q00ba {
   margin-top: var(--ardo-space-2xl);
 }
-._169q00b9 {
+._169q00bb {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -284,22 +167,22 @@ main > ._169q00b0 {
   font-size: var(--ardo-fontSize-sm);
   color: var(--ardo-color-textLighter);
 }
-._169q00ba {
-  color: var(--ardo-color-brand);
+._169q00bc {
+  color: var(--ardo-color-accent);
   text-decoration: none;
   font-weight: 500;
   transition: opacity var(--ardo-transition-fast);
 }
-._169q00ba:hover {
+._169q00bc:hover {
   opacity: 0.8;
 }
-._169q00bb {
+._169q00bd {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--ardo-space-md);
   max-width: 80rem;
 }
-._169q00bc {
+._169q00be {
   display: flex;
   flex-direction: column;
   padding: var(--ardo-space-lg);
@@ -308,14 +191,14 @@ main > ._169q00b0 {
   text-decoration: none;
   transition: all var(--ardo-transition-base);
 }
-._169q00bc:hover {
-  border-color: var(--ardo-color-brand);
+._169q00be:hover {
+  border-color: var(--ardo-color-accent);
   background: var(--ardo-color-bgSoft);
 }
-._169q00be {
+._169q00bg {
   text-align: right;
 }
-._169q00bf {
+._169q00bh {
   font-size: var(--ardo-fontSize-xs);
   font-weight: 500;
   color: var(--ardo-color-textLighter);
@@ -323,7 +206,7 @@ main > ._169q00b0 {
   letter-spacing: 0.05em;
   margin-bottom: var(--ardo-space-xs);
 }
-._169q00bg {
+._169q00bi {
   font-weight: 600;
   color: var(--ardo-color-brand);
 }
@@ -335,7 +218,7 @@ main > ._169q00b0 {
     grid-template-columns: 1fr;
     gap: var(--ardo-space-xs);
   }
-  ._169q00b7 {
+  ._169q00b9 {
     grid-column: 1;
     grid-row: auto;
     justify-self: start;
@@ -349,6 +232,153 @@ main > ._169q00b0 {
     margin-left: calc(var(--ardo-space-md) * -1);
   }
 }
+.wxcdiv0 {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+}
+.wxcdiv1 {
+  display: flex;
+  align-items: center;
+  gap: var(--ardo-space-sm);
+  min-height: 2.5rem;
+  padding: var(--ardo-space-sm) 0.75rem;
+  background: var(--ardo-color-bg);
+  border: 1px solid var(--ardo-color-border);
+  border-radius: var(--ardo-radius-base);
+  color: var(--ardo-color-textLighter);
+  cursor: text;
+  transition: border-color var(--ardo-transition-fast), box-shadow var(--ardo-transition-fast), color var(--ardo-transition-fast);
+  outline: none;
+}
+.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;
+}
+.wxcdiv2 {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  font-size: var(--ardo-fontSize-sm);
+  background: none;
+  color: var(--ardo-color-text);
+}
+.wxcdiv2::placeholder {
+  color: var(--ardo-color-textLighter);
+}
+.wxcdiv2:focus-visible {
+  outline: none;
+}
+.wxcdiv3 {
+  position: fixed;
+  width: min(28rem, calc(100vw - 2rem));
+  background: var(--ardo-color-bg);
+  border-radius: var(--ardo-radius-lg);
+  border: 1px solid var(--ardo-color-border);
+  box-shadow: var(--ardo-color-shadowLg);
+  overflow: hidden;
+  z-index: 210;
+}
+.wxcdiv4 {
+  list-style: none;
+  max-height: 25rem;
+  overflow-y: auto;
+}
+.wxcdiv5 {
+  display: block;
+  padding: 0.75rem var(--ardo-space-md);
+  text-decoration: none;
+  color: var(--ardo-color-text);
+  border-bottom: 1px solid var(--ardo-color-borderLight);
+  transition: background var(--ardo-transition-fast);
+}
+.wxcdiv5:last-child {
+  border-bottom: none;
+}
+.wxcdiv5:hover, .wxcdiv5.selected {
+  background: var(--ardo-color-brandSubtle);
+}
+.wxcdiv6 {
+  display: block;
+  font-weight: 500;
+  margin-bottom: 2px;
+}
+.wxcdiv7 {
+  display: block;
+  font-size: var(--ardo-fontSize-xs);
+  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);
+  padding: 0.75rem var(--ardo-space-md);
+  background: var(--ardo-color-bgSoft);
+  border-top: 1px solid var(--ardo-color-border);
+  font-size: var(--ardo-fontSize-xs);
+  color: var(--ardo-color-textLighter);
+}
+.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);
+}
+.wxcdivb {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: var(--ardo-fontSize-lg);
+  color: var(--ardo-color-textLighter);
+  padding: var(--ardo-space-xs);
+  border-radius: var(--ardo-radius-sm);
+  transition: all var(--ardo-transition-fast);
+}
+.wxcdivb:hover {
+  background: var(--ardo-color-bgSoft);
+  color: var(--ardo-color-text);
+}
+.wxcdivc {
+  display: flex;
+  gap: 3px;
+  margin-left: var(--ardo-space-xs);
+}
+.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-mono);
+  color: var(--ardo-color-accent);
+}
 ._18g5iyz0 {
   display: flex;
   align-items: center;
@@ -394,13 +424,22 @@ main > ._169q00b0 {
   display: flex;
   align-items: center;
   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);
@@ -408,18 +447,18 @@ main > ._169q00b0 {
   color: var(--ardo-color-text);
   transition: opacity var(--ardo-transition-fast);
 }
-.qjc2r54:hover {
+.qjc2r55:hover {
   opacity: 0.8;
 }
-.qjc2r55 {
+.qjc2r56 {
   height: 2rem;
 }
-.qjc2r56 {
+.qjc2r57 {
   font-size: var(--ardo-fontSize-lg);
   font-weight: 700;
   letter-spacing: -0.025em;
 }
-.qjc2r57 {
+.qjc2r58 {
   display: none;
   background: none;
   border: none;
@@ -428,15 +467,15 @@ main > ._169q00b0 {
   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;
@@ -444,32 +483,9 @@ main > ._169q00b0 {
   border-radius: 1px;
   transition: all var(--ardo-transition-fast);
 }
-.qjc2r59 {
-  display: flex;
-  align-items: center;
-}
 .qjc2r5a {
-  display: none;
-  height: 2.75rem;
-  width: 100%;
-  max-width: 100vw;
-  overflow-x: auto;
-  overflow-y: hidden;
-  border-top: 1px solid var(--ardo-color-borderLight);
-  scrollbar-width: none;
-}
-.qjc2r5a::-webkit-scrollbar {
-  display: none;
-}
-.qjc2r5a nav {
   display: flex;
   align-items: center;
-  gap: var(--ardo-space-xs);
-  width: max-content;
-  flex-shrink: 0;
-}
-.qjc2r5a a, .qjc2r5a span {
-  white-space: nowrap;
 }
 .qjc2r5b {
   position: fixed;
@@ -549,26 +565,22 @@ main > ._169q00b0 {
 .qjc2r5i {
   display: none;
 }
+@media (max-width: 640px) {
+  .qjc2r51 {
+    padding: 0 var(--ardo-space-md);
+  }
+}
 @media (max-width: 1024px) {
-  .qjc2r50 {
-    height: calc(var(--ardo-layout-headerHeight) + 2.75rem + env(safe-area-inset-top));
+  .qjc2r53 {
+    justify-content: flex-end;
+    padding: 0 var(--ardo-space-sm);
   }
-  .qjc2r57 {
+  .qjc2r58 {
     display: flex;
     align-items: center;
   }
-  .qjc2r59 {
-    display: none;
-  }
   .qjc2r5a {
-    display: flex;
-    align-items: center;
-    padding: 0 var(--ardo-space-md);
-  }
-}
-@media (max-width: 640px) {
-  .qjc2r51 {
-    padding: 0 var(--ardo-space-md);
+    display: none;
   }
 }
 ._85hnke0 {
@@ -638,13 +650,38 @@ main > ._169q00b0 {
   background: var(--ardo-color-bgSoft);
 }
 ._1057ydn2 {
+  position: relative;
+}
+._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;
 }
-._1057ydn3 {
+._1057ydn5 {
   position: relative;
   display: flex;
   align-items: center;
@@ -656,17 +693,17 @@ main > ._169q00b0 {
   text-decoration: none;
   transition: background var(--ardo-transition-fast), color var(--ardo-transition-fast), box-shadow var(--ardo-transition-fast);
 }
-._1057ydn3:hover {
+._1057ydn5:hover {
   color: var(--ardo-color-text);
   background: var(--ardo-color-bg);
   box-shadow: var(--ardo-color-shadowSm);
 }
-._1057ydn3.active {
+._1057ydn5.active {
   color: var(--ardo-color-brand);
   background: var(--ardo-color-brandSubtle);
   box-shadow: inset 0 0 0 1px var(--ardo-color-borderLight);
 }
-._1057ydn3.active::before {
+._1057ydn5.active::before {
   content: "";
   position: absolute;
   left: -0.75rem;
@@ -676,58 +713,60 @@ main > ._169q00b0 {
   border-radius: 999px;
   background: var(--ardo-color-brand);
 }
-._1057ydn4 {
+._1057ydn6 {
   display: flex;
   flex-direction: column;
   min-width: 0;
   flex: 1;
   padding: var(--ardo-space-md) var(--ardo-space-md) var(--ardo-space-md) 1.125rem;
 }
-._1057ydn5 {
+._1057ydn7 {
   flex-shrink: 0;
   margin-bottom: var(--ardo-space-lg);
   position: relative;
 }
-._1057ydn6 {
+._1057ydn8 {
   flex: 1;
   overflow-y: auto;
   min-height: 0;
 }
-._1057ydn7 {
+._1057ydn9 {
   list-style: none;
 }
-._1057ydn9 {
+._1057ydnb {
   margin-left: 0.75rem;
   margin-top: 2px;
 }
-._1057ydnb {
+._1057ydnd:not(:first-child) {
+  margin-top: var(--ardo-space-lg);
+}
+._1057ydne {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-li:not(:first-child) > ._1057ydnb {
-  margin-top: var(--ardo-space-lg);
-}
-._1057ydnc {
+._1057ydnf {
   display: block;
   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);
 }
-._1057ydnc:hover {
+._1057ydnf:hover {
   color: var(--ardo-color-text);
   background: var(--ardo-color-bgSoft);
 }
-._1057ydnc.active {
+._1057ydnf.active {
   color: var(--ardo-color-brand);
   background: var(--ardo-color-brandSubtle);
+  border-left-color: var(--ardo-color-brand);
   font-weight: 500;
 }
-._1057ydnd {
+._1057ydng {
   display: flex;
   align-items: center;
   gap: var(--ardo-space-sm);
@@ -735,21 +774,20 @@ li:not(:first-child) > ._1057ydnb {
   color: var(--ardo-color-textLight);
   text-decoration: none;
   font-weight: 600;
-  font-size: var(--ardo-fontSize-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.07em;
+  font-size: var(--ardo-fontSize-sm);
+  letter-spacing: -0.005em;
   transition: all var(--ardo-transition-fast);
 }
-._1057ydnd:hover {
+._1057ydng:hover {
   color: var(--ardo-color-text);
 }
-._1057ydnd.active {
+._1057ydng.active {
   color: var(--ardo-color-brand);
 }
-._1057ydnd.child-active {
+._1057ydng.child-active {
   color: var(--ardo-color-text);
 }
-._1057ydne {
+._1057ydnh {
   width: 100%;
   background: none;
   border: none;
@@ -760,7 +798,7 @@ li:not(:first-child) > ._1057ydnb {
   text-align: left;
   cursor: pointer;
 }
-._1057ydnf {
+._1057ydni {
   display: flex;
   align-items: center;
   align-self: center;
@@ -772,21 +810,21 @@ li:not(:first-child) > ._1057ydnb {
   border-radius: 50%;
   transition: all var(--ardo-transition-base);
 }
-._1057ydnf:hover {
+._1057ydni:hover {
   color: var(--ardo-color-text);
 }
-._1057ydnf.collapsed {
+._1057ydni.collapsed {
   transform: rotate(-90deg);
 }
-._1057ydng {
+._1057ydnj {
   display: grid;
   grid-template-rows: 1fr;
   transition: grid-template-rows var(--ardo-transition-slow);
 }
-._1057ydng[data-collapsed="true"] {
+._1057ydnj[data-collapsed="true"] {
   grid-template-rows: 0fr;
 }
-._1057ydnh {
+._1057ydnk {
   overflow: hidden;
   min-height: 0;
 }
@@ -795,6 +833,29 @@ li:not(:first-child) > ._1057ydnb {
     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-lg) 0;
   max-width: 120ch;
@@ -809,13 +870,16 @@ li:not(:first-child) > ._1057ydnb {
   font-size: var(--ardo-fontSize-xs);
   font-weight: 500;
   font-family: var(--ardo-font-mono);
-  color: var(--ardo-color-textLighter);
-  background: var(--ardo-color-bgSoft);
+  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-lg) var(--ardo-space-md);
@@ -862,8 +926,8 @@ li:not(:first-child) > ._1057ydnb {
   font-size: var(--ardo-fontSize-xs);
   font-weight: 500;
   font-family: var(--ardo-font-mono);
-  color: var(--ardo-color-textLighter);
-  background: var(--ardo-color-bgSoft);
+  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 {
@@ -926,21 +990,20 @@ li:not(:first-child) > ._1057ydnb {
   align-items: center;
   gap: var(--ardo-space-xs);
   padding: var(--ardo-space-xs) var(--ardo-space-sm);
-  background: var(--ardo-color-bgSoft);
+  background: var(--ardo-color-bg);
   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.72;
-  transition: all var(--ardo-transition-base);
+  opacity: 0;
+  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);
 }
@@ -983,8 +1046,8 @@ li:not(:first-child) > ._1057ydnb {
   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;
@@ -993,30 +1056,6 @@ li:not(:first-child) > ._1057ydnb {
   box-shadow: none;
   background: transparent;
 }
-._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-bgSoft);
-  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.72;
-  transition: all var(--ardo-transition-base);
-}
-._1flm2ul1:hover {
-  opacity: 1;
-  background: var(--ardo-color-bg);
-  border-color: var(--ardo-color-brand);
-  color: var(--ardo-color-brand);
-}
 ._1l7ew7r0 {
   display: flex;
   align-items: flex-start;
@@ -1617,8 +1656,7 @@ li:not(:first-child) > ._1057ydnb {
 }
 ._1f1m4jr2 {
   margin-bottom: var(--ardo-space-xl);
-  padding-bottom: var(--ardo-space-lg);
-  border-bottom: 1px solid var(--ardo-color-border);
+  padding-bottom: var(--ardo-space-sm);
 }
 ._1f1m4jr3 {
   font-size: clamp(2rem, 4vw, 3.15rem);
@@ -1648,34 +1686,24 @@ li:not(:first-child) > ._1057ydnb {
   top: var(--ardo-space-xl);
   align-self: start;
   max-height: calc(100vh - var(--ardo-layout-headerHeight) - var(--ardo-space-2xl));
-  padding: var(--ardo-space-md) var(--ardo-space-md) var(--ardo-space-lg);
-  background: linear-gradient(180deg, color-mix(in oklch, var(--ardo-color-bg) 94%, var(--ardo-color-bgSoft)), var(--ardo-color-bg));
-  border: 1px solid var(--ardo-color-borderLight);
-  border-radius: var(--ardo-radius-lg);
-  box-shadow: 0 16px 42px oklch(0 0 0 / 0.035);
+  padding: var(--ardo-space-xs) 0 var(--ardo-space-lg);
   overflow-y: auto;
-  z-index: 1;
-}
-.dark ._1f1m4jr6 {
-  background: linear-gradient(180deg, color-mix(in oklch, var(--ardo-color-bg) 88%, var(--ardo-color-bgSoft)), var(--ardo-color-bg));
-  box-shadow: 0 18px 46px oklch(0 0 0 / 0.22);
 }
 ._1f1m4jr7 {
   padding: var(--ardo-space-md) 0;
-  border-bottom: 1px solid var(--ardo-color-borderLight);
 }
 ._1f1m4jr7:first-child {
   padding-top: 0;
 }
-._1f1m4jr7:last-child {
-  border-bottom: none;
+._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.07em;
-  color: var(--ardo-color-textLight);
+  letter-spacing: 0.08em;
+  color: var(--ardo-color-textLighter);
   margin-bottom: var(--ardo-space-sm);
 }
 ._1f1m4jr9 {
@@ -1693,7 +1721,7 @@ li:not(:first-child) > ._1057ydnb {
   transition: color var(--ardo-transition-fast);
 }
 ._1f1m4jra:hover {
-  color: var(--ardo-color-brand);
+  color: var(--ardo-color-accent);
 }
 ._1f1m4jrb {
   width: 100%;
@@ -1731,10 +1759,10 @@ li:not(:first-child) > ._1057ydnb {
 }
 ._16vvfx81 {
   font-size: var(--ardo-fontSize-xs);
-  font-weight: 700;
+  font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--ardo-color-textLight);
+  letter-spacing: 0.08em;
+  color: var(--ardo-color-textLighter);
   margin-bottom: var(--ardo-space-sm);
 }
 ._16vvfx82 {
@@ -1756,8 +1784,8 @@ li:not(:first-child) > ._1057ydnb {
   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 {
@@ -1985,11 +2013,15 @@ li:not(:first-child) > ._1057ydnb {
   margin: var(--ardo-space-md) 0;
 }
 :root {
-  --ardo-color-brand: oklch(0.505 0.085 356);
-  --ardo-color-brandLight: oklch(0.63 0.075 356);
-  --ardo-color-brandDark: oklch(0.39 0.095 356);
-  --ardo-color-brandSubtle: oklch(0.965 0.012 356);
-  --ardo-color-brandGradient: linear-gradient(135deg, oklch(0.505 0.085 356) 0%, oklch(0.61 0.058 372) 100%);
+  --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);
@@ -2002,8 +2034,8 @@ li:not(:first-child) > ._1057ydnb {
   --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.972 0.003 356);
-  --ardo-color-codeBorder: oklch(0.895 0.004 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);
@@ -2072,11 +2104,15 @@ li:not(:first-child) > ._1057ydnb {
   --ardo-radius-lg: 0.75rem;
 }
 .dark {
-  --ardo-color-brand: oklch(0.72 0.095 356);
-  --ardo-color-brandLight: oklch(0.82 0.085 356);
-  --ardo-color-brandDark: oklch(0.61 0.105 356);
-  --ardo-color-brandSubtle: oklch(0.255 0.03 356);
-  --ardo-color-brandGradient: linear-gradient(135deg, oklch(0.72 0.095 356) 0%, oklch(0.79 0.068 372) 100%);
+  --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);
@@ -2089,8 +2125,8 @@ li:not(:first-child) > ._1057ydnb {
   --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.19 0.008 356);
-  --ardo-color-codeBorder: oklch(0.31 0.01 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);