:root {
  --cat-accent: #56c7ff;
  --cat-accent-strong: #168fc9;
}

body {
  --cat-surface: color-mix(in srgb, var(--md-default-bg-color) 92%, var(--cat-accent) 8%);
  --cat-border: color-mix(in srgb, var(--md-default-fg-color) 18%, transparent);
}

.cat-media span { color: var(--md-default-fg-color--light); }
.cat-media { display: grid; min-height: 8rem; place-content: center; gap: 0.35rem; margin: 1rem 0 1.5rem; padding: 1rem 1.25rem; border-left: 3px solid var(--cat-accent-strong); background: transparent; text-align: left; }
.cat-media-hero { min-height: 20rem; }
.cat-video { display: block; width: 100%; height: auto; margin: 1rem 0 1.5rem; background: #000; }
.cat-step { margin: 1.5rem 0 2.5rem; }
.cat-step h3 { margin-top: 0; }
.cat-api-table code { white-space: nowrap; }
.cat-authoring-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0 1.75rem; }
.cat-authoring-grid figure { display: flex; flex-direction: column; overflow: hidden; margin: 0; border: 1px solid var(--cat-border); border-radius: 0.3rem; background: var(--md-default-bg-color); }
.cat-authoring-grid img { display: block; width: 100%; height: auto; }
.cat-authoring-grid figcaption { display: grid; flex: 1; gap: 0.12rem; margin: 0; padding: 0.65rem 0.75rem 0.75rem; border-top: 1px solid var(--cat-border); background: var(--cat-surface); color: var(--md-default-fg-color); font-style: normal; }
.cat-authoring-grid figcaption strong { color: var(--md-default-fg-color); font-style: normal; font-weight: 700; }
.cat-authoring-grid figcaption span { color: color-mix(in srgb, var(--md-default-fg-color) 90%, transparent); font-size: 0.75rem; font-style: normal; }

/* Unity Manual-inspired documentation shell: one persistent navigation tree
   on the left and no secondary table-of-contents rail on the right. */
.md-sidebar--secondary {
  display: none !important;
}

.md-header {
  z-index: 10;
}

.md-header__button.md-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 64px;
  margin: 4px 0px 0px 0px;
  padding: 4px 4px;
  box-sizing: border-box;
}

.md-header__button.md-logo img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.md-header__title {
  margin-left: 0;
}

.md-tabs {
  z-index: 9;
}

.md-sidebar--primary {
  z-index: 2;
}

.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item {
  margin-top: 0.3rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--cat-border);
}

.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > label.md-nav__link {
  color: var(--md-default-fg-color);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.035em;
}

.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list {
  margin-left: 0.15rem;
}

.md-sidebar--primary .md-nav__link--active {
  color: var(--cat-accent-strong) !important;
  font-weight: 700;
}

@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    position: sticky;
    top: 112px;
    height: calc(100vh - 112px);
  }

  .md-content {
    max-width: none;
  }

  .md-content__inner {
    max-width: 62rem;
  }
}

/* Keep the Manual rail on tablets. Phones use Material's native drawer so
   nested User Guide pages remain accessible and content keeps its width. */
