.tlsc-page-transition {
  position: fixed;
  inset: 0;
  z-index: 18;
  overflow: hidden;
  pointer-events: auto;
  isolation: isolate;
}

.tlsc-page-transition__canvas {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Only line text runs are animated. Allow their contents to wrap naturally:
   an authored line may still span multiple visual rows at a given viewport. */
.tlsc-split-line {
  display: block;
  white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
  .tlsc-page-transition { display: none; }
}

.tlsc-transition-tuner {
  position: fixed;
  z-index: 40;
  right: 16px;
  bottom: 16px;
  width: min(300px, calc(100vw - 32px));
  max-height: min(70vh, 620px);
  overflow: auto;
  padding: 16px;
  border: 1px solid #4c5669;
  border-radius: 12px;
  background: #15171c;
  color: #f2f3f6;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
  font: 12px/1.5 system-ui, sans-serif;
}
.tlsc-transition-tuner h2 { margin: 0 0 12px; color: inherit; font: 700 14px/1.3 system-ui, sans-serif; }
.tlsc-transition-tuner label { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; margin: 9px 0; }
.tlsc-transition-tuner input[type="range"] { grid-column: 1 / -1; width: 100%; }
.tlsc-transition-tuner select { max-width: 150px; }
.tlsc-transition-tuner button { margin: 8px 5px 0 0; padding: 5px 8px; }
.tlsc-transition-tuner output { font-variant-numeric: tabular-nums; }