for-humanity 0.4.4 → 0.5.0

package/dist/cli.css

@@ -295,13 +295,55 @@
   }
 }
 
-/* src/component/widget/shell/_wg-shell-nav-list.css */
-.wg_shellNavList__root {
+/* src/component/widget/cursor-face/wg-cursor-face.css */
+.wg_cursorFace__root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--app-z-index-popper);
+  visibility: hidden;
+  pointer-events: none;
+  user-select: none;
+  image-rendering: pixelated;
+}
+.wg_cursorFace__root--visible {
+  visibility: visible;
+}
+
+/* src/component/widget/navigation/_wg-navigation-branch-toggle.css */
+.wg_navigationBranchToggle__root {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: var(--app-size-tree-toggle);
+  height: calc(var(--app-font-size-dense) * var(--app-line-height-tight) + var(--app-space-tree-row) * 2);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--app-color-border-soft);
+  font-family: var(--app-font-mono);
+  font-size: var(--app-font-size-body);
+  line-height: 1;
+  cursor: pointer;
+  &:hover {
+    background: var(--app-color-accent-soft);
+    color: var(--app-color-text-strong);
+  }
+  &:focus-visible {
+    background: var(--app-color-accent-soft);
+    color: var(--app-color-text-strong);
+    outline: var(--app-outline-focus);
+    outline-offset: calc(0px - var(--app-outline-focus-offset));
+  }
+}
+
+/* src/component/widget/navigation/_wg-navigation-nav-list.css */
+.wg_navigationNavList__root {
   margin: 0 0 0 var(--app-space-tree-inset);
   padding: 0;
   list-style: none;
 }
-.wg_shellNavList__branch {
+.wg_navigationNavList__branch {
   position: relative;
   display: block;
   padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
@@ -319,7 +361,7 @@
     pointer-events: none;
   }
 }
-.wg_shellNavList__link {
+.wg_navigationNavList__link {
   position: relative;
   display: block;
   padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
@@ -351,16 +393,22 @@
     border-top-color: currentcolor;
   }
 }
