/* Guide: a help center laid out like Intercom's Help Center template
   (hero search, collections sidebar, collection cards, article pages with an
   author line and an "On this page" rail), in the site's own dark palette.
   Every rule is scoped under .hc so the rest of the site is untouched. */

/* The site sets overflow-x: hidden on body, which turns body into a scroll container and stops
   position: sticky. On guide pages clip it instead, so the sidebar and the "On this page" rail
   follow the reader. */
body:has(.hc) {
  overflow-x: clip;
}

.hc {
  --hc-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --hc-line: rgba(255, 255, 255, 0.09);
  --hc-surface: rgba(255, 255, 255, 0.025);
  --hc-text: #e2e8f0;
  --hc-side-w: 304px;
  display: block;
  padding-bottom: 72px;
}

.hc h1,
.hc h2,
.hc h3 {
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
  color: #fff;
}

.hc a:hover {
  text-shadow: none;
}

.hc svg {
  flex: none;
}

/* --- Hero with the search box --- */
.hc-hero {
  position: relative;
  padding: 76px 24px 68px;
  text-align: center;
  border-bottom: 1px solid var(--hc-line);
  background:
    radial-gradient(ellipse 60% 90% at 18% 0%, rgba(0, 255, 163, 0.13), transparent 70%),
    radial-gradient(ellipse 55% 80% at 88% 100%, rgba(188, 19, 254, 0.14), transparent 70%),
    #05070b;
  overflow: hidden;
}

.hc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%, transparent 100%);
  pointer-events: none;
}

.hc-hero__inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

.hc-hero__title {
  font-family: var(--hc-serif);
  font-weight: 500;
  font-size: clamp(2.3rem, 5.2vw, 3.7rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}

.hc-hero__sub {
  margin: 0 auto;
  max-width: 560px;
  font-size: 1.08rem;
  color: #cbd5e1;
}

/* --- Search --- */
.hc-search {
  position: relative;
  max-width: 600px;
  margin: 30px auto 0;
  text-align: left;
}

.hc-search__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.hc-search input {
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  padding: 0 60px 0 46px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 11, 16, 0.92);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.hc-search input::placeholder {
  color: #7c8798;
}

.hc-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 255, 163, 0.16);
}

.hc-search input::-webkit-search-cancel-button {
  display: none;
}

.hc-kbd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #94a3b8;
  font: 600 0.72rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  pointer-events: none;
}

.hc-search--side {
  margin: 0 0 20px;
}

.hc-search--side input {
  height: 40px;
  font-size: 0.92rem;
  padding-left: 38px;
  border-radius: 8px;
}

.hc-search--side .hc-search__icon {
  left: 12px;
}

.hc-results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(62vh, 520px);
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: #0b0f15;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  padding: 6px;
}

.hc-search--side .hc-results {
  min-width: 300px;
}

.hc-results__group {
  padding: 10px 10px 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7c8798;
}

.hc-result {
  display: block;
  padding: 10px;
  border-radius: 8px;
  color: #fff;
}

.hc-result:hover,
.hc-result.is-active {
  background: rgba(0, 255, 163, 0.08);
  color: #fff;
}

.hc-result__t {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
}

.hc-result__d {
  display: block;
  margin-top: 2px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.hc-result--soon {
  cursor: default;
  opacity: 0.6;
}

.hc-result--soon:hover {
  background: none;
}

.hc-results__empty {
  padding: 14px 10px;
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* --- Two-column layout --- */
.hc-layout {
  display: grid;
  grid-template-columns: var(--hc-side-w) minmax(0, 1fr);
  max-width: 1360px;
  margin: 0 auto;
}

.hc-side {
  position: sticky;
  top: 73px;
  align-self: start;
  max-height: calc(100vh - 73px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 28px 18px 40px 24px;
  border-right: 1px solid var(--hc-line);
  scrollbar-width: thin;
}

.hc-side__toggle {
  display: none;
}

.hc-side__list,
.hc-side__arts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hc-side__coll {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  border-radius: 8px;
  color: var(--hc-text);
  font-size: 0.93rem;
  font-weight: 600;
}

.hc-side__coll:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.hc-side__coll span {
  flex: 1;
  min-width: 0;
}

.hc-side__coll .hc-chev {
  color: #64748b;
  transition: transform 0.15s;
}

.hc-side__item.is-open > .hc-side__coll .hc-chev {
  transform: rotate(90deg);
}

.hc-side__coll.is-active {
  color: var(--primary);
}

.hc-side__arts {
  display: none;
  margin: 4px 0 10px 15px;
  border-left: 1px solid var(--hc-line);
}

.hc-side__item.is-open > .hc-side__arts {
  display: block;
}

.hc-side__art {
  display: block;
  margin-left: -1px;
  padding: 6px 10px 6px 16px;
  border-left: 1px solid transparent;
  color: var(--text-muted);
  font-size: 0.87rem;
  line-height: 1.4;
}

a.hc-side__art:hover {
  color: #fff;
}

.hc-side__art.is-active {
  color: var(--primary);
  border-left-color: var(--primary);
}

.hc-side__art.is-soon {
  color: #5b6577;
}

.hc-content {
  min-width: 0;
  padding: 36px 44px 24px;
}

.hc-section-title {
  font-family: var(--hc-serif);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}

/* --- Collection cards --- */
.hc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 960px;
}

.hc-card {
  display: flex;
  flex-direction: column;
  min-height: 248px;
  border: 1px solid var(--hc-line);
  border-radius: 12px;
  background: var(--hc-surface);
  color: inherit;
  transition: border-color 0.18s, transform 0.18s, background 0.18s;
}

.hc-card:hover {
  border-color: var(--border-hover);
  background: rgba(0, 255, 163, 0.03);
  transform: translateY(-2px);
  color: inherit;
}

.hc-card__top {
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--hc-line);
}

.hc-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: rgba(0, 255, 163, 0.08);
  color: var(--primary);
}

