:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host {
  /**
  * @prop --color-bottom-border: The border color for the bottom of the list items. Defaults to rgba(var(--nano-color-base-rgb-1000) / 10%)
  * @prop --color-text: The text color for the main list items. Defaults to var(--nano-color-neutral-1400)
  * @prop --color-primary: The primary color for the secondary list items. Defaults to var(--nano-color-primary-1100)
  * @prop --color-text-hover: The text color for all list items on hover. Defaults to var(--color-primary)
  * @prop --color-border-active: The border color for the active list items. Defaults to var(--nano-color-primary-1000)
  * @prop --color-bg: The background color for the nav. Defaults to var(--nano-color-primary-75)
  * @prop --font-size: The font size. Defaults to var(--nano-font-size-small)
  * @prop --font-weight: The font weight. Defaults to var(--nano-font-weight-normal)
  * @prop --font-weight-active: The font weight for the active list items. Defaults to var(--nano-font-weight-bold)
  * @prop --line-height: The line height. Defaults to var(--nano-line-height-dense)
  * @prop --letter-spacing: The letter spacing. Defaults to var(--nano-letter-spacing-loose)
  */
  display: block;
}

:host(.external-links) {
  --color-bg: var(--nano-color-base-0) !important;
}
:host(.external-links) .nano-details {
  --border-active: 3px solid var(--nano-color-neutral-1200) !important;
}
:host(.external-links) nav {
  border-block: 1px solid var(--nano-color-neutral-200);
}

.desktop-nav {
  display: block;
}
@media (width <= 730px) {
  .desktop-nav {
    display: none;
  }
}

.mobile-nav {
  display: none;
}
@media (width <= 730px) {
  .mobile-nav {
    display: block;
  }
}

nav {
  background-color: var(--color-bg);
  padding: 0;
}
@media (width <= 730px) {
  nav:has(.details-wrapper[open]) {
    box-shadow: var(--nano-shadow-l1);
  }
}

.header {
  padding: var(--spacing-l2) var(--spacing-l2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-l2);
  font-size: var(--font-size);
}
.header ::slotted(a[slot=back]), .header::slotted(a[slot=back]) {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0;
  gap: var(--spacing-l3) !important;
  cursor: pointer;
}
.header ::slotted(a[slot=back])::before, .header::slotted(a[slot=back])::before {
  content: "";
  display: inline-block;
  background-size: cover;
  inline-size: 1rem;
  block-size: 1rem;
  background-color: var(--color-primary);
  -webkit-mask-image: var(--nano-component-icon-chevron);
          mask-image: var(--nano-component-icon-chevron);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transform-origin: center;
  rotate: calc(180deg * var(--flip-icon-ltr));
}

.details-wrapper {
  --padding: 0;
  --btn-bg-color: transparent;
  --btn-bg-color--hover: transparent;
  --btn-text-color: var(--color-text);
  border: none;
}
.details-wrapper [part~=header], .details-wrapper::part(header) {
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  letter-spacing: var(--letter-spacing);
  padding: var(--spacing-l2);
}
.details-wrapper[open]::part(header) {
  background-color: var(--nano-color-primary-75);
}
.details-wrapper::part(content) {
  padding: 0;
}
.details-wrapper::part(body) {
  padding: 0;
}
.details-wrapper.sticky.stuck[open]::part(header) {
  z-index: var(--nano-z-index-menubar);
  inset-block-start: 0;
  position: sticky;
  box-shadow: var(--nano-shadow-l1);
  padding: var(--spacing-l2);
}
.details-wrapper a,
.details-wrapper ul,
.details-wrapper li {
  all: unset;
}
.details-wrapper ul {
  display: flex;
  flex-direction: column;
  list-style: none;
}
.details-wrapper ul:not(ul ul) {
  padding: 0 var(--spacing-l2) 0 var(--spacing-l2);
}
.details-wrapper a {
  cursor: pointer;
}
.details-wrapper a:hover {
  text-decoration: underline;
}
.details-wrapper a:focus-visible {
  outline: var(--nano-focus-ring);
  outline-offset: var(--nano-focus-ring-offset);
}
.details-wrapper ul > li:not(ul > li li) {
  margin: 0;
  padding: var(--spacing-l2) 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  inline-size: 100%;
}
.details-wrapper ul > li:not(ul > li li):not(:last-of-type) {
  border-block-end: 1px solid var(--color-bottom-border);
}
.details-wrapper ul > li:not(ul > li li) span, .details-wrapper ul > li:not(ul > li li) a {
  color: var(--color-text);
}
.details-wrapper ul > li:not(ul > li li) span.is-active, .details-wrapper ul > li:not(ul > li li) a.is-active {
  border-inline-start: var(--border-active);
  padding-inline-start: 1rem;
  display: block;
}
.details-wrapper ul > li:not(ul > li li) span:hover, .details-wrapper ul > li:not(ul > li li) a:hover {
  color: var(--color-text-hover);
}
.details-wrapper nano-details.is-active::part(header) {
  border-inline-start: var(--border-active);
  padding-inline-start: 1rem !important;
  color: var(--color-primary);
}
.details-wrapper ul > li > ul,
.details-wrapper ul > li > .nano-details ul {
  padding: var(--list-gap) 0 0 var(--spacing-l2);
  gap: var(--list-gap);
}
.details-wrapper ul > li > ul a,
.details-wrapper ul > li > .nano-details ul a {
  color: var(--color-primary) !important;
}
.details-wrapper ul > li > ul > li > .nano-details > ul,
.details-wrapper ul > li > .nano-details ul > li > .nano-details ul {
  padding: var(--list-gap) 0 0 var(--nano-spacing-xl);
}
.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details) {
  color: var(--color-text);
}
.details-wrapper .nano-details {
  --padding: 0;
  --btn-bg-color: transparent;
  --btn-bg-color--open: var(--nano-color-primary-75);
  --btn-bg-color--hover: transparent;
  border: none;
  color: var(--color-primary);
}
.details-wrapper .nano-details.is-active [part~=header],
.details-wrapper .nano-details .is-active::part(header) {
  border-inline-start: var(--border-active);
  padding-inline-start: 1rem !important;
  color: var(--color-primary);
}
.details-wrapper .nano-details[open] > [slot=icon-start] {
  rotate: 90deg;
}
.details-wrapper .nano-details::part(icon--start) {
  margin-inline-end: var(--spacing-l3);
}
.details-wrapper .nano-details [part~=header], .details-wrapper .nano-details::part(header) {
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  letter-spacing: var(--letter-spacing);
}
.details-wrapper .nano-details [part~=header]:hover, .details-wrapper .nano-details::part(header):hover {
  text-decoration: underline;
}
.details-wrapper .nano-details:not(.nav-details) {
  color: var(--color-primary);
}