-.wg_shellNavList__link--active {
+.wg_navigationNavList__link--active {
   color: var(--app-color-link);
   font-weight: var(--app-font-weight-active);
   &::before {
     border-top-color: currentcolor;
   }
 }
-.wg_shellNavList__item {
+.wg_navigationNavList__item {
   display: flow-root;
   position: relative;
+  &:has(> .wg_navigationBranchToggle__root) > .wg_navigationNavList__link {
+    padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
+  }
+  &:has(> .wg_navigationBranchToggle__root) > .wg_navigationNavList__branch {
+    padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
+  }
   &::before {
     position: absolute;
     top: 0;
@@ -389,87 +437,99 @@
   &:where(:has(:focus-visible))::after {
     border-left-color: var(--app-color-link);
   }
-  &:where(:has(~ .wg_shellNavList__item:hover))::before {
+  &:where(:has(~ .wg_navigationNavList__item:hover))::before {
     border-left-color: var(--app-color-link);
   }
-  &:where(:has(~ .wg_shellNavList__item :focus-visible))::before {
+  &:where(:has(~ .wg_navigationNavList__item :focus-visible))::before {
     border-left-color: var(--app-color-link);
   }
-  & > .wg_shellNavList__root {
+  & > .wg_navigationNavList__root {
     margin-left: var(--app-space-tree-indent);
   }
-  &:where(:hover) > .wg_shellNavList__branch::before {
+  &:where(:hover) > .wg_navigationNavList__branch::before {
     border-top-color: var(--app-color-link);
   }
-  &:where(:has(:focus-visible)) > .wg_shellNavList__branch::before {
+  &:where(:has(:focus-visible)) > .wg_navigationNavList__branch::before {
     border-top-color: var(--app-color-link);
   }
-  &:where(:hover) > .wg_shellNavList__link::before {
+  &:where(:hover) > .wg_navigationNavList__link::before {
     border-top-color: var(--app-color-link);
   }
-  &:where(:has(:focus-visible)) > .wg_shellNavList__link::before {
+  &:where(:has(:focus-visible)) > .wg_navigationNavList__link::before {
     border-top-color: var(--app-color-link);
   }
 }
-.wg_shellNavList__item--trail {
+.wg_navigationNavList__item--trail {
   &::before {
     border-left-color: var(--app-color-link);
   }
 }
-.wg_shellNavList__item--current {
+.wg_navigationNavList__item--current {
   &::after {
     border-left-color: var(--app-color-link);
   }
-  & > .wg_shellNavList__branch::before {
+  & > .wg_navigationNavList__branch::before {
     border-top-color: var(--app-color-link);
   }
-  & > .wg_shellNavList__link::before {
+  & > .wg_navigationNavList__link::before {
     border-top-color: var(--app-color-link);
   }
 }
 
-/* src/component/widget/shell/_wg-shell-nav.css */
-.wg_shellNav__root {
+/* src/component/widget/navigation/_wg-navigation-nav.css */
+.wg_navigationNav__root {
   font-size: var(--app-font-size-dense);
   line-height: var(--app-line-height-tight);
 }
-.wg_shellNav__docs {
+.wg_navigationNav__docs {
   display: flex;
   flex-direction: column;
   gap: var(--app-space-stack);
 }
-.wg_shellNav__group {
+.wg_navigationNav__group {
+  padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
   margin: 0 0 4px;
   color: var(--app-color-text-muted);
   font-size: var(--app-font-size-group);
   line-height: calc(var(--app-font-size-dense) * var(--app-line-height-tight));
   text-box: trim-start cap alphabetic;
 }
+.wg_navigationNav__docGroup {
+  position: relative;
+}
 
-/* src/component/widget/shell/_wg-shell-toc.css */
-.wg_shellToc__root {
+/* src/component/widget/navigation/_wg-navigation-toc.css */
+.wg_navigationToc__root {
   font-size: var(--app-font-size-dense);
   line-height: var(--app-line-height-tight);
 }
-.wg_shellToc__label {
+.wg_navigationToc__label {
   margin-bottom: var(--app-space-inline);
   color: var(--app-color-text-muted);
   font-size: var(--app-font-size-label);
   font-weight: var(--app-font-weight-strong);
   letter-spacing: var(--app-letter-spacing-label);
 }
-.wg_shellToc__group {
-  margin: var(--app-space-stack) 0 4px;
+.wg_navigationToc__group {
+  margin: 0 0 4px;
+  padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
   color: var(--app-color-text-muted);
   font-size: var(--app-font-size-group);
   line-height: calc(var(--app-font-size-dense) * var(--app-line-height-tight));
 }
-.wg_shellToc__list {
+.wg_navigationToc__groupSection {
+  position: relative;
+  display: flow-root;
+}
+.wg_navigationToc__groupSection--named {
+  margin-top: var(--app-space-stack);
+}
+.wg_navigationToc__list {
   margin: 0 0 0 var(--app-space-tree-inset);
   padding: 0;
   list-style: none;
 }
-.wg_shellToc__link {
+.wg_navigationToc__link {
   position: relative;
   display: block;
   padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
@@ -502,16 +562,19 @@
     border-top-color: currentcolor;
   }
 }
-.wg_shellToc__link--active {
+.wg_navigationToc__link--active {
   color: var(--app-color-text-strong);
   font-weight: var(--app-font-weight-active);
   &::before {
     border-top-color: currentcolor;
   }
 }
-.wg_shellToc__item {
+.wg_navigationToc__item {
   display: flow-root;
   position: relative;
+  &:has(> .wg_navigationBranchToggle__root) > .wg_navigationToc__link {
+    padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
+  }
   &::before {
     position: absolute;
     top: 0;
@@ -540,38 +603,38 @@
   &:where(:has(:focus-visible))::after {
     border-left-color: var(--app-color-text-strong);
   }
-  &:where(:has(~ .wg_shellToc__item:hover))::before {
+  &:where(:has(~ .wg_navigationToc__item:hover))::before {
     border-left-color: var(--app-color-text-strong);
   }
-  &:where(:has(~ .wg_shellToc__item :focus-visible))::before {
+  &:where(:has(~ .wg_navigationToc__item :focus-visible))::before {
     border-left-color: var(--app-color-text-strong);
   }
-  &:where(:hover) > .wg_shellToc__link::before {
+  &:where(:hover) > .wg_navigationToc__link::before {
     border-top-color: var(--app-color-text-strong);
   }
-  &:where(:has(:focus-visible)) > .wg_shellToc__link::before {
+  &:where(:has(:focus-visible)) > .wg_navigationToc__link::before {
     border-top-color: var(--app-color-text-strong);
   }
 }
-.wg_shellToc__item--trail {
+.wg_navigationToc__item--trail {
   &::before {
     border-left-color: var(--app-color-text-strong);
   }
 }
-.wg_shellToc__item--current {
+.wg_navigationToc__item--current {
   &::after {
     border-left-color: var(--app-color-text-strong);
   }
-  & > .wg_shellToc__link::before {
+  & > .wg_navigationToc__link::before {
     border-top-color: var(--app-color-text-strong);
   }
 }
-.wg_shellToc__sub {
+.wg_navigationToc__sub {
   margin: var(--app-space-tree-row) 0 4px var(--app-space-tree-indent);
   padding: 0;
   list-style: none;
 }
-.wg_shellToc__subItem {
+.wg_navigationToc__subItem {
   position: relative;
   &::before {
     position: absolute;
@@ -601,24 +664,24 @@
   &:where(:has(:focus-visible))::after {
     border-left-color: var(--app-color-text-strong);
   }
-  &:where(:has(~ .wg_shellToc__subItem:hover))::before {
+  &:where(:has(~ .wg_navigationToc__subItem:hover))::before {
     border-left-color: var(--app-color-text-strong);
   }
-  &:where(:has(~ .wg_shellToc__subItem :focus-visible))::before {
+  &:where(:has(~ .wg_navigationToc__subItem :focus-visible))::before {
     border-left-color: var(--app-color-text-strong);
   }
 }
-.wg_shellToc__subItem--trail {
+.wg_navigationToc__subItem--trail {
   &::before {
     border-left-color: var(--app-color-text-strong);
   }
 }
-.wg_shellToc__subItem--current {
+.wg_navigationToc__subItem--current {
   &::after {
     border-left-color: var(--app-color-text-strong);
   }
 }
-.wg_shellToc__subLink {
+.wg_navigationToc__subLink {
   position: relative;
   display: block;
   padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
@@ -651,7 +714,7 @@
     border-top-color: currentcolor;
   }
 }
-.wg_shellToc__subLink--active {
+.wg_navigationToc__subLink--active {
   color: var(--app-color-text-strong);
   font-weight: var(--app-font-weight-active);
   &::before {
@@ -659,160 +722,8 @@
   }
 }
 
-/* src/style/base.css */
-* {
-  box-sizing: border-box;
-}
-:root {
-  background: var(--app-color-ground);
-  scrollbar-gutter: stable;
-  scroll-behavior: smooth;
-}
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-delay: 0s !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    transition-delay: 0s !important;
-    scroll-behavior: auto !important;
-  }
-}
-
-/* src/style/token.css */
-:root {
-  color-scheme: light dark;
-  --app-color-ground: light-dark(#fff, #181818);
-  --app-color-surface: light-dark(#fff, #181818);
-  --app-color-code: light-dark(#f1f1eb, #22221f);
-  --app-color-backdrop: light-dark(rgb(0 0 0 / 30%), rgb(0 0 0 / 55%));
-  --app-color-text: light-dark(#333, #d5d5d5);
-  --app-color-text-strong: light-dark(#222, #eee);
-  --app-color-text-muted: light-dark(#666, #aaa);
-  --app-color-anchor-highlight: light-dark(#f4f58a, #666322);
-  --app-motion-duration-highlight-fade: 600ms;
-  --app-motion-easing-out: ease-out;
-  --app-color-border: light-dark(#aaa, #555);
-  --app-color-border-soft: light-dark(#ddd, #333);
-  --app-color-border-layout: light-dark(#eee, #2b2b2b);
-  --app-color-accent: light-dark(#555, #b5b5b5);
-  --app-color-accent-soft: light-dark(#f5f5f2, #222);
-  --app-color-link: light-dark(#11a, #9db8ff);
-  --app-color-link-visited: light-dark(#51a, #c5a5ed);
-  --app-color-link-hover: light-dark(#44d, #c1d1ff);
-  --app-color-verified: light-dark(#176b36, #82cf95);
-  --app-color-verified-soft: light-dark(#edf5ed, #1d2c20);
-  --app-color-unverified: light-dark(#855700, #dfb26c);
-  --app-color-unverified-soft: light-dark(#faf2df, #30291c);
-  --app-font-sans:
-    "Pretendard Variable",
-    system-ui,
-    "Apple SD Gothic Neo",
-    sans-serif;
-  --app-font-mono: "JetBrains Mono Variable", var(--app-font-sans);
-  --app-font-brand: "Architects Daughter", var(--app-font-sans);
-  --app-font-size-group: 11px;
-  --app-font-size-label: 12px;
-  --app-font-size-detail: 12px;
-  --app-font-size-dense: 12px;
-  --app-font-size-body: 12px;
-  --app-font-size-lead: 12px;
-  --app-font-size-part: 13px;
-  --app-font-size-section: 14px;
-  --app-font-size-title: 16px;
-  --app-font-weight-mark: 400;
-  --app-font-weight-active: 600;
-  --app-font-weight-strong: 600;
-  --app-font-weight-title: 600;
-  --app-line-height-title: 1.5;
-  --app-line-height-heading: 1.5;
-  --app-line-height-tight: 1.5;
-  --app-line-height-code: 1.65;
-  --app-line-height-body: 1.7;
-  --app-letter-spacing-label: 0;
-  --app-letter-spacing-brand: 0;
-  --app-letter-spacing-heading: -0.01em;
-  --app-letter-spacing-title: -0.015em;
-  --app-space-inline: 6px;
-  --app-space-stack: 10px;
-  --app-space-block: 14px;
-  --app-space-group: 20px;
-  --app-space-section: 32px;
-  --app-space-tree-row: 2px;
-  --app-space-tree-inset: 4px;
-  --app-space-tree-indent: 12px;
-  --app-space-page-top: 28px;
-  --app-space-gutter: 28px;
-  --app-space-column: 32px;
-  --app-space-sidebar-gap: 32px;
-  --app-size-sidebar: 200px;
-  --app-size-main: 900px;
-  --app-size-page: calc(var(--app-size-main) + (var(--app-size-sidebar) + var(--app-space-sidebar-gap) + var(--app-space-gutter)) * 2);
-  --app-size-brand: calc(var(--app-font-size-title) * var(--app-line-height-title) + var(--app-space-page-top) + var(--app-space-group));
-  --app-size-mobile-header: 56px;
-  --app-size-menu-button: 44px;
-  --app-size-drawer: 320px;
-  --app-size-navigation-fade: 28px;
-  --app-space-anchor: 80px;
-  --app-radius-pill: 0;
-  --app-radius-card: 0;
-  --app-radius-box: 0;
-  --app-radius-inline: 0;
-  --app-radius-mark: 0;
-  --app-outline-focus: 2px solid var(--app-color-link);
-  --app-outline-focus-offset: 2px;
-  --app-z-index-sticky: 100;
-  --app-z-index-popper: 300;
-  --app-code-foreground: var(--app-color-text);
-  --app-code-background: var(--app-color-code);
-  --app-code-token-keyword: var(--app-color-text-strong);
-  --app-code-token-function: var(--app-color-accent);
-  --app-code-token-string: var(--app-color-verified);
-  --app-code-token-string-expression: var(--app-color-verified);
-  --app-code-token-constant: var(--app-color-unverified);
-  --app-code-token-parameter: var(--app-color-text);
-  --app-code-token-comment: var(--app-color-text-muted);
-  --app-code-token-punctuation: var(--app-color-text-muted);
-  --app-code-token-link: var(--app-color-link);
-}
-@media (width < 1024px) {
-  :root {
-    --app-space-page-top: 24px;
-    --app-space-gutter: 20px;
-    --app-space-tree-row: 7px;
-    --app-space-anchor: calc(var(--app-size-mobile-header) + var(--app-space-block));
-  }
-}
-@media (width < 640px) {
-  :root {
-    --app-space-page-top: 20px;
-    --app-space-gutter: 16px;
-  }
-}
-
-/* src/component/widget/shell/wg-shell.css */
-.wg_shell__root {
-  display: grid;
-  max-width: var(--app-size-page);
-  margin: 0 auto;
-  padding: 0 var(--app-space-gutter);
-  grid-template: "nav main ." 1fr / calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap)) minmax(0, var(--app-size-main)) minmax(0, 1fr);
-  background: var(--app-color-ground);
-  color: var(--app-color-text);
-  font-family: var(--app-font-sans);
-  font-size: var(--app-font-size-body);
-  line-height: var(--app-line-height-body);
-  word-break: keep-all;
-  overflow-wrap: break-word;
-  text-wrap: pretty;
-  -webkit-font-smoothing: antialiased;
-}
-.wg_shell__root--drawerOpen {
-  overflow: hidden;
-}
-.wg_shell__brandRow {
+/* src/component/widget/navigation/wg-navigation.css */
+.wg_navigation__brandRow {
   display: flex;
   position: sticky;
   top: 0;
@@ -825,7 +736,7 @@
   gap: var(--app-space-inline);
   align-items: start;
 }
-.wg_shell__brand {
+.wg_navigation__brand {
   display: block;
   flex: 1;
   min-width: 0;
@@ -847,7 +758,7 @@
     text-decoration: underline;
   }
 }
-.wg_shell__menuIcon {
+.wg_navigation__menuIcon {
   width: 20px;
   height: 20px;
   fill: none;
@@ -855,7 +766,7 @@
   stroke-linecap: round;
   stroke-width: 1.5;
 }
-.wg_shell__menuToggle {
+.wg_navigation__menuToggle {
   display: none;
   align-items: center;
   justify-content: center;
@@ -876,10 +787,10 @@
     outline-offset: var(--app-outline-focus-offset);
   }
 }
-.wg_shell__menuToggle--visible {
+.wg_navigation__menuToggle--visible {
   display: flex;
 }
-.wg_shell__sidebar {
+.wg_navigation__sidebar {
   grid-area: nav;
   position: sticky;
   top: 0;
@@ -888,54 +799,69 @@
   height: 100dvh;
   margin-inline-end: var(--app-space-sidebar-gap);
 }
-.wg_shell__navigation {
+.wg_navigation__documents {
+  flex: 1;
+  min-height: 0;
+}
+.wg_navigation__outline {
   display: flex;
   flex-direction: column;
-  height: calc(100dvh - var(--app-size-brand));
-  min-width: 0;
+  flex: 1;
   min-height: 0;
+  &:where(:has(.wg_navigation__headings:empty)) {
+    display: none;
+  }
 }
-.wg_shell__documents {
-  flex: none;
-  max-height: 60%;
+.wg_navigation__headings {
+  flex: 1;
+  min-height: 0;
 }
-.wg_shell__outline {
+.wg_navigation__navigation {
   display: flex;
   flex-direction: column;
+  height: calc(100dvh - var(--app-size-brand));
+  min-width: 0;
   min-height: 0;
-  margin-top: var(--app-space-group);
-  padding-top: var(--app-space-group);
-  border-top: 1px solid var(--app-color-border-soft);
-  &:has(.wg_shell__headings:empty) {
+}
+.wg_navigation__tocRail {
+  grid-area: outline;
+  position: sticky;
+  top: 0;
+  align-self: start;
+  min-width: 0;
+  height: 100dvh;
+  margin-inline-start: var(--app-space-sidebar-gap);
+  padding-top: var(--app-size-brand);
+  & > .wg_navigation__outline {
+    height: 100%;
+  }
+  &:where(:has(.wg_navigation__headings:empty)) {
     display: none;
   }
 }
-.wg_shell__headings {
-  min-height: 0;
-}
-.wg_shell__scroll {
+.wg_navigation__scroll {
   overflow-y: auto;
   overscroll-behavior-y: contain;
   scroll-padding-block: var(--app-size-navigation-fade);
 }
-.wg_shell__scroll--ready {
+.wg_navigation__scroll--ready {
   scrollbar-width: none;
 }
-.wg_shell__scroll--above {
+.wg_navigation__scroll--above {
   mask-image:
     linear-gradient(
       to bottom,
       transparent,
       #000 var(--app-size-navigation-fade));
 }
-.wg_shell__scroll--below {
+.wg_navigation__scroll--below {
   mask-image:
     linear-gradient(
       to bottom,
       #000 calc(100% - var(--app-size-navigation-fade)),
       transparent);
 }
-.wg_shell__scroll--above.wg_shell__scroll--below {
+.wg_navigation__scroll--above.wg_navigation__scroll--below {
   mask-image:
     linear-gradient(
       to bottom,
@@ -944,15 +870,7 @@
       #000 calc(100% - var(--app-size-navigation-fade)),
       transparent);
 }
-.wg_shell__main {
-  grid-area: main;
-  min-width: 0;
-  max-width: var(--app-size-main);
-  border-inline: 1px solid var(--app-color-border-layout);
-  padding-block: var(--app-size-brand) calc(100vh - var(--app-space-anchor));
-  padding-inline: var(--app-space-column);
-}
-.wg_shell__drawer {
+.wg_navigation__drawer {
   position: fixed;
   inset: 0 auto 0 0;
   width: min(var(--app-size-drawer), calc(100% - var(--app-space-gutter) * 2));
@@ -970,7 +888,7 @@
     background: var(--app-color-backdrop);
   }
 }
-.wg_shell__drawerHeader {
+.wg_navigation__drawerHeader {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -979,12 +897,12 @@
   margin-bottom: var(--app-space-block);
   background: var(--app-color-ground);
 }
-.wg_shell__drawerTitle {
+.wg_navigation__drawerTitle {
   margin: 0;
   font-size: var(--app-font-size-part);
   font-weight: var(--app-font-weight-strong);
 }
-.wg_shell__drawerClose {
+.wg_navigation__drawerClose {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1005,63 +923,233 @@
     outline-offset: var(--app-outline-focus-offset);
   }
 }
-.wg_shell__drawerContent {
+.wg_navigation__drawerContent {
   min-width: 0;
   height: calc(100% - var(--app-size-mobile-header) - var(--app-space-block));
-  & > .wg_shell__navigation {
+  & > .wg_navigation__navigation {
     height: 100%;
   }
 }
-.wg_shell__cursorFace {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: var(--app-z-index-popper);
-  visibility: hidden;
-  pointer-events: none;
-  user-select: none;
-  image-rendering: pixelated;
-}
-.wg_shell__cursorFace--visible {
-  visibility: visible;
-}
 @media (forced-colors: active) {
-  .wg_shell__scroll {
+  .wg_navigation__scroll {
     mask-image: none;
     scrollbar-width: thin;
     scrollbar-color: auto;
   }
 }
-@media (width < 1024px) {
-  .wg_shell__root {
-    max-width: calc(var(--app-size-main) + var(--app-space-gutter) * 2);
-    grid-template: "nav" auto "main" 1fr / minmax(0, 1fr);
+@media (width < 1536px) {
+  .wg_navigation__tocRail {
+    display: none;
   }
-  .wg_shell__sidebar {
+}
+@media (width < 1024px) {
+  .wg_navigation__sidebar {
     position: static;
     height: auto;
     margin-block-end: var(--app-space-block);
     margin-inline-end: 0;
     border-bottom: 1px solid var(--app-color-border-layout);
   }
-  .wg_shell__sidebar > .wg_shell__navigation {
+  .wg_navigation__sidebar > .wg_navigation__navigation {
     height: auto;
-    & > .wg_shell__documents {
-      max-height: none;
-    }
   }
-  .wg_shell__sidebar--navigationReady {
+  .wg_navigation__sidebar > .wg_navigation__navigation > .wg_navigation__documents {
+    max-height: none;
+  }
+  .wg_navigation__sidebar--navigationReady {
     position: sticky;
     top: 0;
     z-index: var(--app-z-index-sticky);
     background: var(--app-color-ground);
   }
-  .wg_shell__brandRow {
+  .wg_navigation__brandRow {
     position: static;
     height: var(--app-size-mobile-header);
     padding-block: 0;
     align-items: center;
   }
+}
+
+/* src/component/widget/shell-controls/wg-shell-controls.css */
+.wg_shellControls__navigation {
+  display: contents;
+}
+
+/* src/style/base.css */
+* {
+  box-sizing: border-box;
+}
+:root {
+  background: var(--app-color-ground);
+  scrollbar-gutter: stable;
+  scroll-behavior: smooth;
+}
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-delay: 0s !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0s !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* src/style/token.css */
+:root {
+  color-scheme: light dark;
+  --app-color-ground: light-dark(#fff, #181818);
+  --app-color-surface: light-dark(#fff, #181818);
+  --app-color-code: light-dark(#f1f1eb, #22221f);
+  --app-color-backdrop: light-dark(rgb(0 0 0 / 30%), rgb(0 0 0 / 55%));
+  --app-color-text: light-dark(#333, #d5d5d5);
+  --app-color-text-strong: light-dark(#222, #eee);
+  --app-color-text-muted: light-dark(#666, #aaa);
+  --app-color-anchor-highlight: light-dark(#f4f58a, #666322);
+  --app-motion-duration-highlight-fade: 600ms;
+  --app-motion-easing-out: ease-out;
+  --app-color-border: light-dark(#aaa, #555);
+  --app-color-border-soft: light-dark(#ddd, #333);
+  --app-color-border-layout: light-dark(#eee, #2b2b2b);
+  --app-color-accent: light-dark(#555, #b5b5b5);
+  --app-color-accent-soft: light-dark(#f5f5f2, #222);
+  --app-color-link: light-dark(#11a, #9db8ff);
+  --app-color-link-visited: light-dark(#51a, #c5a5ed);
+  --app-color-link-hover: light-dark(#44d, #c1d1ff);
+  --app-color-verified: light-dark(#176b36, #82cf95);
+  --app-color-verified-soft: light-dark(#edf5ed, #1d2c20);
+  --app-color-unverified: light-dark(#855700, #dfb26c);
+  --app-color-unverified-soft: light-dark(#faf2df, #30291c);
+  --app-font-sans:
+    "Pretendard Variable",
+    system-ui,
+    "Apple SD Gothic Neo",
+    sans-serif;
+  --app-font-mono: "JetBrains Mono Variable", var(--app-font-sans);
+  --app-font-brand: "Architects Daughter", var(--app-font-sans);
+  --app-font-size-group: 11px;
+  --app-font-size-label: 12px;
+  --app-font-size-detail: 12px;
+  --app-font-size-dense: 12px;
+  --app-font-size-body: 12px;
+  --app-font-size-lead: 12px;
+  --app-font-size-part: 13px;
+  --app-font-size-section: 14px;
+  --app-font-size-title: 16px;
+  --app-font-weight-mark: 400;
+  --app-font-weight-active: 600;
+  --app-font-weight-strong: 600;
+  --app-font-weight-title: 600;
+  --app-line-height-title: 1.5;
+  --app-line-height-heading: 1.5;
+  --app-line-height-tight: 1.5;
+  --app-line-height-code: 1.65;
+  --app-line-height-body: 1.7;
+  --app-letter-spacing-label: 0;
+  --app-letter-spacing-brand: 0;
+  --app-letter-spacing-heading: -0.01em;
+  --app-letter-spacing-title: -0.015em;
+  --app-space-inline: 6px;
+  --app-space-stack: 10px;
+  --app-space-block: 14px;
+  --app-space-group: 20px;
+  --app-space-section: 32px;
+  --app-space-tree-row: 2px;
+  --app-space-tree-inset: 4px;
+  --app-space-tree-indent: 12px;
+  --app-space-page-top: 28px;
+  --app-space-gutter: 28px;
+  --app-space-column: 32px;
+  --app-space-sidebar-gap: 32px;
+  --app-size-sidebar: 240px;
+  --app-size-main: 900px;
+  --app-size-page: calc(var(--app-size-main) + (var(--app-size-sidebar) + var(--app-space-sidebar-gap) + var(--app-space-gutter)) * 2);
+  --app-size-brand: calc(var(--app-font-size-title) * var(--app-line-height-title) + var(--app-space-page-top) + var(--app-space-group));
+  --app-size-mobile-header: 56px;
+  --app-size-menu-button: 44px;
+  --app-size-drawer: 320px;
+  --app-size-navigation-fade: 28px;
+  --app-size-tree-toggle: 24px;
+  --app-space-anchor: 80px;
+  --app-radius-pill: 0;
+  --app-radius-card: 0;
+  --app-radius-box: 0;
+  --app-radius-inline: 0;
+  --app-radius-mark: 0;
+  --app-outline-focus: 2px solid var(--app-color-link);
+  --app-outline-focus-offset: 2px;
+  --app-z-index-sticky: 100;
+  --app-z-index-popper: 300;
+  --app-code-foreground: var(--app-color-text);
+  --app-code-background: var(--app-color-code);
+  --app-code-token-keyword: var(--app-color-text-strong);
+  --app-code-token-function: var(--app-color-accent);
+  --app-code-token-string: var(--app-color-verified);
+  --app-code-token-string-expression: var(--app-color-verified);
+  --app-code-token-constant: var(--app-color-unverified);
+  --app-code-token-parameter: var(--app-color-text);
+  --app-code-token-comment: var(--app-color-text-muted);
+  --app-code-token-punctuation: var(--app-color-text-muted);
+  --app-code-token-link: var(--app-color-link);
+}
+@media (width < 1024px) {
+  :root {
+    --app-space-page-top: 24px;
+    --app-space-gutter: 20px;
+    --app-space-tree-row: 7px;
+    --app-space-anchor: calc(var(--app-size-mobile-header) + var(--app-space-block));
+  }
+}
+@media (width < 640px) {
+  :root {
+    --app-space-page-top: 20px;
+    --app-space-gutter: 16px;
+  }
+}
+
+/* src/component/widget/shell/wg-shell.css */
+.wg_shell__root {
+  display: grid;
+  max-width: var(--app-size-page);
+  margin: 0 auto;
+  padding: 0 var(--app-space-gutter);
+  grid-template: "nav main outline" 1fr / calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap)) minmax(0, var(--app-size-main)) calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap));
+  background: var(--app-color-ground);
+  color: var(--app-color-text);
+  font-family: var(--app-font-sans);
+  font-size: var(--app-font-size-body);
+  line-height: var(--app-line-height-body);
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+  -webkit-font-smoothing: antialiased;
+}
+.wg_shell__root--drawerOpen {
+  overflow: hidden;
+}
+.wg_shell__browserRoot {
+  display: contents;
+}
+.wg_shell__main {
+  grid-area: main;
+  min-width: 0;
+  max-width: var(--app-size-main);
+  border-inline: 1px solid var(--app-color-border-layout);
+  padding-block: var(--app-size-brand) calc(100vh - var(--app-space-anchor));
+  padding-inline: var(--app-space-column);
+}
+@media (width < 1536px) {
+  .wg_shell__root {
+    grid-template: "nav main ." 1fr / calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap)) minmax(0, var(--app-size-main)) minmax(0, 1fr);
+  }
+}
+@media (width < 1024px) {
+  .wg_shell__root {
+    max-width: calc(var(--app-size-main) + var(--app-space-gutter) * 2);
+    grid-template: "nav" auto "main" 1fr / minmax(0, 1fr);
+  }
   .wg_shell__main {
     padding-block-start: var(--app-space-page-top);
     padding-inline: 0;