.hc-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px 20px;
}

.hc-card__title {
  font-size: 1.04rem;
  font-weight: 600;
  color: #fff;
}

.hc-card__desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.hc-card__count {
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.8rem;
  color: #7c8798;
}

/* --- Breadcrumbs, titles and the author line --- */
.hc-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 22px;
  font-size: 0.86rem;
  color: #7c8798;
}

.hc-crumbs a {
  color: #94a3b8;
}

.hc-crumbs a:hover {
  color: #fff;
}

.hc-crumbs [aria-current] {
  color: #cbd5e1;
}

.hc-title {
  font-family: var(--hc-serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}

.hc-lead {
  margin: 0 0 18px;
  max-width: 70ch;
  font-size: 1.12rem;
  color: #aab6c6;
}

.hc-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 34px;
  font-size: 0.86rem;
  color: #94a3b8;
}

.hc-meta__dot {
  color: #475569;
}

.hc-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 163, 0.3);
  background: #0b1310;
}

.hc-avatar img {
  width: 15px;
  height: 15px;
}

/* --- Article rows on a collection page --- */
.hc-list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  max-width: 860px;
}

.hc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--hc-line);
  color: #fff;
  font-size: 0.98rem;
  font-weight: 500;
}

a.hc-row:hover {
  color: var(--primary);
}

.hc-row svg {
  color: #64748b;
}

a.hc-row:hover svg {
  color: var(--primary);
}

.hc-row.is-soon {
  color: #8a94a6;
}

.hc-soon {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--hc-line);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #7c8798;
}

.hc-preview {
  max-width: 860px;
  margin: 0 0 28px;
  padding: 12px 16px;
  border: 1px dashed rgba(0, 255, 163, 0.35);
  border-radius: 10px;
  font-size: 0.9rem;
  color: #a7f3d0;
}

/* --- Article page --- */
.hc-article {
  display: grid;
  grid-template-columns: minmax(0, 780px) 220px;
  gap: 56px;
  justify-content: start;
}

.hc-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 0 26px;
  margin: 0 0 30px;
  border-bottom: 1px solid var(--hc-line);
}

.hc-byline__who {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #94a3b8;
}

.hc-byline__who strong {
  display: block;
  font-weight: 500;
  color: #e2e8f0;
}

.hc-byline .hc-avatar {
  width: 38px;
  height: 38px;
}

.hc-byline .hc-avatar img {
  width: 18px;
  height: 18px;
}

.hc-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: #e2e8f0;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
}

.hc-copy:hover {
  border-color: var(--border-hover);
  color: #fff;
}

.hc-prose {
  color: #cbd5e1;
}

.hc-prose h2 {
  font-family: var(--hc-serif);
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 44px 0 14px;
  scroll-margin-top: 96px;
}

.hc-prose h2:first-child {
  margin-top: 0;
}

.hc-prose h3 {
  font-size: 1.15rem;
  margin: 28px 0 10px;
  scroll-margin-top: 96px;
}

.hc-prose p,
.hc-prose li {
  font-size: 1.04rem;
  line-height: 1.75;
  color: #cbd5e1;
}

.hc-prose p {
  margin: 0 0 18px;
}

.hc-prose ul,
.hc-prose ol {
  margin: 0 0 20px;
  padding-left: 1.3em;
}

.hc-prose li {
  margin: 0 0 8px;
}

.hc-prose strong {
  color: #fff;
}

.hc-prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 255, 163, 0.4);
}

