.line-gallery {
  position: relative;
  width: min(700px, 92%);
  margin: 0 auto;
  height: 260vh;
}
.line-svg-wrap {
  position: sticky;
  top: 70px;
  height: calc(100vh - 140px);
  pointer-events: none;
}
.line-svg-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }
.line-path-guide {
  fill: none;
  stroke: rgba(211, 84, 0, 0.2);
  stroke-linecap: round;
  stroke-dasharray: 2 9;
}
.line-path {
  fill: none;
  stroke: var(--cl-accent, #d35400);
  stroke-linecap: round;
  filter: drop-shadow(0 3px 8px rgba(211, 84, 0, 0.2));
}
.line-controls {
  position: relative;
  z-index: 2;
  max-width: 320px;
  margin: 0 auto 1rem;
  padding: 0 1.5rem;
  text-align: center;
}
.line-controls label {
  display: block;
  font-size: 0.8rem;
  color: var(--cl-base);
  margin-bottom: 0.4rem;
}
.line-controls input[type="range"] {
  width: 100%;
  accent-color: var(--cl-accent);
}

.line-filler {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--cl-base);
  font-size: 0.9rem;
}
.line-filler p { max-width: 26em; margin: 0; }

.thread-stage {
  position: relative;
  min-height: 46vh;
  overflow: hidden;
  background: var(--cl-brown);
  cursor: none;
}
@media (max-width: 820px) { .thread-stage { cursor: auto; } }
.thread-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.thread-path { fill: none; stroke: var(--cl-orange); stroke-width: 2.4; stroke-linecap: round; opacity: 0.85; }
.thread-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46vh;
  padding: 2rem 1.5rem;
  text-align: center;
}
.thread-content p { max-width: 24em; margin: 0; color: rgba(255,244,225,0.75); font-size: 0.86rem; }