/* Path geometry and motion are view preferences, independent of project stages. */
.v6-path-picker { position: relative; flex: none; }
.v6-path-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--v6-line);
  border-radius: 100px;
  background: color-mix(in srgb, var(--v6-bg) 68%, var(--v6-card));
  color: var(--v6-ink);
  cursor: pointer;
}
.v6-path-toggle span { color: var(--v6-muted); font-size: .55rem; font-weight: 820; letter-spacing: .15em; }
.v6-path-toggle strong { font-size: .67rem; font-weight: 760; white-space: nowrap; }
.v6-path-toggle i { margin-left: 5px; font-size: .85rem; font-style: normal; line-height: 1; }
.v6-path-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.v6-path-toggle:hover, .v6-path-toggle:focus-visible { border-color: var(--v6-accent); }
.v6-path-menu {
  position: absolute;
  z-index: 15;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  width: 265px;
  padding: 8px;
  border: 1px solid var(--v6-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--v6-bg) 92%, var(--v6-card));
  box-shadow: 0 5px 8px rgba(5, 8, 10, .18), 0 14px 22px rgba(5, 8, 10, .18);
  backdrop-filter: blur(18px);
}
.v6-path-menu[hidden] { display: none; }
.v6-path-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--v6-ink);
  font-size: .67rem;
  font-weight: 670;
  text-align: left;
  cursor: pointer;
}
.v6-path-menu button small { color: var(--v6-accent); font-size: .56rem; font-weight: 820; }
.v6-path-menu button:hover, .v6-path-menu button[aria-pressed="true"] {
  border-color: var(--v6-line);
  background: color-mix(in srgb, var(--v6-card) 42%, transparent);
}
.v6-path-surfaces[hidden], .v6-data-stream[hidden], .v6-crystal-particles[hidden] { display: none; }
.v6-data-stream path { fill: none; stroke: var(--v6-led); stroke-width: 1.55; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px var(--v6-led)); }
.v6-data-stream .v6-data-guide { stroke-width: .7; opacity: .16; filter: none; }
.v6[data-path="data"] .v6-rail-main { opacity: .45; }
.v6[data-path="data"] .v6-moving-glow { opacity: .48; }
.v6-crystal-particles polygon { fill: var(--v6-led); stroke: var(--v6-ink); stroke-width: .04; filter: drop-shadow(0 0 2px var(--v6-led)); }
.v6-crystal-particles polygon:nth-child(4n) { fill: var(--v6-ink); }
.v6[data-path="crystal"] .v6-rail-main { opacity: .25; }
.v6[data-path="crystal"] .v6-moving-glow { opacity: .48; }
.v6-path-surfaces polygon[data-tone="light"] { fill: var(--v6-led); opacity: .4; }
.v6-path-surfaces polygon[data-tone="dark"] { fill: #070b0f; opacity: .27; }
.v6[data-path="steps"] .v6-rail-main { opacity: .24; }
.v6[data-path="steps"] .v6-moving-glow { opacity: .54; }

@media (max-width: 900px) {
  .v6-path-toggle { min-height: 34px; padding: 0 10px; }
  .v6-path-toggle span { display: none; }
}
@media (max-width: 620px) {
  .v6-path-picker { position: fixed; top: 151px; left: 16px; right: 16px; }
  .v6-path-toggle { justify-content: center; width: 100%; }
  .v6-path-menu { right: 50%; transform: translateX(50%); }
  .v6-style-switch { top: 194px; }
  .v6-map { top: 30%; height: 46%; }
}