/* prepweave-navigation v1.0.0 */
/* navigation refinements v1.1.0 */
.prepweave-nav {
  position: sticky;
  z-index: 30;
  top: .65rem;
  display: flex;
  width: min(100%, 88rem);
  min-height: 3.15rem;
  margin: 0 auto 1rem;
  padding: .4rem .5rem;
  align-items: center;
  gap: .65rem;
  border: 1px solid var(--line, rgba(127, 127, 127, .24));
  border-radius: .75rem;
  color: var(--ink, inherit);
  background: color-mix(in srgb, var(--surface, Canvas) 94%, transparent);
  box-shadow: 0 .2rem .8rem color-mix(in srgb, currentColor, transparent 95%);
  backdrop-filter: blur(14px);
}

.prepweave-history {
  display: inline-flex;
  flex: 0 0 auto;
  gap: .28rem;
}

.prepweave-history button {
  display: inline-grid;
  width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line, rgba(127, 127, 127, .28));
  border-radius: .5rem;
  color: inherit;
  background: var(--surface, Canvas);
  cursor: pointer;
  font: inherit;
  font-size: 1.05rem;
}

.prepweave-history button:hover { border-color: var(--accent, Highlight); color: var(--accent, Highlight); }
.prepweave-history button:active { transform: translateY(1px); }

.prepweave-breadcrumbs {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: .35rem;
  overflow-x: auto;
  color: var(--muted, GrayText);
  font-size: .78rem;
  list-style: none;
  scrollbar-width: thin;
  white-space: nowrap;
}

.prepweave-breadcrumbs li { display: inline-flex; min-width: 0; align-items: center; gap: .35rem; }
.prepweave-breadcrumbs li + li::before { content: "›"; color: var(--muted, GrayText); opacity: .72; }
.prepweave-breadcrumbs a { color: var(--accent, LinkText); font-weight: 700; text-decoration: none; }
.prepweave-breadcrumbs a:hover { text-decoration: underline; text-underline-offset: .16em; }
.prepweave-breadcrumbs [aria-current="page"] { max-width: min(42vw, 30rem); overflow: hidden; color: var(--ink, inherit); text-overflow: ellipsis; }

.prepweave-visual-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100vh;
}

.prepweave-visual-page > .prepweave-nav { width: min(100%, 736px); margin-bottom: .65rem; }
.prepweave-visual-page > iframe { height: 100% !important; min-height: 0; }
.prepweave-graph-page > .prepweave-nav { width: min(100%, 100rem); }

.prepweave-graph-layout {
  display: grid;
  width: min(100%, 100rem);
  min-height: 0;
  margin: 0 auto;
  grid-template-columns: minmax(13rem, 16.5rem) minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

.prepweave-graph-index {
  position: sticky;
  top: .75rem;
  max-height: calc(100vh - 1.5rem);
  padding: .85rem;
  overflow: auto;
  border: 1px solid var(--line, rgba(127, 127, 127, .24));
  border-radius: .85rem;
  background: color-mix(in srgb, var(--surface, Canvas), transparent 3%);
}

.prepweave-graph-index h2 {
  margin: 0 0 .65rem;
  color: var(--ink, inherit);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.prepweave-graph-index ol {
  display: grid;
  gap: .2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prepweave-graph-link {
  display: grid;
  min-width: 0;
  padding: .58rem .62rem;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: baseline;
  gap: .35rem;
  border-radius: .55rem;
  color: var(--ink, inherit);
  font-size: .8rem;
  line-height: 1.35;
  text-decoration: none;
}

a.prepweave-graph-link:hover {
  color: var(--accent, LinkText);
  background: color-mix(in srgb, var(--accent, Highlight) 9%, transparent);
}

.prepweave-graph-link[aria-current="page"] {
  color: var(--accent, LinkText);
  background: color-mix(in srgb, var(--accent, Highlight) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--accent, Highlight);
  font-weight: 750;
}

.prepweave-graph-number {
  color: var(--muted, GrayText);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 650;
}

.prepweave-graph-link-label { min-width: 0; overflow-wrap: anywhere; }
.prepweave-graph-main { display: grid; min-width: 0; gap: 1rem; }

.prepweave-graph-intro,
.prepweave-graph-content {
  min-width: 0;
  padding: clamp(.9rem, 2vw, 1.3rem);
  border: 1px solid var(--line, rgba(127, 127, 127, .24));
  border-radius: .9rem;
  color: var(--ink, inherit);
  background: color-mix(in srgb, var(--surface, Canvas), transparent 3%);
}

.prepweave-section-label {
  margin: 0 0 .35rem;
  color: var(--accent, LinkText);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.prepweave-graph-intro h1 { margin: 0; font-size: clamp(1.45rem, 3vw, 2.1rem); line-height: 1.12; }
.prepweave-graph-intro > p:last-child { max-width: 70ch; margin: .7rem 0 0; color: var(--muted, GrayText); line-height: 1.55; }
.prepweave-graph-content > h2 { margin: 0 0 .8rem; font-size: 1rem; line-height: 1.25; }
.prepweave-graph-content > iframe { display: block; width: 100%; max-width: none; height: max(48rem, calc(100vh - 9rem)) !important; min-height: 48rem; margin: 0; border: 0; }
.prepweave-is-embedded .prepweave-nav { display: none; }
.prepweave-is-embedded .collection-page { padding-top: .65rem; }

@media (max-width: 60rem) {
  .prepweave-graph-layout { grid-template-columns: minmax(0, 1fr); }
  .prepweave-graph-index { position: static; max-height: none; overflow: hidden; }
  .prepweave-graph-index h2 { margin-bottom: .55rem; }
  .prepweave-graph-index nav { overflow-x: auto; scrollbar-width: thin; }
  .prepweave-graph-index ol { display: flex; width: max-content; max-width: none; }
  .prepweave-graph-index li { flex: 0 0 auto; }
  .prepweave-graph-link { min-width: 12rem; }
}

@media (max-width: 42rem) {
  .prepweave-nav { top: .4rem; gap: .45rem; margin-bottom: .7rem; }
  .prepweave-breadcrumbs [aria-current="page"] { max-width: 50vw; }
  .prepweave-graph-layout { gap: .7rem; }
  .prepweave-graph-index,
  .prepweave-graph-intro,
  .prepweave-graph-content { padding: .75rem; border-radius: .72rem; }
  .prepweave-graph-content > iframe { height: 52rem !important; min-height: 52rem; }
}

@media (prefers-reduced-motion: reduce) {
  .prepweave-nav *, .prepweave-nav *::before, .prepweave-nav *::after { scroll-behavior: auto !important; }
}