/* 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;
  }
}