:root {
  color-scheme: light;
  --bg: #f7f9fc;
  --panel: #ffffff;
  --text: #1f2937;
  --muted: #64748b;
  --line: #e5eaf2;
  --brand: #5470c6;
  --brand2: #91cc75;
  --shadow: 0 16px 40px rgba(31, 41, 55, 0.09);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141922;
  --panel: #1e2530;
  --text: #e5edf7;
  --muted: #9aa9bd;
  --line: #303948;
  --brand: #73a7ff;
  --brand2: #8fd680;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, "Microsoft YaHei", sans-serif;
}

a { color: inherit; text-decoration: none; }

.siteHeader {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 22px;
  height: 64px;
  padding: 0 28px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.brand img { display: block; height: 34px; width: auto; }

.mainNav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.mainNav > a,
.navMenu > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 13px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.mainNav > a::after,
.navMenu > button::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: center;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.mainNav > a:hover,
.mainNav > a:focus-visible,
.navMenu > button:hover,
.iconLink:hover {
  color: var(--brand);
}

.mainNav > a:hover,
.mainNav > a:focus-visible,
.navMenu > button:hover,
.navMenu > button:focus-visible,
.navMenu.hoverOpen > button,
.navMenu.pinnedOpen > button,
.navMenu:focus-within > button {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
}

.mainNav > a:hover::after,
.mainNav > a:focus-visible::after,
.navMenu > button:hover::after,
.navMenu > button:focus-visible::after,
.navMenu.hoverOpen > button::after,
.navMenu.pinnedOpen > button::after,
.navMenu:focus-within > button::after {
  opacity: 1;
  transform: scaleX(1);
}

.mainNav > a.navActive,
.navMenu.navActive > button {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
}
.mainNav > a.navActive::after,
.navMenu.navActive > button::after {
  opacity: 1;
  transform: scaleX(1);
}

.navMenu { position: relative; display: inline-flex; align-items: center; height: 64px; }

.dropdown {
  position: absolute;
  top: 58px;
  left: 0;
  display: none;
  min-width: 190px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.navMenu.hoverOpen .dropdown,
.navMenu.pinnedOpen .dropdown,
.navMenu:focus-within .dropdown { display: grid; }

.dropdown a {
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--muted);
}

.dropdown a:hover {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
}

/* ---- Nested submenu inside a top-nav dropdown (e.g. Community > License Agreement) ---- */
.dropdownSubmenu { list-style: none; }
.dropdownSubmenu > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.dropdownSubmenu > summary::-webkit-details-marker { display: none; }
.dropdownSubmenu > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.12s ease;
  flex: 0 0 auto;
}
.dropdownSubmenu[open] > summary::after { transform: rotate(45deg); }
.dropdownSubmenu > summary:hover {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
}
.dropdownSubmenuPanel {
  display: grid;
  gap: 2px;
  padding: 2px 0 2px 14px;
  border-left: 1px solid var(--line);
  margin: 2px 0 2px 12px;
}
.dropdownSubmenuPanel a {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--muted);
}
.dropdownSubmenuPanel a:hover {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
}

.headerTools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.selectTool {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.selectTool select {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: var(--panel);
}

.iconLink {
  display: inline-grid;
  place-items: center;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}

.headerToolsToggle,
.mainNavToggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
}
.headerToolsToggle svg,
.mainNavToggle svg { width: 16px; height: 16px; }
.headerToolsToggle:hover,
.mainNavToggle:hover { color: var(--brand); border-color: var(--brand); }
.mainNavToggle[aria-expanded="true"] { color: var(--brand); border-color: var(--brand); }

.siteMain { min-height: calc(100vh - 64px); }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(420px, 1.05fr);
  gap: 44px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 28px 42px;
}

.hero h1 {
  margin: 0;
  font-size: clamp(48px, 8vw, 92px);
  line-height: 0.95;
  letter-spacing: 0;
}

.hero p {
  max-width: 620px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.8;
}

.heroActions {
  display: flex;
  gap: 14px;
  margin-top: 28px;
}

.heroQuickLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  font-size: 14px;
}

.heroQuickLinks a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.primaryBtn,
.secondaryBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 20px;
  border-radius: 6px;
  border: 1px solid var(--brand);
  font-weight: 700;
}

.primaryBtn {
  background: var(--brand);
  color: #fff;
}

.secondaryBtn {
  background: transparent;
  color: var(--brand);
}

.heroVisual {
  min-height: 420px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(84, 112, 198, 0.2), transparent 46%),
    radial-gradient(circle at 70% 20%, rgba(145, 204, 117, 0.26), transparent 34%),
    var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 22px;
}

.codeCard {
  height: 100%;
  min-height: 376px;
  border-radius: 8px;
  background: #151922;
  color: #d7e3f7;
  padding: 20px;
  font: 13px/1.7 Consolas, "SFMono-Regular", monospace;
  overflow: auto;
}

.band {
  max-width: 1200px;
  margin: 0 auto;
  padding: 42px 28px;
}

.sectionTitle {
  margin: 0 0 18px;
  font-size: 30px;
}