@media screen and (min-width: 44.01rem) and (max-width: 76.234375em) {
  /* Keep the language dropdown above the sticky tab strip. Material gives
     both elements their own stacking level, and the later tab strip would
     otherwise cover the first language option on portrait screens. */
  .md-header .md-select {
    z-index: 10;
  }

  .md-tabs {
    display: block !important;
    position: sticky;
    top: 64px;
    height: 48px;
    overflow: hidden;
  }

  .md-tabs > .md-grid {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .md-tabs > .md-grid::-webkit-scrollbar {
    display: none;
  }

  .md-tabs__list {
    width: max-content;
    margin-left: 0;
    padding: 0 0.6rem;
  }

  .md-tabs__item {
    flex-shrink: 0;
  }

  .md-header__button[for="__drawer"] {
    display: none;
  }

  .md-header__button.md-logo {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .md-header__button.md-logo img {
    width: 48px;
    height: 48px;
  }

  .md-main__inner {
    display: grid;
    grid-template-columns: clamp(8.5rem, 30vw, 12rem) minmax(0, 1fr);
    align-items: start;
    gap: clamp(0.5rem, 2vw, 1rem);
    margin-top: 0;
  }

  .md-sidebar--primary {
    display: block !important;
    position: sticky;
    top: 112px;
    width: clamp(8.5rem, 30vw, 12rem);
    height: calc(100vh - 112px);
    transform: none !important;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap {
    margin: 0;
  }

  /* The mobile drawer repeats the site title above the navigation. The
     persistent rail already sits below the header, so keep only the tree. */
  .md-sidebar--primary .md-nav--primary > .md-nav__title,
  .md-sidebar--primary .md-nav--primary > .md-nav__source {
    display: none;
  }

  /* Match the wide layout: the tabs choose a section and the rail shows only
     that active section and its direct child pages. */
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item {
    display: none;
  }

  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--active {
    display: block;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav__link {
    margin-top: 0;
    padding-top: 0.6rem;
  }

  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav__link .md-nav__icon {
    display: none;
  }

  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav {
    display: block;
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    transform: none !important;
  }

  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav > .md-nav__title {
    display: none;
  }

  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list {
    display: block;
    margin: 0 0 0.55rem;
    padding: 0 0.35rem 0.35rem;
  }

  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list > .md-nav__item {
    padding: 0;
  }

  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list > .md-nav__item > .md-nav__link {
    margin: 0;
    padding: 0.24rem 0.35rem;
    color: var(--md-default-fg-color--light);
    font-size: 0.68rem;
    font-weight: 400;
  }

  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list > .md-nav__item > .md-nav__link--active {
    color: var(--cat-accent-strong);
    font-weight: 700;
  }

  /* Page-heading TOCs are intentionally omitted from the primary rail. Keep
     level-2 User Guide page lists visible. */
  .md-sidebar--primary .md-nav[data-md-level="2"] > .md-nav__list > .md-nav__item > .md-nav {
    display: none !important;
  }

  .md-content {
    grid-column: 2;
    min-width: 0;
  }
}

@media (max-width: 44rem) {
  .cat-media-hero { min-height: 14rem; }
  .cat-authoring-grid { grid-template-columns: 1fr; }
  .md-sidebar--primary { z-index: 6; }
}

/* Keep User Guide groups and their pages visible together in both the mobile
   drawer and the persistent tablet rail. Group labels are visual headings,
   while the level-2 items are direct page links. */
@media screen and (max-width: 76.234375em) {
  .md-sidebar--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item--section > .md-nav {
    display: block !important;
    position: static;
    width: auto;
    height: auto;
    opacity: 1 !important;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
    transform: none !important;
  }

  .md-sidebar--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item--section > .md-nav > .md-nav__title {
    display: none;
  }

  .md-sidebar--primary .md-nav[data-md-level="2"] > .md-nav__list > .md-nav__item > label.md-nav__link {
    display: none;
  }

  .md-sidebar--primary .md-nav[data-md-level="2"] > .md-nav__list > .md-nav__item > a.md-nav__link {
    display: flex !important;
    min-height: 0;
    margin: 0;
    padding: 0.24rem 0.35rem;
    font-size: 0.68rem;
    line-height: 1.4;
  }

  .md-sidebar--primary .md-nav[data-md-level="2"] > .md-nav__list > .md-nav__item > .md-nav {
    display: none !important;
  }
}

/* Make grouped User Guide sections read as headings instead of page links. */
.md-sidebar--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item--section {
  margin-top: 0.8rem;
  padding-top: 0;
  border-top: 0;
}

.md-sidebar--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item--section:first-child {
  margin-top: 0.35rem;
}

/* Material removes spacing from the first top-level tab only. Keep Overview
   aligned with Getting Started, User Guides, and API Reference. */
.md-sidebar--primary .md-nav[data-md-level="0"] > .md-nav__list > .md-nav__item--section:first-child {
  margin-top: 0.3rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--cat-border);
}

.md-sidebar--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item--section > .md-nav__link,
.md-sidebar--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item--section + .md-nav__item:not(.md-nav__item--section) > .md-nav__link {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  margin: 0 0 0.22rem;
  padding: 0.08rem 0.2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--md-default-fg-color);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.015em;
}

.md-sidebar--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item--section > .md-nav__link::before,
.md-sidebar--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item--section + .md-nav__item:not(.md-nav__item--section) > .md-nav__link::before {
  content: "";
  flex: 0 0 auto;
  width: 0.13rem;
  height: 0.9rem;
  border-radius: 0.08rem;
  background: var(--cat-accent-strong);
}

.md-sidebar--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item--section > .md-nav__link::after,
.md-sidebar--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item--section + .md-nav__item:not(.md-nav__item--section) > .md-nav__link::after {
  content: none;
}

.md-sidebar--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item--section > .md-nav__link > .md-nav__icon {
  display: none;
}

.md-sidebar--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item--section > .md-nav > .md-nav__list {
  margin-left: 0.15rem;
  padding: 0.08rem 0 0.05rem 0.55rem;
  border-left: 1px solid var(--cat-border);
}