for-humanity 0.1.0

package/dist/cli.css

@@ -0,0 +1,962 @@
+/* src/component/widget/prose/wg-prose.css */
+.wg_prose__root {
+  & h1 {
+    margin: 0 0 var(--app-space-stack);
+    color: var(--app-color-text-strong);
+    font-size: var(--app-font-size-title);
+    font-weight: var(--app-font-weight-title);
+    line-height: var(--app-line-height-title);
+    letter-spacing: var(--app-letter-spacing-title);
+    text-wrap: balance;
+    text-box: trim-start cap alphabetic;
+  }
+  & p {
+    margin: 0 0 var(--app-space-stack);
+  }
+  & img {
+    max-width: 100%;
+    height: auto;
+    vertical-align: middle;
+  }
+  & h1 + p {
+    font-size: var(--app-font-size-lead);
+  }
+  & h2 {
+    margin: var(--app-space-section) 0 var(--app-space-stack);
+    padding-top: var(--app-space-block);
+    border-top: 1px dotted var(--app-color-border);
+    color: var(--app-color-text-strong);
+    font-size: var(--app-font-size-section);
+    font-weight: var(--app-font-weight-strong);
+    line-height: var(--app-line-height-heading);
+    letter-spacing: var(--app-letter-spacing-heading);
+    text-wrap: balance;
+    scroll-margin-top: var(--app-space-anchor);
+  }
+  & .wg_prose__head + h2 {
+    margin-top: var(--app-space-group);
+    padding-top: 0;
+    border-top: 0;
+  }
+  & .wg_prose__part + h2 {
+    margin-top: var(--app-space-block);
+    padding-top: 0;
+    border-top: 0;
+  }
+  & h3 {
+    margin: var(--app-space-group) 0 var(--app-space-inline);
+    color: var(--app-color-text-strong);
+    font-size: var(--app-font-size-lead);
+    font-weight: var(--app-font-weight-strong);
+    line-height: var(--app-line-height-tight);
+    scroll-margin-top: var(--app-space-anchor);
+  }
+  & h4 {
+    margin: var(--app-space-group) 0 6px;
+    color: var(--app-color-text-strong);
+    font-size: var(--app-font-size-body);
+    font-weight: var(--app-font-weight-strong);
+  }
+  & h5 {
+    margin: var(--app-space-block) 0 6px;
+    color: var(--app-color-text-muted);
+    font-size: var(--app-font-size-dense);
+    font-weight: var(--app-font-weight-strong);
+  }
+  & a {
+    color: var(--app-color-link);
+    text-decoration: none;
+    text-underline-offset: 2px;
+  }
+  & a:visited {
+    color: var(--app-color-link-visited);
+  }
+  & a:hover {
+    color: var(--app-color-link-hover);
+    text-decoration: underline;
+  }
+  & a:focus-visible {
+    border-radius: var(--app-radius-mark);
+    outline: var(--app-outline-focus);
+    outline-offset: var(--app-outline-focus-offset);
+  }
+  & strong {
+    color: var(--app-color-text-strong);
+    font-weight: var(--app-font-weight-strong);
+  }
+  & ul {
+    margin: 0 0 var(--app-space-stack);
+    padding-left: 20px;
+  }
+  & ol {
+    margin: 0 0 var(--app-space-stack);
+    padding-left: 22px;
+  }
+  & li {
+    margin-bottom: 4px;
+  }
+  & li > ul {
+    margin: 4px 0 0;
+  }
+  & li > ol {
+    margin: 4px 0 0;
+  }
+  & code {
+    padding: 1px 3px;
+    border-radius: var(--app-radius-inline);
+    background: var(--app-color-code);
+    color: var(--app-color-text-strong);
+    font-family: var(--app-font-mono);
+    font-size: 1em;
+    font-variant-ligatures: none;
+  }
+  & pre {
+    overflow-x: auto;
+    margin: var(--app-space-block) 0;
+    padding: var(--app-space-stack) var(--app-space-block);
+    border: 1px solid var(--app-color-border);
+    border-radius: var(--app-radius-box);
+    background: var(--app-color-code);
+    font-family: var(--app-font-mono);
+    font-size: var(--app-font-size-detail);
+    font-variant-ligatures: none;
+    line-height: var(--app-line-height-code);
+  }
+  & pre code {
+    padding: 0;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+  }
+  & blockquote {
+    margin: var(--app-space-block) 0;
+    padding: 0 0 0 var(--app-space-block);
+    border-left: 1px solid var(--app-color-border);
+  }
+  & blockquote > :last-child {
+    margin-bottom: 0;
+  }
+  & table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--app-font-size-dense);
+    font-variant-numeric: tabular-nums;
+  }
+  & th {
+    padding: var(--app-space-inline) var(--app-space-stack);
+    border-bottom: 1px dotted var(--app-color-border);
+    color: var(--app-color-text-strong);
+    font-weight: var(--app-font-weight-strong);
+    text-align: left;
+    vertical-align: bottom;
+    white-space: nowrap;
+  }
+  & td {
+    padding: var(--app-space-inline) var(--app-space-stack);
+    border-bottom: 1px solid var(--app-color-border-soft);
+    text-align: left;
+    vertical-align: top;
+  }
+  & tbody tr:last-child td {
+    border-bottom: 0;
+  }
+  & tbody tr:hover td {
+    background: var(--app-color-accent-soft);
+  }
+  & hr {
+    margin: var(--app-space-section) 0;
+    border: 0;
+    border-top: 1px dotted var(--app-color-border);
+  }
+}
+.wg_prose__head {
+  margin-bottom: var(--app-space-inline);
+  padding-bottom: var(--app-space-block);
+  border-bottom: 1px dotted var(--app-color-border);
+  & > :last-child {
+    margin-bottom: 0;
+  }
+  & [align=center] {
+    padding: var(--app-space-group) 0;
+    text-align: center;
+  }
+  & [align=center] > h1 {
+    margin-block: var(--app-space-group);
+    font-size: 24px;
+  }
+  & [align=center] > p {
+    margin-bottom: var(--app-space-block);
+  }
+  & [align=center] > img {
+    width: 72px;
+    image-rendering: pixelated;
+  }
+}
+.wg_prose__headingText {
+  box-decoration-break: clone;
+  transition: background-color var(--app-motion-duration-highlight-fade) var(--app-motion-easing-out);
+}
+.wg_prose__headingText--highlighted {
+  background-color: var(--app-color-anchor-highlight);
+  transition: none;
+}
+.wg_prose__part {
+  margin-top: var(--app-space-section);
+  padding-top: var(--app-space-stack);
+  border-top: 1px dotted var(--app-color-border);
+  color: var(--app-color-text-strong);
+  font-size: var(--app-font-size-part);
+  font-weight: var(--app-font-weight-strong);
+  line-height: var(--app-line-height-heading);
+  letter-spacing: var(--app-letter-spacing-heading);
+}
+.wg_prose__table {
+  overflow-x: auto;
+  margin: var(--app-space-block) 0;
+}
+.wg_prose__pill {
+  display: inline-block;
+  padding: 0 5px;
+  border-radius: var(--app-radius-inline);
+  font-size: var(--app-font-size-detail);
+  font-weight: var(--app-font-weight-strong);
+  line-height: 1.6;
+  white-space: nowrap;
+}
+.wg_prose__pill--verified {
+  background: var(--app-color-verified-soft);
+  color: var(--app-color-verified);
+}
+.wg_prose__pill--unverified {
+  background: var(--app-color-unverified-soft);
+  color: var(--app-color-unverified);
+}
+.wg_prose__color {
+  white-space: nowrap;
+  &::before {
+    display: inline-block;
+    width: 0.8em;
+    height: 0.8em;
+    margin-right: 5px;
+    border: 1px solid var(--app-color-border);
+    border-radius: var(--app-radius-mark);
+    background: var(--wg-prose-chip-color, transparent);
+    content: "";
+    vertical-align: -0.05em;
+  }
+}
+.wg_prose__flow {
+  overflow-x: auto;
+  margin: var(--app-space-block) 0;
+  padding: var(--app-space-block) 0;
+  & svg {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto;
+  }
+}
+.wg_prose__note {
+  margin: var(--app-space-block) 0;
+  padding-left: var(--app-space-block);
+  border-left: 2px solid var(--app-color-border);
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+.wg_prose__noteTitle {
+  display: block;
+  margin-bottom: var(--app-space-inline);
+  color: var(--app-color-text-strong);
+  font-weight: var(--app-font-weight-strong);
+}
+.wg_prose__details {
+  margin: var(--app-space-block) 0;
+  padding-bottom: var(--app-space-stack);
+  border-top: 1px dotted var(--app-color-border);
+  border-bottom: 1px dotted var(--app-color-border);
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+.wg_prose__detailsSummary {
+  padding: var(--app-space-inline) 0;
+  color: var(--app-color-link);
+  font-weight: var(--app-font-weight-strong);
+  cursor: pointer;
+  &:hover {
+    color: var(--app-color-link-hover);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+  &:focus-visible {
+    outline: var(--app-outline-focus);
+    outline-offset: var(--app-outline-focus-offset);
+  }
+}
+
+/* src/component/widget/shell/_wg-shell-nav.css */
+.wg_shellNav__root {
+  font-size: var(--app-font-size-dense);
+  line-height: var(--app-line-height-tight);
+}
+.wg_shellNav__docs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--app-space-stack);
+}
+.wg_shellNav__list {
+  margin: 0 0 0 var(--app-space-tree-inset);
+  padding: 0;
+  list-style: none;
+}
+.wg_shellNav__item {
+  position: relative;
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    border-left: 1px solid var(--app-color-border-soft);
+    content: "";
+    pointer-events: none;
+  }
+  &:where(:last-child)::before {
+    bottom: auto;
+    height: calc(0.5lh + var(--app-space-tree-row));
+  }
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: calc(0.5lh + var(--app-space-tree-row));
+    border-left: 1px solid transparent;
+    content: "";
+    pointer-events: none;
+  }
+  &:where(:hover)::after {
+    border-left-color: var(--app-color-text-strong);
+  }
+  &:where(:has(:focus-visible))::after {
+    border-left-color: var(--app-color-text-strong);
+  }
+  &:where(:has(~ .wg_shellNav__item:hover))::before {
+    border-left-color: var(--app-color-text-strong);
+  }
+  &:where(:has(~ .wg_shellNav__item :focus-visible))::before {
+    border-left-color: var(--app-color-text-strong);
+  }
+}
+.wg_shellNav__item--trail {
+  &::before {
+    border-left-color: var(--app-color-text-strong);
+  }
+}
+.wg_shellNav__item--current {
+  &::after {
+    border-left-color: var(--app-color-text-strong);
+  }
+}
+.wg_shellNav__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));
+  color: var(--app-color-text);
+  font-size: var(--app-font-size-dense);
+  line-height: var(--app-line-height-tight);
+  text-decoration: none;
+  &::before {
+    position: absolute;
+    top: calc(0.5lh + var(--app-space-tree-row));
+    left: 0;
+    width: var(--app-space-tree-indent);
+    border-top: 1px solid var(--app-color-border-soft);
+    content: "";
+    pointer-events: none;
+  }
+  &:where(:hover) {
+    text-decoration: underline;
+  }
+  &:where(:hover)::before {
+    border-top-color: currentcolor;
+  }
+  &:where(:focus-visible) {
+    outline: none;
+    text-decoration: underline;
+  }
+  &:where(:focus-visible)::before {
+    border-top-color: currentcolor;
+  }
+}
+.wg_shellNav__link--active {
+  color: var(--app-color-text-strong);
+  font-weight: var(--app-font-weight-active);
+  &::before {
+    border-top-color: currentcolor;
+  }
+}
+.wg_shellNav__group {
+  margin: 0 0 4px;
+  color: var(--app-color-text-muted);
+  font-size: var(--app-font-size-label);
+  text-box: trim-start cap alphabetic;
+}
+
+/* src/component/widget/shell/_wg-shell-toc.css */
+.wg_shellToc__root {
+  margin-top: var(--app-space-group);
+  padding-top: var(--app-space-group);
+  border-top: 1px solid var(--app-color-border-soft);
+  font-size: var(--app-font-size-dense);
+  line-height: var(--app-line-height-tight);
+}
+.wg_shellToc__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-mark);
+  letter-spacing: var(--app-letter-spacing-label);
+}
+.wg_shellToc__group {
+  margin: var(--app-space-stack) 0 4px;
+  color: var(--app-color-text-muted);
+  font-size: var(--app-font-size-label);
+}
+.wg_shellToc__list {
+  margin: 0 0 0 var(--app-space-tree-inset);
+  padding: 0;
+  list-style: none;
+}
+.wg_shellToc__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));
+  color: var(--app-color-text-muted);
+  font-size: var(--app-font-size-dense);
+  line-height: var(--app-line-height-tight);
+  text-decoration: none;
+  &::before {
+    position: absolute;
+    top: calc(0.5lh + var(--app-space-tree-row));
+    left: 0;
+    width: var(--app-space-tree-indent);
+    border-top: 1px solid var(--app-color-border-soft);
+    content: "";
+    pointer-events: none;
+  }
+  &:where(:hover) {
+    color: var(--app-color-text-strong);
+    text-decoration: underline;
+  }
+  &:where(:hover)::before {
+    border-top-color: currentcolor;
+  }
+  &:where(:focus-visible) {
+    outline: none;
+    color: var(--app-color-text-strong);
+    text-decoration: underline;
+  }
+  &:where(:focus-visible)::before {
+    border-top-color: currentcolor;
+  }
+}
+.wg_shellToc__link--active {
+  color: var(--app-color-text-strong);
+  font-weight: var(--app-font-weight-active);
+  &::before {
+    border-top-color: currentcolor;
+  }
+}
+.wg_shellToc__item {
+  display: flow-root;
+  position: relative;
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    border-left: 1px solid var(--app-color-border-soft);
+    content: "";
+    pointer-events: none;
+  }
+  &:where(:last-child)::before {
+    bottom: auto;
+    height: calc(0.5lh + var(--app-space-tree-row));
+  }
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: calc(0.5lh + var(--app-space-tree-row));
+    border-left: 1px solid transparent;
+    content: "";
+    pointer-events: none;
+  }
+  &:where(:hover)::after {
+    border-left-color: var(--app-color-text-strong);
+  }
+  &:where(:has(:focus-visible))::after {
+    border-left-color: var(--app-color-text-strong);
+  }
+  &:where(:has(~ .wg_shellToc__item:hover))::before {
+    border-left-color: var(--app-color-text-strong);
+  }
+  &:where(:has(~ .wg_shellToc__item :focus-visible))::before {
+    border-left-color: var(--app-color-text-strong);
+  }
+  &:where(:hover) > .wg_shellToc__link::before {
+    border-top-color: var(--app-color-text-strong);
+  }
+  &:where(:has(:focus-visible)) > .wg_shellToc__link::before {
+    border-top-color: var(--app-color-text-strong);
+  }
+}
+.wg_shellToc__item--trail {
+  &::before {
+    border-left-color: var(--app-color-text-strong);
+  }
+}
+.wg_shellToc__item--current {
+  &::after {
+    border-left-color: var(--app-color-text-strong);
+  }
+}
+.wg_shellToc__sub {
+  margin: var(--app-space-tree-row) 0 4px var(--app-space-tree-indent);
+  padding: 0;
+  list-style: none;
+}
+.wg_shellToc__subItem {
+  position: relative;
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    border-left: 1px solid var(--app-color-border-soft);
+    content: "";
+    pointer-events: none;
+  }
+  &:where(:last-child)::before {
+    bottom: auto;
+    height: calc(0.5lh + var(--app-space-tree-row));
+  }
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: calc(0.5lh + var(--app-space-tree-row));
+    border-left: 1px solid transparent;
+    content: "";
+    pointer-events: none;
+  }
+  &:where(:hover)::after {
+    border-left-color: var(--app-color-text-strong);
+  }
+  &:where(:has(:focus-visible))::after {
+    border-left-color: var(--app-color-text-strong);
+  }
+  &:where(:has(~ .wg_shellToc__subItem:hover))::before {
+    border-left-color: var(--app-color-text-strong);
+  }
+  &:where(:has(~ .wg_shellToc__subItem :focus-visible))::before {
+    border-left-color: var(--app-color-text-strong);
+  }
+}
+.wg_shellToc__subItem--trail {
+  &::before {
+    border-left-color: var(--app-color-text-strong);
+  }
+}
+.wg_shellToc__subItem--current {
+  &::after {
+    border-left-color: var(--app-color-text-strong);
+  }
+}
+.wg_shellToc__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));
+  color: var(--app-color-text-muted);
+  font-size: var(--app-font-size-detail);
+  line-height: var(--app-line-height-tight);
+  text-decoration: none;
+  &::before {
+    position: absolute;
+    top: calc(0.5lh + var(--app-space-tree-row));
+    left: 0;
+    width: var(--app-space-tree-indent);
+    border-top: 1px solid var(--app-color-border-soft);
+    content: "";
+    pointer-events: none;
+  }
+  &:where(:hover) {
+    color: var(--app-color-text-strong);
+    text-decoration: underline;
+  }
+  &:where(:hover)::before {
+    border-top-color: currentcolor;
+  }
+  &:where(:focus-visible) {
+    outline: none;
+    color: var(--app-color-text-strong);
+    text-decoration: underline;
+  }
+  &:where(:focus-visible)::before {
+    border-top-color: currentcolor;
+  }
+}
+.wg_shellToc__subLink--active {
+  color: var(--app-color-text-strong);
+  font-weight: var(--app-font-weight-active);
+  &::before {
+    border-top-color: currentcolor;
+  }
+}
+
+/* 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-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: 500;
+  --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-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 {
+  display: flex;
+  position: sticky;
+  top: 0;
+  z-index: var(--app-z-index-sticky);
+  align-self: start;
+  min-width: 0;
+  height: var(--app-size-brand);
+  padding-block: var(--app-space-page-top) var(--app-space-group);
+  background: var(--app-color-ground);
+  gap: var(--app-space-inline);
+  align-items: start;
+}
+.wg_shell__brand {
+  display: block;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--app-color-text-strong);
+  font-family: var(--app-font-brand);
+  font-size: var(--app-font-size-title);
+  font-weight: var(--app-font-weight-mark);
+  line-height: var(--app-line-height-title);
+  letter-spacing: var(--app-letter-spacing-brand);
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  &:hover {
+    text-decoration: underline;
+  }
+  &:focus-visible {
+    outline: none;
+    text-decoration: underline;
+  }
+}
+.wg_shell__menuIcon {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: currentcolor;
+  stroke-linecap: round;
+  stroke-width: 1.5;
+}
+.wg_shell__menuToggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--app-size-menu-button);
+  height: var(--app-size-menu-button);
+  padding: 0;
+  border: 0;
+  border-radius: var(--app-radius-box);
+  background: transparent;
+  color: var(--app-color-text-strong);
+  cursor: pointer;
+  &:hover {
+    background: var(--app-color-accent-soft);
+  }
+  &:focus-visible {
+    outline: var(--app-outline-focus);
+    outline-offset: var(--app-outline-focus-offset);
+  }
+}
+.wg_shell__menuToggle--visible {
+  display: flex;
+}
+.wg_shell__sidebar {
+  grid-area: nav;
+  position: sticky;
+  top: 0;
+  align-self: start;
+  min-width: 0;
+  min-height: 100vh;
+  max-height: 100vh;
+  margin-inline-end: var(--app-space-sidebar-gap);
+  overflow-y: auto;
+  scroll-padding-block: var(--app-size-brand) var(--app-space-block);
+}
+.wg_shell__navigation {
+  min-width: 0;
+}
+.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 {
+  position: fixed;
+  inset: 0 auto 0 0;
+  width: min(var(--app-size-drawer), calc(100% - var(--app-space-gutter) * 2));
+  max-width: none;
+  height: 100dvh;
+  max-height: 100dvh;
+  margin: 0;
+  padding: 0 var(--app-space-gutter) var(--app-space-group);
+  border: 0;
+  border-right: 1px solid var(--app-color-border-layout);
+  background: var(--app-color-ground);
+  color: var(--app-color-text);
+  overscroll-behavior: contain;
+  scroll-padding-block: var(--app-size-mobile-header) var(--app-space-group);
+  &::backdrop {
+    background: var(--app-color-backdrop);
+  }
+}
+.wg_shell__drawerHeader {
+  position: sticky;
+  top: 0;
+  z-index: var(--app-z-index-sticky);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--app-space-inline);
+  min-height: var(--app-size-mobile-header);
+  margin-bottom: var(--app-space-block);
+  background: var(--app-color-ground);
+}
+.wg_shell__drawerTitle {
+  margin: 0;
+  font-size: var(--app-font-size-part);
+  font-weight: var(--app-font-weight-strong);
+}
+.wg_shell__drawerClose {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--app-size-menu-button);
+  height: var(--app-size-menu-button);
+  padding: 0;
+  border: 0;
+  border-radius: var(--app-radius-box);
+  background: transparent;
+  color: var(--app-color-text-strong);
+  cursor: pointer;
+  &:hover {
+    background: var(--app-color-accent-soft);
+  }
+  &:focus-visible {
+    outline: var(--app-outline-focus);
+    outline-offset: var(--app-outline-focus-offset);
+  }
+}
+.wg_shell__drawerContent {
+  min-width: 0;
+}
+.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 (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__sidebar {
+    position: static;
+    min-height: 0;
+    max-height: none;
+    overflow-y: visible;
+    margin-block-end: var(--app-space-block);
+    margin-inline-end: 0;
+    border-bottom: 1px solid var(--app-color-border-layout);
+  }
+  .wg_shell__sidebar--navigationReady {
+    position: sticky;
+    top: 0;
+    z-index: var(--app-z-index-sticky);
+    background: var(--app-color-ground);
+  }
+  .wg_shell__brandRow {
+    position: static;
+    height: var(--app-size-mobile-header);
+    padding-block: 0;
+    align-items: center;
+  }
+  .wg_shell__main {
+    padding-block-start: var(--app-space-page-top);
+    padding-inline: 0;
+    border-inline: 0;
+  }
+}