.featureGrid,
.cardGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.feature,
.card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.feature {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.feature:hover {
  border-color: var(--brand, #5470c6);
  transform: translateY(-2px);
}

.feature h3,
.card h3 { margin: 0 0 8px; }

.feature p,
.card p,
.page p,
.page li { color: var(--muted); line-height: 1.75; }

.page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 42px 28px 64px;
}

.examplesPage {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: calc(100vh - 64px);
}

.examplesSideList {
  position: sticky;
  top: 64px;
  align-self: start;
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: calc(100vh - 64px);
  padding: 22px 14px;
  border-right: 1px solid var(--line);
  background: var(--panel);
}

.examplesSideList a {
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--muted);
}

.examplesSideList a.active,
.examplesSideList a:hover {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
}

.examplesSideList .legacyExamplesLink {
  margin-top: 12px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.examplesSideList .legacyExamplesLink:hover {
  border-radius: 6px;
}

.examplesContent {
  min-width: 0;
  padding: 42px 28px 64px;
}

.examplesContent > h1 { margin-top: 0; }

.exampleSection {
  scroll-margin-top: 84px;
  margin-top: 34px;
}

.exampleGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.exampleCard { cursor: pointer; }
.exampleCard:hover { border-color: var(--brand); }

.exampleThumb {
  display: grid;
  place-items: center;
  height: 150px;
  margin: -20px -20px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--brand) 8%, var(--bg));
  overflow: hidden;
}

.exampleThumb img {
  max-width: 76%;
  max-height: 76%;
  object-fit: contain;
}

.exampleThumb img.captured {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.exampleCardBody h3 { margin-top: 0; }

.examplesToolsHover {
  position: fixed;
  top: 76px;
  right: 20px;
  z-index: 25;
}
.examplesToolsHover::after {
  content: "";
  position: absolute;
  top: 34px;
  right: 0;
  width: 240px;
  height: 10px;
}
.examplesToolsTrigger {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: var(--muted);
  font-size: 16px;
}
.examplesToolsPanel {
  position: absolute;
  top: 40px;
  right: 0;
  min-width: 240px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}
.examplesToolsHover:hover .examplesToolsPanel,
.examplesToolsHover:focus-within .examplesToolsPanel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.examplesToolsButtonRow { display: flex; gap: 8px; }
.examplesToolsButtonRow button {
  flex: 1;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.examplesToolsButtonRow button:hover { border-color: var(--brand); color: var(--brand); }
.examplesToolsCheckboxRow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

.externalLinkGlyph {
  display: inline-block;
  color: var(--brand);
  font-size: 0.85em;
  font-weight: 700;
}

.readerFrame {
  width: 100%;
  height: calc(100vh - 64px);
  border: 0;
  display: block;
  background: var(--panel);
}

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.pillList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.threeSpotlight {
  margin-top: 16px;
}

.threeSpotlight .pillList {
  margin-top: 12px;
}

.pill {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}

/* ---- Mobile: main nav collapses into a hamburger-triggered dropdown drawer instead of
   stacking full-width under the header (submenus become inline accordions, opened via the
   same click-to-pin logic already used for desktop hover menus). ---- */
@media (max-width: 900px) {
  .siteHeader {
    height: auto;
    min-height: 64px;
    padding: 0 16px;
    position: relative;
  }
  .mainNavToggle { display: inline-flex; margin-left: auto; }

  .mainNav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    width: auto;
    gap: 2px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    z-index: 25;
  }
  .mainNav.open { display: flex; }

  .mainNav > a,
  .navMenu > button {
    width: 100%;
    justify-content: flex-start;
    min-height: 44px;
    padding: 0 14px;
  }
  .mainNav > a::after,
  .navMenu > button::after { display: none; }

  .navMenu {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .navMenu > button { position: relative; padding-right: 34px; }
  .navMenu > button::before {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.15s ease;
  }
  .navMenu.hoverOpen > button::before,
  .navMenu.pinnedOpen > button::before {
    transform: translateY(-30%) rotate(-135deg);
  }

  .dropdown {
    position: static;
    display: none;
    min-width: 0;
    width: auto;
    margin: 2px 0 6px 14px;
    padding: 2px 0 2px 12px;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }
  .navMenu.hoverOpen .dropdown,
  .navMenu.pinnedOpen .dropdown,
  .navMenu:focus-within .dropdown { display: flex; flex-direction: column; }
  .dropdown a { min-height: 40px; display: flex; align-items: center; }

  .hero { grid-template-columns: 1fr; padding-top: 42px; }
  .examplesPage { grid-template-columns: 1fr; }
  .examplesSideList {
    position: static;
    grid-auto-flow: column;
    min-height: 0;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* ---- Mobile: collapse theme/lang/npm/GitHub into a "..." overflow panel ---- */
@media (max-width: 640px) {
  .headerToolsToggle { display: inline-flex; }
  .headerTools {
    display: none;
    position: absolute;
    top: 100%;
    right: 16px;
    margin-top: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    z-index: 30;
  }
  .headerTools.open { display: flex; }
  .selectTool { justify-content: space-between; }
  .selectTool select { flex: 1; min-width: 0; }
  .headerTools .iconLink { justify-content: center; }
}