.hc-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 8px 0 24px;
  border-radius: 10px;
  border: 1px solid var(--hc-line);
}

.hc-fig {
  margin: 8px 0 28px;
}

.hc-prose .hc-fig img {
  width: 100%;
  margin: 0 0 10px;
}

.hc-fig figcaption {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #94a3b8;
  text-align: center;
}

.hc-callout {
  margin: 0 0 22px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid rgba(0, 255, 163, 0.25);
  background: rgba(0, 255, 163, 0.05);
}

.hc-callout p:last-child {
  margin-bottom: 0;
}

.hc-callout--warn {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.06);
}

.hc-react {
  margin: 48px 0 0;
  padding: 26px 0 8px;
  border-top: 1px solid var(--hc-line);
  text-align: center;
}

.hc-react p {
  margin: 0 0 12px;
  font-size: 0.98rem;
  color: #cbd5e1;
}

.hc-react__btns {
  display: inline-flex;
  gap: 10px;
}

.hc-react button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--hc-line);
  background: var(--hc-surface);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}

.hc-react button:hover {
  transform: scale(1.1);
  border-color: var(--border-hover);
}

.hc-react button[aria-pressed="true"] {
  border-color: var(--primary);
  background: rgba(0, 255, 163, 0.1);
}

.hc-react__thanks {
  min-height: 1.5em;
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--primary);
}

.hc-related {
  margin-top: 40px;
}

.hc-related h2 {
  font-family: var(--hc-serif);
  font-weight: 500;
  font-size: 1.3rem;
  margin: 0 0 8px;
}

/* "On this page" rail */
.hc-rail {
  position: sticky;
  top: 100px;
  align-self: start;
  padding-top: 4px;
}

.hc-rail__label {
  margin: 0 0 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #e2e8f0;
}

.hc-rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--hc-line);
}

.hc-rail a {
  display: block;
  margin-left: -1px;
  padding: 5px 0 5px 14px;
  border-left: 1px solid transparent;
  font-size: 0.84rem;
  line-height: 1.4;
  color: #94a3b8;
}

.hc-rail a:hover {
  color: #fff;
}

.hc-rail a.is-active {
  color: var(--primary);
  border-left-color: var(--primary);
}

/* The same list for screens too narrow for the rail: a box under the byline that opens on tap. */
.hc-toc {
  display: none;
  margin: -6px 0 30px;
  border: 1px solid var(--hc-line);
  border-radius: 12px;
  background: var(--hc-surface);
}

.hc-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--hc-text);
  cursor: pointer;
  list-style: none;
}

.hc-toc summary::-webkit-details-marker {
  display: none;
}

.hc-toc summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #94a3b8;
  border-bottom: 1.5px solid #94a3b8;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s;
}

.hc-toc[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.hc-toc ol {
  margin: 0;
  padding: 4px 16px 14px 34px;
  border-top: 1px solid var(--hc-line);
}

.hc-toc li {
  padding: 6px 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.hc-toc a {
  color: #94a3b8;
}

.hc-toc a:hover {
  color: #fff;
}

/* --- Responsive --- */
@media (max-width: 1280px) {
  .hc-article {
    grid-template-columns: minmax(0, 780px);
  }

  .hc-rail {
    display: none;
  }

  .hc-toc {
    display: block;
  }
}

@media (max-width: 1120px) {
  .hc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .hc-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .hc-side {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 16px 16px 0;
    border-right: 0;
  }

  .hc-side__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--hc-line);
    border-radius: 10px;
    background: var(--hc-surface);
    color: #e2e8f0;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
  }

  .hc-side__toggle .hc-chev {
    transform: rotate(90deg);
    transition: transform 0.15s;
  }

  .hc-side__toggle[aria-expanded="true"] .hc-chev {
    transform: rotate(-90deg);
  }

  .hc-side__list {
    display: none;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--hc-line);
    border-radius: 10px;
    background: #080b10;
  }

  .hc-side.is-open .hc-side__list {
    display: block;
  }

  .hc-side__coll,
  .hc-side__art {
    min-height: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  .hc-content {
    padding: 28px 16px 16px;
  }

  .hc-search--side {
    margin-bottom: 10px;
  }

  .hc-kbd {
    display: none;
  }
}

@media (max-width: 620px) {
  .hc-hero {
    padding: 52px 16px 46px;
  }

  .hc-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .hc-card {
    min-height: 0;
  }

  .hc-card__top {
    padding: 18px 18px 14px;
  }

  .hc-card__body {
    padding: 14px 18px 18px;
  }

  .hc-row {
    font-size: 0.95rem;
    min-height: 44px;
    box-sizing: border-box;
  }

  .hc-prose h2 {
    font-size: 1.5rem;
  }
}