/* ── Header: regular flex item, not positioned ───────────────────────────── */
#ts-header {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: 20px 20px 14px;
}

#ts-title {
  margin: 0;
  font: 800 clamp(24px, 6.4vw, 40px) var(--font-display);
  letter-spacing: .5px; line-height: 1;
  background: var(--accent-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

#ts-sub {
  margin: 0;
  font: 600 15px var(--font-body); opacity: .45;
}

/* ── Mobile layout (≤ 480px) ─────────────────────────────────────────────── */
@media (max-width: 480px) {

  #ts-header {
    padding: 16px 12px 10px;
    position: sticky;
  }

  #ts-mode {
    max-width: 100%;
  }

}